diff --git a/README.md b/README.md
index c50536d..a16e21c 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ The extension ID is `BinaryOutlook.binary-markdown`. Installation leaves your de
 ## Features
 
 - **Visual, Source, and Split views:** semantic paragraphs and lists, preserved source for unchanged blocks, links, images, blockquotes, an Outline/Document rail, and an editable Markdown pane beside a read-only live preview.
-- **Formatting and tables:** Full or Simple toolbars, a permanent three-dot search across formatting and insertion commands, a `>>`/`<<` toolbar toggle with optional contextual tools, and the retained Insert workspace and Action Palette, HTML-backed underline, compact table controls with clickable row/column gutters and distinct text selection, horizontal scrolling for wide tables, and aligned or compact source formatting for edited tables.
+- **Formatting and tables:** Full or Simple toolbars, an 01md toggle to hide the entire bar for reading with optional chevrons and hover-only recovery, a three-dot search across formatting and insertion commands, a `>>`/`<<` toolbar toggle with optional contextual tools, and the retained Insert workspace and Action Palette, HTML-backed underline, compact table controls with clickable row/column gutters and distinct text selection, horizontal scrolling for wide tables, and aligned or compact source formatting for edited tables.
 - **Code and equations:** syntax highlighting, searchable language selection, labeled or icon-only code controls for copying and soft wrapping, a visible wrap notice, editable KaTeX source, and Mermaid diagrams. See [code block features](docs/editor-guide.md#-code-block-features).
 - **A configurable writing space:** themes, seven interface languages, full or capped column width, column alignment, and optional width guides.
 - **Find and Replace:** source-context results, selected replacements, and case, whole-word, or regular-expression matching with a shared undo history.
diff --git a/docs/editor-guide.md b/docs/editor-guide.md
index 6c65e81..7de48ce 100644
--- a/docs/editor-guide.md
+++ b/docs/editor-guide.md
@@ -6,9 +6,19 @@ Adapted from the inherited editor documentation. See [Acknowledgments](../ACKNOW
 
 The **Full** toolbar shows standard text formatting by default in VS Code and the desktop app. Choose **Simple** with `binary-markdown.toolbarMode` in VS Code Settings or **Toolbar** in desktop Preferences for compact history, view, and utility controls. Explicit `simple` and `full` preferences are retained. This default also applies to existing configurations without a stored toolbar preference; it is not limited to new installations.
 
-The three-dot **More toolbar actions** button is always available. Resizing keeps complete buttons in the toolbar and puts remaining actions under that menu, with a search field at the top. Typing searches the complete formatting, insertion, and view command catalog, including actions already visible in the toolbar. With an empty search, the menu shows the overflow actions, or the full catalog when all toolbar actions fit. Arrow Down enters the choices; use the arrow keys and `Home`/`End` on a choice, or press Enter in the search field to run the first enabled result. Escape closes the menu and returns focus to the three-dot button while retaining the editor selection. Changing toolbar mode keeps the document, selection, active equation input, and undo history.
+While the top bar is visible, the three-dot **More toolbar actions** button is always available. Resizing keeps complete buttons in the toolbar and puts remaining actions under that menu, with a search field at the top. Typing searches the complete formatting, insertion, and view command catalog, including actions already visible in the toolbar. With an empty search, the menu shows the overflow actions, or the full catalog when all toolbar actions fit. Arrow Down enters the choices; use the arrow keys and `Home`/`End` on a choice, or press Enter in the search field to run the first enabled result. Escape closes the menu and returns focus to the three-dot button while retaining the editor selection. Changing toolbar mode keeps the document, selection, active equation input, and undo history.
 
-The searchable Action Palette remains available through `Cmd+/`/`Ctrl+/` and the contextual strip's **All actions** ellipsis. Category filters and an action count help you browse descriptions, all six heading levels, insertion commands, Undo/Redo, and navigation/view actions. The toolbar toggle shows `<<` while the formatting row is expanded. Click it to collapse the row and enable **Contextual tools** for the current editor session; the button changes to `>>`. Selected prose then shows a small formatting strip where nearby space permits. The permanent three-dot command search remains available when there is no unobstructed space for the strip. Click `>>` to expand the row again and disable contextual tools; the saved Full/Simple preference stays intact.
+The searchable Action Palette remains available through `Cmd+/`/`Ctrl+/` and the contextual strip's **All actions** ellipsis. Category filters and an action count help you browse descriptions, all six heading levels, insertion commands, Undo/Redo, and navigation/view actions. The **Contextual tools** toggle shows `<<` while the formatting row is expanded. Click it to collapse the row and enable **Contextual tools** for the current editor session; the button changes to `>>`. Selected prose then shows a small formatting strip where nearby space permits. The three-dot command search in the visible top bar remains available when there is no unobstructed space for the strip. Click `>>` to expand the row again and disable contextual tools; the saved Full/Simple preference stays intact.
+
+### Hide the top bar for reading
+
+Click the **01md logo** at the far left, before Undo, to hide the entire top bar and any table controls docked to it. The bar releases its height; only the logo remains in the upper-left corner of the editor pane, with no button background or shadow, including on hover. Its accessible name changes to **Show top bar**. Click it again to restore the bar. This choice lasts for the current editor session, independently of Full/Simple mode and Contextual tools. A newly opened editor starts with the bar visible.
+
+In **Editor & Appearance**, choose `binary-markdown.toolbarToggleIcon` in VS Code Settings or **Top bar toggle icon** in desktop Preferences. The default is **01md logo**; choose **Double chevrons** for upward arrows to hide the bar and downward arrows to show it.
+
+Enable `binary-markdown.toolbarToggleOnHover` or **Show hidden top bar toggle on hover** for an unobstructed reading view. With the bar hidden, move the pointer near the editor pane’s upper-left corner to reveal the button. Keyboard focus also reveals it; Enter or Space toggles the bar. Touch devices keep the button visible. Hover-only visibility is off by default, and reduced-motion preferences disable the fade.
+
+Both settings are saved and update open editors immediately. Toggling the bar preserves document content, selection, active equation input, editing mode, and undo history. Existing keyboard shortcuts, including the Action Palette, remain available while the bar is hidden. Width indicators are a separate preference; turn off `binary-markdown.editorWidthIndicators` to remove their guide row as well.
 
 ## Editor views and document rail
 
@@ -422,6 +432,8 @@ Desktop **Preferences** uses the same Editor & Appearance, Writing Tools, Images
 | `binary-markdown.theme` | Editor theme (`github`, `sepia`, `night`, `dark`, `minimal`, `perplexity`, `things`) | `things` |
 | `binary-markdown.fontSize` | Base font size (px) | `16` |
 | `binary-markdown.toolbarMode` | Toolbar display mode (`full`, `simple`). Simple shows history, contextual tools, command search, and utility controls; search for formatting and insertion commands | `full` |
+| `binary-markdown.toolbarToggleIcon` | Top bar toggle icon: `logo` or `chevrons` | `logo` |
+| `binary-markdown.toolbarToggleOnHover` | Reveal the hidden bar’s toggle on hover or keyboard focus; always visible on touch devices | `false` |
 | `binary-markdown.editorWidthMode` | Visual editor column width: `default`, `full`, or `custom` | `default` |
 | `binary-markdown.editorMaxWidth` | Outer column cap in CSS pixels for Custom mode; integer 320–4000 | `860` |
 | `binary-markdown.editorAlignment` | Position the capped column at the `left`, `center`, or `right` of the pane | `center` |
diff --git a/electron/package.json b/electron/package.json
index b88b7e7..5915528 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -33,6 +33,10 @@
       "out/**/*"
     ],
     "extraResources": [
+      {
+        "from": "../media/icon.png",
+        "to": "media/icon.png"
+      },
       {
         "from": "../out/webview",
         "to": "out/webview",
diff --git a/electron/src/html-generator.ts b/electron/src/html-generator.ts
index 95305a9..855e053 100644
--- a/electron/src/html-generator.ts
+++ b/electron/src/html-generator.ts
@@ -19,6 +19,8 @@ interface ElectronEditorConfig {
     codeLanguageOrder?: string;
     codeBlockActionLabels?: boolean;
     toolbarMode: string;
+    toolbarToggleIcon?: string;
+    toolbarToggleOnHover?: boolean;
     tableToolbarPosition?: string;
     tableSourceFormat?: string;
     documentBaseUri: string;
@@ -98,7 +100,7 @@ export function generateEditorHtml(
     const vendorFileUri = (file: string) => fileUri(path.join(vendorDir, file));
 
     return `<!DOCTYPE html>
-<html lang="en" data-theme="${config.theme}" data-code-block-action-labels="${config.codeBlockActionLabels !== false}" data-editor-width-mode="${normalizeWidthMode(config.editorWidthMode)}" data-editor-max-width="${normalizeMaxWidth(config.editorMaxWidth)}" data-editor-alignment="${normalizeAlignment(config.editorAlignment)}" data-editor-width-indicators="${config.editorWidthIndicators !== false}" data-math-source-wrap="${config.mathSourceWrap === true}" data-math-source-position="${config.mathSourcePosition === 'below' ? 'below' : 'above'}" data-code-language-order="${config.codeLanguageOrder === 'a-z' || config.codeLanguageOrder === 'z-a' ? config.codeLanguageOrder : 'default'}" data-toolbar-mode="${config.toolbarMode}" data-table-toolbar-position="${normalize(config.tableToolbarPosition)}" data-table-source-format="${normalizeTableFormat(config.tableSourceFormat)}">
+<html lang="en" data-theme="${config.theme}" data-code-block-action-labels="${config.codeBlockActionLabels !== false}" data-editor-width-mode="${normalizeWidthMode(config.editorWidthMode)}" data-editor-max-width="${normalizeMaxWidth(config.editorMaxWidth)}" data-editor-alignment="${normalizeAlignment(config.editorAlignment)}" data-editor-width-indicators="${config.editorWidthIndicators !== false}" data-math-source-wrap="${config.mathSourceWrap === true}" data-math-source-position="${config.mathSourcePosition === 'below' ? 'below' : 'above'}" data-code-language-order="${config.codeLanguageOrder === 'a-z' || config.codeLanguageOrder === 'z-a' ? config.codeLanguageOrder : 'default'}" data-toolbar-mode="${config.toolbarMode}" data-toolbar-toggle-icon="${config.toolbarToggleIcon === 'chevrons' ? 'chevrons' : 'logo'}" data-toolbar-toggle-on-hover="${config.toolbarToggleOnHover === true}" data-table-toolbar-position="${normalize(config.tableToolbarPosition)}" data-table-source-format="${normalizeTableFormat(config.tableSourceFormat)}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -109,7 +111,7 @@ export function generateEditorHtml(
     </style>
 </head>
 <body>
-    ${generateEditorBodyHtml(config.webviewMessages, process.platform)}
+    ${generateEditorBodyHtml(config.webviewMessages, process.platform, { toolbarLogoUri: 'data:image/png;base64,' + fs.readFileSync(getResourcePath('media/icon.png')).toString('base64') })}
 
     <script src="${vendorFileUri('markdown-blocks.js')}"></script>
     <script src="${vendorFileUri('turndown.js')}"></script>
diff --git a/electron/src/main.ts b/electron/src/main.ts
index a3d61d9..68bc757 100644
--- a/electron/src/main.ts
+++ b/electron/src/main.ts
@@ -113,6 +113,8 @@ function createWindow(filePath?: string): BrowserWindow {
             codeLanguageOrder: settings.codeLanguageOrder,
             codeBlockActionLabels: settings.codeBlockActionLabels,
             toolbarMode: settings.toolbarMode,
+            toolbarToggleIcon: settings.toolbarToggleIcon,
+            toolbarToggleOnHover: settings.toolbarToggleOnHover,
             tableToolbarPosition: settings.tableToolbarPosition,
             tableSourceFormat: settings.tableSourceFormat,
             documentBaseUri: `file://${docDir}/`,
@@ -416,6 +418,21 @@ ipcMain.on('settings-save', async (event, key: string, value: unknown) => {
         }
         return;
     }
+    if (key === 'toolbarToggleIcon' || key === 'toolbarToggleOnHover') {
+        if (key === 'toolbarToggleIcon' ? value !== 'logo' && value !== 'chevrons' : typeof value !== 'boolean') return;
+        try {
+            if (key === 'toolbarToggleIcon') settingsManager.set(key, value as 'logo' | 'chevrons');
+            else settingsManager.set(key, value as boolean);
+        } catch {
+            settingsManager.refreshSetting(key, getI18nMessages().toolbarToggleSaveFailed);
+            return;
+        }
+        settingsManager.refreshSetting(key);
+        for (const [win] of windows) {
+            if (!win.isDestroyed()) win.webContents.send('host-message', { type: key, value });
+        }
+        return;
+    }
     if (key === 'toolbarMode') {
         if (value !== 'full' && value !== 'simple') return;
         try {
diff --git a/electron/src/settings-manager.ts b/electron/src/settings-manager.ts
index db18718..6113400 100644
--- a/electron/src/settings-manager.ts
+++ b/electron/src/settings-manager.ts
@@ -21,6 +21,8 @@ export interface ElectronSettings {
     codeLanguageOrder: 'default' | 'a-z' | 'z-a';
     codeBlockActionLabels: boolean;
     toolbarMode: string;
+    toolbarToggleIcon: 'logo' | 'chevrons';
+    toolbarToggleOnHover: boolean;
     tableToolbarPosition: string;
     tableSourceFormat: 'aligned' | 'compact';
     language: string;
@@ -43,6 +45,8 @@ const DEFAULTS: ElectronSettings = {
     codeLanguageOrder: 'default',
     codeBlockActionLabels: true,
     toolbarMode: 'full',
+    toolbarToggleIcon: 'logo',
+    toolbarToggleOnHover: false,
     tableToolbarPosition: 'auto',
     tableSourceFormat: 'aligned',
     language: 'default',
@@ -229,6 +233,18 @@ export class SettingsManager {
                         <option value="full" ${settings.toolbarMode === 'full' ? 'selected' : ''}>Full</option>
                     </select>
                 </div>
+                <div class="field">
+                    <label for="toolbarToggleIcon">${messages.toolbarToggleIconLabel}</label>
+                    <select id="toolbarToggleIcon" onchange="save('toolbarToggleIcon', this.value)">
+                        <option value="logo" ${settings.toolbarToggleIcon === 'logo' ? 'selected' : ''}>${messages.toolbarToggleLogo}</option>
+                        <option value="chevrons" ${settings.toolbarToggleIcon === 'chevrons' ? 'selected' : ''}>${messages.toolbarToggleChevrons}</option>
+                    </select>
+                </div>
+                <div class="field">
+                    <label for="toolbarToggleOnHover">${messages.toolbarToggleOnHoverLabel}</label>
+                    <input type="checkbox" id="toolbarToggleOnHover" ${settings.toolbarToggleOnHover ? 'checked' : ''} aria-describedby="toolbarToggleOnHoverHelp" onchange="save('toolbarToggleOnHover', this.checked)">
+                </div>
+                <p class="field-desc" id="toolbarToggleOnHoverHelp">${messages.toolbarToggleOnHoverHelp}</p>
                 <div class="field">
                     <label for="editorWidthMode">${messages.editorWidthLabel || 'Editor width'}</label>
                     <select id="editorWidthMode" onchange="save('editorWidthMode', this.value)">
diff --git a/package.json b/package.json
index 51f15a3..db921df 100644
--- a/package.json
+++ b/package.json
@@ -188,6 +188,26 @@
             "description": "%config.toolbarMode.description%",
             "order": 40
           },
+          "binary-markdown.toolbarToggleIcon": {
+            "type": "string",
+            "enum": [
+              "logo",
+              "chevrons"
+            ],
+            "default": "logo",
+            "description": "%config.toolbarToggleIcon.description%",
+            "enumDescriptions": [
+              "%config.toolbarToggleIcon.logo%",
+              "%config.toolbarToggleIcon.chevrons%"
+            ],
+            "order": 42
+          },
+          "binary-markdown.toolbarToggleOnHover": {
+            "type": "boolean",
+            "default": false,
+            "description": "%config.toolbarToggleOnHover.description%",
+            "order": 44
+          },
           "binary-markdown.editorWidthMode": {
             "type": "string",
             "enum": [
diff --git a/package.nls.es.json b/package.nls.es.json
index 9c40d09..4ce99dd 100644
--- a/package.nls.es.json
+++ b/package.nls.es.json
@@ -83,5 +83,9 @@
   "config.section.writing": "Herramientas de escritura",
   "config.section.images": "Imágenes",
   "config.section.export": "Exportación",
-  "config.section.advanced": "Avanzado"
+  "config.section.advanced": "Avanzado",
+  "config.toolbarToggleIcon.description": "Icono para ocultar o mostrar la barra superior.",
+  "config.toolbarToggleIcon.logo": "Usar el logotipo 01md.",
+  "config.toolbarToggleIcon.chevrons": "Usar flechas dobles hacia arriba para ocultar la barra y hacia abajo para mostrarla.",
+  "config.toolbarToggleOnHover.description": "Cuando la barra superior esté oculta, el botón aparecerá al pasar el puntero cerca de la esquina superior izquierda o al recibir el foco del teclado. En dispositivos táctiles siempre se muestra."
 }
diff --git a/package.nls.fr.json b/package.nls.fr.json
index b4355a9..b8581aa 100644
--- a/package.nls.fr.json
+++ b/package.nls.fr.json
@@ -83,5 +83,9 @@
   "config.section.writing": "Outils de rédaction",
   "config.section.images": "Images",
   "config.section.export": "Exportation",
-  "config.section.advanced": "Avancé"
+  "config.section.advanced": "Avancé",
+  "config.toolbarToggleIcon.description": "Icône utilisée pour masquer ou afficher la barre supérieure.",
+  "config.toolbarToggleIcon.logo": "Utiliser le logo 01md.",
+  "config.toolbarToggleIcon.chevrons": "Utiliser des doubles chevrons vers le haut pour masquer la barre et vers le bas pour l’afficher.",
+  "config.toolbarToggleOnHover.description": "Lorsque la barre supérieure est masquée, son bouton apparaît au survol près du coin supérieur gauche ou lorsqu’il reçoit le focus clavier. Il reste visible sur les appareils tactiles."
 }
diff --git a/package.nls.ja.json b/package.nls.ja.json
index e65bac9..b5b6259 100644
--- a/package.nls.ja.json
+++ b/package.nls.ja.json
@@ -83,5 +83,9 @@
   "config.section.writing": "編集ツール",
   "config.section.images": "画像",
   "config.section.export": "エクスポート",
-  "config.section.advanced": "詳細設定"
+  "config.section.advanced": "詳細設定",
+  "config.toolbarToggleIcon.description": "トップバーの表示・非表示を切り替えるアイコン。",
+  "config.toolbarToggleIcon.logo": "01md ロゴを使用します。",
+  "config.toolbarToggleIcon.chevrons": "非表示には上向き、表示には下向きの二重山形矢印を使用します。",
+  "config.toolbarToggleOnHover.description": "トップバーを隠したとき、左上付近にポインターを合わせるかキーボードでフォーカスするとボタンを表示します。タッチ端末では常に表示します。"
 }
diff --git a/package.nls.json b/package.nls.json
index 270d48d..83bbf29 100644
--- a/package.nls.json
+++ b/package.nls.json
@@ -83,5 +83,9 @@
   "config.section.writing": "Writing Tools",
   "config.section.images": "Images",
   "config.section.export": "Export",
-  "config.section.advanced": "Advanced"
+  "config.section.advanced": "Advanced",
+  "config.toolbarToggleIcon.description": "Icon used to hide or show the top bar.",
+  "config.toolbarToggleIcon.logo": "Use the 01md logo.",
+  "config.toolbarToggleIcon.chevrons": "Use double upward chevrons to hide the bar and downward chevrons to show it.",
+  "config.toolbarToggleOnHover.description": "When the top bar is hidden, reveal its button near the upper-left corner on hover or keyboard focus. Touch devices always show the button."
 }
diff --git a/package.nls.ko.json b/package.nls.ko.json
index 85a8843..91822e0 100644
--- a/package.nls.ko.json
+++ b/package.nls.ko.json
@@ -83,5 +83,9 @@
   "config.section.writing": "작성 도구",
   "config.section.images": "이미지",
   "config.section.export": "내보내기",
-  "config.section.advanced": "고급"
+  "config.section.advanced": "고급",
+  "config.toolbarToggleIcon.description": "상단 바를 숨기거나 표시하는 데 사용할 아이콘입니다.",
+  "config.toolbarToggleIcon.logo": "01md 로고를 사용합니다.",
+  "config.toolbarToggleIcon.chevrons": "숨기려면 위쪽 이중 화살표를, 표시하려면 아래쪽 이중 화살표를 사용합니다.",
+  "config.toolbarToggleOnHover.description": "상단 바를 숨겼을 때 왼쪽 위 모서리 근처에 마우스를 올리거나 키보드로 초점을 맞추면 버튼이 표시됩니다. 터치 기기에서는 항상 표시됩니다."
 }
diff --git a/package.nls.zh-cn.json b/package.nls.zh-cn.json
index 29502d6..00f38f0 100644
--- a/package.nls.zh-cn.json
+++ b/package.nls.zh-cn.json
@@ -83,5 +83,9 @@
   "config.section.writing": "写作工具",
   "config.section.images": "图片",
   "config.section.export": "导出",
-  "config.section.advanced": "高级"
+  "config.section.advanced": "高级",
+  "config.toolbarToggleIcon.description": "用于隐藏或显示顶部栏的图标。",
+  "config.toolbarToggleIcon.logo": "使用 01md 标志。",
+  "config.toolbarToggleIcon.chevrons": "使用双向上箭头隐藏顶部栏，双向下箭头显示顶部栏。",
+  "config.toolbarToggleOnHover.description": "顶部栏隐藏时，将指针移至左上角附近或通过键盘聚焦即可显示按钮。触摸设备始终显示按钮。"
 }
diff --git a/package.nls.zh-tw.json b/package.nls.zh-tw.json
index 30fc200..033ab3e 100644
--- a/package.nls.zh-tw.json
+++ b/package.nls.zh-tw.json
@@ -83,5 +83,9 @@
   "config.section.writing": "寫作工具",
   "config.section.images": "圖片",
   "config.section.export": "匯出",
-  "config.section.advanced": "進階"
+  "config.section.advanced": "進階",
+  "config.toolbarToggleIcon.description": "用於隱藏或顯示頂部列的圖示。",
+  "config.toolbarToggleIcon.logo": "使用 01md 標誌。",
+  "config.toolbarToggleIcon.chevrons": "使用雙向上箭頭隱藏頂部列，雙向下箭頭顯示頂部列。",
+  "config.toolbarToggleOnHover.description": "頂部列隱藏時，將游標移至左上角附近或透過鍵盤聚焦即可顯示按鈕。觸控裝置一律顯示按鈕。"
 }
diff --git a/src/editorProvider.ts b/src/editorProvider.ts
index 963cd41..270fe23 100644
--- a/src/editorProvider.ts
+++ b/src/editorProvider.ts
@@ -558,6 +558,8 @@ export class BinaryMarkdownEditorProvider implements vscode.CustomTextEditorProv
                         codeLanguageOrder: config.get<string>('codeLanguageOrder', 'default'),
                         codeBlockActionLabels: config.get<boolean>('codeBlockActionLabels', true),
                         toolbarMode: config.get<string>('toolbarMode', 'full'),
+                        toolbarToggleIcon: config.get<string>('toolbarToggleIcon', 'logo'),
+                        toolbarToggleOnHover: config.get<boolean>('toolbarToggleOnHover', false),
                         tableToolbarPosition: normalizeTablePosition(config.get('tableToolbarPosition')),
                         tableSourceFormat: vscode.workspace.getConfiguration('binary-markdown', document.uri).get('tableSourceFormat', 'aligned'),
                         renderGeneration,
@@ -780,6 +782,12 @@ export class BinaryMarkdownEditorProvider implements vscode.CustomTextEditorProv
                 void webviewPanel.webview.postMessage({ type: 'tableToolbarPosition', value:
                     normalizeTablePosition(vscode.workspace.getConfiguration('binary-markdown').get('tableToolbarPosition')) });
             }
+            const toolbarToggleChanged = ['toolbarToggleIcon', 'toolbarToggleOnHover'].some(key => e.affectsConfiguration('binary-markdown.' + key));
+            if (toolbarToggleChanged) {
+                const config = vscode.workspace.getConfiguration('binary-markdown');
+                void webviewPanel.webview.postMessage({ type: 'toolbarToggleIcon', value: config.get('toolbarToggleIcon', 'logo') });
+                void webviewPanel.webview.postMessage({ type: 'toolbarToggleOnHover', value: config.get('toolbarToggleOnHover', false) });
+            }
             const toolbarModeChanged = e.affectsConfiguration('binary-markdown.toolbarMode');
             const codeBlockActionLabelsChanged = e.affectsConfiguration('binary-markdown.codeBlockActionLabels');
             if (codeBlockActionLabelsChanged) {
@@ -820,7 +828,7 @@ export class BinaryMarkdownEditorProvider implements vscode.CustomTextEditorProv
             const editorSettings = ['fontSize', 'imageDefaultDir', 'forceRelativeImagePath', 'language',
                 'outlineStateScope', 'outlineDefaultOpen', 'outlineActiveColor', 'enableDebugLogging', 'math.backslashDelimiters'];
             const editorChanged = editorSettings.some(key => e.affectsConfiguration('binary-markdown.' + key));
-            if (e.affectsConfiguration('binary-markdown') && (editorChanged || (!exportChanged && !e.affectsConfiguration('binary-markdown.tableSourceFormat') && !positionChanged && !themeChanged && !toolbarModeChanged && !codeBlockActionLabelsChanged && !widthChanged && !languageOrderChanged && !mathSourcePositionChanged && !mathSourceWrapChanged))) {
+            if (e.affectsConfiguration('binary-markdown') && (editorChanged || (!exportChanged && !e.affectsConfiguration('binary-markdown.tableSourceFormat') && !positionChanged && !themeChanged && !toolbarModeChanged && !toolbarToggleChanged && !codeBlockActionLabelsChanged && !widthChanged && !languageOrderChanged && !mathSourcePositionChanged && !mathSourceWrapChanged))) {
                 clearTimeout(configurationRefresh);
                 configurationRefresh = setTimeout(() => {
                     configurationRefresh = undefined;
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index e77d318..8d20e06 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -194,6 +194,14 @@ export const webviewMessages = {
   editorWidthHelp: "Custom width: 320–4000 CSS pixels, including padding. Visual editor only; Source and exports keep their own layout.",
   editorWidthInvalid: "Choose a width mode and an integer from 320 to 4000 pixels.",
   editorWidthSaveFailed: "Could not save the editor width. The previous setting remains active.",
+  hideToolbar: "Hide top bar",
+  showToolbar: "Show top bar",
+  toolbarToggleIconLabel: "Top bar toggle icon",
+  toolbarToggleLogo: "01md logo",
+  toolbarToggleChevrons: "Double chevrons",
+  toolbarToggleOnHoverLabel: "Show hidden top bar toggle on hover",
+  toolbarToggleOnHoverHelp: "When the top bar is hidden, reveal its button near the upper-left corner on hover or keyboard focus. Touch devices always show the button.",
+  toolbarToggleSaveFailed: "Could not save the top bar toggle preference. The previous setting remains active.",
   toolbarModeSaveFailed: "Could not save the toolbar mode. The previous setting remains active.",
   tablePositionSaveFailed: "Could not save the table toolbar position. The previous setting remains active.",
   tableControls: "Table controls",
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index 8e1c025..0211003 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -194,6 +194,14 @@ export const webviewMessages = {
   editorWidthHelp: "Ancho personalizado: 320–4000 píxeles CSS, incluido el relleno. Solo el editor visual; el código fuente y las exportaciones conservan su diseño.",
   editorWidthInvalid: "Elija un modo de ancho y un número entero entre 320 y 4000 píxeles.",
   editorWidthSaveFailed: "No se pudo guardar el ancho del editor. Se mantiene la configuración anterior.",
+  hideToolbar: "Ocultar barra superior",
+  showToolbar: "Mostrar barra superior",
+  toolbarToggleIconLabel: "Icono para alternar la barra superior",
+  toolbarToggleLogo: "Logotipo 01md",
+  toolbarToggleChevrons: "Flechas dobles",
+  toolbarToggleOnHoverLabel: "Mostrar el botón de la barra oculta al pasar el puntero",
+  toolbarToggleOnHoverHelp: "Cuando la barra superior esté oculta, el botón aparecerá al pasar el puntero cerca de la esquina superior izquierda o al recibir el foco del teclado. En dispositivos táctiles siempre se muestra.",
+  toolbarToggleSaveFailed: "No se pudo guardar la preferencia del botón de la barra superior. Se mantiene la configuración anterior.",
   toolbarModeSaveFailed: "No se pudo guardar el modo de la barra de herramientas. Se mantiene la configuración anterior.",
   tablePositionSaveFailed: "No se pudo guardar la posición de la barra de herramientas de tabla. Se mantiene la configuración anterior.",
   tableControls: "Controles de tabla",
diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts
index 4e4a74f..156732f 100644
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -194,6 +194,14 @@ export const webviewMessages = {
   editorWidthHelp: "Largeur personnalisée : 320–4000 pixels CSS, marges intérieures comprises. Éditeur visuel uniquement ; le mode source et les exports conservent leur mise en page.",
   editorWidthInvalid: "Choisissez un mode de largeur et un entier de 320 à 4000 pixels.",
   editorWidthSaveFailed: "Impossible d’enregistrer la largeur de l’éditeur. Le réglage précédent reste actif.",
+  hideToolbar: "Masquer la barre supérieure",
+  showToolbar: "Afficher la barre supérieure",
+  toolbarToggleIconLabel: "Icône du bouton de la barre supérieure",
+  toolbarToggleLogo: "Logo 01md",
+  toolbarToggleChevrons: "Doubles chevrons",
+  toolbarToggleOnHoverLabel: "Afficher le bouton de la barre masquée au survol",
+  toolbarToggleOnHoverHelp: "Lorsque la barre supérieure est masquée, son bouton apparaît au survol près du coin supérieur gauche ou lorsqu’il reçoit le focus clavier. Il reste visible sur les appareils tactiles.",
+  toolbarToggleSaveFailed: "Impossible d’enregistrer la préférence du bouton de la barre supérieure. Le réglage précédent reste actif.",
   toolbarModeSaveFailed: "Impossible d’enregistrer le mode de la barre d’outils. Le réglage précédent reste actif.",
   tablePositionSaveFailed: "Impossible d’enregistrer la position de la barre d’outils du tableau. Le réglage précédent reste actif.",
   tableControls: "Outils de tableau",
diff --git a/src/i18n/locales/ja.ts b/src/i18n/locales/ja.ts
index f1ae3a7..97d3aa6 100644
--- a/src/i18n/locales/ja.ts
+++ b/src/i18n/locales/ja.ts
@@ -194,6 +194,14 @@ export const webviewMessages = {
   editorWidthHelp: "カスタム幅：余白を含めて320～4000 CSSピクセル。ビジュアルエディターのみ。ソースとエクスポートのレイアウトは変わりません。",
   editorWidthInvalid: "幅のモードと320～4000の整数を指定してください。",
   editorWidthSaveFailed: "エディターの幅を保存できませんでした。以前の設定が引き続き使用されます。",
+  hideToolbar: "トップバーを隠す",
+  showToolbar: "トップバーを表示",
+  toolbarToggleIconLabel: "トップバー切り替えアイコン",
+  toolbarToggleLogo: "01md ロゴ",
+  toolbarToggleChevrons: "二重山形矢印",
+  toolbarToggleOnHoverLabel: "トップバーを隠したときにホバーでボタンを表示",
+  toolbarToggleOnHoverHelp: "トップバーを隠したとき、左上付近にポインターを合わせるかキーボードでフォーカスするとボタンを表示します。タッチ端末では常に表示します。",
+  toolbarToggleSaveFailed: "トップバーの切り替え設定を保存できませんでした。以前の設定が引き続き使用されます。",
   toolbarModeSaveFailed: "ツールバーのモードを保存できませんでした。以前の設定が引き続き使用されます。",
   tablePositionSaveFailed: "テーブルツールバーの位置を保存できませんでした。以前の設定が引き続き使用されます。",
   tableControls: "表の操作",
diff --git a/src/i18n/locales/ko.ts b/src/i18n/locales/ko.ts
index c84c989..00fd4f8 100644
--- a/src/i18n/locales/ko.ts
+++ b/src/i18n/locales/ko.ts
@@ -194,6 +194,14 @@ export const webviewMessages = {
   editorWidthHelp: "사용자 지정 너비: 안쪽 여백을 포함한 320–4000 CSS 픽셀. 시각적 편집기에만 적용되며 소스와 내보내기의 레이아웃은 유지됩니다.",
   editorWidthInvalid: "너비 모드를 선택하고 320에서 4000 사이의 정수를 입력하세요.",
   editorWidthSaveFailed: "편집기 너비를 저장하지 못했습니다. 이전 설정이 계속 적용됩니다.",
+  hideToolbar: "상단 바 숨기기",
+  showToolbar: "상단 바 표시",
+  toolbarToggleIconLabel: "상단 바 전환 아이콘",
+  toolbarToggleLogo: "01md 로고",
+  toolbarToggleChevrons: "이중 화살표",
+  toolbarToggleOnHoverLabel: "상단 바를 숨긴 상태에서 마우스를 올리면 전환 버튼 표시",
+  toolbarToggleOnHoverHelp: "상단 바를 숨겼을 때 왼쪽 위 모서리 근처에 마우스를 올리거나 키보드로 초점을 맞추면 버튼이 표시됩니다. 터치 기기에서는 항상 표시됩니다.",
+  toolbarToggleSaveFailed: "상단 바 전환 설정을 저장하지 못했습니다. 이전 설정이 계속 적용됩니다.",
   toolbarModeSaveFailed: "도구 모음 모드를 저장하지 못했습니다. 이전 설정이 계속 적용됩니다.",
   tablePositionSaveFailed: "표 도구 모음 위치를 저장하지 못했습니다. 이전 설정이 계속 적용됩니다.",
   tableControls: "표 도구",
diff --git a/src/i18n/locales/zh-cn.ts b/src/i18n/locales/zh-cn.ts
index 761f2ec..af910d5 100644
--- a/src/i18n/locales/zh-cn.ts
+++ b/src/i18n/locales/zh-cn.ts
@@ -194,6 +194,14 @@ export const webviewMessages = {
   editorWidthHelp: "自定义宽度：320–4000 CSS 像素，包含内边距。仅适用于可视化编辑器；源码和导出保持各自的布局。",
   editorWidthInvalid: "请选择宽度模式，并输入 320 到 4000 之间的整数。",
   editorWidthSaveFailed: "无法保存编辑器宽度。将继续使用之前的设置。",
+  hideToolbar: "隐藏顶部栏",
+  showToolbar: "显示顶部栏",
+  toolbarToggleIconLabel: "顶部栏切换图标",
+  toolbarToggleLogo: "01md 标志",
+  toolbarToggleChevrons: "双箭头",
+  toolbarToggleOnHoverLabel: "顶部栏隐藏时悬停显示切换按钮",
+  toolbarToggleOnHoverHelp: "顶部栏隐藏时，将指针移至左上角附近或通过键盘聚焦即可显示按钮。触摸设备始终显示按钮。",
+  toolbarToggleSaveFailed: "无法保存顶部栏切换设置。将继续使用之前的设置。",
   toolbarModeSaveFailed: "无法保存工具栏模式。将继续使用之前的设置。",
   tablePositionSaveFailed: "无法保存表格工具栏的位置。将继续使用之前的设置。",
   tableControls: "表格操作",
diff --git a/src/i18n/locales/zh-tw.ts b/src/i18n/locales/zh-tw.ts
index 2300c4b..e4bf484 100644
--- a/src/i18n/locales/zh-tw.ts
+++ b/src/i18n/locales/zh-tw.ts
@@ -194,6 +194,14 @@ export const webviewMessages = {
   editorWidthHelp: "自訂寬度：320–4000 CSS 像素，包含內距。僅適用於視覺化編輯器；原始碼和匯出保持各自的版面配置。",
   editorWidthInvalid: "請選擇寬度模式，並輸入 320 到 4000 之間的整數。",
   editorWidthSaveFailed: "無法儲存編輯器寬度。將繼續使用先前的設定。",
+  hideToolbar: "隱藏頂部列",
+  showToolbar: "顯示頂部列",
+  toolbarToggleIconLabel: "頂部列切換圖示",
+  toolbarToggleLogo: "01md 標誌",
+  toolbarToggleChevrons: "雙箭頭",
+  toolbarToggleOnHoverLabel: "頂部列隱藏時以懸停顯示切換按鈕",
+  toolbarToggleOnHoverHelp: "頂部列隱藏時，將游標移至左上角附近或透過鍵盤聚焦即可顯示按鈕。觸控裝置一律顯示按鈕。",
+  toolbarToggleSaveFailed: "無法儲存頂部列切換設定。將繼續使用先前的設定。",
   toolbarModeSaveFailed: "無法儲存工具列模式。將繼續使用先前的設定。",
   tablePositionSaveFailed: "無法儲存表格工具列的位置。將繼續使用先前的設定。",
   tableControls: "表格操作",
diff --git a/src/i18n/messages.ts b/src/i18n/messages.ts
index 94bb8d6..b728ed4 100644
--- a/src/i18n/messages.ts
+++ b/src/i18n/messages.ts
@@ -46,6 +46,15 @@ export interface Messages {
 }
 
 export interface WebviewMessages {
+  hideToolbar: string;
+  showToolbar: string;
+  toolbarToggleIconLabel: string;
+  toolbarToggleLogo: string;
+  toolbarToggleChevrons: string;
+  toolbarToggleOnHoverLabel: string;
+  toolbarToggleOnHoverHelp: string;
+  toolbarToggleSaveFailed: string;
+
   settingsEditor: string;
   settingsOutline: string;
   settingsWriting: string;
diff --git a/src/shared/editor-body-html.js b/src/shared/editor-body-html.js
index 845a6a9..c3a9b82 100644
--- a/src/shared/editor-body-html.js
+++ b/src/shared/editor-body-html.js
@@ -5,7 +5,7 @@
  *
  * @param {Record<string, string>} messages - Localized interface messages.
  * @param {string} platform - process.platform ('darwin' | 'win32' | 'linux')
- * @param {{ outlineOpen?: boolean, exportEnabled?: boolean, settingsEnabled?: boolean, hostEditor?: 'vscode' }} [options] - editor UI state
+ * @param {{ outlineOpen?: boolean, exportEnabled?: boolean, settingsEnabled?: boolean, hostEditor?: 'vscode', toolbarLogoUri?: string }} [options] - editor UI state
  * @returns {string} HTML for <div class="container">...</div>.
  */
 function generateEditorBodyHtml(messages, platform, options) {
@@ -62,6 +62,12 @@ function generateEditorBodyHtml(messages, platform, options) {
         </aside>
         <main class="editor-container">
             <div class="toolbar" id="toolbar">
+                <div class="toolbar-visibility-control">
+                    <button type="button" id="toolbarVisibilityToggle" title="${m('hideToolbar')}" aria-label="${m('hideToolbar')}" aria-expanded="true" aria-controls="toolbar">
+                        <span class="toolbar-toggle-logo" aria-hidden="true">${options?.toolbarLogoUri ? `<img src="${options.toolbarLogoUri}" alt="" draggable="false">` : '01md'}</span>
+                        <svg class="toolbar-toggle-arrows" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 11 6-6 6 6m-12 8 6-6 6 6"/></svg>
+                    </button>
+                </div>
                 <div class="toolbar-fixed toolbar-fixed--left">
                     <button data-action="openOutline" class="${openButtonClass}" id="openSidebarBtn" title="${m('openOutline')}"></button>
                     <div class="toolbar-group" data-group="history">
diff --git a/src/shared/settings-provider.ts b/src/shared/settings-provider.ts
index cbf8865..8810734 100644
--- a/src/shared/settings-provider.ts
+++ b/src/shared/settings-provider.ts
@@ -19,6 +19,8 @@ export interface EditorSettings {
     codeLanguageOrder: 'default' | 'a-z' | 'z-a';
     codeBlockActionLabels: boolean;
     toolbarMode: 'full' | 'simple';
+    toolbarToggleIcon: 'logo' | 'chevrons';
+    toolbarToggleOnHover: boolean;
     tableToolbarPosition: TableToolbarPosition;
     tableSourceFormat: 'aligned' | 'compact';
     language: 'default' | 'en' | 'ja' | 'zh-TW' | 'zh-CN' | 'ko' | 'es' | 'fr';
@@ -39,6 +41,8 @@ export const DEFAULT_SETTINGS: EditorSettings = {
     codeLanguageOrder: 'default',
     codeBlockActionLabels: true,
     toolbarMode: 'full',
+    toolbarToggleIcon: 'logo',
+    toolbarToggleOnHover: false,
     tableToolbarPosition: 'auto',
     tableSourceFormat: 'aligned',
     language: 'default',
diff --git a/src/shared/vscode-settings-provider.ts b/src/shared/vscode-settings-provider.ts
index bb67686..59e67e3 100644
--- a/src/shared/vscode-settings-provider.ts
+++ b/src/shared/vscode-settings-provider.ts
@@ -26,6 +26,8 @@ export class VSCodeSettingsProvider implements SettingsProvider {
             codeLanguageOrder: this.get('codeLanguageOrder'),
             codeBlockActionLabels: this.get('codeBlockActionLabels'),
             toolbarMode: this.get('toolbarMode'),
+            toolbarToggleIcon: this.get('toolbarToggleIcon'),
+            toolbarToggleOnHover: this.get('toolbarToggleOnHover'),
             tableToolbarPosition: this.get('tableToolbarPosition'),
             tableSourceFormat: this.get('tableSourceFormat'),
             language: this.get('language'),
diff --git a/src/webview/editor/core/host.js b/src/webview/editor/core/host.js
index f2791dc..1c1daab 100644
--- a/src/webview/editor/core/host.js
+++ b/src/webview/editor/core/host.js
@@ -7,6 +7,14 @@ function createHost(dependencies) {
             return;
         initializeControlsDone = true;
         dependencies.host.onMessage(function (message) {
+            if (message.type === 'toolbarToggleIcon') {
+                document.documentElement.dataset.toolbarToggleIcon = message.value === 'chevrons' ? 'chevrons' : 'logo';
+                return;
+            }
+            if (message.type === 'toolbarToggleOnHover') {
+                document.documentElement.dataset.toolbarToggleOnHover = String(message.value === true);
+                return;
+            }
             if (message.type === 'codeBlockActionLabels') {
                 if (typeof message.value !== 'boolean')
                     return;
diff --git a/src/webview/editor/ui/chrome.js b/src/webview/editor/ui/chrome.js
index 5348011..f429217 100644
--- a/src/webview/editor/ui/chrome.js
+++ b/src/webview/editor/ui/chrome.js
@@ -1,6 +1,32 @@
 'use strict';
 // Construction defines capabilities; bootstrap controls the original initialization order.
 function createChrome(dependencies) {
+    function toggleToolbarVisibility() {
+        const root = document.documentElement;
+        const collapsed = root.dataset.toolbarCollapsed !== 'true';
+        const button = document.getElementById('toolbarVisibilityToggle');
+        const insertMenu = document.getElementById('insertMenu');
+        const active = document.activeElement;
+        const focusWillHide = active !== button && (dependencies.toolbar.contains(active) || insertMenu?.contains(active));
+        closeToolbarOverflow(false);
+        if (insertMenu && !insertMenu.hidden)
+            dependencies.closeInsertMenu(false);
+        // Let detached menus close and relocate focus before their anchors disappear.
+        if (collapsed)
+            dependencies.toolbar.dispatchEvent(new CustomEvent('toolbar-will-hide'));
+        root.dataset.toolbarCollapsed = String(collapsed);
+        const label = collapsed ? dependencies.i18n.showToolbar : dependencies.i18n.hideToolbar;
+        button.title = label;
+        button.setAttribute('aria-label', label);
+        button.setAttribute('aria-expanded', String(!collapsed));
+        // Restoring a menu's document selection can also move browser focus.
+        if (active === button || (collapsed && focusWillHide))
+            button.focus({ preventScroll: true });
+        // Keep the editor DOM, active input and undo snapshots untouched.
+        dependencies.tableControls.schedule();
+        dependencies.workspaceUi?.refresh();
+        scheduleToolbarLayout();
+    }
     let widthGuide, widthBounds, widthExplanation, outlineHeadings, activeOutlineIndex, outlineScrollFrame, LUCIDE_ICONS, toolbarInner, toolbarMore, toolbarOverflow, toolbarOverflowItems, toolbarCommandSearch, toolbarCommandResults, toolbarMenuRange, toolbarMenuRevision, toolbarMenuSourceSelection, toolbarActions, toolbarLayoutFrame, isSourceMode, isSplitMode, splitRenderTimer, visualModeCursor, sourceModeSelection, openSidebarBtn, closeSidebarBtn, sidebarResizer, imageDirSettingsBtn, extensionSettingsBtn, isResizing, startX, startWidth;
     function updateWidthIndicators() {
         if (!widthGuide)
@@ -168,6 +194,9 @@ function createChrome(dependencies) {
     }
     function layoutToolbarActions() {
         toolbarLayoutFrame = 0;
+        // Measuring hidden actions would move everything into the overflow menu.
+        if (document.documentElement.dataset.toolbarCollapsed === 'true')
+            return;
         const active = document.activeElement;
         const focusedAction = toolbarActions.find(item => item.button === active);
         const wasOpen = !toolbarOverflow.hidden;
@@ -725,6 +754,12 @@ function createChrome(dependencies) {
         (toolbarMenuSourceSelection = null);
         (toolbarActions = []);
         (toolbarLayoutFrame = 0);
+        const visibilityToggle = document.getElementById('toolbarVisibilityToggle');
+        if (visibilityToggle) {
+            // Pointer activation must retain prose/source selection and equation input.
+            visibilityToggle.addEventListener('mousedown', event => event.preventDefault());
+            visibilityToggle.addEventListener('click', toggleToolbarVisibility);
+        }
         if (toolbarMore && toolbarOverflow) {
             dependencies.toolbar.querySelectorAll('button[data-action]').forEach(function (button) {
                 const home = document.createComment('toolbar action');
diff --git a/src/webview/export-ui.js b/src/webview/export-ui.js
index 39da122..2e1f2df 100644
--- a/src/webview/export-ui.js
+++ b/src/webview/export-ui.js
@@ -205,7 +205,14 @@
             closeMenu(true);
         }
     });
+    document.getElementById('toolbar')?.addEventListener('toolbar-will-hide', () => {
+        if (menu.hidden) return;
+        const focused = menu.contains(document.activeElement);
+        closeMenu(false);
+        if (focused) document.getElementById('toolbarVisibilityToggle')?.focus({ preventScroll: true });
+    });
     document.addEventListener('mousedown', event => {
+        if (event.target.closest('#toolbarVisibilityToggle')) return;
         if (!menu.hidden && !menu.contains(event.target) && !button.contains(event.target)) closeMenu(false);
     });
     window.addEventListener('resize', () => { if (!menu.hidden) positionMenu(); });
diff --git a/src/webview/styles.css b/src/webview/styles.css
index 7578212..0068317 100644
--- a/src/webview/styles.css
+++ b/src/webview/styles.css
@@ -304,7 +304,7 @@ body {
     gap: 2px;
 }
 .toolbar-fixed--left {
-    padding-left: 12px;
+    padding-left: 4px;
 }
 .toolbar-fixed--right {
     padding-right: 12px;
@@ -409,6 +409,30 @@ body {
 /* Legacy fill-based icons (e.g. VS Code logo) */
 .toolbar button svg:not([fill="none"]) { fill: currentColor; }
 
+/* ===== Top bar visibility ===== */
+.toolbar-visibility-control { flex: 0 0 40px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
+.toolbar #toolbarVisibilityToggle { width: 32px; height: 32px; padding: 4px; background: transparent; box-shadow: none; }
+.toolbar-toggle-logo { display: flex; align-items: center; font-size: 11px; font-weight: 700; }
+.toolbar-toggle-logo img { width: 28px; height: 28px; object-fit: contain; }
+.toolbar #toolbarVisibilityToggle .toolbar-toggle-arrows { display: none; }
+[data-toolbar-toggle-icon="chevrons"] .toolbar-toggle-logo { display: none; }
+[data-toolbar-toggle-icon="chevrons"] .toolbar #toolbarVisibilityToggle .toolbar-toggle-arrows { display: block; }
+#toolbarVisibilityToggle:focus-visible { outline: 2px solid var(--link-color); outline-offset: -2px; }
+/* Keep one recoverable control without reserving a row above the document. */
+[data-toolbar-collapsed="true"] .toolbar { position: relative; height: 0; min-height: 0; flex: 0 0 0; border: 0; overflow: visible; }
+[data-toolbar-collapsed="true"] .toolbar > :not(.toolbar-visibility-control),
+[data-toolbar-collapsed="true"] .table-toolbar-row { display: none; }
+[data-toolbar-collapsed="true"] .toolbar-visibility-control { position: absolute; top: 0; left: 0; width: 40px; height: 40px; z-index: 100; }
+[data-toolbar-collapsed="true"] .toolbar-toggle-arrows { transform: rotate(180deg); }
+@media (hover: hover) and (pointer: fine) {
+    [data-toolbar-collapsed="true"][data-toolbar-toggle-on-hover="true"] #toolbarVisibilityToggle { opacity: 0; transition: opacity 120ms ease; }
+    [data-toolbar-collapsed="true"][data-toolbar-toggle-on-hover="true"] .toolbar-visibility-control:hover #toolbarVisibilityToggle,
+    [data-toolbar-collapsed="true"][data-toolbar-toggle-on-hover="true"] .toolbar-visibility-control:focus-within #toolbarVisibilityToggle { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-toolbar-collapsed="true"][data-toolbar-toggle-on-hover="true"] #toolbarVisibilityToggle { transition: none; }
+}
+
 /* ===== Simple Toolbar Mode ===== */
 [data-toolbar-mode="simple"] .toolbar {
     background: transparent;
diff --git a/src/webview/table-toolbar.js b/src/webview/table-toolbar.js
index e1973f1..df137ec 100644
--- a/src/webview/table-toolbar.js
+++ b/src/webview/table-toolbar.js
@@ -359,7 +359,8 @@
             // Use the utilities' natural width even when their own overflow hides them.
             // Otherwise the two toolbars can repeatedly take space from each other.
             const fixed = Number(header.dataset.utilityWidth) || [...header.querySelectorAll('.toolbar-fixed')].reduce((total, node) => total + node.getBoundingClientRect().width, 0);
-            return Math.max(28, header.clientWidth - fixed - 12);
+            const visibilityWidth = header.querySelector('.toolbar-visibility-control')?.getBoundingClientRect().width || 0;
+            return Math.max(28, header.clientWidth - fixed - visibilityWidth - 12);
         }
         function renderGutters(bounds, rect) {
             const left = rect.left - 32, top = rect.top - 28;
@@ -444,6 +445,8 @@
         }
         function render() {
             renderScrollHints();
+            const toolbarCollapsed = document.documentElement.dataset.toolbarCollapsed === 'true';
+            if (toolbarCollapsed && (current === 'top-bar' || preference === 'top-bar')) return hide();
             if (valid()) {
                 const bounds = wrapper.getBoundingClientRect(), rect = table.getBoundingClientRect(), selected = cell.getBoundingClientRect();
                 document.documentElement.style.setProperty('--table-inspector-height', sizes[0].getBoundingClientRect().height + 'px');
@@ -503,6 +506,7 @@
             }
             current = next.placement;
             if (current === 'hidden') return hide();
+            if (toolbarCollapsed && current === 'top-bar') return hide();
             updateDockHost(current === 'top-bar');
             controls.dataset.placement = current;
             controls.dataset.vertical = String(Boolean(next.vertical));
@@ -678,8 +682,15 @@
         });
         listen(controls, 'pointerenter', () => { hovering = true; });
         listen(controls, 'pointerleave', () => { hovering = false; schedule(); });
+        listen(header, 'toolbar-will-hide', () => {
+            if (current !== 'top-bar') return;
+            if (owns(document.activeElement)) document.getElementById('toolbarVisibilityToggle')?.focus({ preventScroll: true });
+            hide();
+        });
         listen(document, 'pointerdown', event => {
             pointerDown = owns(event.target);
+            // The visibility action handles focus before hiding this dock and its menus.
+            if (current === 'top-bar' && event.target.closest('#toolbarVisibilityToggle')) return;
             if (!pointerDown) { closeMenus(); if (!editor.contains(event.target) && !header.contains(event.target)) clear(); }
         }, true);
         listen(document, 'pointerup', () => { pointerDown = false; schedule(); }, true);
diff --git a/src/webviewContent.ts b/src/webviewContent.ts
index 09d3f37..32e6e62 100644
--- a/src/webviewContent.ts
+++ b/src/webviewContent.ts
@@ -33,6 +33,8 @@ interface EditorConfig {
     codeLanguageOrder?: string;
     codeBlockActionLabels?: boolean;
     toolbarMode?: string;
+    toolbarToggleIcon?: string;
+    toolbarToggleOnHover?: boolean;
     tableToolbarPosition?: string;
     tableSourceFormat?: string;
     documentBaseUri?: string;
@@ -103,6 +105,8 @@ export function getWebviewContent(
         mathSourceWrap: config?.mathSourceWrap === true,
         mathSourcePosition: config?.mathSourcePosition === 'below' ? 'below' : 'above',
         toolbarMode: config?.toolbarMode ?? 'full',
+        toolbarToggleIcon: config?.toolbarToggleIcon === 'chevrons' ? 'chevrons' : 'logo',
+        toolbarToggleOnHover: config?.toolbarToggleOnHover === true,
         tableToolbarPosition: normalizeTablePosition(config?.tableToolbarPosition),
         tableSourceFormat: normalizeTableFormat(config?.tableSourceFormat),
         documentBaseUri: config?.documentBaseUri ?? '',
@@ -155,7 +159,7 @@ export function getWebviewContent(
     });
 
     return `<!DOCTYPE html>
-<html lang="en" data-theme="${safeConfig.theme}" data-code-block-action-labels="${safeConfig.codeBlockActionLabels}" data-editor-width-mode="${safeConfig.editorWidthMode}" data-editor-max-width="${safeConfig.editorMaxWidth}" data-editor-alignment="${safeConfig.editorAlignment}" data-editor-width-indicators="${safeConfig.editorWidthIndicators}" data-math-source-wrap="${safeConfig.mathSourceWrap}" data-math-source-position="${safeConfig.mathSourcePosition}" data-code-language-order="${safeConfig.codeLanguageOrder}" data-toolbar-mode="${safeConfig.toolbarMode}" data-table-toolbar-position="${safeConfig.tableToolbarPosition}" data-table-source-format="${safeConfig.tableSourceFormat}" data-content-revision="${Number.isSafeInteger(config?.contentRevision) ? config?.contentRevision : 0}">
+<html lang="en" data-theme="${safeConfig.theme}" data-code-block-action-labels="${safeConfig.codeBlockActionLabels}" data-editor-width-mode="${safeConfig.editorWidthMode}" data-editor-max-width="${safeConfig.editorMaxWidth}" data-editor-alignment="${safeConfig.editorAlignment}" data-editor-width-indicators="${safeConfig.editorWidthIndicators}" data-math-source-wrap="${safeConfig.mathSourceWrap}" data-math-source-position="${safeConfig.mathSourcePosition}" data-code-language-order="${safeConfig.codeLanguageOrder}" data-toolbar-mode="${safeConfig.toolbarMode}" data-toolbar-toggle-icon="${safeConfig.toolbarToggleIcon}" data-toolbar-toggle-on-hover="${safeConfig.toolbarToggleOnHover}" data-table-toolbar-position="${safeConfig.tableToolbarPosition}" data-table-source-format="${safeConfig.tableSourceFormat}" data-content-revision="${Number.isSafeInteger(config?.contentRevision) ? config?.contentRevision : 0}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -169,7 +173,7 @@ export function getWebviewContent(
     </style>
 </head>
 <body>
-    ${generateEditorBodyHtml(msg, process.platform, { outlineOpen: safeConfig.outlineOpen, exportEnabled: true, settingsEnabled: true, hostEditor: 'vscode' })}
+    ${generateEditorBodyHtml(msg, process.platform, { outlineOpen: safeConfig.outlineOpen, exportEnabled: true, settingsEnabled: true, hostEditor: 'vscode', toolbarLogoUri: webview.asWebviewUri(vscode.Uri.file(path.join(extensionUri.fsPath, 'media', 'icon.png'))).toString() })}
 
     <script src="${vendorUri('markdown-blocks.js')}"></script>
     <script src="${turndownUri}"></script>
diff --git a/test/build-standalone.js b/test/build-standalone.js
index 39280f3..c1c5a62 100644
--- a/test/build-standalone.js
+++ b/test/build-standalone.js
@@ -242,6 +242,8 @@ fs.writeFileSync(outputPath, html
     .replace('__EDITOR_SCRIPT__', () => editorScript));
 console.log('Generated:', outputPath);
 
+fs.copyFileSync(path.join(__dirname, '../media/icon.png'), path.join(__dirname, 'html/vendor/icon.png'));
+
 // Production layout for contextual toolbar geometry and focus regressions.
 const { generateEditorBodyHtml } = require('../src/shared/editor-body-html');
 const styles = fs.readFileSync(path.join(__dirname, '../src/webview/styles.css'), 'utf8')
@@ -249,6 +251,6 @@ const styles = fs.readFileSync(path.join(__dirname, '../src/webview/styles.css')
     .replace('__OUTLINE_ACTIVE_COLOR__', 'var(--link-color)');
 fs.writeFileSync(path.join(__dirname, 'html/production-editor.html'), `<!doctype html>
 <html lang="en" data-theme="things" data-toolbar-mode="${require('./helpers/settings.cjs').configurationProperties(require('../package.json'))['binary-markdown.toolbarMode'].default}"><head><meta charset="utf-8"><link rel="stylesheet" href="vendor/katex.min.css"><style>${styles}</style></head>
-<body>${generateEditorBodyHtml(require('../src/i18n/locales/en.ts').webviewMessages, process.platform, { exportEnabled: true, settingsEnabled: true, hostEditor: 'vscode' })}
+<body>${generateEditorBodyHtml(require('../src/i18n/locales/en.ts').webviewMessages, process.platform, { exportEnabled: true, settingsEnabled: true, hostEditor: 'vscode', toolbarLogoUri: 'data:image/png;base64,' + fs.readFileSync(path.join(__dirname, '../media/icon.png')).toString('base64') })}
 <script src="vendor/markdown-blocks.js"></script><script src="vendor/turndown.js"></script><script src="vendor/turndown-plugin-gfm.js"></script>
 <script src="vendor/katex.min.js"></script><script src="vendor/mermaid.min.js"></script><script>${testHostBridgeScript}</script><script>${editorScript}</script><script>window.exportMessages=${JSON.stringify(require('../out/export/messages.js').getExportMessages())};${fs.readFileSync(path.join(__dirname, '../src/webview/export-ui.js'), 'utf8')}</script></body></html>`);
diff --git a/test/specs/settings-preferences.spec.ts b/test/specs/settings-preferences.spec.ts
index 9a2bb8b..cff7c9e 100644
--- a/test/specs/settings-preferences.spec.ts
+++ b/test/specs/settings-preferences.spec.ts
@@ -54,3 +54,18 @@ for (const locale of ['en', 'fr', 'zh-cn']) for (const width of [820, 360, 180])
         expect(await page.evaluate(() => (window as any).preferenceSaves)).toEqual([]);
     });
 }
+
+
+test('top bar preferences load stored values and send typed saves with rollback feedback', async ({ page }) => {
+    await page.setContent(renderPreferences({ toolbarToggleIcon: 'chevrons', toolbarToggleOnHover: true }));
+    await expect(page.locator('#toolbarToggleIcon')).toHaveValue('chevrons');
+    await expect(page.locator('#toolbarToggleOnHover')).toBeChecked();
+    await page.locator('#toolbarToggleIcon').selectOption('logo');
+    await page.locator('#toolbarToggleOnHover').uncheck();
+    expect(await page.evaluate(() => (window as any).preferenceSaves)).toEqual([
+        { key: 'toolbarToggleIcon', value: 'logo' }, { key: 'toolbarToggleOnHover', value: false }
+    ]);
+    await page.evaluate(() => (window as any).updatePreference({ key: 'toolbarToggleOnHover', value: true, error: 'Synthetic save failure' }));
+    await expect(page.locator('#toolbarToggleOnHover')).toBeChecked();
+    await expect(page.getByRole('alert')).toHaveText('Synthetic save failure');
+});
diff --git a/test/specs/toolbar-discovery.spec.ts b/test/specs/toolbar-discovery.spec.ts
index 54d00b4..973b825 100644
--- a/test/specs/toolbar-discovery.spec.ts
+++ b/test/specs/toolbar-discovery.spec.ts
@@ -103,6 +103,7 @@ for (const mode of ['full', 'simple']) {
             expect(geometry.overlaps).toEqual([]);
             const available = geometry.visible.filter((action: string) => action !== 'toolbarMore').concat(geometry.overflow);
             const expected = actions.filter(action => (action !== 'allActions' || contextual) && (action !== 'openOutline' || width <= 700) && (mode === 'full' || ['openOutline', 'undo', 'redo', 'insertMenu', 'openInTextEditor', 'export', 'formatActions', 'allActions', 'contextToolbar', 'mode:visual', 'mode:source', 'mode:split'].includes(action!)));
+            expected.push('toolbarVisibilityToggle');
             expect(available.sort()).toEqual(expected.sort());
             if (geometry.overflow.length) {
                 await page.locator('#toolbarMore').click();
diff --git a/test/specs/toolbar-visibility.spec.ts b/test/specs/toolbar-visibility.spec.ts
new file mode 100644
index 0000000..bc0f59b
--- /dev/null
+++ b/test/specs/toolbar-visibility.spec.ts
@@ -0,0 +1,261 @@
+import { test, expect, Page } from '@playwright/test';
+import * as path from 'path';
+
+const source = '# Reading\n\nBefore target after.\n\n| Item | Status |\n| --- | --- |\n| One | Ready |\n';
+const toggle = '#toolbarVisibilityToggle';
+const root = path.resolve(__dirname, '../..');
+const set = (page: Page, type: string, value: unknown) => page.evaluate(({ type, value }) =>
+    (window as any).__hostMessageHandler({ type, value }), { type, value });
+async function setup(page: Page, width = 1440) {
+    await page.setViewportSize({ width, height: 800 });
+    await page.goto('/production-editor.html');
+    await page.waitForFunction(() => (window as any).__testApi?.ready);
+    await page.evaluate(content => (window as any).__testApi.setMarkdown(content), source);
+}
+async function selectTarget(page: Page) {
+    await page.locator('#editor > p').evaluate(node => {
+        (node as HTMLElement).focus();
+        const text = node.firstChild!;
+        const start = text.textContent!.indexOf('target');
+        const range = document.createRange(); range.setStart(text, start); range.setEnd(text, start + 6);
+        getSelection()!.removeAllRanges(); getSelection()!.addRange(range);
+        (window as any).__retainedParagraph = node;
+    });
+}
+
+for (const host of ['vscode', 'electron']) for (const icon of [undefined, 'chevrons']) {
+    test(`${host} loads saved toggle preferences (${icon || 'default logo'})`, async ({ page }) => {
+        const config = { toolbarToggleIcon: icon, toolbarToggleOnHover: true };
+        const html = host === 'vscode'
+            ? require('../utils/production-webview.cjs')(root, source, 7, config)
+            : require('../utils/electron-webview.cjs')(root, source, config);
+        await page.route('**/toolbar-preferences.html', route => route.fulfill({ contentType: 'text/html', body: html }));
+        await page.goto('/toolbar-preferences.html');
+        await page.waitForFunction(() => (window as any).__testApi?.ready);
+        await expect(page.locator('html')).toHaveAttribute('data-toolbar-toggle-on-hover', 'true');
+        await expect(page.locator(`${toggle} .toolbar-toggle-${icon === 'chevrons' ? 'arrows' : 'logo'}`)).toBeVisible();
+        if (!icon) expect(await page.locator(`${toggle} img`).evaluate((img: HTMLImageElement) => img.complete && img.naturalWidth > 0)).toBe(true);
+        await expect(page.locator(toggle)).toHaveAttribute('aria-expanded', 'true');
+        await page.locator(toggle).click();
+        await expect(page.locator(toggle)).toHaveAccessibleName('Show top bar');
+        await page.locator(toggle).click();
+        await expect(page.locator(toggle)).toHaveAccessibleName('Hide top bar');
+    });
+}
+
+for (const width of [320, 768, 1440]) for (const mode of ['full', 'simple']) {
+    test(`${mode} toolbar collapses completely and restores after resizing at ${width}px`, async ({ page }) => {
+        await setup(page, width);
+        await set(page, 'toolbarMode', mode);
+        const before = await page.locator('#editorWrapper').boundingBox();
+        const bar = await page.locator('#toolbar').boundingBox();
+        await page.locator(toggle).click();
+        await expect(page.locator(toggle)).toBeVisible();
+        await expect(page.locator('#toolbarMore')).toBeHidden();
+        expect((await page.locator('#toolbar').boundingBox())!.height).toBe(0);
+        expect((await page.locator('#editorWrapper').boundingBox())!.y).toBeCloseTo(before!.y - bar!.height, 0);
+        await page.setViewportSize({ width: width === 320 ? 1440 : 320, height: 600 });
+        await page.locator(toggle).click();
+        await expect(page.locator('#toolbarMore')).toBeVisible();
+        await expect(page.locator('html')).toHaveAttribute('data-toolbar-mode', mode);
+        await page.locator('#toolbarMore').click();
+        await expect(page.locator('#toolbarCommandSearch')).toBeFocused();
+        await page.keyboard.press('Escape');
+        expect(await page.evaluate(() => (window as any).__testApi.getMarkdown())).toBe(source);
+        expect(await page.evaluate(() => (window as any).__testApi.messages.filter((message: any) => message.type === 'edit'))).toEqual([]);
+    });
+}
+
+test('view toggles and live preferences retain selection, DOM, and one-step Undo/Redo', async ({ page }) => {
+    await setup(page);
+    await selectTarget(page);
+    await page.locator(toggle).click();
+    await set(page, 'toolbarToggleIcon', 'chevrons');
+    await set(page, 'toolbarToggleOnHover', true);
+    await expect(page.locator(`${toggle} .toolbar-toggle-arrows`)).toHaveCSS('transform', 'matrix(-1, 0, 0, -1, 0, 0)');
+    await page.locator(toggle).click();
+    expect(await page.evaluate(() => getSelection()!.toString())).toBe('target');
+    expect(await page.evaluate(() => (window as any).__retainedParagraph === document.querySelector('#editor > p'))).toBe(true);
+    await expect(page.locator('#toolbar [data-action="undo"]')).toBeDisabled();
+    await page.locator('#toolbar [data-action="bold"]').click();
+    const edited = await page.evaluate(() => (window as any).__testApi.getMarkdown());
+    expect(edited).toContain('**target**');
+    await page.locator(toggle).click();
+    await page.locator(toggle).click();
+    await page.locator('#toolbar [data-action="undo"]').click();
+    expect(await page.evaluate(() => (window as any).__testApi.getMarkdown())).toBe(source);
+    await page.locator('#toolbar [data-action="redo"]').click();
+    expect(await page.evaluate(() => (window as any).__testApi.getMarkdown())).toBe(edited);
+});
+
+for (const mode of ['source', 'split']) {
+    test(`${mode} input and selection survive hiding and live settings`, async ({ page }) => {
+        await setup(page);
+        await page.locator(`[data-editor-mode="${mode}"]`).click();
+        await page.locator('#sourceEditor').evaluate((node: HTMLTextAreaElement) => { node.focus(); node.setSelectionRange(20, 26); });
+        await page.locator(toggle).click();
+        await set(page, 'toolbarToggleIcon', 'chevrons');
+        await set(page, 'toolbarMode', 'simple');
+        await page.locator(toggle).click();
+        await expect(page.locator('#sourceEditor')).toBeFocused();
+        expect(await page.locator('#sourceEditor').evaluate((node: HTMLTextAreaElement) => [node.selectionStart, node.selectionEnd, node.value])).toEqual([20, 26, source]);
+        await expect(page.locator('html')).toHaveAttribute('data-editor-mode', mode);
+    });
+}
+
+test('hover-only recovery reveals on proximity and keyboard focus with reduced motion', async ({ page }) => {
+    await setup(page);
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await set(page, 'toolbarToggleOnHover', true);
+    await page.locator(toggle).click();
+    await page.mouse.move(800, 600);
+    await expect(page.locator(toggle)).toHaveCSS('opacity', '0');
+    const box = (await page.locator('.toolbar-visibility-control').boundingBox())!;
+    await page.mouse.move(box.x + 1, box.y + 1);
+    await expect(page.locator(toggle)).toHaveCSS('opacity', '1');
+    await page.mouse.move(800, 600);
+    await page.locator(toggle).focus();
+    await expect(page.locator(toggle)).toHaveCSS('opacity', '1');
+    await expect(page.locator(toggle)).toHaveCSS('transition-duration', '0s');
+    await page.keyboard.press('Enter');
+    await expect(page.locator(toggle)).toHaveAttribute('aria-expanded', 'true');
+    await page.keyboard.press('Space');
+    await expect(page.locator(toggle)).toHaveAttribute('aria-expanded', 'false');
+    await page.keyboard.press('Tab');
+    await expect(page.locator('#toolbarMore')).not.toBeFocused();
+});
+
+test('touch devices retain a visible restore button with hover-only enabled', async ({ browser }) => {
+    const context = await browser.newContext({ hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } });
+    const page = await context.newPage();
+    await setup(page, 390);
+    await set(page, 'toolbarToggleOnHover', true);
+    await page.locator(toggle).tap();
+    await expect(page.locator(toggle)).toHaveCSS('opacity', '1');
+    await page.locator(toggle).tap();
+    await expect(page.locator(toggle)).toHaveAttribute('aria-expanded', 'true');
+    await context.close();
+});
+
+for (const mode of ['full', 'simple']) {
+    test(`${mode} hides and restores docked table controls without leaving a row`, async ({ page }) => {
+        await setup(page);
+        await set(page, 'toolbarMode', mode);
+        await set(page, 'tableToolbarPosition', 'top-bar');
+        await page.locator('#editor td').first().click();
+        const controls = page.locator('.table-toolbar:not(.table-toolbar-measure)');
+        await expect(controls).toBeVisible();
+        await page.locator(toggle).click();
+        await expect(controls).toBeHidden();
+        await expect(page.locator('.table-toolbar-row')).toBeHidden();
+        expect((await page.locator('#toolbar').boundingBox())!.height).toBe(0);
+        await page.locator(toggle).click();
+        await expect(controls).toBeVisible();
+        expect(await page.evaluate(() => (window as any).__testApi.getMarkdown())).toBe(source);
+    });
+}
+
+test('toggling after a closed Insert workspace keeps the current selection', async ({ page }) => {
+    await setup(page);
+    await selectTarget(page);
+    await page.locator('#toolbarMore').click();
+    await page.locator('#toolbarCommandSearch').fill('Insert');
+    await page.locator('[data-menu-command="viewInsert"]').click();
+    await expect(page.locator('#insertMenu')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await page.locator('#editor > h1').evaluate(node => {
+        const range = document.createRange(); range.selectNodeContents(node);
+        getSelection()!.removeAllRanges(); getSelection()!.addRange(range);
+    });
+    await page.locator(toggle).click();
+    await page.locator(toggle).click();
+    expect(await page.evaluate(() => getSelection()!.toString())).toBe('Reading');
+});
+
+test('hiding keeps an active equation input cancellable and contextual preference intact', async ({ page }) => {
+    await setup(page);
+    const equation = 'Before $x^2$ after.\n';
+    await page.evaluate(content => (window as any).__testApi.setMarkdown(content), equation);
+    await page.locator('#contextToolbarToggle').click();
+    await page.locator('.math-inline').click();
+    const input = page.locator('.math-inline-input');
+    await input.fill('x^2+1');
+    await page.locator(toggle).click();
+    await page.locator(toggle).click();
+    await expect(input).toBeFocused();
+    await expect(input).toHaveValue('x^2+1');
+    await expect(page.locator('#contextToolbarToggle')).toHaveAttribute('aria-pressed', 'true');
+    await page.keyboard.press('Escape');
+    await expect(input).toHaveCount(0);
+    expect(await page.evaluate(() => (window as any).__testApi.getMarkdown())).toBe(equation);
+    await expect(page.locator('#toolbar [data-action="undo"]')).toBeDisabled();
+});
+
+for (const theme of ['github', 'sepia', 'night', 'dark', 'minimal', 'perplexity', 'things']) {
+    test(`${theme}: toggle has no background or shadow at rest, on hover, or with keyboard focus`, async ({ page }) => {
+        await setup(page);
+        await set(page, 'theme', theme);
+        const button = page.locator(toggle);
+        for (const icon of ['logo', 'chevrons']) {
+            await set(page, 'toolbarToggleIcon', icon);
+            for (const collapsed of [true, false]) {
+                await button.click();
+                await expect(button).toHaveAttribute('aria-expanded', String(!collapsed));
+                await page.mouse.move(1000, 700);
+                for (const hover of [false, true]) {
+                    if (hover) await button.hover();
+                    await expect(button).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+                    await expect(button).toHaveCSS('box-shadow', 'none');
+                }
+                await page.keyboard.press('Tab');
+                await button.focus();
+                await expect(button).toHaveCSS('outline-style', 'solid');
+                await expect(button).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+            }
+        }
+    });
+}
+
+for (const mode of ['full', 'simple']) for (const navigation of [false, true]) {
+    test(`${mode}: hiding from focused table ${navigation ? 'navigation' : 'controls'} retains reachable focus`, async ({ page }) => {
+        await setup(page);
+        await set(page, 'toolbarMode', mode);
+        await set(page, 'tableToolbarPosition', 'top-bar');
+        await page.locator('#editor td').first().click();
+        const chip = page.locator('.table-toolbar:not(.table-toolbar-measure) .table-coordinate-chip');
+        await expect(chip).toBeVisible();
+        if (navigation) {
+            await chip.click();
+            await expect(page.locator('.table-navigation-menu select').first()).toBeFocused();
+        } else await chip.focus();
+        await page.locator(toggle).click();
+        await expect(page.locator(toggle)).toBeFocused();
+        await expect(page.locator('.table-navigation-menu')).toBeHidden();
+        await expect(page.locator('.table-toolbar:not(.table-toolbar-measure)')).toBeHidden();
+        await page.keyboard.press('Space');
+        await expect(chip).toBeVisible();
+        expect(await page.evaluate(() => (window as any).__testApi.getMarkdown())).toBe(source);
+    });
+}
+
+for (const activation of ['keyboard', 'pointer']) {
+    test(`hiding with ${activation} closes Export and retains selection and keyboard recovery`, async ({ page }) => {
+        await setup(page);
+        await selectTarget(page);
+        await page.locator('#exportButton').focus();
+        await page.keyboard.press('Enter');
+        await expect(page.locator('#exportMenu')).toBeVisible();
+        if (activation === 'keyboard') {
+            await page.locator(toggle).focus();
+            await page.keyboard.press('Space');
+        } else await page.locator(toggle).click();
+        await expect(page.locator('#exportMenu')).toBeHidden();
+        await expect(page.locator('#exportButton')).toHaveAttribute('aria-expanded', 'false');
+        await expect(page.locator(toggle)).toBeFocused();
+        expect(await page.evaluate(() => getSelection()!.toString())).toBe('target');
+        await page.keyboard.press('Space');
+        await expect(page.locator('#exportButton')).toBeVisible();
+        expect(await page.evaluate(() => (window as any).__testApi.getMarkdown())).toBe(source);
+        await expect(page.locator('#toolbar [data-action="undo"]')).toBeDisabled();
+    });
+}
diff --git a/test/unit/settings-localization.test.js b/test/unit/settings-localization.test.js
index 82c65d3..4511876 100644
--- a/test/unit/settings-localization.test.js
+++ b/test/unit/settings-localization.test.js
@@ -15,7 +15,8 @@ const readTranslations = name => JSON.parse(fs.readFileSync(path.join(root, name
 test('language picker strings reach the editor webview dictionary in every locale', () => {
     for (const locale of ['en', 'es', 'fr', 'ja', 'ko', 'zh-cn', 'zh-tw']) {
         const { webviewMessages } = require('../../out/locales/' + locale + '.js');
-        for (const key of ['languagePickerLabel', 'languagePickerPlaceholder', 'languagePickerNoResults', 'languagePickerCurrent',
+        for (const key of ['hideToolbar', 'showToolbar', 'toolbarToggleIconLabel', 'toolbarToggleLogo', 'toolbarToggleChevrons',
+            'toolbarToggleOnHoverLabel', 'toolbarToggleOnHoverHelp', 'toolbarToggleSaveFailed', 'languagePickerLabel', 'languagePickerPlaceholder', 'languagePickerNoResults', 'languagePickerCurrent',
             'languagePickerPlainText', 'languagePickerMath', 'languagePickerMermaid',
             'codeLanguageOrderLabel', 'codeLanguageOrderHelp', 'codeLanguageOrderDefault', 'codeLanguageOrderAscending',
             'codeLanguageOrderDescending', 'codeLanguageOrderSaveFailed',
@@ -104,3 +105,13 @@ test('image and extension settings controls have distinct labels in every suppor
         assert.notEqual(webviewMessages.openExtensionSettings, webviewMessages.setImageDir);
     }
 });
+
+
+test('top bar toggle defaults to the logo and a visible recovery button', () => {
+    const icon = properties['binary-markdown.toolbarToggleIcon'];
+    assert.equal(icon.default, 'logo');
+    assert.deepEqual(icon.enum, ['logo', 'chevrons']);
+    const hover = properties['binary-markdown.toolbarToggleOnHover'];
+    assert.equal(hover.type, 'boolean');
+    assert.equal(hover.default, false);
+});
diff --git a/test/unit/settings-organization.test.js b/test/unit/settings-organization.test.js
index db7011b..4de779d 100644
--- a/test/unit/settings-organization.test.js
+++ b/test/unit/settings-organization.test.js
@@ -4,7 +4,11 @@ const assert = require('node:assert/strict');
 const { JSDOM } = require('jsdom');
 const manifest = require('../../package.json');
 // Behavioral baseline from main before #108; presentation metadata is excluded.
-const contract = require('../fixtures/settings-contract.json');
+const contract = {
+    ...require('../fixtures/settings-contract.json'),
+    'binary-markdown.toolbarToggleIcon': { type: 'string', enum: ['logo', 'chevrons'], default: 'logo' },
+    'binary-markdown.toolbarToggleOnHover': { type: 'boolean', default: false },
+};
 const { configurationProperties } = require('../helpers/settings.cjs');
 const { renderPreferences } = require('../helpers/preferences.cjs');