diff --git a/src/app/vendor-dashboard/page.tsx b/src/app/vendor-dashboard/page.tsx
index 21d5184..1c01b3a 100644
--- a/src/app/vendor-dashboard/page.tsx
+++ b/src/app/vendor-dashboard/page.tsx
@@ -3,46 +3,64 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
-import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function VendorDashboardPage() {
   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>
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Inventory", id: "#inventory" },
-            { name: "Sales", id: "#sales" },
-            { name: "Orders", id: "#orders" },
-          ]}
-          brandName="Vendor Dashboard"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Inventory", id: "#inventory" },
+              { name: "Sales", id: "#sales" },
+              { name: "Orders", id: "#orders" },
+            ]}
+            brandName="Vendor Dashboard"
+          />
+        </div>
         
         <div id="metrics" data-section="metrics">
-          <MetricCardFourteen
+          <MetricCardSeven
             title="Vendor Performance"
             tag="Analytics"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
             metrics={[
-              { id: "1", value: "$12,450", description: "Total Revenue" },
-              { id: "2", value: "48", description: "Active Orders" },
-              { id: "3", value: "98%", description: "Satisfaction Rate" }
+              { id: "1", value: "$12,450", title: "Total Revenue", items: ["Monthly average"] },
+              { id: "2", value: "48", title: "Active Orders", items: ["Pending shipment"] },
+              { id: "3", value: "98%", title: "Satisfaction Rate", items: ["Customer feedback"] }
             ]}
-            metricsAnimation="slide-up"
           />
         </div>
 
         <div id="inventory" data-section="inventory">
-          <FeatureCardTwentyThree
-            animationType="slide-up"
+          <FeatureCardSix
             title="Inventory Management"
             textboxLayout="default"
             useInvertedBackground={false}
             features={[
-              { id: "i1", title: "Product A", tags: ["Stock: 45"] },
-              { id: "i2", title: "Product B", tags: ["Stock: 12"] }
+              {
+                title: "Product A",                description: "Stock levels are healthy.",                imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=600&auto=format&fit=crop"
+              },
+              {
+                title: "Product B",                description: "Stock running low.",                imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=600&auto=format&fit=crop"
+              }
             ]}
           />
         </div>