diff --git a/backend/resources/views/admin/templates/index.blade.php b/backend/resources/views/admin/templates/index.blade.php
index 696145a..a44c25d 100644
--- a/backend/resources/views/admin/templates/index.blade.php
+++ b/backend/resources/views/admin/templates/index.blade.php
@@ -62,7 +62,9 @@
                     <tbody>
                         @forelse($templates as $key => $template)
                             <tr>
-                                <td class="p-2 border border-gray-300 text-center">{{ $key + 1 }}</td>
+                                <td class="p-2 border border-gray-300 text-center">
+                                    {{ ($templates->currentPage() - 1) * $templates->perPage() + $key + 1 }}
+                                </td>
                                 <td class="p-2 border border-gray-300 truncate">{{ $template->nama_template }}</td>
                                 <td class="p-2 border border-gray-300 truncate">{{ $template->kategori->nama ?? '-' }}</td>
 
@@ -100,9 +102,13 @@
                                             class="inline" onsubmit="return confirm('Hapus template ini?')">
                                             @csrf
                                             @method('DELETE')
-                                            <button class="text-red-600 hover:underline flex items-center">
+                                            <button
+                                                class="text-red-600 hover:underline flex items-center btn-delete-template"
+                                                data-action="{{ route('templates.destroy', $template->id) }}"
+                                                data-name="{{ $template->nama_template }}">
                                                 <i class="bi bi-trash mr-1"></i> Hapus
                                             </button>
+
                                         </form>
                                     </div>
                                 </td>
@@ -118,6 +124,30 @@
             </div>
         </div>
 
+        <!-- Modal Konfirmasi Hapus Template -->
+        <div id="modalDeleteTemplate" class="fixed inset-0 hidden items-center justify-center z-50">
+            <div class="absolute inset-0 bg-black opacity-50" id="modalDeleteTemplateOverlay"></div>
+            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
+                <form id="deleteTemplateForm" method="POST">
+                    @csrf
+                    @method('DELETE')
+                    <div class="p-4 border-b">
+                        <h5 class="text-lg font-medium">Hapus Template</h5>
+                    </div>
+                    <div class="p-4">
+                        Apakah Anda yakin ingin menghapus template <strong id="deleteTemplateName">—</strong>?
+                    </div>
+                    <div class="p-4 border-t flex justify-end space-x-2">
+                        <button type="button" id="closeDeleteTemplateModal"
+                            class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
+                        <button type="submit" class="bg-red-600 text-white px-3 py-1 rounded">Ya, Hapus</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+
+
         <!-- Pagination -->
         @if ($templates->hasPages())
             <div class="p-4 flex justify-center">
@@ -377,6 +407,31 @@
                         }
                     });
                 });
+                // Modal Delete Template
+                const deleteTemplateModal = document.getElementById('modalDeleteTemplate');
+                const deleteTemplateOverlay = document.getElementById('modalDeleteTemplateOverlay');
+                const closeDeleteTemplateModal = document.getElementById('closeDeleteTemplateModal');
+                const deleteTemplateForm = document.getElementById('deleteTemplateForm');
+                const deleteTemplateName = document.getElementById('deleteTemplateName');
+
+                document.querySelectorAll('.btn-delete-template').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        e.preventDefault(); // cegah form langsung submit
+                        deleteTemplateForm.action = btn.dataset.action;
+                        deleteTemplateName.textContent = btn.dataset.name || 'template ini';
+                        deleteTemplateModal.classList.remove('hidden');
+                        deleteTemplateModal.classList.add('flex');
+                    });
+                });
+
+                const closeDeleteModalTemplate = () => {
+                    deleteTemplateModal.classList.add('hidden');
+                    deleteTemplateModal.classList.remove('flex');
+                };
+
+                closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
+                deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
+
             });
         </script>
     </div>