diff --git a/frontend/src/lib/document/TimelineControls.svelte b/frontend/src/lib/document/TimelineControls.svelte
new file mode 100644
index 00000000..f33f69f5
--- /dev/null
+++ b/frontend/src/lib/document/TimelineControls.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
+let {
+	isZoomed,
+	hasSelection,
+	onresetzoom,
+	onclearselection
+}: {
+	isZoomed: boolean;
+	hasSelection: boolean;
+	onresetzoom: () => void;
+	onclearselection: () => void;
+} = $props();
+</script>
+
+<div class="absolute top-2 right-2 flex items-center gap-1">
+	{#if isZoomed}
+		<button
+			type="button"
+			data-testid="timeline-zoom-reset"
+			aria-label={m.timeline_zoom_reset()}
+			title={m.timeline_zoom_reset()}
+			onclick={onresetzoom}
+			class="hover:text-ink-1 inline-flex h-6 items-center justify-center gap-1 rounded-sm px-2 text-xs text-ink-3 hover:bg-canvas"
+		>
+			↩
+		</button>
+	{/if}
+	{#if hasSelection}
+		<button
+			type="button"
+			data-testid="timeline-clear"
+			aria-label={m.timeline_clear_selection()}
+			onclick={onclearselection}
+			class="hover:text-ink-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-3 hover:bg-canvas"
+		>
+			×
+		</button>
+	{/if}
+</div>
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte b/frontend/src/lib/document/TimelineDensityFilter.svelte
index 62d7f4d5..322dd3c3 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte
@@ -12,6 +12,7 @@ import { getLocale } from '$lib/paraglide/runtime';
 import TimelineBars from '$lib/document/TimelineBars.svelte';
 import TimelineYAxis from '$lib/document/TimelineYAxis.svelte';
 import TimelineXAxis from '$lib/document/TimelineXAxis.svelte';
+import TimelineControls from '$lib/document/TimelineControls.svelte';
 import type { components } from '$lib/generated/api';
 
 type MonthBucket = components['schemas']['MonthBucket'];
@@ -268,30 +269,11 @@ const dragLiveMessage = $derived.by(() => {
 			{dragLiveMessage}
 		</div>
 
-		<div class="absolute top-2 right-2 flex items-center gap-1">
-			{#if isZoomed}
-				<button
-					type="button"
-					data-testid="timeline-zoom-reset"
-					aria-label={m.timeline_zoom_reset()}
-					title={m.timeline_zoom_reset()}
-					onclick={resetZoom}
-					class="hover:text-ink-1 inline-flex h-6 items-center justify-center gap-1 rounded-sm px-2 text-xs text-ink-3 hover:bg-canvas"
-				>
-					↩
-				</button>
-			{/if}
-			{#if hasSelection}
-				<button
-					type="button"
-					data-testid="timeline-clear"
-					aria-label={m.timeline_clear_selection()}
-					onclick={clearSelection}
-					class="hover:text-ink-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-3 hover:bg-canvas"
-				>
-					×
-				</button>
-			{/if}
-		</div>
+		<TimelineControls
+			isZoomed={isZoomed}
+			hasSelection={hasSelection}
+			onresetzoom={resetZoom}
+			onclearselection={clearSelection}
+		/>
 	</div>
 {/if}