diff --git a/app/src/Settings.tsx b/app/src/Settings.tsx
index 3f3e07c..d9d1905 100644
--- a/app/src/Settings.tsx
+++ b/app/src/Settings.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { X } from "lucide-react";
 import { COLORS, FONT, ACCENTS } from "./theme";
 import { setConfig, restartDaemon } from "./socketBridge";
 import type { ConfigView, DaemonHealth } from "./socketBridge";
@@ -20,7 +21,13 @@ export function Settings({ config, health, onClose, onReload }: { config: Config
     <div onMouseDown={onClose} style={{ position: "fixed", inset: 0, zIndex: 2000, background: "#000A", display: "flex", alignItems: "center", justifyContent: "center" }}>
       <div ref={ref} tabIndex={-1} onMouseDown={(e) => e.stopPropagation()} onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Escape") onClose(); }}
         style={{ width: 520, maxHeight: "80vh", overflowY: "auto", background: COLORS.bgApp, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 14, padding: 24, color: COLORS.textPrimary, fontFamily: FONT.ui }}>
-        <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 16 }}>Settings</div>
+        <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
+          <span style={{ fontWeight: 700, fontSize: 16, flex: 1 }}>Settings</span>
+          <button onClick={onClose} aria-label="Close" title="Close (Esc)"
+            style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 26, height: 26, borderRadius: 6, background: "transparent", border: "none", color: COLORS.textMuted, cursor: "pointer" }}>
+            <X size={16} />
+          </button>
+        </div>
 
         <div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Terminal font</div>
         <select value={config.font_family} onChange={(e) => void setConfig({ font_family: e.target.value })}