diff --git a/src/app/templates/tenant_selection.html b/src/app/templates/tenant_selection.html
index 23f5371..7540360 100644
--- a/src/app/templates/tenant_selection.html
+++ b/src/app/templates/tenant_selection.html
@@ -119,10 +119,10 @@
                             <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#qrModal-{{ tenant.id }}">
                                 <i class="bi bi-qr-code"></i> QR
                             </button>
-                            <form method="POST" action="/tenant/{{ tenant.id }}/delete" class="d-inline" onsubmit="return confirmDelete('{{ tenant.name }}')">
-                                <button type="submit" class="btn btn-danger btn-sm">
-                                    <i class="bi bi-trash"></i> Delete
-                                </button>
+                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteTenantModal" data-tenant-id="{{ tenant.id }}" data-tenant-name="{{ tenant.name }}">
+                                <i class="bi bi-trash"></i> Delete
+                            </button>
+                            <form id="delete-tenant-form-{{ tenant.id }}" method="POST" action="/{{ tenant.id }}/delete" style="display: none;">
                             </form>
                         </div>
                     </div>
@@ -198,6 +198,35 @@
     </div>
     {% endfor %}
 
+    <!-- Delete Tenant Confirmation Modal -->
+    <div class="modal fade" id="deleteTenantModal" tabindex="-1" aria-labelledby="deleteTenantModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header bg-danger text-white">
+                    <h5 class="modal-title" id="deleteTenantModalLabel">
+                        <i class="bi bi-exclamation-triangle-fill me-2"></i>Confirm Tenant Deletion
+                    </h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p class="mb-3">Are you sure you want to delete the tenant <strong id="delete-tenant-name"></strong>?</p>
+                    <div class="alert alert-danger mb-0">
+                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                        <strong>Warning:</strong> This will permanently delete all products and data associated with this tenant. This action cannot be undone.
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        <i class="bi bi-x-circle me-1"></i>Cancel
+                    </button>
+                    <button type="button" class="btn btn-danger" id="confirm-delete-tenant-btn">
+                        <i class="bi bi-trash me-1"></i>Delete Tenant
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const reservedIds = ['admin', 'api', 'login', 'logout', 'arcontentfields', 'arinfo',
@@ -259,9 +288,27 @@
             searchInput.focus();
         });
 
-        // Delete confirmation
-        function confirmDelete(tenantName) {
-            return confirm(`Are you sure you want to delete the tenant "${tenantName}"?\n\nThis will permanently delete all products and data associated with this tenant.`);
+        // Delete tenant confirmation modal functionality
+        const deleteTenantModal = document.getElementById('deleteTenantModal');
+        if (deleteTenantModal) {
+            deleteTenantModal.addEventListener('show.bs.modal', function (event) {
+                // Button that triggered the modal
+                const button = event.relatedTarget;
+
+                // Extract tenant info from data attributes
+                const tenantId = button.getAttribute('data-tenant-id');
+                const tenantName = button.getAttribute('data-tenant-name');
+
+                // Update modal content
+                const modalTenantName = document.getElementById('delete-tenant-name');
+                modalTenantName.textContent = `"${tenantName}" (ID: ${tenantId})`;
+
+                // Setup the confirm button action
+                const confirmDeleteBtn = document.getElementById('confirm-delete-tenant-btn');
+                confirmDeleteBtn.onclick = function() {
+                    document.getElementById('delete-tenant-form-' + tenantId).submit();
+                };
+            });
         }
     </script>
 </body>