diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index cf0cf6e..3b9dd7e 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,16 +8,22 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]} brandName="Banakar" />
-        <MetricSplitMediaAbout
-          title="About Us"
-          description="Learn more about our mission, vision, and the team behind Banakar."
-          metrics={[{ value: "100+", title: "Projects" }, { value: "5+", title: "Years" }]}
-          useInvertedBackground={false}
-        />
-        <FooterMedia logoText="Banakar" columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]} />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]} brandName="Banakar" />
+        </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            title="About Us"
+            description="Learn more about our mission, vision, and the team behind Banakar."
+            metrics={[{ value: "100+", title: "Projects" }, { value: "5+", title: "Years" }]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia logoText="Banakar" videoSrc="https://videos.pexels.com/video-files/4064376/4064376-sd_506_960_25fps.mp4" columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 0aaa945..780985f 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,16 +8,22 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]} brandName="Banakar" />
-        <ContactSplitForm
-          title="Get in Touch"
-          description="We'd love to hear from you. Reach out to discuss your project."
-          inputs={[{ name: "name", type: "text", placeholder: "Name", required: true }, { name: "email", type: "email", placeholder: "Email", required: true }]}
-          useInvertedBackground={false}
-        />
-        <FooterMedia logoText="Banakar" columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]} />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]} brandName="Banakar" />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Get in Touch"
+            description="We'd love to hear from you. Reach out to discuss your project."
+            inputs={[{ name: "name", type: "text", placeholder: "Name", required: true }, { name: "email", type: "email", placeholder: "Email", required: true }]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia logoText="Banakar" videoSrc="https://videos.pexels.com/video-files/4064376/4064376-sd_506_960_25fps.mp4" columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
index 6fef633..ac7820c 100644
--- a/src/app/faq/page.tsx
+++ b/src/app/faq/page.tsx
@@ -8,18 +8,24 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function FAQPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]} brandName="Banakar" />
-        <FaqSplitMedia
-          title="Frequently Asked Questions"
-          description="Get answers to your questions about our work."
-          faqs={[{ id: "1", title: "How to start?", content: "Contact us!" }]}
-          faqsAnimation="slide-up"
-          useInvertedBackground={false}
-          textboxLayout="default"
-        />
-        <FooterMedia logoText="Banakar" columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]} />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]} brandName="Banakar" />
+        </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            title="Frequently Asked Questions"
+            description="Get answers to your questions about our work."
+            faqs={[{ id: "1", title: "How to start?", content: "Contact us!" }]}
+            faqsAnimation="slide-up"
+            useInvertedBackground={false}
+            textboxLayout="default"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia logoText="Banakar" videoSrc="https://videos.pexels.com/video-files/4064376/4064376-sd_506_960_25fps.mp4" columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );