diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index c88f53e..a993b3d 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,11 +8,17 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 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>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]} brandName="CR Dines" />
-        <TextAbout title="About CR Dines" />
-        <FooterSimple columns={[]} />
+        <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" }]} />
+        </div>
+        <div id="about" data-section="about">
+          <TextAbout title="About CR Dines" useInvertedBackground={false} />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2025 CR Dines" bottomRightText="All Rights Reserved" />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 71eb1ec..2e629d8 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,11 +8,17 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 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>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]} brandName="CR Dines" />
-        <ContactSplitForm title="Contact Us" description="Get in touch." inputs={[{name: "name", type: "text", placeholder: "Name"}, {name: "email", type: "email", placeholder: "Email"}]} />
-        <FooterSimple columns={[]} />
+        <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" }]} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm title="Contact Us" description="Get in touch." inputs={[{name: "name", type: "text", placeholder: "Name"}, {name: "email", type: "email", placeholder: "Email"}]} useInvertedBackground={false} />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2025 CR Dines" bottomRightText="All Rights Reserved" />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index e988d0e..d68e85d 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -8,11 +8,17 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function GalleryPage() {
   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>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]} brandName="CR Dines" />
-        <TeamCardTwo animationType="slide-up" gridVariant="three-columns-all-equal-width" title="Gallery" members={[]} />
-        <FooterSimple columns={[]} />
+        <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" }]} />
+        </div>
+        <div id="gallery" data-section="gallery">
+          <TeamCardTwo animationType="slide-up" gridVariant="three-columns-all-equal-width" title="Gallery" members={[]} memberVariant="default" useInvertedBackground={false} />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2025 CR Dines" bottomRightText="All Rights Reserved" />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index e0b9ff0..bbbfc0e 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -8,11 +8,17 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 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>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]} brandName="CR Dines" />
-        <PricingCardEight animationType="slide-up" title="Our Menu" plans={[]} />
-        <FooterSimple columns={[]} />
+        <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" }]} />
+        </div>
+        <div id="menu" data-section="menu">
+          <PricingCardEight animationType="slide-up" title="Our Menu" plans={[]} textboxLayout="default" useInvertedBackground={false} />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2025 CR Dines" bottomRightText="All Rights Reserved" />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );