diff --git a/public/index.html b/public/index.html
index ca71948..ef3a645 100644
--- a/public/index.html
+++ b/public/index.html
@@ -229,10 +229,33 @@
         width: 100%;
         max-height: 90vh;
         overflow-y: auto;
+        position: relative;
+      }
+      .modal-close {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 32px;
+        height: 32px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        color: var(--muted);
+        font-size: 20px;
+        cursor: pointer;
+        border-radius: 8px;
+        transition: all 0.15s;
+      }
+      .modal-close:hover {
+        background: var(--surface2);
+        color: var(--text);
       }
       .modal h2 {
         font-size: 20px;
         margin-bottom: 24px;
+        padding-right: 40px;
       }
 
       /* Form */
@@ -781,8 +804,11 @@
 
       function openModal(html) {
         document.getElementById("modal-container").innerHTML = `
-    <div class="modal-overlay" onclick="if(event.target === this) closeModal()">
-      <div class="modal">${html}</div>
+    <div class="modal-overlay">
+      <div class="modal">
+        <button class="modal-close" onclick="closeModal()">✕</button>
+        ${html}
+      </div>
     </div>`;
         document.body.style.overflow = "hidden";
       }