diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 1483fea..5b99504 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 NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function AdminDashboardPage() {
@@ -28,20 +28,22 @@ export default function AdminDashboardPage() {
                 { name: "Dashboard", id: "/admin" },
               ]}
               brandName="Super Admin"
-              button={{ text: "Keluar", href: "/" }}
             />
         </div>
 
         <main style={{ marginTop: '100px', padding: '0 2rem' }}>
           <div id="metrics" data-section="metrics">
-              <MetricCardFourteen
+              <MetricCardSeven
                 title="Panel Kontrol Super Admin"
                 tag="Sistem Internal"
                 metrics={[
-                    { id: "u1", value: "1,240", description: "Total User Terdaftar" },
-                    { id: "u2", value: "58", description: "Laporan Pending" },
-                    { id: "u3", value: "99.9%", description: "Status Kesehatan Server" },
+                    { id: "u1", value: "1,240", title: "Total User Terdaftar", items: [] },
+                    { id: "u2", value: "58", title: "Laporan Pending", items: [] },
+                    { id: "u3", value: "99.9%", title: "Status Kesehatan Server", items: [] },
                 ]}
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={false}
               />
           </div>
           <div style={{ padding: '4rem 0' }}>