diff --git a/src/lib/pages/DictationPage.svelte b/src/lib/pages/DictationPage.svelte
index 09713b3..9ad6a1a 100644
--- a/src/lib/pages/DictationPage.svelte
+++ b/src/lib/pages/DictationPage.svelte
@@ -953,59 +953,60 @@
 
            The v0.2 path stays unchanged for non-quietware users.
            ================================================================= -->
-      <LumotiaPageSkeleton primaryBleed>
+      <LumotiaPageSkeleton>
         {#snippet header()}
-          <div class="flex items-center gap-4">
-            <button
-              class="relative flex items-center justify-center w-[72px] h-[72px] rounded-full shrink-0
-                text-[var(--button-record-fg)]
-                focus-visible:outline-none focus-visible:ring-[var(--wire-width-focus,2px)]
-                focus-visible:ring-[var(--button-record-bg)] focus-visible:ring-offset-2
-                {page.recording
-                  ? 'bg-danger animate-pulse-warm'
-                  : modelLoading
-                    ? 'bg-warning opacity-60 cursor-wait'
-                    : !tauriRuntimeAvailable
-                      ? 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
-                      : 'bg-[var(--button-record-bg)] hover:bg-[var(--button-record-border)]'}"
-              onclick={toggleRecording}
-              disabled={modelLoading || !tauriRuntimeAvailable}
-              aria-label={page.recording ? "Stop recording" : "Start recording"}
-            >
-              {#if page.recording}
-                <span class="w-[20px] h-[20px] rounded-[3px] bg-white"></span>
-              {:else if modelLoading}
-                <Loader2 size={24} class="animate-spin" aria-hidden="true" />
-              {:else}
-                <span class="w-[20px] h-[20px] rounded-full bg-white/90"></span>
-              {/if}
-            </button>
-            <div class="flex-1 min-w-0">
-              <h1 class="font-display italic text-[22px] text-text leading-tight">
-                {#if page.recording}Recording…
-                {:else if modelLoading}Loading model
-                {:else if !tauriRuntimeAvailable}Desktop preview mode
-                {:else}Ready to capture
+          <div class="flex items-center gap-5">
+            <!-- Record control + status block grouped tightly so they read
+                 as one capture component. Timer pushed to far right. -->
+            <div class="flex items-center gap-3 flex-1 min-w-0">
+              <button
+                class="relative flex items-center justify-center w-[64px] h-[64px] rounded-full shrink-0
+                  text-[var(--button-record-fg)]
+                  focus-visible:outline-none focus-visible:ring-[var(--wire-width-focus,2px)]
+                  focus-visible:ring-[var(--button-record-bg)] focus-visible:ring-offset-2
+                  transition-colors duration-150
+                  {page.recording
+                    ? 'bg-danger animate-pulse-warm'
+                    : modelLoading
+                      ? 'bg-warning/30 cursor-wait border border-[color-mix(in_srgb,var(--color-caution)_55%,transparent)]'
+                      : !tauriRuntimeAvailable
+                        ? 'bg-transparent border-2 border-[color-mix(in_srgb,var(--button-record-bg)_45%,transparent)] cursor-not-allowed opacity-80'
+                        : 'bg-[var(--button-record-bg)] hover:bg-[var(--button-record-border)]'}"
+                onclick={toggleRecording}
+                disabled={modelLoading || !tauriRuntimeAvailable}
+                aria-label={page.recording ? "Stop recording" : (tauriRuntimeAvailable ? "Start recording" : "Record (desktop app only)")}
+              >
+                {#if page.recording}
+                  <span class="w-[18px] h-[18px] rounded-[3px] bg-white"></span>
+                {:else if modelLoading}
+                  <Loader2 size={22} class="animate-spin text-[var(--color-caution)]" aria-hidden="true" />
+                {:else if !tauriRuntimeAvailable}
+                  <!-- Disabled but still reads as "record": muted red dot. -->
+                  <span class="w-[18px] h-[18px] rounded-full bg-[color-mix(in_srgb,var(--button-record-bg)_55%,transparent)]"></span>
+                {:else}
+                  <span class="w-[18px] h-[18px] rounded-full bg-white/90"></span>
                 {/if}
-              </h1>
-              <p class="text-[13px] text-text-secondary mt-0.5">
-                {#if page.recording}Press to stop, or use the global hotkey.
-                {:else if modelLoading}One moment.
-                {:else if !tauriRuntimeAvailable}Local transcription needs the Lumotia desktop app.
-                {:else}Press record, or Ctrl+Shift+R.
-                {/if}
-              </p>
+              </button>
+              <div class="flex-1 min-w-0">
+                <h1 class="text-[18px] font-medium text-text leading-tight">
+                  {#if page.recording}Recording…
+                  {:else if modelLoading}Loading model
+                  {:else if !tauriRuntimeAvailable}Desktop preview mode
+                  {:else}Ready to capture
+                  {/if}
+                </h1>
+                <p class="text-[12px] text-text-secondary mt-0.5">
+                  {#if page.recording}Press to stop, or use the global hotkey.
+                  {:else if modelLoading}One moment.
+                  {:else if !tauriRuntimeAvailable}Local transcription needs the Lumotia desktop app.
+                  {:else}Press record, or Ctrl+Shift+R.
+                  {/if}
+                </p>
+              </div>
             </div>
-            <div class="text-[20px] font-mono tabular-nums text-text-secondary shrink-0">
+            <div class="text-[18px] font-mono tabular-nums text-text-secondary shrink-0">
               {page.timerText || "00:00"}
             </div>
-            {#if page.recording}
-              <LumotiaStatusPill status="recording" />
-            {:else if modelLoading}
-              <LumotiaStatusPill status="transcribing" />
-            {:else if tauriRuntimeAvailable}
-              <LumotiaStatusPill status="ready" />
-            {/if}
           </div>
         {/snippet}
 
@@ -1022,47 +1023,48 @@
         {/snippet}
 
         {#snippet primary()}
-          <div class="h-full flex flex-col px-8 py-6">
-            {#if !transcript.trim()}
-              <div class="flex-1 flex flex-col items-center justify-center text-center gap-4 text-text-tertiary">
-                <Mic size={56} class="opacity-50" aria-hidden="true" />
-                <p class="font-display italic text-[28px] text-text">Talk now, think later.</p>
-                <p class="text-[14px] text-text-secondary">Press record, or Ctrl+Shift+R.</p>
-              </div>
-            {:else}
-              <div
-                class="flex-1 overflow-auto whitespace-pre-wrap text-text leading-relaxed"
-                style="--text-transcript: {prefs.accessibility.transcriptSize}px; font-size: var(--text-transcript)"
-              >{transcript}</div>
-            {/if}
-          </div>
-        {/snippet}
-
-        {#snippet actionBar()}
-          <div class="flex items-center gap-2 justify-end">
-            <LumotiaButton variant="tertiary" size="sm" onclick={copyAll} disabled={!transcript.trim()}>Copy</LumotiaButton>
-            <LumotiaButton variant="primary" size="sm" onclick={saveTypedText} disabled={!transcript.trim()}>Save</LumotiaButton>
-            <LumotiaButton variant="secondary" size="sm" onclick={manualExtractTasks} disabled={!transcript.trim()}>Extract Tasks</LumotiaButton>
-            <LumotiaButton
-              variant="secondary"
-              size="sm"
-              disabled={templates.length === 0 || !transcript.trim()}
-              onclick={() => { if (templates.length > 0) applyTemplate(templates[0]); }}
-              title={templates.length === 0 ? "No templates configured" : `Apply ${templates[0].name}`}
-            >Template</LumotiaButton>
-            <LumotiaButton
-              variant="secondary"
-              size="sm"
-              disabled={!tauriRuntimeAvailable}
-              onclick={() => invoke("open_viewer_window").catch(() => {})}
-            >Open Viewer</LumotiaButton>
+          <div class="h-full flex flex-col">
+            <!-- Transcript canvas. Action dock below sits inside the same
+                 surface so it reads as transcript actions, not a generic
+                 page footer. -->
+            <div class="flex-1 flex flex-col px-8 py-8 min-h-0 overflow-hidden">
+              {#if !transcript.trim()}
+                <div class="flex-1 flex flex-col items-center justify-center text-center gap-4 text-text-tertiary">
+                  <Mic size={56} class="opacity-50" aria-hidden="true" />
+                  <p class="font-display italic text-[28px] text-text">Talk now, think later.</p>
+                  <p class="text-[14px] text-text-secondary">Press record, or Ctrl+Shift+R.</p>
+                </div>
+              {:else}
+                <div
+                  class="flex-1 overflow-auto whitespace-pre-wrap text-text leading-relaxed"
+                  style="--text-transcript: {prefs.accessibility.transcriptSize}px; font-size: var(--text-transcript)"
+                >{transcript}</div>
+              {/if}
+            </div>
+            <div class="flex items-center gap-2 justify-end px-6 py-3 border-t border-border-subtle bg-bg-elevated/40">
+              <LumotiaButton variant="tertiary" size="sm" onclick={copyAll} disabled={!transcript.trim()}>Copy</LumotiaButton>
+              <LumotiaButton variant="primary" size="sm" onclick={saveTypedText} disabled={!transcript.trim()}>Save</LumotiaButton>
+              <LumotiaButton variant="secondary" size="sm" onclick={manualExtractTasks} disabled={!transcript.trim()}>Extract Tasks</LumotiaButton>
+              <LumotiaButton
+                variant="secondary"
+                size="sm"
+                disabled={templates.length === 0 || !transcript.trim()}
+                onclick={() => { if (templates.length > 0) applyTemplate(templates[0]); }}
+                title={templates.length === 0 ? "No templates configured" : `Apply ${templates[0].name}`}
+              >Template</LumotiaButton>
+              <LumotiaButton
+                variant="secondary"
+                size="sm"
+                disabled={!tauriRuntimeAvailable}
+                onclick={() => invoke("open_viewer_window").catch(() => {})}
+              >Open Viewer</LumotiaButton>
+            </div>
           </div>
         {/snippet}
 
         {#snippet metadata()}
-          <div class="flex items-center justify-between gap-4">
-            <span>Smart · {settings.modelSize} · {tauriRuntimeAvailable ? "Local only" : "Browser preview"}</span>
-            <span>{settings.formatMode} · {page.activeProfile === "None" ? "No profile" : page.activeProfile}</span>
+          <div class="flex items-center justify-end">
+            {settings.formatMode} · {settings.modelSize} · {tauriRuntimeAvailable ? "Local only" : "Browser preview"} · {page.activeProfile === "None" ? "No profile" : page.activeProfile}
           </div>
         {/snippet}
       </LumotiaPageSkeleton>
diff --git a/src/lib/ui/LumotiaNotice.svelte b/src/lib/ui/LumotiaNotice.svelte
index 901d36f..ba8c7ad 100644
--- a/src/lib/ui/LumotiaNotice.svelte
+++ b/src/lib/ui/LumotiaNotice.svelte
@@ -118,7 +118,9 @@
   role={ariaRole}
   class="rounded-r-lg rounded-l-sm border border-l-4 text-[13px] flex gap-2.5
     {slim ? 'px-3 py-2 items-center' : 'px-4 py-3 items-start'}
-    {tonePal.bar} {tonePal.border} {tonePal.bg} {counterline ? tonePal.shadow : ''} {classes}"
+    {tonePal.bar}
+    {slim ? 'border-border-subtle' : tonePal.border}
+    {tonePal.bg} {counterline ? tonePal.shadow : ''} {classes}"
 >
   <ToneIcon size={slim ? 14 : 16} class="shrink-0 {slim ? '' : 'mt-0.5'} {tonePal.iconColor}" aria-hidden="true" />
   <div class="flex-1 min-w-0 leading-relaxed text-text">