diff --git a/static/js/detail-modal.js b/static/js/detail-modal.js
index ae60278..7a5d499 100644
--- a/static/js/detail-modal.js
+++ b/static/js/detail-modal.js
@@ -207,22 +207,37 @@ function closeDetailModal() {
     modal.classList.remove('active');
 }
 
-// Close modal when clicking outside
+// Initialize modal event listeners
 document.addEventListener('DOMContentLoaded', () => {
     const modal = document.getElementById('detail-modal');
+    const closeBtn = document.getElementById('modal-close-btn');
 
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
+    // Close button click
+    if (closeBtn) {
+        closeBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
             closeDetailModal();
-        }
-    });
+        });
+    }
 
-    // Close on escape key
+    // Click outside modal
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeDetailModal();
+            }
+        });
+    }
+
+    // Escape key
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && modal.classList.contains('active')) {
+        if (e.key === 'Escape' && modal && modal.classList.contains('active')) {
             closeDetailModal();
         }
     });
+
+    console.log('Detail modal initialized');
 });
 
 // Export for use in other modules
diff --git a/templates/index.html b/templates/index.html
index fbe1c52..8075e4e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -261,7 +261,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2>Capture Details</h2>
-                <button class="modal-close" onclick="closeDetailModal()">&times;</button>
+                <button id="modal-close-btn" class="modal-close">&times;</button>
             </div>
             <div class="modal-body" id="modal-body-content">
                 <!-- Content loaded dynamically -->