diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
new file mode 100644
index 0000000..fcae490
--- /dev/null
+++ b/app/dashboard/page.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import { useState } from "react";
+import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
+import StatistikPerAngkatanChart from "@/components/charts/StatistikPerAngkatanChart";
+import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
+import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
+import IPKChart from "@/components/charts/IPKChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
+import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
+import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function TotalMahasiswaPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  // helper wrapper biar semua chart full-height di dalam card
+  const Tile = ({ title, children, className = "" }: any) => (
+    <Card className={`bg-white dark:bg-slate-900 shadow-lg gap-0 dark:text-white ${className}`}>
+      {title && (
+        <CardHeader className="py-3">
+          <CardTitle className="text-sm">{title}</CardTitle>
+        </CardHeader>
+      )}
+      <CardContent className="p-4"> {/* atur tinggi tile di sini */}
+        <div className="h-full">{children}</div>
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
+  <div>
+    <h1 className="text-3xl font-bold">Mahasiswa</h1>
+    <p className="text-sm text-gray-600 dark:text-gray-300 mt-1 max-w-prose">
+      Informasi jumlah mahasiswa, jenis pendaftaran, status mahasiswa, rata-rata IPK, dan asal daerah dengan filter tahun angkatan.
+    </p>
+  </div>
+  {/* (opsional) tempat tombol aksi */}
+  {/* <div className="flex items-center gap-2">
+    <Button variant="outline" size="sm">Export</Button>
+  </div> */}
+</div>
+
+{/* Toolbar Filter (sticky) */}
+<div className="sticky top-16 z-30"> 
+  <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+    <CardContent className="py-3">
+      <div className="flex flex-wrap items-center gap-3">
+        <FilterTahunAngkatan
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+        {/* tombol reset (opsional) */}
+        {/* <Button variant="outline" size="sm" onClick={() => setSelectedYear('all')}>Reset</Button> */}
+      </div>
+    </CardContent>
+  </Card>
+</div>
+
+      {selectedYear === "all" ? (
+        /* ===== LAYOUT ALL YEARS (12 kolom) ===== */
+        <div
+          className="
+            grid gap-4
+            grid-cols-1
+            md:grid-cols-6
+            lg:grid-cols-12
+          "
+        >
+          {/* Bar besar kiri */}
+          <div className="md:col-span-6 lg:col-span-7">
+            <Tile title="Statistik Mahasiswa">
+              <StatistikMahasiswaChart />
+            </Tile>
+          </div>
+
+          {/* Dua tile kecil kanan atas */}
+          <div className="md:col-span-6 lg:col-span-5">
+            <Tile title="Jenis Pendaftaran">
+              <JenisPendaftaranChart />
+            </Tile>
+          </div>
+
+          {/* Bar horizontal (wilayah) */}
+          <div className="md:col-span-6 lg:col-span-7">
+            <Tile title="Status Mahasiswa">
+              <StatusMahasiswaChart />
+            </Tile>
+          </div>
+
+          {/* Rata-rata IPK */}
+          <div className="md:col-span-6 lg:col-span-5">
+            <Tile title="Rata-rata IPK">
+              <IPKChart />
+            </Tile>
+          </div>
+
+          {/* Lebar penuh di bawah */}
+          <div className="lg:col-span-12">
+            <Tile title="Asal Daerah">
+              <AsalDaerahChart />
+            </Tile>
+          </div>
+        </div>
+      ) : (
+        /* ===== LAYOUT PER ANGKATAN (12 kolom) ===== */
+        <div
+          className="
+            grid gap-4
+            grid-cols-1
+            md:grid-cols-6
+            lg:grid-cols-12
+          "
+        >
+          <div className="md:col-span-6 lg:col-span-7">
+            <Tile title={`Statistik Angkatan ${selectedYear}`}>
+              <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
+            </Tile>
+          </div>
+
+          <div className="md:col-span-6 lg:col-span-5">
+            <Tile title="Jenis Pendaftaran per Angkatan">
+              <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
+            </Tile>
+          </div>
+
+          <div className="lg:col-span-12">
+            <Tile title="Asal Daerah per Angkatan">
+              <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
+            </Tile>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index b78e953..7fbb54f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -198,7 +198,18 @@ export default function DashboardPage() {
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="col-span-1">
+                <Card className="bg-white dark:bg-slate-900 shadow-lg">
+                <CardHeader>
+                  <CardTitle className="text-xl font-bold dark:text-white">
+                    Jenis Pendaftaran Mahasiswa
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
                   <StatistikMahasiswaChart />
+                  </div>
+                  </CardContent>
+                  </Card>
                 </div>
                 <div className="col-span-1">
                   <JenisPendaftaranChart />
diff --git a/components/ui/Navbar.tsx b/components/ui/Navbar.tsx
index 6453edf..6eea277 100644
--- a/components/ui/Navbar.tsx
+++ b/components/ui/Navbar.tsx
@@ -110,6 +110,11 @@ const Navbar = () => {
           
           {/* Visualisasi Dropdown - Only when logged in */}
           {user && (
+            <>
+            <Link href="/dashboard" className="flex items-center gap-2 px-3 py-2 text-sm font-medium hover:text-primary transition-colors">
+              <BarChart className="h-4 w-4" />
+              Visualisasi Data
+            </Link>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
@@ -157,6 +162,7 @@ const Navbar = () => {
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+            </>
           )}
 
           {/* Kelola Data Dropdown - Only for Admin */}