diff --git a/Views/Shared/_SidebarUnified.cshtml b/Views/Shared/_SidebarUnified.cshtml
index 712043e..2128188 100644
--- a/Views/Shared/_SidebarUnified.cshtml
+++ b/Views/Shared/_SidebarUnified.cshtml
@@ -21,36 +21,36 @@
 
     <!-- Sidebar content here -->
     <div class="flex-1 overflow-y-auto">
-        <ul class="menu menu-sidebar bg-base-100 text-base-content min-h-full w-full overscroll-y-none p-4">
+        <ul class="menu menu-sidebar bg-base-100 text-base-content min-h-full w-full overscroll-y-none p-4 space-y-2">
 
             <!-- Dashboard -->
             <li>
-                <a asp-controller="Dashboard" asp-action="Index" class="w-full rounded-full @(controller == "Dashboard" ? "menu-active" : "")">
-                    <i class="ph ph-gauge me-2 text-lg"></i>
+                <a asp-controller="Dashboard" asp-action="Index" class="@(controller == "Dashboard" ? "menu-active" : "")">
+                    <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
                     Dashboard
                 </a>
             </li>
 
-             <!-- Dashboard Nasabah -->
+            <!-- Dashboard Nasabah -->
             <li>
-                <a asp-controller="DashboardNasabah" asp-action="Index" class="w-full rounded-full @(controller == "DashboardNasabah" ? "menu-active" : "")">
-                    <i class="ph ph-gauge me-2 text-lg"></i>
+                <a asp-controller="DashboardNasabah" asp-action="Index" class="@(controller == "DashboardNasabah" ? "menu-active" : "")">
+                    <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
                     Dashboard Nasabah
                 </a>
             </li>
 
-             <!-- Dashboard BSU -->
+            <!-- Dashboard BSU -->
             <li>
-                <a asp-controller="DashboardBsu" asp-action="Index" class="w-full rounded-full @(controller == "DashboardBsu" ? "menu-active" : "")">
-                    <i class="ph ph-gauge me-2 text-lg"></i>
+                <a asp-controller="DashboardBsu" asp-action="Index" class="@(controller == "DashboardBsu" ? "menu-active" : "")">
+                    <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
                     Dashboard BSU
                 </a>
             </li>
 
-             <!-- Dashboard BSI -->
+            <!-- Dashboard BSI -->
             <li>
-                <a asp-controller="DashboardBsi" asp-action="Index" class="w-full rounded-full @(controller == "DashboardBsi" ? "menu-active" : "")">
-                    <i class="ph ph-gauge me-2 text-lg"></i>
+                <a asp-controller="DashboardBsi" asp-action="Index" class="@(controller == "DashboardBsi" ? "menu-active" : "")">
+                    <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
                     Dashboard BSI
                 </a>
             </li>
@@ -58,16 +58,16 @@
 
             <!-- Data Bank Sampah -->
             <li>
-                <a asp-controller="DataBankSampah" asp-action="Index" class="rounded-full @(controller == "DataBankSampah" ? "menu-active" : "")">
-                    <i class="ph ph-house-line me-2 text-lg"></i>
+                <a asp-controller="DataBankSampah" asp-action="Index" class="@(controller == "DataBankSampah" ? "menu-active" : "")">
+                    <i class="ph ph-house-line me-2 text-lg text-gray-400"></i>
                     Data Bank Sampah
                 </a>
             </li>
             
             <!-- Data Nasabah -->
             <li>
-                <a asp-controller="DataNasabah" asp-action="Index" class="rounded-full @(controller == "DataNasabah" ? "menu-active" : "")">
-                    <i class="ph ph-users-four me-2 text-lg"></i>
+                <a asp-controller="DataNasabah" asp-action="Index" class="@(controller == "DataNasabah" ? "menu-active" : "")">
+                    <i class="ph ph-users-four me-2 text-lg text-gray-400"></i>
                     Data Nasabah
                 </a>
             </li>
@@ -76,7 +76,7 @@
             <li>
                 <details @(module == "Data" && new[] { "Nasabah", "BankSampahInduk", "BankSampahUnit", "Aktivitas", "HargaSampah", "Offtaker", "PotensiRumah" }.Contains(controller) ? "open" : "")>
                     <summary>
-                        <i class="ph ph-database me-2 text-lg"></i>
+                        <i class="ph ph-database me-2 text-lg text-gray-400"></i>
                         Data
                     </summary>
                     <ul>
@@ -95,7 +95,7 @@
             <li>
                 <details @(module == "Transaksi" && new[] { "Nasabah", "PenarikanTabungan", "Bsi", "TransaksiOfftaker", "LaporanTransaksi", "SedekahSampah" }.Contains(controller) ? "open" : "")>
                     <summary>
-                        <i class="ph ph-cash-register me-2 text-lg"></i>
+                        <i class="ph ph-cash-register me-2 text-lg text-gray-400"></i>
                         Transaksi
                     </summary>
                     <ul>
@@ -109,27 +109,26 @@
                 </details>
             </li>
 
-
             <!-- Data Offtaker -->
             <li>
-                <a asp-controller="DataOfftaker" asp-action="Index" class="rounded-full @(controller == "DataOfftaker" ? "menu-active" : "")">
-                    <i class="ph ph-read-cv-logo me-2 text-lg"></i>
+                <a asp-controller="DataOfftaker" asp-action="Index" class="@(controller == "DataOfftaker" ? "menu-active" : "")">
+                    <i class="ph ph-read-cv-logo me-2 text-lg text-gray-400"></i>
                     Data Offtaker
                 </a>
             </li>
 
             <!-- Data Kelurahan -->
             <li>
-                <a asp-controller="DataKelurahan" asp-action="Index" class="rounded-full @(controller == "DataKelurahan" ? "menu-active" : "")">
-                    <i class="ph ph-buildings me-2 text-lg"></i>
+                <a asp-controller="DataKelurahan" asp-action="Index" class="@(controller == "DataKelurahan" ? "menu-active" : "")">
+                    <i class="ph ph-buildings me-2 text-lg text-gray-400"></i>
                     Data Kelurahan
                 </a>
             </li>
 
             <!-- Transaksi Laporan -->
             <li>
-                <a asp-controller="TransaksiLaporan" asp-action="Index" class="rounded-full @(controller == "TransaksiLaporan" ? "menu-active" : "")">
-                    <i class="ph ph-database me-2 text-lg"></i>
+                <a asp-controller="TransaksiLaporan" asp-action="Index" class="@(controller == "TransaksiLaporan" ? "menu-active" : "")">
+                    <i class="ph ph-database me-2 text-lg text-gray-400"></i>
                     Transaksi Laporan
                 </a>
             </li>
@@ -138,7 +137,7 @@
             <li>
                 <details @(module == "Wilayah" && new[] { "Kota", "Kecamatan", "Kelurahan" }.Contains(controller) ? "open" : "")>
                     <summary>
-                        <i class="ph ph-map-trifold me-2 text-lg"></i>
+                        <i class="ph ph-map-trifold me-2 text-lg text-gray-400"></i>
                         Wilayah
                     </summary>
                     <ul>
@@ -153,7 +152,7 @@
             <li>
                 <details @(module == "Master" && new[] { "Aktivitas", "Artikel", "Pendamping","BadanHukum", "Fasilitas", "JenisBankSampah", "JenisNasabah", "JenisPengolahan", "Kategori", "KategoriFasilitas", "Mitra", "StatusLahan", "JenisSampah", "KategoriSampah", "SubKategoriSampah", "Lokasi" }.Contains(controller) ? "open" : "")>
                     <summary>
-                        <i class="ph ph-database me-2 text-lg"></i>
+                        <i class="ph ph-database me-2 text-lg text-gray-400"></i>
                         Master Data
                     </summary>
                     <ul>
@@ -179,35 +178,35 @@
 
             <!-- CMS -->
             <li>
-                <a asp-controller="Cms" class="rounded-full @(controller == "Cms" ? "menu-active" : "")">
-                    <i class="ph ph-newspaper me-2 text-lg"></i>
+                <a asp-controller="Cms" class="@(controller == "Cms" ? "menu-active" : "")">
+                    <i class="ph ph-newspaper me-2 text-lg text-gray-400"></i>
                     CMS
                 </a>
             </li>
 
             <!-- Reduksi -->
             <li>
-                <a asp-controller="ReduksiSampahDinas" class="rounded-full @(controller == "ReduksiSampahDinas" ? "menu-active" : "")">
-                    <i class="ph ph-database me-2 text-lg"></i>
+                <a asp-controller="ReduksiSampahDinas" class="@(controller == "ReduksiSampahDinas" ? "menu-active" : "")">
+                    <i class="ph ph-database me-2 text-lg text-gray-400"></i>
                     Reduksi Sampah Dinas
                 </a>
             </li>    
             <li>
-                <a asp-controller="ReduksiSampahSatpel" class="rounded-full @(controller == "ReduksiSampahSatpel" ? "menu-active" : "")">
-                    <i class="ph ph-database me-2 text-lg"></i>
+                <a asp-controller="ReduksiSampahSatpel" class="@(controller == "ReduksiSampahSatpel" ? "menu-active" : "")">
+                    <i class="ph ph-database me-2 text-lg text-gray-400"></i>
                     Reduksi Sampah Satpel
                 </a>
             </li>    
             <li>
-                <a asp-controller="ReduksiSampahSudin" class="rounded-full @(controller == "ReduksiSampahSudin" ? "menu-active" : "")">
-                    <i class="ph ph-database me-2 text-lg"></i>
+                <a asp-controller="ReduksiSampahSudin" class="@(controller == "ReduksiSampahSudin" ? "menu-active" : "")">
+                    <i class="ph ph-database me-2 text-lg text-gray-400"></i>
                     Reduksi Sampah Sudin
                 </a>
             </li>    
             <!-- <li>
                 <details @(new[] { "Maggot", "Composting", "ReduksiSampah", "BankSampah" }.Contains(controller) ? "open" : "")>
                     <summary>
-                        <i class="ph ph-database me-2 text-lg"></i>
+                        <i class="ph ph-database me-2 text-lg text-gray-400"></i>
                         Reduksi
                     </summary>
                     <ul>
@@ -221,48 +220,48 @@
 
             <!-- Ganti Password -->
             <li>
-                <a href="https://akun.dinaslhdki.id/" target="_blank" class="rounded-full">
-                    <i class="ph ph-lock-key me-2 text-lg"></i>
+                <a href="https://akun.dinaslhdki.id/" target="_blank">
+                    <i class="ph ph-lock-key me-2 text-lg text-gray-400"></i>
                     Ganti Password
                 </a>
             </li>
 
             <!-- Profil -->
             <li>
-                <a asp-controller="Profil" class="rounded-full @(controller == "Profil" ? "menu-active" : "")">
-                    <i class="ph ph-user-square me-2 text-lg"></i>
+                <a asp-controller="Profil" class="@(controller == "Profil" ? "menu-active" : "")">
+                    <i class="ph ph-user-square me-2 text-lg text-gray-400"></i>
                     Profil Bank Sampah
                 </a>
             </li>
 
             <!-- Aktifitas -->
             <li>
-                <a asp-controller="Aktifitas" class="rounded-full @(controller == "Aktifitas" ? "menu-active" : "")">
-                    <i class="ph ph-activity me-2 text-lg"></i>
+                <a asp-controller="Aktifitas" class="@(controller == "Aktifitas" ? "menu-active" : "")">
+                    <i class="ph ph-activity me-2 text-lg text-gray-400"></i>
                     Aktifitas
                 </a>
             </li>
 
             <!-- Nasabah -->
             <li>
-                <a asp-controller="ProfilNasabah" asp-action="Index" class="rounded-full @(controller == "ProfilNasabah" ? "menu-active" : "")">
-                    <i class="ph ph-user-circle me-2 text-lg"></i>
+                <a asp-controller="ProfilNasabah" asp-action="Index" class="@(controller == "ProfilNasabah" ? "menu-active" : "")">
+                    <i class="ph ph-user-circle me-2 text-lg text-gray-400"></i>
                     Profil Nasabah
                 </a>
             </li>
 
             <!-- Bank Sampah Nasabah -->
             <li>
-                <a asp-controller="BankSampahNasabah" asp-action="Index" class="rounded-full @(controller == "BankSampahNasabah" ? "menu-active" : "")">
-                    <i class="ph ph-bank me-2 text-lg"></i>
+                <a asp-controller="BankSampahNasabah" asp-action="Index" class="@(controller == "BankSampahNasabah" ? "menu-active" : "")">
+                    <i class="ph ph-bank me-2 text-lg text-gray-400"></i>
                     Bank Sampah Nasabah
                 </a>
             </li>
 
             <!-- Transaksi Nasabah -->
             <li>
-                <a asp-controller="TransaksiNasabah" asp-action="Index" class="rounded-full @(controller == "TransaksiNasabah" ? "menu-active" : "")">
-                    <i class="ph ph-currency-circle-dollar me-2 text-lg"></i>
+                <a asp-controller="TransaksiNasabah" asp-action="Index" class="@(controller == "TransaksiNasabah" ? "menu-active" : "")">
+                    <i class="ph ph-currency-circle-dollar me-2 text-lg text-gray-400"></i>
                     Transaksi Nasabah
                 </a>
             </li>
@@ -274,7 +273,7 @@
         <div class="card w-fit bg-linear-to-tl from-[#FFDBAC] to-[#F79009] text-white">
             <div class="card-body px-2 py-4">
                 <div class="card-title">
-                    <i class="ph ph-whatsapp-logo text-lg"></i>
+                    <i class="ph ph-whatsapp-logo text-lg text-gray-400"></i>
                     Help Desk
                 </div>
                 <hr class="text-white/30" />
diff --git a/wwwroot/css/input.css b/wwwroot/css/input.css
index b72ee6c..751c7a3 100644
--- a/wwwroot/css/input.css
+++ b/wwwroot/css/input.css
@@ -178,24 +178,32 @@
 
 .menu-sidebar a,
 .menu-sidebar summary {
-    @apply rounded-full transition-colors duration-200;
+    @apply transition-colors duration-200 border-0 shadow-none rounded-full;
 }
 
-/* Untuk semua item sidebar (normal + collapsible summary) */
+.menu-sidebar a {
+    @apply text-gray-500 font-medium;
+}
+
+.menu-sidebar summary {
+    @apply text-gray-500 font-medium;
+}
+
+.menu-sidebar details ul {
+    @apply space-y-2 py-2;
+}
+
+/* Hover / Active / Open state */
 .menu-sidebar a:hover,
 .menu-sidebar a:active,
 .menu-sidebar a.menu-active,
 .menu-sidebar details > summary:hover,
 .menu-sidebar details > summary:active,
-.menu-sidebar details[open] > summary {
-    @apply bg-bank-sampah-primary-500 text-white shadow-none;
-}
-
-/* Untuk link di dalam isi collapsible */
+.menu-sidebar details[open] > summary,
 .menu-sidebar details[open] > ul a:hover,
 .menu-sidebar details[open] > ul a:active,
 .menu-sidebar details[open] > ul a.menu-active {
-    @apply text-bank-sampah-primary-500 bg-transparent font-bold shadow-none;
+    @apply bg-bank-sampah-primary-500 text-white;
 }
 
 .badge {