diff --git a/assets/js/confirm-delete.js b/assets/js/confirm-delete.js
new file mode 100644
index 0000000..773fe11
--- /dev/null
+++ b/assets/js/confirm-delete.js
@@ -0,0 +1,94 @@
+// ── Confirm Delete Modal ─────────────────────────────────────────────────────
+(function () {
+  // Inject modal HTML into page
+  const modalHTML = `
+    <div id="confirmDeleteModal" style="display:none; position:fixed; inset:0; z-index:9999;
+      background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
+      align-items:center; justify-content:center;">
+      <div style="background:#fff; border-radius:16px; padding:32px 24px;
+        max-width:380px; width:90%; margin:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3);
+        text-align:center; font-family:inherit;">
+
+        <!-- Icon -->
+        <div style="width:56px; height:56px; background:#fee2e2; border-radius:50%;
+          display:flex; align-items:center; justify-content:center; margin:0 auto 16px;">
+          <svg width="28" height="28" fill="none" stroke="#dc2626" stroke-width="2"
+            viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7h6m-7 0a1 1 0 01-1-1V5a1 1 0 011-1h8a1 1 0 011 1v1a1 1 0 01-1 1H5z"/>
+          </svg>
+        </div>
+
+        <h3 style="font-size:18px; font-weight:700; color:#111827; margin:0 0 8px;">
+          Confirm Delete
+        </h3>
+        <p id="confirmDeleteMessage"
+          style="font-size:14px; color:#6b7280; margin:0 0 24px; line-height:1.5;">
+          Are you sure you want to delete this? This action cannot be undone.
+        </p>
+
+        <div style="display:flex; gap:12px;">
+          <button onclick="closeConfirmDelete()"
+            style="flex:1; padding:10px; border-radius:10px; border:1.5px solid #e5e7eb;
+              background:#fff; color:#374151; font-weight:600; font-size:14px;
+              cursor:pointer;">
+            No, Cancel
+          </button>
+          <button id="confirmDeleteBtn"
+            style="flex:1; padding:10px; border-radius:10px; border:none;
+              background:#dc2626; color:#fff; font-weight:600; font-size:14px;
+              cursor:pointer;">
+            Yes, Delete
+          </button>
+        </div>
+      </div>
+    </div>`;
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.body.insertAdjacentHTML("beforeend", modalHTML);
+  });
+})();
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Call this on any delete link/button.
+ * Usage:  onclick="return confirmDelete(this.href)"
+ *         onclick="return confirmDelete('path/to/delete?id=5')"
+ *         onclick="return confirmDelete(this.href, 'Delete this student?')"
+ */
+function confirmDelete(deleteUrl, message) {
+  var modal = document.getElementById("confirmDeleteModal");
+  var btn   = document.getElementById("confirmDeleteBtn");
+  var msg   = document.getElementById("confirmDeleteMessage");
+
+  if (message) msg.textContent = message;
+  else msg.textContent = "Are you sure you want to delete this? This action cannot be undone.";
+
+  modal.style.display = "flex";
+
+  // Remove old listener, add fresh one
+  var newBtn = btn.cloneNode(true);
+  btn.parentNode.replaceChild(newBtn, btn);
+
+  newBtn.addEventListener("click", function () {
+    window.location.href = deleteUrl;
+  });
+
+  return false; // prevent default link navigation
+}
+
+function closeConfirmDelete() {
+  document.getElementById("confirmDeleteModal").style.display = "none";
+}
+
+// Close on backdrop click
+document.addEventListener("click", function (e) {
+  var modal = document.getElementById("confirmDeleteModal");
+  if (modal && e.target === modal) closeConfirmDelete();
+});
+
+// Close on Escape key
+document.addEventListener("keydown", function (e) {
+  if (e.key === "Escape") closeConfirmDelete();
+});
\ No newline at end of file