diff --git a/Controllers/Main/DashboardController.cs b/Controllers/Main/DashboardController.cs
index 1a1ef63..c0952a1 100644
--- a/Controllers/Main/DashboardController.cs
+++ b/Controllers/Main/DashboardController.cs
@@ -15,6 +15,11 @@ namespace BankSampahApp.Controllers.Main
             return View("~/Views/Main/Dashboard/Nasabah.cshtml");
         }
 
+        public IActionResult Bsu()
+        {
+            return View("~/Views/Main/Dashboard/Bsu.cshtml");
+        }
+
         [HttpGet]
         public IActionResult Table(){
             var data = new[]
diff --git a/Views/Main/Dashboard/Bsu.cshtml b/Views/Main/Dashboard/Bsu.cshtml
new file mode 100644
index 0000000..bd6c455
--- /dev/null
+++ b/Views/Main/Dashboard/Bsu.cshtml
@@ -0,0 +1,210 @@
+@{
+    ViewData["Title"] = "Dashboard BSU";
+}
+
+<div class="flex gap-2 flex-row justify-between md:gap-0 mt-2 mb-2">
+    <div class="prose">
+        <span class="text-xl font-semibold text-black">Dashboard BSU</span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="card bg-white md:bg-[url(/images/image-welcome-dashboard.png)] md:bg-local md:bg-right md:bg-no-repeat mb-2">
+    <div class="card-body gap-0">
+        <span class="text-gray-500">Selamat Datang</span>
+        <span class="bg-gradient-to-r from-[#089A7B] to-[#46C881] bg-clip-text text-2xl font-semibold text-transparent">BSU Jakarta Timur</span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah BSU</div>
+            <div class="stat-value">5,812 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah BSU</div>
+            <div class="stat-value">5,812 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah Offtaker</div>
+            <div class="stat-value">89.4 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4">
+    <div class="card bg-white shadow-sm">
+        <div class="card-body pt-4 px-3">
+            <div class="flex gap-2 flex-row justify-between md:gap-0 mt-2 mb-2">
+                <div class="prose">
+                    <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
+                        Sampah Daur Ulang Terkelola (Kg)
+                    </span>
+                </div>
+                <select class="bg-transparent focus:outline-none text-sm px-2 py-1">
+                    <option selected>Yearly</option>
+                    <option>Monthly</option>
+                    <option>Quarterly</option>
+                </select>
+            </div>
+        
+            <div class="w-full overflow-x-auto">
+                <div class="w-full"> 
+                    <div class="h-64 md:h-96 relative">
+                    <canvas id="recycleChart_1" class="w-full h-full"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+ <div class="card bg-white shadow-sm">
+    <div class="card-body pt-4 px-3">
+       <div class="w-full overflow-x-auto">
+            <table class="table-zebra table w-full" id="example">
+                <!-- head -->
+                <thead>
+                    <tr>
+                        <th class="w-[10%]">No</th>
+                        <th class="w-[45%]">Kategori Sampah</th>
+                        <th class="w-[45%]">Total Berat Sampah(Kg)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+
+<script src="~/js/chart.js"></script>
+@section Scripts {
+<script type="text/javascript">
+    const labels = [
+        "Jan", "Feb", "Mar", "Apr", "Mei", "Jun",
+        "Jul", "Agu", "Sep", "Okt", "Nov", "Des"
+    ];
+
+    const dataValues = [
+        50000, 38000, 45000, 60000, 100000,
+        20000, 55000, 70000, 60000, 75000,
+        90000, 110000
+    ];
+
+    $(document).ready(() => {
+        new DataTable('#example', {
+            ajax: '/Main/Dashboard/Table',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: () => {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                { data: 'kategori' },
+                { data: 'total_berat' },
+            ]
+        });
+    });
+
+    // ---------------------------------------------------------
+    //  Utility: Create gradient
+    // ---------------------------------------------------------
+    function createGradient(ctx, color, color2) {
+        const g = ctx.createLinearGradient(0, 0, 0, 220);
+        g.addColorStop(0, color);
+        g.addColorStop(1, color2);
+        return g;
+    }
+
+    // ---------------------------------------------------------
+    //  Utility: Create Chart
+    // ---------------------------------------------------------
+    function createLineChart(canvasId, borderColor, gradientColor, gradientColor2) {
+        const ctx = document.getElementById(canvasId).getContext("2d");
+
+        new Chart(ctx, {
+            type: "line",
+            data: {
+                labels,
+                datasets: [
+                    {
+                        data: dataValues,
+                        borderColor: borderColor,
+                        borderWidth: 3,
+                        backgroundColor: createGradient(ctx, gradientColor, gradientColor2),
+                        fill: true,
+                        tension: 0,
+                        pointBackgroundColor: "#fff",
+                        pointBorderWidth: 0,
+                        pointRadius: 0,
+                        pointHoverRadius: 0,
+                        borderDash: [6, 6],
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: {
+                        grid: { display: false },
+                        ticks: { color: "#6b7280", font: { size: 12 } }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: v => v >= 1000 ? v / 1000 + "k" : v,
+                            color: "#6b7280",
+                            font: { size: 12 }
+                        },
+                        grid: { color: "rgba(0,0,0,0.06)" }
+                    }
+                }
+            }
+        });
+    }
+
+    // ---------------------------------------------------------
+    //  Render Both Charts
+    // ---------------------------------------------------------
+    createLineChart("recycleChart_1", "rgba(37, 205, 37, 0.4)", "rgba(37, 205, 37, 0.4)", "rgba(37, 205, 37, 0)");
+</script>
+
+}
\ No newline at end of file
diff --git a/Views/Shared/_SidebarUnified.cshtml b/Views/Shared/_SidebarUnified.cshtml
index 50b0023..776d974 100644
--- a/Views/Shared/_SidebarUnified.cshtml
+++ b/Views/Shared/_SidebarUnified.cshtml
@@ -34,6 +34,14 @@
                 </a>
             </li>
 
+             <!-- Dashboard BSU -->
+            <li>
+                <a asp-controller="Dashboard" asp-action="Bsu" class="w-full rounded-full @(controller == "Dashboard" ? "menu-active" : "")">
+                    <i class="ph ph-gauge me-2 text-lg"></i>
+                    Dashboard BSU
+                </a>
+            </li>
+
             <!-- Data Bank Sampah -->
             <li>
                 <a asp-controller="DataBankSampah" asp-action="Index" class="rounded-full @(controller == "DataBankSampah" ? "menu-active" : "")">