diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index 995077a4..614ae9f5 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -6,6 +6,7 @@ import { clickOutside } from '$lib/actions/clickOutside';
 import PersonChipRow from './PersonChipRow.svelte';
 import OverflowPillButton from './OverflowPillButton.svelte';
 import DocumentMetadataDrawer from './DocumentMetadataDrawer.svelte';
+import BackButton from './BackButton.svelte';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -132,19 +133,8 @@ let mobileMenuOpen = $state(false);
 		<!-- Accent bar -->
 		<div class="h-full w-[3px] shrink-0 bg-primary"></div>
 
-		<!-- Back link — 44×44px touch target -->
-		<a
-			href="/"
-			aria-label={m.topbar_back_label()}
-			class="group -ml-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="h-5 w-5"
-			/>
-		</a>
+		<!-- Back button -->
+		<BackButton class="-ml-0.5 shrink-0" />
 
 		<!-- Divider -->
 		<div class="mx-2 h-6 w-px shrink-0 bg-line"></div>