diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index d26f05a..f05dd71 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,20 +8,28 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 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 
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline 
             navItems={[{name: "Home", id: "/"}, {name: "Menu", id: "/menu"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} 
             brandName="Mini Bites"
-        />
-        <TextAbout
+            button={{ text: "Menu", href: "/menu" }}
+          />
+        </div>
+        <div id="about" data-section="about">
+          <TextAbout
             title="Always Fresh, Always Open"
             buttons={[{ text: "Get Directions", href: "https://maps.google.com"}]}
-        />
-        <FooterBaseReveal
-          logoText="Mini Bites"
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
-        />
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Mini Bites"
+            columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 6df96ba..67cd0ff 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,21 +8,29 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 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 
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline 
             navItems={[{name: "Home", id: "/"}, {name: "Menu", id: "/menu"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} 
             brandName="Mini Bites"
-        />
-        <ContactText
+            button={{ text: "Menu", href: "/menu" }}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactText
             background={{ variant: "gradient-bars"}}
             text="Visit us in Maqabah, Bahrain. Open 24/7. Need help or directions? Give us a call."
             buttons={[{ text: "Call Now", href: "tel:+97300000000" }, { text: "Get Directions", href: "https://maps.google.com" }]}
-        />
-        <FooterBaseReveal
-          logoText="Mini Bites"
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
-        />
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Mini Bites"
+            columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 642a553..0d26a1f 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -8,13 +8,17 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function MenuPage() {
   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 
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline 
             navItems={[{name: "Home", id: "/"}, {name: "Menu", id: "/menu"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} 
             brandName="Mini Bites"
-        />
-        <PricingCardNine
+            button={{ text: "Contact", href: "/contact" }}
+          />
+        </div>
+        <div id="menu" data-section="menu">
+          <PricingCardNine
             title="Our Full Menu"
             description="Categories to satisfy every craving, day or night."
             textboxLayout="split"
@@ -25,11 +29,14 @@ export default function MenuPage() {
             { id: "2", title: "Snacks & Sides", price: "BHD 1.000+", period: "Starting from", features: ["Signature Fries", "Onion Rings", "Nuggets Box"], button: { text: "Order Now" } },
             { id: "3", title: "Desserts", price: "BHD 1.200+", period: "Starting from", features: ["Lotus Delight", "Chocolate Brownie", "Milkshakes"], button: { text: "Order Now" } },
             ]}
-        />
-        <FooterBaseReveal
-          logoText="Mini Bites"
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
-        />
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Mini Bites"
+            columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );