diff --git a/Areas/Dinas/Controllers/JenisSampahController.cs b/Areas/Dinas/Controllers/JenisSampahController.cs
new file mode 100644
index 0000000..b6a7056
--- /dev/null
+++ b/Areas/Dinas/Controllers/JenisSampahController.cs
@@ -0,0 +1,50 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Areas.Dinas.Controllers
+{
+    [Area("Dinas")]
+    [Route("Dinas/[controller]/[action]")]
+    public class JenisSampahController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        [HttpGet]
+        public IActionResult Table()
+        {
+            var data = new[]
+            {
+                new {
+                    nama = "Organik",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Anorganik",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "B3 Sampah Rumah Tangga",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+            };
+
+            var response = new
+            {
+                data = data
+            };
+
+            return Json(response);
+        }
+    }
+}
diff --git a/Areas/Dinas/Views/JenisSampah/Index.cshtml b/Areas/Dinas/Views/JenisSampah/Index.cshtml
new file mode 100644
index 0000000..c6a4cc3
--- /dev/null
+++ b/Areas/Dinas/Views/JenisSampah/Index.cshtml
@@ -0,0 +1,79 @@
+@{
+    ViewData["Title"] = "Jenis Sampah";
+}
+
+<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
+    <div class="prose">
+        <span class="text-xl font-semibold text-black">
+            Jenis Sampah
+        </span>
+    </div>
+
+    <div class="flex flex-col gap-2 md:flex-row">
+        <button class="btn btn-sm bg-bank-sampah-primary-500 max-w-full rounded-full text-white">
+            <i class="ph ph-plus"></i>
+            Tambah Jenis Sampah
+        </button>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="card bg-white">
+    <div class="card-body p-2">
+        <table class="table-zebra table" id="example">
+            <!-- head -->
+            <thead>
+                <tr>
+                    <th class="w-[5%]">No</th>
+                    <th class="w-[85%]">Nama Jenis Sampah</th>
+                    <th class="w-[10%]">Aksi</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
+<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script type="text/javascript">
+    var table;
+
+    $(document).ready(function () {
+        table = new DataTable('#example', {
+            ajax: '/Dinas/JenisSampah/Table',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                { data: 'nama' },
+                { data: 'aksi' },
+            ]
+        });
+
+        table.on("click", ".delete", function (e) {
+            e.preventDefault();
+
+            let url = $(this).data("url");
+            swal.fire({
+                title: "Apakah anda yakin?",
+                text: "Data yang dihapus tidak dapat dikembalikan lagi",
+                icon: "question",
+                showCancelButton: true,
+                confirmButtonText: "Ya, Hapus",
+                cancelButtonText: "Batal",
+                buttonsStyling: false,
+                customClass: {
+                    confirmButton: "btn btn-error text-white",
+                    cancelButton: "btn btn-link no-underline text-gray-500",
+                },
+            });
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Areas/Shared/Layouts/App/_Sidebar.cshtml b/Areas/Shared/Layouts/App/_Sidebar.cshtml
index aa9f847..1a98527 100644
--- a/Areas/Shared/Layouts/App/_Sidebar.cshtml
+++ b/Areas/Shared/Layouts/App/_Sidebar.cshtml
@@ -202,7 +202,7 @@
                     </details>
                 </li>
                 <li>
-                    <details @(new[] { "Aktivitas", "Artikel", "BadanHukum", "Fasilitas", "JenisBankSampah", "JenisNasabah", "JenisPengolahan", "Kategori", "KategoriFasilitas", "Mitra", "StatusLahan" }.Contains(controller) ? "open" : "")>
+                    <details @(new[] { "Aktivitas", "Artikel", "BadanHukum", "Fasilitas", "JenisBankSampah", "JenisNasabah", "JenisPengolahan", "Kategori", "KategoriFasilitas", "Mitra", "StatusLahan", "JenisSampah" }.Contains(controller) ? "open" : "")>
                         <summary>
                             <i class="ph ph-database me-2 text-lg"></i>
                             Master Data
@@ -219,7 +219,7 @@
                             <li><a asp-area="Dinas" asp-action="Index" asp-controller="KategoriFasilitas" class="@(controller == "KategoriFasilitas" ? "menu-active" : "")">Kategori Fasilitas</a></li>
                             <li><a asp-area="Dinas" asp-action="Index" asp-controller="Mitra" class="@(controller == "Mitra" ? "menu-active" : "")">Mitra</a></li>
                             <li><a asp-area="Dinas" asp-action="Index" asp-controller="StatusLahan" class="@(controller == "StatusLahan" ? "menu-active" : "")">Status Lahan</a></li>
-                            <li><a>Jenis Sampah</a></li>
+                            <li><a asp-area="Dinas" asp-action="Index" asp-controller="JenisSampah" class="@(controller == "JenisSampah" ? "menu-active" : "")">Jenis Sampah</a></li>
                             <li><a>Kategori Sampah</a></li>
                             <li><a>Sub Kategori Sampah</a></li>
                         </ul>