diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 7ca9ff0..6f0d802 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -8,9 +8,11 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function MenuPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "Story", id: "/story" }, { name: "Visit", id: "/visit" }, { name: "Shop", id: "/shop" }]} brandName="HANDS+ROSE" />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "Story", id: "/story" }]} brandName="HANDS+ROSE" />
+        </div>
         <ProductCardFour
           animationType="slide-up"
           textboxLayout="default"
@@ -24,7 +26,9 @@ export default function MenuPage() {
           title="Signature Drinks"
           description="Creative, seasonal, and crafted for stillness."
         />
-        <FooterBase columns={[{ title: "Explore", items: [{ label: "Menu", href: "/menu" }, { label: "Story", href: "/story" }, { label: "Visit", href: "/visit" }] }, { title: "Community", items: [{ label: "Events", href: "#" }, { label: "Upperroom", href: "#" }, { label: "Shop", href: "/shop" }] }]} />
+        <div id="footer" data-section="footer">
+          <FooterBase columns={[{ title: "Explore", items: [{ label: "Menu", href: "/menu" }, { label: "Story", href: "/story" }] }]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );