diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 17c40fb..d090bd3 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -5,40 +5,44 @@ import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Globe } from "lucide-react";
 
 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: "Shop", id: "/#products" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Aura"
-        />
-        <SplitAbout
-          title="Our Story"
-          description="We believe fashion is a universal language, transcending cultures and borders. Our mission is to bring high-end, modern design to style enthusiasts around the globe."
-          imageSrc="http://img.b2bpic.net/free-photo/full-shot-stylish-woman-wearing-punk-outfit_23-2149267472.jpg"
-          textboxLayout="split"
-          bulletPoints={[
-            { title: "Quality", description: "Sourcing the finest materials." },
-            { title: "Ethics", description: "Fair treatment for all artisans." },
-            { title: "Design", description: "Modern and timeless aesthetics." },
-          ]}
-        />
-        <FooterBaseCard
-            logoText="AURA"
-            columns={[
-                { title: "Shop", items: [{ label: "Streetwear", href: "/#products" }, { label: "Casual", href: "/#products" }] },
-                { title: "Support", items: [{ label: "Contact Us", href: "/contact" }, { label: "About Us", href: "/about" }] },
-                { title: "Follow Us", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
             ]}
-        />
+            brandName="Aura"
+          />
+        </div>
+        <div id="about" data-section="about">
+          <SplitAbout
+            title="Our Story"
+            description="We believe fashion is a universal language, transcending cultures and borders. Our mission is to bring high-end, modern design to style enthusiasts around the globe."
+            imageSrc="http://img.b2bpic.net/free-photo/full-shot-stylish-woman-wearing-punk-outfit_23-2149267472.jpg"
+            textboxLayout="split"
+            bulletPoints={[
+              { title: "Quality", description: "Sourcing the finest materials." },
+              { title: "Ethics", description: "Fair treatment for all artisans." },
+              { title: "Design", description: "Modern and timeless aesthetics." },
+            ]}
+            useInvertedBackground={false}
+            mediaAnimation="none"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+              logoText="AURA"
+              columns={[
+                  { title: "Support", items: [{ label: "Contact Us", href: "/contact" }, { label: "About Us", href: "/about" }] },
+              ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 00cb50a..f8bf729 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,31 +8,35 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 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: "Shop", id: "/#products" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Aura"
-        />
-        <ContactCenter
-          tag="Contact Us"
-          title="How can we help?"
-          description="Reach out to our support team and we'll get back to you within 24 hours."
-          background={{ variant: "sparkles-gradient" }}
-        />
-        <FooterBaseCard
-            logoText="AURA"
-            columns={[
-                { title: "Shop", items: [{ label: "Streetwear", href: "/#products" }, { label: "Casual", href: "/#products" }] },
-                { title: "Support", items: [{ label: "Contact Us", href: "/contact" }, { label: "About Us", href: "/about" }] },
-                { title: "Follow Us", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
             ]}
-        />
+            brandName="Aura"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Contact Us"
+            title="How can we help?"
+            description="Reach out to our support team and we'll get back to you within 24 hours."
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+              logoText="AURA"
+              columns={[
+                  { title: "Support", items: [{ label: "Contact Us", href: "/contact" }, { label: "About Us", href: "/about" }] },
+              ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );