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>