diff --git a/Views/Lokasi/Index.cshtml b/Views/Lokasi/Index.cshtml
index 28a98f7..44710dc 100644
--- a/Views/Lokasi/Index.cshtml
+++ b/Views/Lokasi/Index.cshtml
@@ -72,6 +72,7 @@
 <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
 <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
 <script type="text/javascript">
     $(document).ready(function () {
@@ -100,11 +101,11 @@
                 {
                     data: null,
                     className: "text-center",
-                    render: () => `
+                    render: (data, type, row) => `
                         <div class="flex justify-center gap-2">
-                            <button class="btn btn-xs bg-gray-200 text-gray-800 rounded-full hover:bg-gray-300">Detail</button>
-                            <button class="btn btn-xs bg-blue-500 text-white rounded-full hover:bg-blue-600">Edit</button>
-                            <button class="btn btn-xs bg-red-500 text-white rounded-full hover:bg-red-600">Hapus</button>
+                            <button class="btn btn-xs btn-outline border-gray-300 text-gray-700 rounded-full hover:bg-gray-50 btn-detail" data-id="${row.id}">Detail</button>
+                            <button class="btn btn-xs btn-outline border-gray-300 text-gray-700 rounded-full hover:bg-gray-50 btn-edit" data-id="${row.id}">Edit</button>
+                            <button class="btn btn-xs btn-outline border-red-300 text-red-600 rounded-full hover:bg-red-50 btn-delete" data-id="${row.id}">Delete</button>
                         </div>
                     `,
                     orderable: false,
@@ -133,5 +134,62 @@
                 $('#formTambahLokasi')[0].reset();
             });
         });
+
+        // Edit button handler
+        $('#lokasiTable').on('click', '.btn-edit', function () {
+            const id = $(this).data('id');
+            
+            $.get('@Url.Action("GetById", "Lokasi")', { id: id }, function (data) {
+                $('#modal-tambah input[name="id"]').val(data.id);
+                $('#modal-tambah input[name="usulan"]').val(data.usulan);
+                $('#modal-tambah input[name="alamat"]').val(data.alamat);
+                $('#modal-tambah input[name="statusLahan"]').val(data.statusLahan);
+                $('#modal-tambah input[name="pemilikLahan"]').val(data.pemilikLahan);
+                $('#modal-tambah input[name="luasLahan"]').val(data.luasLahan);
+                $('#modal-tambah select[name="statusUsulan"]').val(data.statusUsulan);
+                
+                // Open modal
+                $('#modal-tambah').prop('checked', true);
+            });
+        });
+
+        // Delete Button 
+        $('#lokasiTable').on('click', '.btn-delete', function () {
+            const id = $(this).data('id');
+            
+            Swal.fire({
+                title: 'Apakah Anda yakin?',
+                text: "Data yang dihapus tidak dapat dikembalikan!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#ef4444',
+                cancelButtonColor: '#6b7280',
+                confirmButtonText: 'Ya, Hapus!',
+                cancelButtonText: 'Batal'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.post('@Url.Action("Delete", "Lokasi")', { id: id }, function () {
+                        table.ajax.reload();
+                        Swal.fire(
+                            'Terhapus!',
+                            'Data berhasil dihapus.',
+                            'success'
+                        );
+                    }).fail(function () {
+                        Swal.fire(
+                            'Gagal!',
+                            'Terjadi kesalahan saat menghapus data.',
+                            'error'
+                        );
+                    });
+                }
+            });
+        });
+
+        // Detail button handler
+        $('#lokasiTable').on('click', '.btn-detail', function () {
+            const id = $(this).data('id');
+            console.log('Detail clicked for ID:', id);
+        });
     });
 </script>