diff --git a/extension/src/popup/components/form-header.ts b/extension/src/popup/components/form-header.ts
new file mode 100644
index 0000000..61e6f67
--- /dev/null
+++ b/extension/src/popup/components/form-header.ts
@@ -0,0 +1,20 @@
+/// Shared header chrome for typed form views (login, secure-note, identity, card,
+/// key, totp, document). Renders the title row plus a fullscreen-only "esc to
+/// cancel" subtitle. Use the existing `${...}` template-literal interpolation
+/// at call sites: `${renderFormHeader('new login')}`.
+///
+/// item-form.ts (the type-selection screen) uses a different header structure
+/// and does NOT consume this helper.
+
+import { isInTab } from '../../shared/state';
+
+export function renderFormHeader(titleText: string): string {
+  return `
+      <div class="form-header">
+        <div class="detail-title">${titleText}</div>
+        <span style="flex:1;"></span>
+        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
+      </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : ''}
+    `;
+}
diff --git a/extension/src/popup/components/types/card.ts b/extension/src/popup/components/types/card.ts
index 59c66ab..9f8d7c0 100644
--- a/extension/src/popup/components/types/card.ts
+++ b/extension/src/popup/components/types/card.ts
@@ -1,7 +1,8 @@
 /// Card: number / holder / expiry MonthYear / cvv / pin / kind.
 /// Detail view has a styled card-silhouette signature block.
 
-import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab, isInTab } from '../../../shared/state';
+import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab } from '../../../shared/state';
+import { renderFormHeader } from '../form-header';
 import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 import type { Item, ItemId, ManifestEntry, CardKind, Section, AttachmentRef } from '../../../shared/types';
 import {
@@ -174,12 +175,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center;">
-        <div class="detail-title">${mode === 'add' ? 'new card' : 'edit card'}</div>
-        <span style="flex:1;"></span>
-        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
-      </div>
-      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
+      ${renderFormHeader(mode === 'add' ? 'new card' : 'edit card')}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Amex Gold"></div>
diff --git a/extension/src/popup/components/types/document.ts b/extension/src/popup/components/types/document.ts
index 16531e8..3d9b850 100644
--- a/extension/src/popup/components/types/document.ts
+++ b/extension/src/popup/components/types/document.ts
@@ -2,7 +2,8 @@
 /// notes/tags + optional supplementary attachments.
 /// Primary attachment is referenced by ID from the item's attachments array.
 
-import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab, isInTab } from '../../../shared/state';
+import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab } from '../../../shared/state';
+import { renderFormHeader } from '../form-header';
 import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 import type { Item, ItemId, ManifestEntry, Section, AttachmentRef } from '../../../shared/types';
 import {
@@ -85,12 +86,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center;">
-        <div class="detail-title">${isEdit ? 'edit document' : 'new document'}</div>
-        <span style="flex:1;"></span>
-        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
-      </div>
-      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
+      ${renderFormHeader(isEdit ? 'edit document' : 'new document')}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group">
         <label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
diff --git a/extension/src/popup/components/types/identity.ts b/extension/src/popup/components/types/identity.ts
index 858714f..76b3075 100644
--- a/extension/src/popup/components/types/identity.ts
+++ b/extension/src/popup/components/types/identity.ts
@@ -1,7 +1,8 @@
 /// Identity: full_name, address (multiline), phone, email, date_of_birth.
 /// Detail view shows a "profile card" signature block + plain rows.
 
-import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab, isInTab } from '../../../shared/state';
+import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab } from '../../../shared/state';
+import { renderFormHeader } from '../form-header';
 import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 import type { Item, ItemId, ManifestEntry, Section, AttachmentRef } from '../../../shared/types';
 import {
@@ -134,12 +135,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center;">
-        <div class="detail-title">${mode === 'add' ? 'new identity' : 'edit identity'}</div>
-        <span style="flex:1;"></span>
-        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
-      </div>
-      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
+      ${renderFormHeader(mode === 'add' ? 'new identity' : 'edit identity')}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Aaron Lee · personal"></div>
diff --git a/extension/src/popup/components/types/key.ts b/extension/src/popup/components/types/key.ts
index 9e73ad5..e5c3720 100644
--- a/extension/src/popup/components/types/key.ts
+++ b/extension/src/popup/components/types/key.ts
@@ -2,7 +2,8 @@
 /// Form's key_material textarea uses CSS text-security to mask characters
 /// since <textarea type="password"> isn't a thing.
 
-import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab, isInTab } from '../../../shared/state';
+import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab } from '../../../shared/state';
+import { renderFormHeader } from '../form-header';
 import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 import type { Item, ItemId, ManifestEntry, Section, AttachmentRef } from '../../../shared/types';
 import {
@@ -123,12 +124,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center;">
-        <div class="detail-title">${mode === 'add' ? 'new key' : 'edit key'}</div>
-        <span style="flex:1;"></span>
-        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
-      </div>
-      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
+      ${renderFormHeader(mode === 'add' ? 'new key' : 'edit key')}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="github ssh"></div>
diff --git a/extension/src/popup/components/types/login.ts b/extension/src/popup/components/types/login.ts
index 9c9b0b6..6fda287 100644
--- a/extension/src/popup/components/types/login.ts
+++ b/extension/src/popup/components/types/login.ts
@@ -2,6 +2,7 @@
 /// field helpers introduced in Slice 2.
 
 import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab, isInTab } from '../../../shared/state';
+import { renderFormHeader } from '../form-header';
 import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 import type { Item, ItemId, LoginCore, ManifestEntry, Section, TotpConfig, AttachmentRef } from '../../../shared/types';
 import { DEFAULT_PASSWORD_REQUEST } from '../../../shared/types';
@@ -244,12 +245,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center;">
-        <div class="detail-title">${mode === 'add' ? 'new login' : 'edit login'}</div>
-        <span style="flex:1;"></span>
-        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
-      </div>
-      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
+      ${renderFormHeader(mode === 'add' ? 'new login' : 'edit login')}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
diff --git a/extension/src/popup/components/types/secure-note.ts b/extension/src/popup/components/types/secure-note.ts
index d3f7a35..90de1d8 100644
--- a/extension/src/popup/components/types/secure-note.ts
+++ b/extension/src/popup/components/types/secure-note.ts
@@ -2,6 +2,7 @@
 /// detail view; the form is just a big <textarea>.
 
 import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab, isInTab } from '../../../shared/state';
+import { renderFormHeader } from '../form-header';
 import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 import type { Item, ItemId, ManifestEntry, Section, AttachmentRef } from '../../../shared/types';
 import {
@@ -112,12 +113,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center;">
-        <div class="detail-title">${mode === 'add' ? 'new secure note' : 'edit secure note'}</div>
-        <span style="flex:1;"></span>
-        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
-      </div>
-      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
+      ${renderFormHeader(mode === 'add' ? 'new secure note' : 'edit secure note')}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="My recovery codes"></div>
diff --git a/extension/src/popup/components/types/totp.ts b/extension/src/popup/components/types/totp.ts
index 3e5cd85..531ef19 100644
--- a/extension/src/popup/components/types/totp.ts
+++ b/extension/src/popup/components/types/totp.ts
@@ -2,7 +2,8 @@
 /// signature block with a thin SVG countdown ring; form has a kind toggle
 /// (TOTP vs Steam Guard) and a single secret input.
 
-import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab, isInTab } from '../../../shared/state';
+import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab } from '../../../shared/state';
+import { renderFormHeader } from '../form-header';
 import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 import type { Item, ItemId, ManifestEntry, Section, TotpKind, AttachmentRef } from '../../../shared/types';
 import { base32Decode, base32Encode } from '../../../shared/base32';
@@ -213,12 +214,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   const renderInner = (): string => `
     <div class="pad">
-      <div style="display:flex; align-items:center;">
-        <div class="detail-title">${mode === 'add' ? 'new totp' : 'edit totp'}</div>
-        <span style="flex:1;"></span>
-        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
-      </div>
-      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
+      ${renderFormHeader(mode === 'add' ? 'new totp' : 'edit totp')}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
         <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index 8f384ac..146e72a 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -104,6 +104,18 @@ body {
   font-size: 11px;
 }
 
+.form-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+/* When the header is followed by a subtitle, drop the bottom margin so the
+   subtitle's own margin owns the spacing. */
+.form-header:has(+ .form-subtitle) {
+  margin-bottom: 0;
+}
+
 .form-subtitle {
   font-size: 11px;
   color: var(--text-dim);
diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css
index 9ba1ea5..5340a73 100644
--- a/extension/src/vault/vault.css
+++ b/extension/src/vault/vault.css
@@ -104,6 +104,18 @@ body {
   font-size: 11px;
 }
 
+.form-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+/* When the header is followed by a subtitle, drop the bottom margin so the
+   subtitle's own margin owns the spacing. */
+.form-header:has(+ .form-subtitle) {
+  margin-bottom: 0;
+}
+
 .form-subtitle {
   font-size: 11px;
   color: var(--text-dim);