diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 099e1f8..c73e2a9 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,16 +8,29 @@ import { Brain, Heart, Users } from "lucide-react";
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/about" },
-          { name: "Therapy AI", id: "/therapy-ai" },
-        ]}
-        brandName="NeuroFlow"
-      />
-      <div className="pt-32 pb-20">
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Therapy AI", id: "/therapy-ai" },
+          ]}
+          brandName="NeuroFlow"
+        />
+      </div>
+      <div className="pt-32 pb-20" id="metrics" data-section="metrics">
         <AboutMetric
           title="Our Vision for Calm Productivity"
           metrics={[
@@ -26,14 +39,18 @@ export default function AboutPage() {
             { icon: Users, label: "Community", value: "10k+ Members" },
           ]}
           metricsAnimation="blur-reveal"
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          logoText="NeuroFlow"
+          imageSrc="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0"
+          columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Therapy AI", href: "/therapy-ai" }] },
+          ]}
         />
       </div>
-      <FooterMedia
-        logoText="NeuroFlow"
-        columns={[
-          { items: [{ label: "Home", href: "/" }, { label: "Therapy AI", href: "/therapy-ai" }] },
-        ]}
-      />
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/focus-mode/page.tsx b/src/app/focus-mode/page.tsx
index 435cfe2..faf4d80 100644
--- a/src/app/focus-mode/page.tsx
+++ b/src/app/focus-mode/page.tsx
@@ -2,28 +2,37 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TextBox from '@/components/Textbox';
 
 export default function FocusModePage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-            { name: "About Us", id: "/about" },
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
             { name: "Therapy AI", id: "/therapy-ai" },
             { name: "Study AI", id: "/study-ai" },
             { name: "Planner", id: "/planner" },
             { name: "Focus Mode", id: "/focus-mode" }
-        ]}
-        brandName="NeuroFlow"
-      />
+          ]}
+          brandName="NeuroFlow"
+        />
+      </div>
       <main className="min-h-screen flex items-center justify-center p-8">
         <div className="backdrop-blur-xl bg-white/10 border border-white/20 p-12 rounded-3xl shadow-2xl text-center max-w-2xl">
-            <TextBox 
-                title="Focus Mode"
-                description="Experience deep concentration with our nature-inspired, glass-morphic environment. Stay present, stay calm, and achieve your goals."
-                textboxLayout="default"
-            />
+            <p>Focus Mode</p>
         </div>
       </main>
     </ThemeProvider>
diff --git a/src/app/planner/page.tsx b/src/app/planner/page.tsx
index 43b0d68..19c4113 100644
--- a/src/app/planner/page.tsx
+++ b/src/app/planner/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 
@@ -19,7 +18,7 @@ export default function PlannerPage() {
         secondaryButtonStyle="glass"
         headingFontWeight="semibold"
     >
-      <ReactLenis root>
+      <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
@@ -28,20 +27,17 @@ export default function PlannerPage() {
           ]}
           brandName="NeuroFlow"
         />
-        <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
-          <h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-accent to-background-accent">Nature-Inspired Planner</h1>
-          <p className="max-w-2xl text-center text-lg">A fluid, interactive planner interface that grows with your productivity.</p>
-          <div className="w-full max-w-4xl h-96 rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl p-8 grid grid-cols-7 gap-4">
-            {Array.from({ length: 28 }).map((_, i) => (
-              <div key={i} className="h-16 rounded-xl bg-white/5 border border-white/5 animate-pulse" />
-            ))}
-          </div>
-        </main>
+      </div>
+      <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
+        <h1 className="text-5xl font-bold">Nature-Inspired Planner</h1>
+      </main>
+      <div id="footer" data-section="footer">
         <FooterMedia
           logoText="NeuroFlow"
+          videoSrc="https://player.vimeo.com/external/123456789.sd.mp4?s=123456789"
           columns={[]}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/study-ai/page.tsx b/src/app/study-ai/page.tsx
index 587d70d..f4295a2 100644
--- a/src/app/study-ai/page.tsx
+++ b/src/app/study-ai/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 
@@ -19,7 +18,7 @@ export default function StudyAIPage() {
         secondaryButtonStyle="glass"
         headingFontWeight="semibold"
     >
-      <ReactLenis root>
+      <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
@@ -28,18 +27,17 @@ export default function StudyAIPage() {
           ]}
           brandName="NeuroFlow"
         />
-        <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
-          <h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-accent to-background-accent">Study AI Assistant</h1>
-          <p className="max-w-2xl text-center text-lg">Your personal nature-inspired, liquid glass AI interface for deep, focused study sessions.</p>
-          <div className="w-full max-w-4xl h-96 rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl p-8 flex items-center justify-center">
-            <p className="animate-pulse opacity-60 italic">AI environment loading...</p>
-          </div>
-        </main>
+      </div>
+      <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
+        <h1 className="text-5xl font-bold">Study AI Assistant</h1>
+      </main>
+      <div id="footer" data-section="footer">
         <FooterMedia
           logoText="NeuroFlow"
+          videoSrc="https://player.vimeo.com/external/123456789.sd.mp4?s=123456789"
           columns={[]}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/therapy-ai/page.tsx b/src/app/therapy-ai/page.tsx
index d03ccdf..42050d8 100644
--- a/src/app/therapy-ai/page.tsx
+++ b/src/app/therapy-ai/page.tsx
@@ -7,34 +7,51 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function TherapyAIPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/about" },
-          { name: "Therapy AI", id: "/therapy-ai" },
-        ]}
-        brandName="NeuroFlow"
-      />
-      <div className="pt-32 pb-20">
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Therapy AI", id: "/therapy-ai" },
+          ]}
+          brandName="NeuroFlow"
+        />
+      </div>
+      <div className="pt-32 pb-20" id="features" data-section="features">
         <FeatureCardTwentyNine
           title="Your AI Therapy Companion"
           description="AI-driven support designed specifically for neurodivergent minds, providing a safe space for growth and organization."
           gridVariant="bento-grid"
           animationType="blur-reveal"
           textboxLayout="split"
+          useInvertedBackground={false}
           features={[
             { title: "Cognitive Reframing", description: "Gentle AI guidance to navigate overwhelming thoughts.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
             { title: "Goal Breakdown", description: "Transform large projects into manageable micro-steps.", imageSrc: "", titleImageSrc: "", buttonText: "Get Started" },
           ]}
         />
       </div>
-      <FooterMedia
-        logoText="NeuroFlow"
-        columns={[
-          { items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
-        ]}
-      />
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          logoText="NeuroFlow"
+          imageSrc="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0"
+          columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
+          ]}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file