diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index cf604f0..7dc343c 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import { Users, BarChart3, Settings, AlertCircle } from "lucide-react";
 
 export default function AdminDashboardPage() {
@@ -12,13 +12,13 @@ export default function AdminDashboardPage() {
         defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="entrance-slide"
         borderRadius="pill"
-        contentWidth="small"
+        contentWidth="medium"
         sizing="mediumLarge"
-        background="none"
-        cardStyle="gradient-bordered"
+        background="noise"
+        cardStyle="glass-elevated"
         primaryButtonStyle="gradient"
         secondaryButtonStyle="radial-glow"
-        headingFontWeight="extrabold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
@@ -32,22 +32,21 @@ export default function AdminDashboardPage() {
         </div>
 
         <div id="metrics" data-section="metrics" className="pt-32 pb-16">
-          <MetricCardOne
+          <MetricCardThree
             title="System Overview"
             description="Administrative control panel for managing user accounts, reports, and system settings."
-            gridVariant="bento-grid"
-            animationType="slide-up"
-            metrics={[
-              { id: "u1", value: "1,248", title: "Active Users", description: "Registered account holders", icon: Users },
-              { id: "u2", value: "85%", title: "Report Efficiency", description: "Resolved incident volume", icon: BarChart3 },
-              { id: "u3", value: "12", title: "Pending Alerts", description: "High priority investigations", icon: AlertCircle },
-              { id: "u4", value: "Enabled", title: "System Status", description: "Global configuration settings", icon: Settings }
-            ]}
+            animationType="blur-reveal"
             textboxLayout="split"
             useInvertedBackground={false}
+            metrics={[
+              { id: "u1", value: "1,248", title: "Active Users", icon: Users },
+              { id: "u2", value: "85%", title: "Report Efficiency", icon: BarChart3 },
+              { id: "u3", value: "12", title: "Pending Alerts", icon: AlertCircle },
+              { id: "u4", value: "Enabled", title: "System Status", icon: Settings }
+            ]}
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file