diff --git a/frontend/src/routes/conversations/ConversationTimeline.svelte b/frontend/src/routes/conversations/ConversationTimeline.svelte
index feb6d9f7..ecc9d14a 100644
--- a/frontend/src/routes/conversations/ConversationTimeline.svelte
+++ b/frontend/src/routes/conversations/ConversationTimeline.svelte
@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
 import GroupDivider from '$lib/components/GroupDivider.svelte';
+import { groupDocuments } from '$lib/utils/groupDocuments';
 
 let {
 	documents,
@@ -30,22 +31,15 @@ let {
 
 const documentYears = $derived(
 	documents
-		.map((doc) => (doc.documentDate ? new Date(doc.documentDate).getFullYear() : null))
+		.map((doc) =>
+			doc.documentDate ? new Date(doc.documentDate + 'T12:00:00').getFullYear() : null
+		)
 		.filter((y): y is number => y !== null)
 );
 const yearFrom = $derived(documentYears.length > 0 ? Math.min(...documentYears) : null);
 const yearTo = $derived(documentYears.length > 0 ? Math.max(...documentYears) : null);
 
-const enrichedDocuments = $derived(
-	documents.map((doc, i) => {
-		const year = doc.documentDate ? new Date(doc.documentDate).getFullYear() : null;
-		const prevYear =
-			i > 0 && documents[i - 1].documentDate
-				? new Date(documents[i - 1].documentDate!).getFullYear()
-				: null;
-		return { doc, year, showYearDivider: year !== null && year !== prevYear };
-	})
-);
+const documentGroups = $derived.by(() => groupDocuments(documents, 'DATE', ''));
 </script>
 
 <!-- Summary bar -->
@@ -83,81 +77,83 @@ const enrichedDocuments = $derived(
 
 	<div class="p-6 md:p-8">
 		<div class="relative z-10 flex flex-col gap-4">
-			{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
-				{#if showYearDivider}
-					<GroupDivider label={String(year)} />
+			{#each documentGroups as group (group.label)}
+				{#if group.label}
+					<GroupDivider label={group.label} />
 				{/if}
-				{@const isRight = doc.sender?.id === senderId}
+				{#each group.documents as doc (doc.id)}
+					{@const isRight = doc.sender?.id === senderId}
 
-				<!-- Message Row -->
-				<div class="flex w-full {isRight ? 'justify-end' : 'justify-start'}">
-					<!-- Bubble Group -->
-					<div
-						class="flex max-w-[90%] gap-3 md:max-w-[70%] {isRight
+					<!-- Message Row -->
+					<div class="flex w-full {isRight ? 'justify-end' : 'justify-start'}">
+						<!-- Bubble Group -->
+						<div
+							class="flex max-w-[90%] gap-3 md:max-w-[70%] {isRight
 							? 'flex-row-reverse'
 							: 'flex-row'}"
-					>
-						<!-- AVATAR -->
-						<div class="mt-auto mb-1 hidden flex-shrink-0 sm:block">
-							<div
-								class="flex h-8 w-8 items-center justify-center rounded-full border font-serif text-xs shadow-sm
+						>
+							<!-- AVATAR -->
+							<div class="mt-auto mb-1 hidden flex-shrink-0 sm:block">
+								<div
+									class="flex h-8 w-8 items-center justify-center rounded-full border font-serif text-xs shadow-sm
                                 {isRight
 									? 'border-primary bg-primary text-primary-fg'
 									: 'border-line bg-surface text-ink'}"
-							>
-								{#if doc.sender}
-									{doc.sender.firstName ? doc.sender.firstName[0] : doc.sender.lastName[0]}{doc.sender.lastName[0]}
-								{:else}
-									?
-								{/if}
+								>
+									{#if doc.sender}
+										{doc.sender.firstName ? doc.sender.firstName[0] : doc.sender.lastName[0]}{doc.sender.lastName[0]}
+									{:else}
+										?
+									{/if}
+								</div>
 							</div>
-						</div>
 
-						<!-- BUBBLE CARD -->
-						<a
-							href="/documents/{doc.id}"
-							class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
+							<!-- BUBBLE CARD -->
+							<a
+								href="/documents/{doc.id}"
+								class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
                                {isRight
 								? 'rounded-br-none border-primary bg-primary text-primary-fg'
 								: 'rounded-bl-none border-line bg-muted/50 text-ink'}"
-						>
-							<!-- Header -->
-							<div class="mb-2 flex items-start justify-between gap-4">
-								<h3
-									class="font-serif text-sm leading-snug font-medium {isRight
+							>
+								<!-- Header -->
+								<div class="mb-2 flex items-start justify-between gap-4">
+									<h3
+										class="font-serif text-sm leading-snug font-medium {isRight
 										? 'text-primary-fg'
 										: 'text-ink'}"
-								>
-									{doc.title || doc.originalFilename}
-								</h3>
+									>
+										{doc.title || doc.originalFilename}
+									</h3>
 
-								<!-- Status Dot -->
-								<span
-									class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
+									<!-- Status Dot -->
+									<span
+										class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
                                     {doc.status === 'UPLOADED' ? 'bg-accent' : 'bg-yellow-400'}"
-									title={doc.status}
-								>
-								</span>
-							</div>
+										title={doc.status}
+									>
+									</span>
+								</div>
 
-							<!-- Metadata -->
-							<div
-								class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
+								<!-- Metadata -->
+								<div
+									class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
 									? 'text-primary-fg/70'
 									: 'text-ink-2'}"
-							>
-								<span class="flex items-center">
-									{doc.documentDate ? formatDate(doc.documentDate) : '—'}
-								</span>
-								{#if doc.location}
+								>
 									<span class="flex items-center">
-										• {doc.location}
+										{doc.documentDate ? formatDate(doc.documentDate) : '—'}
 									</span>
-								{/if}
-							</div>
-						</a>
+									{#if doc.location}
+										<span class="flex items-center">
+											• {doc.location}
+										</span>
+									{/if}
+								</div>
+							</a>
+						</div>
 					</div>
-				</div>
+				{/each}
 			{/each}
 		</div>
 	</div>