diff --git a/static/js/app.js b/static/js/app.js
index ee4757e..36c915f 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,20 +1,14 @@
 function openModal() {
-    document.getElementById('modal-overlay').style.display = 'flex';
+    document.getElementById('modal-overlay').classList.add('open');
 }
 
-function closeModal(event) {
-    if (event && event.target !== document.getElementById('modal-overlay')) {
-        if (!event.target.classList.contains('modal-overlay')) return;
-    }
-    document.getElementById('modal-overlay').style.display = 'none';
+function closeModal() {
+    document.getElementById('modal-overlay').classList.remove('open');
     document.getElementById('modal-content').innerHTML = '';
 }
 
 document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape') {
-        document.getElementById('modal-overlay').style.display = 'none';
-        document.getElementById('modal-content').innerHTML = '';
-    }
+    if (e.key === 'Escape') closeModal();
 });
 
 document.body.addEventListener('htmx:afterSwap', function(evt) {
diff --git a/static/style.css b/static/style.css
index 0b90b47..6c2619c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -130,8 +130,13 @@ th { background: var(--surface); font-weight: 600; }
 .modal-overlay {
     position: fixed; top: 0; left: 0; right: 0; bottom: 0;
     background: rgba(0,0,0,0.7);
-    display: flex; align-items: center; justify-content: center;
     z-index: 1000;
+    display: none;
+}
+.modal-overlay.open {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .modal-content {
     background: var(--surface); border: 1px solid var(--border);
diff --git a/templates/base.html b/templates/base.html
index e5599d5..da7a601 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,7 +19,7 @@
     <main>
     {{block "content" .}}{{end}}
     </main>
-    <div id="modal-overlay" class="modal-overlay" onclick="closeModal(event)">
+    <div id="modal-overlay" class="modal-overlay" onclick="closeModal()">
         <div id="modal-content" class="modal-content" onclick="event.stopPropagation()"></div>
     </div>
     <script src="/static/js/app.js"></script>