diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index 40874939..7d610706 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -56,7 +56,7 @@ let mobileMenuOpen = $state(false);
 		aria-pressed={false}
 		class={mobile
 			? 'flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
-			: 'hidden items-center gap-1.5 rounded border border-turquoise px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-turquoise hover:text-turquoise-fg focus-visible:ring-2 focus-visible:ring-primary md:flex'}
+			: 'hidden items-center gap-1.5 rounded border border-primary px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary md:flex'}
 	>
 		<svg
 			class="h-5 w-5 shrink-0"
@@ -84,8 +84,8 @@ let mobileMenuOpen = $state(false);
 		aria-label={m.transcription_mode_stop()}
 		aria-pressed={true}
 		class={mobile
-			? 'flex w-full items-center gap-2 rounded bg-turquoise px-3 py-2 text-left text-[16px] text-turquoise-fg transition focus-visible:ring-2 focus-visible:ring-primary'
-			: 'flex items-center gap-1.5 rounded bg-turquoise px-3 py-1.5 font-sans text-[16px] font-medium text-white transition focus-visible:ring-2 focus-visible:ring-primary'}
+			? 'flex w-full items-center gap-2 rounded bg-primary px-3 py-2 text-left text-[16px] text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary'
+			: 'flex items-center gap-1.5 rounded bg-primary px-3 py-1.5 font-sans text-[16px] font-medium text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary'}
 	>
 		<svg
 			class="h-5 w-5 shrink-0"