diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 8c23d01..9a30974 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,17 +8,30 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
 
 export default function AboutPage() {
   return (
-    <ThemeProvider borderRadius="rounded" contentWidth="smallMedium" sizing="mediumLargeSizeMediumTitles">
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal" 
+      borderRadius="rounded" 
+      contentWidth="smallMedium" 
+      sizing="mediumLargeSizeMediumTitles"
+    >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Gallery", id: "/gallery" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Lolly’s Food Joint"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Lolly’s Food Joint"
+          />
+        </div>
         <SplitAbout
           title="About Lolly’s"
           description="We started with a simple dream: to serve the best street food in town. Every ingredient we use is carefully selected to ensure you have an unforgettable dining experience."
@@ -31,15 +44,17 @@ export default function AboutPage() {
           textboxLayout="split"
           useInvertedBackground={false}
         />
-        <FooterSimple
-          columns={[
-            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
-            { title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
-          ]}
-          bottomLeftText="© 2024 Lolly's Food Joint"
-          bottomRightText="All rights reserved."
-        />
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
+              { title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
+            ]}
+            bottomLeftText="© 2024 Lolly's Food Joint"
+            bottomRightText="All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 06f72cf..8269e62 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,33 +8,49 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider borderRadius="rounded" contentWidth="smallMedium" sizing="mediumLargeSizeMediumTitles">
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal" 
+      borderRadius="rounded" 
+      contentWidth="smallMedium" 
+      sizing="mediumLargeSizeMediumTitles"
+    >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Gallery", id: "/gallery" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Lolly’s Food Joint"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Lolly’s Food Joint"
+          />
+        </div>
         <ContactSplit
+          tag="Contact"
           title="Contact Us"
           description="Have questions or want to host an event? Get in touch with us today!"
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           imageSrc="http://img.b2bpic.net/free-photo/cinematic-film-location-decor_23-2151919025.jpg"
         />
-        <FooterSimple
-          columns={[
-            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
-            { title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
-          ]}
-          bottomLeftText="© 2024 Lolly's Food Joint"
-          bottomRightText="All rights reserved."
-        />
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
+              { title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
+            ]}
+            bottomLeftText="© 2024 Lolly's Food Joint"
+            bottomRightText="All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index b3a204c..bfa6dec 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -8,23 +8,37 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 
 export default function GalleryPage() {
   return (
-    <ThemeProvider borderRadius="rounded" contentWidth="smallMedium" sizing="mediumLargeSizeMediumTitles">
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal" 
+      borderRadius="rounded" 
+      contentWidth="smallMedium" 
+      sizing="mediumLargeSizeMediumTitles"
+    >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Gallery", id: "/gallery" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Lolly’s Food Joint"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Lolly’s Food Joint"
+          />
+        </div>
         <ProductCardTwo
           title="Our Gallery"
           description="A collection of our favorite dishes and moments at the restaurant."
           gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           products={[
             { id: "g1", brand: "Food", name: "Signature Burger", price: "", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/home-made-tasty-burgers_628469-332.jpg" },
             { id: "g2", brand: "Drinks", name: "Fresh Shakes", price: "", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/cacao-milkshake-topped-with-colourful-sprinkles-ice-cream-oreo_140725-8264.jpg" },
@@ -32,15 +46,17 @@ export default function GalleryPage() {
             { id: "g4", brand: "Food", name: "Side Bites", price: "", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/delicious-creamy-melted-cheese_23-2149332823.jpg" },
           ]}
         />
-        <FooterSimple
-          columns={[
-            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
-            { title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
-          ]}
-          bottomLeftText="© 2024 Lolly's Food Joint"
-          bottomRightText="All rights reserved."
-        />
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
+              { title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
+            ]}
+            bottomLeftText="© 2024 Lolly's Food Joint"
+            bottomRightText="All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 5389ad1..d8ed68c 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -19,19 +19,32 @@ export default function MenuPage() {
   const [activeCategory, setActiveCategory] = useState("burgers");
 
   return (
-    <ThemeProvider>
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal" 
+      borderRadius="rounded" 
+      contentWidth="smallMedium" 
+      sizing="mediumLargeSizeMediumTitles"
+    >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Menu", id: "/menu" },
-            { name: "About", id: "/about" },
-            { name: "Gallery", id: "/gallery" },
-            { name: "Contact", id: "/contact" },
-            { name: "Order Online", id: "/order" },
-          ]}
-          brandName="Lolly’s Food Joint"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "About", id: "/about" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+              { name: "Order Online", id: "/order" },
+            ]}
+            brandName="Lolly’s Food Joint"
+          />
+        </div>
 
         <main className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
           <h1 className="text-4xl md:text-5xl font-bold mb-10 text-center">Our Menu</h1>
@@ -59,19 +72,15 @@ export default function MenuPage() {
           </div>
         </main>
 
-        <FooterSimple
-          columns={[
-            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/menu" }] },
-            { title: "Order", items: [{ label: "Order Online", href: "/order" }, { label: "Contact Us", href: "/contact" }] },
-          ]}
-          bottomLeftText="© 2024 Lolly's Food Joint"
-          bottomRightText="All rights reserved."
-        />
-
-        <div className="fixed bottom-6 left-0 right-0 px-6 flex justify-center z-50 md:hidden">
-          <a href="/order" className="bg-primary text-white px-8 py-4 rounded-full font-bold shadow-xl w-full max-w-sm text-center">
-            Order Now
-          </a>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/menu" }] },
+              { title: "Order", items: [{ label: "Order Online", href: "/order" }, { label: "Contact Us", href: "/contact" }] },
+            ]}
+            bottomLeftText="© 2024 Lolly's Food Joint"
+            bottomRightText="All rights reserved."
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx
index a169edc..5dc6d47 100644
--- a/src/app/order/page.tsx
+++ b/src/app/order/page.tsx
@@ -49,6 +49,7 @@ export default function OrderPage() {
               { id: "p4", name: "Creamy Milkshake", price: "$6.99", imageSrc: "http://img.b2bpic.net/free-photo/cacao-milkshake-topped-with-colourful-sprinkles-ice-cream-oreo_140725-8264.jpg", priceButtonProps: { onClick: () => window.open('https://wa.me/1234567890?text=I%20would%20like%20to%20order%20the%20Creamy%20Milkshake') } },
             ]}
             textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>