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>
   );