diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 0ba8ac8..999f0cb 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,13 +8,17 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
 
 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: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} brandName="Brunit The Brewery" button={{ text: "Book a Table", href: "/contact" }} />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} brandName="Brunit The Brewery" />
+        </div>
         <div className="pt-32 pb-20">
            <MediaAbout title="About Brunit" description="We are dedicated to bringing the finest craft beer experience to Vijayawada." imageSrc="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b" useInvertedBackground={false} />
         </div>
-        <FooterLogoEmphasis logoText="Brunit" columns={[{ items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }] }, { items: [{ label: "Contact", href: "/contact" }] }]} />
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis logoText="Brunit" columns={[{ items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }] }, { items: [{ label: "Contact", href: "/contact" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index a657da0..cf1b845 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -9,13 +9,17 @@ import { Mail } from "lucide-react";
 
 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: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} brandName="Brunit The Brewery" button={{ text: "Book a Table", href: "/contact" }} />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} brandName="Brunit The Brewery" />
+        </div>
         <div className="pt-32 pb-20">
            <ContactFaq faqs={[{ id: "f1", title: "Reservations?", content: "Call us at +91 9999999999" }]} ctaTitle="Contact Us" ctaDescription="Reach out for event inquiries or booking." ctaButton={{ text: "Email Us" }} ctaIcon={Mail} animationType="slide-up" useInvertedBackground={false} />
         </div>
-        <FooterLogoEmphasis logoText="Brunit" columns={[{ items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }] }, { items: [{ label: "About", href: "/about" }] }]} />
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis logoText="Brunit" columns={[{ items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }] }, { items: [{ label: "About", href: "/about" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 98f2d9d..ab21440 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -8,13 +8,17 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 
 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 navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} brandName="Brunit The Brewery" button={{ text: "Book a Table", href: "/contact" }} />
-        <div className="pt-32 pb-20">
-           <ProductCardTwo animationType="slide-up" textboxLayout="split" gridVariant="three-columns-all-equal-width" title="Our Menu" description="Handcrafted brews and culinary delights." products={[{id: "m1", brand: "Beer", name: "IPA", price: "₹400", rating: 5, reviewCount: "100", imageSrc: "https://images.unsplash.com/photo-1575444758702-4a6b9222b36f"}]} />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} brandName="Brunit The Brewery" />
+        </div>
+        <div className="pt-32 pb-20">
+           <ProductCardTwo animationType="slide-up" textboxLayout="split" gridVariant="three-columns-all-equal-width" title="Our Menu" description="Handcrafted brews and culinary delights." products={[{id: "m1", brand: "Beer", name: "IPA", price: "₹400", rating: 5, reviewCount: "100", imageSrc: "https://images.unsplash.com/photo-1575444758702-4a6b9222b36f"}]} useInvertedBackground={false} />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis logoText="Brunit" columns={[{ items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }, { items: [{ label: "Contact", href: "/contact" }] }]} />
         </div>
-        <FooterLogoEmphasis logoText="Brunit" columns={[{ items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }, { items: [{ label: "Contact", href: "/contact" }] }]} />
       </ReactLenis>
     </ThemeProvider>
   );