diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index fcab222..5afcc0d 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -3,8 +3,8 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
 
 export default function MenuPage() {
   return (
@@ -16,39 +16,45 @@ export default function MenuPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Menu", id: "/menu" },
-          ]}
-        />
-        <div className="pt-32 pb-16">
-          <ProductCardTwo
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+            ]}
+          />
+        </div>
+        <div className="pt-32 pb-16" id="menu" data-section="menu">
+          <ProductCardThree
             title="Steakhouse Menu"
             description="Fine cuts prepared to perfection."
             gridVariant="three-columns-all-equal-width"
             animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
             products={[
-              { id: "1", brand: "Classic", name: "Ribeye Steak", price: "$45", rating: 5, reviewCount: "120", imageSrc: "https://images.unsplash.com/photo-1600891964092-4316c288032e?auto=format&fit=crop&w=800&q=80" },
-              { id: "2", brand: "Signature", name: "Filet Mignon", price: "$55", rating: 5, reviewCount: "85", imageSrc: "https://images.unsplash.com/photo-1558030006-450675383462?auto=format&fit=crop&w=800&q=80" },
-              { id: "3", brand: "Premium", name: "T-Bone Steak", price: "$65", rating: 4, reviewCount: "95", imageSrc: "https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=800&q=80" },
+              { id: "1", name: "Ribeye Steak", price: "$45", imageSrc: "https://images.unsplash.com/photo-1600891964092-4316c288032e?auto=format&fit=crop&w=800&q=80" },
+              { id: "2", name: "Filet Mignon", price: "$55", imageSrc: "https://images.unsplash.com/photo-1558030006-450675383462?auto=format&fit=crop&w=800&q=80" },
+              { id: "3", name: "T-Bone Steak", price: "$65", imageSrc: "https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=800&q=80" },
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Webild"
+            columns={[
+              { title: "Company", items: [{ label: "Home", href: "/" }] },
+              { title: "Menu", items: [{ label: "Steak", href: "/menu" }] },
             ]}
           />
         </div>
-        <FooterBase
-          logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "Home", href: "/" }] },
-            { title: "Menu", items: [{ label: "Steak", href: "/menu" }] },
-          ]}
-        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file