diff --git a/src/App.svelte b/src/App.svelte
index 58949ea..10bc8f0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -348,9 +348,9 @@
 </script>
 
 <main>
-  <header>
+  <header class:expanded={toolbarExpanded}>
     <img src="/PrimeText.png" alt="PrimeText" class="app-logo" />
-    <Toolbar editor={activeEditor} tick={activeTick} />
+    <Toolbar editor={activeEditor} tick={activeTick} expanded={toolbarExpanded} />
     <div class="header-actions">
       {#snippet saveIcon()}
         <!-- Floppy disk -->
@@ -579,20 +579,37 @@
     box-shadow: var(--shadow);
   }
 
+  /* With the extended toolbar visible the header merges into it: the divider and
+     elevation move to the extended toolbar so they read as one toolbar. */
+  header.expanded {
+    border-bottom: none;
+    box-shadow: none;
+  }
+
+  /* Anchored to a fixed offset from the header top (align-self + margin-top)
+     instead of vertically centered, so toggling the extended toolbar — which
+     changes the header height — doesn't shift the logo. The offset centers it on
+     the top toolbar's button row (padding-top 0.5rem + half the 2rem button). */
   .app-logo {
-    height: 20px;
+    height: 17px;
     width: auto;
-    margin: 0 0.5rem 0 0.75rem;
+    align-self: flex-start;
+    margin: 0.95rem 0.5rem 0 0.75rem;
     opacity: 1.0;
     flex-shrink: 0;
   }
 
+  /* Pinned to the top (like .app-logo) so the changing header height when the
+     extended toolbar toggles doesn't shift it. margin-top matches the top
+     toolbar's padding so the buttons share the same baseline. */
   .header-actions {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-left: auto;
     margin-right: 1rem;
+    align-self: flex-start;
+    margin-top: 0.5rem;
   }
 
   .file-actions {
diff --git a/src/lib/editor/Toolbar.svelte b/src/lib/editor/Toolbar.svelte
index dd46fb6..63997fd 100644
--- a/src/lib/editor/Toolbar.svelte
+++ b/src/lib/editor/Toolbar.svelte
@@ -4,7 +4,7 @@
   import AlignButton from './AlignButton.svelte';
   import { ORDERED_LIST_TYPES, DEFAULT_ORDERED_TYPE, type OrderedListType } from './orderedListTypes';
 
-  let { editor, tick }: { editor: Editor | null; tick: number } = $props();
+  let { editor, tick, expanded = false }: { editor: Editor | null; tick: number; expanded?: boolean } = $props();
 
   // $derived re-evaluates whenever `tick` changes (i.e. on every TipTap transaction)
   let isH1         = $derived(tick >= 0 && !!editor?.isActive('heading', { level: 1 }));
@@ -53,7 +53,7 @@
   }
 </script>
 
-<div class="toolbar">
+<div class="toolbar" class:expanded>
   {#if editor}
     <div class="toolbar-group">
       <button
@@ -225,6 +225,13 @@
     z-index: 200;
   }
 
+  /* When the extended toolbar is shown the two rows form one toolbar: drop the
+     divider and tighten the bottom padding so the buttons sit at normal spacing. */
+  .toolbar.expanded {
+    border-bottom: none;
+    padding-bottom: 0.2rem;
+  }
+
   .toolbar-group {
     display: flex;
     gap: 2px;
diff --git a/src/lib/editor/ToolbarExpanded.svelte b/src/lib/editor/ToolbarExpanded.svelte
index 053b2c7..f4afd51 100644
--- a/src/lib/editor/ToolbarExpanded.svelte
+++ b/src/lib/editor/ToolbarExpanded.svelte
@@ -1163,9 +1163,10 @@
     display: flex;
     align-items: center;
     gap: 0.25rem;
-    padding: 0.4rem 1rem;
+    padding: 0.2rem 1rem 0.4rem;
     background: var(--color-toolbar-bg);
     border-bottom: 1px solid var(--color-border);
+    box-shadow: var(--shadow);
   }
 
   /* Layout sits at the far right (logical separation from the rest). order:1