diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 2bff785..ec993fe 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,15 +8,22 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Menu", id: "/#menu" }, { name: "Contact", id: "/contact" }, { name: "Reservations", id: "/reservations" }]} brandName="Anarkali Tandoori" button={{ text: "Book Table", href: "/reservations" }} />
-        <MetricSplitMediaAbout
-            title="A Legacy of Authenticity"
-            description="Anarkali Tandoori brings you the heart of India with our unique Goan specialties. We combine centuries-old spices with contemporary presentation to offer you a dining experience unlike any other."
-            metrics={[{ value: "15+", title: "Years of Tradition" }, { value: "50+", title: "Signature Recipes" }]}
-        />
-        <FooterBaseCard logoText="Anarkali Tandoori" columns={[{ title: "Information", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/#menu" }] }, { title: "Contact", items: [{ label: "Contact", href: "/contact" }, { label: "Reservations", href: "/reservations" }] }]} />
+        <div id="nav" data-section="nav">
+           <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Reservations", id: "/reservations" }]} brandName="Anarkali Tandoori" button={{ text: "Book Table", href: "/reservations" }} />
+        </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+              title="A Legacy of Authenticity"
+              description="Anarkali Tandoori brings you the heart of India with our unique Goan specialties. We combine centuries-old spices with contemporary presentation to offer you a dining experience unlike any other."
+              metrics={[{ value: "15+", title: "Years of Tradition" }, { value: "50+", title: "Signature Recipes" }]}
+              useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard logoText="Anarkali Tandoori" columns={[{ title: "Information", items: [{ label: "About Us", href: "/about" }] }, { title: "Contact", items: [{ label: "Contact", href: "/contact" }, { label: "Reservations", href: "/reservations" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index ca61d43..25b9e97 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,17 +8,24 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Menu", id: "/#menu" }, { name: "Contact", id: "/contact" }, { name: "Reservations", id: "/reservations" }]} brandName="Anarkali Tandoori" button={{ text: "Book Table", href: "/reservations" }} />
-        <ContactSplitForm
-            title="Get in Touch"
-            description="Have questions or want to host a private event? We are here to help."
-            inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
-            textarea={{ name: "message", placeholder: "Your message..." }}
-            buttonText="Send"
-        />
-        <FooterBaseCard logoText="Anarkali Tandoori" columns={[{ title: "Information", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/#menu" }] }, { title: "Contact", items: [{ label: "Contact", href: "/contact" }, { label: "Reservations", href: "/reservations" }] }]} />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Reservations", id: "/reservations" }]} brandName="Anarkali Tandoori" button={{ text: "Book Table", href: "/reservations" }} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+              title="Get in Touch"
+              description="Have questions or want to host a private event? We are here to help."
+              inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
+              textarea={{ name: "message", placeholder: "Your message..." }}
+              buttonText="Send"
+              useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard logoText="Anarkali Tandoori" columns={[{ title: "Information", items: [{ label: "About Us", href: "/about" }] }, { title: "Contact", items: [{ label: "Contact", href: "/contact" }, { label: "Reservations", href: "/reservations" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/reservations/page.tsx b/src/app/reservations/page.tsx
index 5262fd2..c233a44 100644
--- a/src/app/reservations/page.tsx
+++ b/src/app/reservations/page.tsx
@@ -8,17 +8,24 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function ReservationsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Menu", id: "/#menu" }, { name: "Contact", id: "/contact" }, { name: "Reservations", id: "/reservations" }]} brandName="Anarkali Tandoori" button={{ text: "Book Table", href: "/reservations" }} />
-        <ContactSplitForm
-            title="Reserve Your Table"
-            description="Book your fine dining experience today."
-            inputs={[{ name: "name", type: "text", placeholder: "Full Name" }, { name: "date", type: "date", placeholder: "Date" }]}
-            textarea={{ name: "requests", placeholder: "Party size and special requests..." }}
-            buttonText="Confirm Reservation"
-        />
-        <FooterBaseCard logoText="Anarkali Tandoori" columns={[{ title: "Information", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/#menu" }] }, { title: "Contact", items: [{ label: "Contact", href: "/contact" }, { label: "Reservations", href: "/reservations" }] }]} />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Reservations", id: "/reservations" }]} brandName="Anarkali Tandoori" button={{ text: "Book Table", href: "/reservations" }} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+              title="Reserve Your Table"
+              description="Book your fine dining experience today."
+              inputs={[{ name: "name", type: "text", placeholder: "Full Name" }, { name: "date", type: "date", placeholder: "Date" }]}
+              textarea={{ name: "requests", placeholder: "Party size and special requests..." }}
+              buttonText="Confirm Reservation"
+              useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard logoText="Anarkali Tandoori" columns={[{ title: "Information", items: [{ label: "About Us", href: "/about" }] }, { title: "Contact", items: [{ label: "Contact", href: "/contact" }, { label: "Reservations", href: "/reservations" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );