diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index 1cdf5948..1112a1c3 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -43,6 +43,72 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
 let mobileMenuOpen = $state(false);
 </script>
 
+{#snippet annotateBtn(mobile: boolean)}
+	<button
+		onclick={() => {
+			annotateMode = true;
+			if (mobile) mobileMenuOpen = false;
+		}}
+		aria-label={m.doc_panel_annotate()}
+		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-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'}
+	>
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-5 w-5 shrink-0"
+		/>
+		{m.doc_panel_annotate()}
+	</button>
+{/snippet}
+
+{#snippet annotateStopBtn(mobile: boolean)}
+	<button
+		onclick={() => {
+			annotateMode = false;
+			if (mobile) mobileMenuOpen = false;
+		}}
+		aria-label={m.doc_panel_annotate_stop()}
+		aria-pressed={true}
+		class={mobile
+			? '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'
+			: 'hidden 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 md:flex'}
+	>
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-5 w-5 shrink-0 invert"
+		/>
+		{m.doc_panel_annotate_stop()}
+	</button>
+{/snippet}
+
+{#snippet downloadLink(mobile: boolean)}
+	<a
+		href={fileUrl}
+		download={doc.originalFilename}
+		onclick={() => {
+			if (mobile) mobileMenuOpen = false;
+		}}
+		class={mobile
+			? 'flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
+			: 'hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block'}
+		title={m.doc_download_title()}
+	>
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-5 w-5 shrink-0"
+		/>
+		{#if mobile}{m.doc_download_title()}{/if}
+	</a>
+{/snippet}
+
 <div data-topbar class="border-b border-line bg-surface shadow-sm">
 	<!-- Main row -->
 	<div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
@@ -102,37 +168,11 @@ let mobileMenuOpen = $state(false);
 		<!-- Action buttons -->
 		<div class="ml-2 flex shrink-0 items-center gap-1.5 pr-3 font-sans">
 			{#if canAnnotate && isPdf && !annotateMode}
-				<button
-					onclick={() => (annotateMode = true)}
-					aria-label={m.doc_panel_annotate()}
-					aria-pressed={false}
-					class="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"
-				>
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-5 w-5"
-					/>
-					<span>{m.doc_panel_annotate()}</span>
-				</button>
+				{@render annotateBtn(false)}
 			{/if}
 
 			{#if canAnnotate && isPdf && annotateMode}
-				<button
-					onclick={() => (annotateMode = false)}
-					aria-label={m.doc_panel_annotate_stop()}
-					aria-pressed={true}
-					class="hidden 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 md:flex"
-				>
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-5 w-5 invert"
-					/>
-					<span>{m.doc_panel_annotate_stop()}</span>
-				</button>
+				{@render annotateStopBtn(false)}
 			{/if}
 
 			{#if canWrite && !annotateMode}
@@ -152,19 +192,7 @@ let mobileMenuOpen = $state(false);
 			{/if}
 
 			{#if doc.filePath && !annotateMode}
-				<a
-					href={fileUrl}
-					download={doc.originalFilename}
-					class="hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block"
-					title={m.doc_download_title()}
-				>
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-5 w-5"
-					/>
-				</a>
+				{@render downloadLink(false)}
 			{/if}
 
 			<!-- Kebab menu — mobile only, contains actions hidden below md -->
@@ -197,59 +225,15 @@ let mobileMenuOpen = $state(false);
 							class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg"
 						>
 							{#if canAnnotate && isPdf && !annotateMode}
-								<button
-									role="menuitem"
-									onclick={() => {
-										annotateMode = true;
-										mobileMenuOpen = false;
-									}}
-									class="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"
-								>
-									<img
-										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
-										alt=""
-										aria-hidden="true"
-										class="h-5 w-5 shrink-0"
-									/>
-									{m.doc_panel_annotate()}
-								</button>
+								{@render annotateBtn(true)}
 							{/if}
 
 							{#if canAnnotate && isPdf && annotateMode}
-								<button
-									role="menuitem"
-									onclick={() => {
-										annotateMode = false;
-										mobileMenuOpen = false;
-									}}
-									class="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"
-								>
-									<img
-										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
-										alt=""
-										aria-hidden="true"
-										class="h-5 w-5 shrink-0 invert"
-									/>
-									{m.doc_panel_annotate_stop()}
-								</button>
+								{@render annotateStopBtn(true)}
 							{/if}
 
 							{#if doc.filePath}
-								<a
-									role="menuitem"
-									href={fileUrl}
-									download={doc.originalFilename}
-									onclick={() => (mobileMenuOpen = false)}
-									class="flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
-								>
-									<img
-										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
-										alt=""
-										aria-hidden="true"
-										class="h-5 w-5 shrink-0"
-									/>
-									{m.doc_download_title()}
-								</a>
+								{@render downloadLink(true)}
 							{/if}
 						</div>
 					{/if}