diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js
index d7c2232..1d390a0 100644
--- a/muxplex/frontend/app.js
+++ b/muxplex/frontend/app.js
@@ -1444,6 +1444,7 @@ function bindStaticEventListeners() {
   // Settings dialog bindings
   on($('settings-btn'), 'click', openSettings);
   on($('settings-btn-expanded'), 'click', openSettings);
+  on($('settings-close-btn'), 'click', closeSettings);
   on($('settings-backdrop'), 'click', closeSettings);
   const settingsDialog = $('settings-dialog');
   if (settingsDialog) settingsDialog.addEventListener('cancel', closeSettings);
diff --git a/muxplex/frontend/index.html b/muxplex/frontend/index.html
index 55ec634..56ca3fb 100644
--- a/muxplex/frontend/index.html
+++ b/muxplex/frontend/index.html
@@ -78,6 +78,10 @@
   <!-- ── Settings ─────────────────────────────────────────────────────────────────────── -->
   <div id="settings-backdrop" class="settings-backdrop hidden"></div>
   <dialog id="settings-dialog" class="settings-dialog">
+    <div class="settings-dialog-header">
+      <h2 class="settings-dialog-title">Settings</h2>
+      <button id="settings-close-btn" class="settings-close-btn" aria-label="Close settings">&times;</button>
+    </div>
     <div class="settings-layout">
       <nav class="settings-tabs">
         <button class="settings-tab settings-tab--active" data-tab="display">Display</button>
diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css
index f986d94..4cc7a3f 100644
--- a/muxplex/frontend/style.css
+++ b/muxplex/frontend/style.css
@@ -934,15 +934,51 @@ body {
   padding: 0;
   overflow: hidden;
   margin: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .settings-dialog::backdrop {
   background: transparent;
+  pointer-events: none;  /* let clicks fall through to #settings-backdrop */
+}
+
+.settings-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.settings-dialog-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.settings-close-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  line-height: 1;
+}
+
+.settings-close-btn:hover {
+  color: var(--text);
+  background: var(--bg-surface);
 }
 
 .settings-layout {
   display: flex;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 .settings-tabs {
diff --git a/muxplex/tests/test_frontend_html.py b/muxplex/tests/test_frontend_html.py
index 8b8b672..007b045 100644
--- a/muxplex/tests/test_frontend_html.py
+++ b/muxplex/tests/test_frontend_html.py
@@ -1048,3 +1048,17 @@ def test_html_new_session_tab_controls() -> None:
     soup = _SOUP
     for id_ in ("setting-template", "setting-template-reset"):
         assert soup.find(id=id_), f"Missing element with id='{id_}'"
+
+
+def test_html_settings_close_btn_exists() -> None:
+    """settings-dialog must contain a #settings-close-btn button to dismiss the modal."""
+    soup = _SOUP
+    close_btn = soup.find(id="settings-close-btn")
+    assert close_btn is not None, "Missing #settings-close-btn inside settings dialog"
+    # Must be inside the settings dialog
+    dialog = soup.find(id="settings-dialog")
+    assert dialog is not None, "Missing #settings-dialog"
+    # Verify close button is a descendant of the dialog
+    assert dialog.find(id="settings-close-btn") is not None, (
+        "#settings-close-btn must be a descendant of #settings-dialog"
+    )