diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index 7c5f533..e4f0a2d 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -2,25 +2,29 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import { Camera, CalendarDays, Leaf } from 'lucide-react';
 
 export default function GalleryPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Menu", id: "/menu" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]}
-        brandName="Private Chef Co"
-      />
-      <div className="pt-32">
-        <MetricCardTwo
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Menu", id: "/menu" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]}
+        />
+      </div>
+      <div id="metrics" data-section="metrics">
+        <MetricCardOne
           title="Culinary Gallery"
           description="A visual collection of our favorite plating and event moments."
           animationType="slide-up"
           gridVariant="uniform-all-items-equal"
+          textboxLayout="default"
+          useInvertedBackground={false}
           metrics={[
-            { id: "1", value: "View", description: "Exquisite Plating" },
-            { id: "2", value: "View", description: "Event Atmosphere" },
-            { id: "3", value: "View", description: "Seasonal Ingredients" }
+            { id: "1", value: "View", title: "Plating", description: "Exquisite Plating", icon: Camera },
+            { id: "2", value: "View", title: "Events", description: "Event Atmosphere", icon: CalendarDays },
+            { id: "3", value: "View", title: "Produce", description: "Seasonal Ingredients", icon: Leaf }
           ]}
         />
       </div>
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 763ff50..ca115ef 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -2,23 +2,26 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
 
 export default function MenuPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Menu", id: "/menu" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]}
-        brandName="Private Chef Co"
-      />
-      <div className="pt-32">
-        <FeatureCardSix
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Menu", id: "/menu" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]}
+        />
+      </div>
+      <div id="menu" data-section="menu">
+        <FeatureBento
           title="Sample Menus & Cuisine Styles"
           description="Explore our curated selection of signature dishes and culinary styles."
+          animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           features={[
-            { title: "Tasting Menus", description: "A multi-course journey through local seasonal flavors.", imageSrc: "http://img.b2bpic.net/free-photo/plate-with-gourmet-meal_144627-26038.jpg" },
-            { title: "Fusion Concepts", description: "Modern twists on traditional global cuisines.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-gourmet-food-plate_23-2148530366.jpg" }
+            { title: "Tasting Menus", description: "A multi-course journey through local seasonal flavors.", bentoComponent: 'media-stack', items: [{ imageSrc: "http://img.b2bpic.net/free-photo/plate-with-gourmet-meal_144627-26038.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/plate-with-gourmet-meal_144627-26038.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/plate-with-gourmet-meal_144627-26038.jpg" }] },
+            { title: "Fusion Concepts", description: "Modern twists on traditional global cuisines.", bentoComponent: 'media-stack', items: [{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-gourmet-food-plate_23-2148530366.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-gourmet-food-plate_23-2148530366.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-gourmet-food-plate_23-2148530366.jpg" }] }
           ]}
         />
       </div>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index c4805f9..a59d7f0 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -2,24 +2,27 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Menu", id: "/menu" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]}
-        brandName="Private Chef Co"
-      />
-      <div className="pt-32">
-        <FeatureCardSix
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Menu", id: "/menu" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" }]}
+        />
+      </div>
+      <div id="services" data-section="services">
+        <FeatureBento
           title="Our Chef Offerings"
           description="We provide a variety of specialized culinary services tailored to your needs."
+          animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           features={[
-            { title: "Private Dinner Parties", description: "Intimate dining experiences for family and friends.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-plate-with-herbs-vegetables_141793-4080.jpg" },
-            { title: "Menu Planning", description: "Custom menus tailored to dietary preferences and allergies.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-writing-clipboard-with-traditional-thai-food-wooden-table_23-2148093545.jpg" },
-            { title: "Cooking Classes", description: "Learn culinary secrets from the comfort of your kitchen.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-cream-pie-sweet-cake-slices-inside-designed-plate-dark-background-cake-pie-color-sweet-biscuit-cream_140725-96332.jpg" }
+            { title: "Private Dinner Parties", description: "Intimate dining experiences for family and friends.", bentoComponent: 'media-stack', items: [{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-plate-with-herbs-vegetables_141793-4080.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-plate-with-herbs-vegetables_141793-4080.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-plate-with-herbs-vegetables_141793-4080.jpg" }] },
+            { title: "Menu Planning", description: "Custom menus tailored to dietary preferences and allergies.", bentoComponent: 'media-stack', items: [{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-writing-clipboard-with-traditional-thai-food-wooden-table_23-2148093545.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-writing-clipboard-with-traditional-thai-food-wooden-table_23-2148093545.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-writing-clipboard-with-traditional-thai-food-wooden-table_23-2148093545.jpg" }] },
+            { title: "Cooking Classes", description: "Learn culinary secrets from the comfort of your kitchen.", bentoComponent: 'media-stack', items: [{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-cream-pie-sweet-cake-slices-inside-designed-plate-dark-background-cake-pie-color-sweet-biscuit-cream_140725-96332.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-cream-pie-sweet-cake-slices-inside-designed-plate-dark-background-cake-pie-color-sweet-biscuit-cream_140725-96332.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-cream-pie-sweet-cake-slices-inside-designed-plate-dark-background-cake-pie-color-sweet-biscuit-cream_140725-96332.jpg" }] }
           ]}
         />
       </div>