diff --git a/src/app/seller-dashboard/page.tsx b/src/app/seller-dashboard/page.tsx
index 3b6732a..d19e44a 100644
--- a/src/app/seller-dashboard/page.tsx
+++ b/src/app/seller-dashboard/page.tsx
@@ -3,37 +3,52 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import { BarChart3, DollarSign, Package, User } from "lucide-react";
 
 export default function SellerDashboardPage() {
   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: "Products", id: "/products" },
-            { name: "Features", id: "/features" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "Seller Dashboard", id: "/seller-dashboard" },
-          ]}
-          brandName="ShipFlow"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Products", id: "/products" },
+              { name: "Features", id: "/features" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Seller Dashboard", id: "/seller-dashboard" },
+            ]}
+            brandName="ShipFlow"
+          />
+        </div>
         <div className="pt-32 pb-20 px-6 max-w-7xl mx-auto">
           <h1 className="text-4xl font-bold mb-8">Seller Dashboard</h1>
-          <MetricCardOne
-            title="Your Performance"
-            description="Track your earnings and shipping progress."
-            gridVariant="uniform-all-items-equal"
-            animationType="slide-up"
-            textboxLayout="default"
-            metrics={[
-              { id: "earnings", icon: DollarSign, title: "Total Earnings", value: "$12,450", description: "Up 12% this month" },
-              { id: "orders", icon: Package, title: "Active Orders", value: "48", description: "Processing today" },
-              { id: "account", icon: User, title: "Profile Status", value: "Verified", description: "Complete" },
-              { id: "stats", icon: BarChart3, title: "Completion Rate", value: "98%", description: "High performance" },
-            ]}
-          />
+          <div id="metrics" data-section="metrics">
+            <MetricCardThree
+              title="Your Performance"
+              description="Track your earnings and shipping progress."
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              metrics={[
+                { id: "earnings", icon: DollarSign, title: "Total Earnings", value: "$12,450" },
+                { id: "orders", icon: Package, title: "Active Orders", value: "48" },
+                { id: "account", icon: User, title: "Profile Status", value: "Verified" },
+                { id: "stats", icon: BarChart3, title: "Completion Rate", value: "98%" },
+              ]}
+            />
+          </div>
         </div>
       </ReactLenis>
     </ThemeProvider>