diff --git a/static/index.html b/static/index.html
index c87f98d..63a0380 100644
--- a/static/index.html
+++ b/static/index.html
@@ -9,6 +9,9 @@
 body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; background: #1e1e1e; color: #e0e0e0; }
 header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #333; background: #252525; }
 h1 { font-size: 1.5rem; }
+.header-left { display: flex; align-items: center; gap: 1rem; }
+.help-icon { cursor: pointer; font-size: 1.2rem; color: #0066cc; }
+.help-icon:hover { color: #0052a3; }
 .status-ok { color: #0f0; }
 .status-error { color: #f00; }
 .status-loading { color: #ff0; }
@@ -33,12 +36,21 @@ button:disabled { background: #444; cursor: not-allowed; }
 .attachments { margin-top: 1rem; padding: 0.5rem; background: #3a3a00; border-radius: 4px; }
 .loading { padding: 1rem; text-align: center; color: #999; }
 .error { padding: 1rem; background: #3a0000; border: 1px solid #600; border-radius: 4px; margin: 1rem; }
+.help-overlay { display: none; position: fixed; bottom: 1rem; right: 1rem; width: 425px; max-height: 500px; overflow-y: auto; background: #252525; border: 1px solid #444; border-radius: 8px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 1000; font-size: 0.85rem; }
+.help-overlay.visible { display: block; }
+.help-overlay h3 { margin-bottom: 0.5rem; color: #0066cc; }
+.help-overlay code { background: #2a2a2a; padding: 0.2rem 0.4rem; border-radius: 3px; color: #4ec9b0; }
+.help-overlay ul { list-style: none; margin-top: 0.5rem; }
+.help-overlay li { margin: 0.5rem 0; }
     </style>
 </head>
 <body>
     <div id="app">
         <header>
-            <h1>Zetviel</h1>
+            <div class="header-left">
+                <h1>Zetviel</h1>
+                <span class="help-icon" onclick="toggleHelp()" title="Help (?)">?</span>
+            </div>
             <div id="status" class="status-ok">●</div>
         </header>
 
@@ -51,6 +63,32 @@ button:disabled { background: #444; cursor: not-allowed; }
             <div id="thread-list" class="thread-list"></div>
             <div id="message-view" class="message-view"></div>
         </div>
+
+        <div id="help-overlay" class="help-overlay">
+            <h3>Notmuch Search Syntax</h3>
+            <ul>
+                <li><code>tag:inbox</code> - Messages with inbox tag</li>
+                <li><code>from:alice</code> - From alice</li>
+                <li><code>to:bob</code> - To bob</li>
+                <li><code>subject:meeting</code> - Subject contains "meeting"</li>
+                <li><code>date:today</code> - Messages from today</li>
+                <li><code>date:yesterday</code> - Messages from yesterday</li>
+                <li><code>date:7d..</code> - Last 7 days</li>
+                <li><code>tag:unread AND from:alice</code> - Combine with AND</li>
+                <li><code>tag:inbox OR tag:sent</code> - Combine with OR</li>
+                <li><code>NOT tag:spam</code> - Exclude spam</li>
+                <li><code>attachment:pdf</code> - Has PDF attachment</li>
+                <li><code>*</code> - All messages</li>
+            </ul>
+            <h3 style="margin-top: 1rem;">Keyboard Shortcuts</h3>
+            <ul>
+                <li><code>/</code> - Focus search</li>
+                <li><code>j</code> - Next thread</li>
+                <li><code>k</code> - Previous thread</li>
+                <li><code>t</code> - Toggle HTML/text</li>
+                <li><code>?</code> - Toggle this help</li>
+            </ul>
+        </div>
     </div>
     <script>
 let currentQuery = 'tag:inbox';
@@ -195,6 +233,11 @@ function toggleHtmlText() {
     }
 }
 
+function toggleHelp() {
+    const overlay = document.getElementById('help-overlay');
+    overlay.classList.toggle('visible');
+}
+
 function moveThread(direction) {
     if (threads.length === 0) return;
 
@@ -235,6 +278,9 @@ window.addEventListener('DOMContentLoaded', () => {
         } else if (e.key === 't') {
             e.preventDefault();
             toggleHtmlText();
+        } else if (e.key === '?') {
+            e.preventDefault();
+            toggleHelp();
         }
     });
 });
