diff --git a/frontend/src/lib/components/ConversationThumbnail.svelte b/frontend/src/lib/components/ConversationThumbnail.svelte
index 376f0c40..ca99a366 100644
--- a/frontend/src/lib/components/ConversationThumbnail.svelte
+++ b/frontend/src/lib/components/ConversationThumbnail.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
-import { thumbnailUrl } from '$lib/thumbnails';
+import type { components } from '$lib/generated/api';
 
-type Doc = {
-	id: string;
-	thumbnailKey?: string;
-	thumbnailGeneratedAt?: string;
-	thumbnailAspect?: 'PORTRAIT' | 'LANDSCAPE';
-	pageCount?: number;
-};
+type Doc = Pick<
+	components['schemas']['Document'],
+	'id' | 'thumbnailUrl' | 'thumbnailAspect' | 'pageCount'
+>;
 
 let { doc }: { doc: Doc } = $props();
 
-const url = $derived(thumbnailUrl(doc));
+const url = $derived(doc.thumbnailUrl ?? null);
 const aspect = $derived(doc.thumbnailAspect ?? 'PORTRAIT');
 const pageCount = $derived(doc.pageCount ?? 1);
 const tileClass = $derived(aspect === 'LANDSCAPE' ? 'h-[120px] w-[168px]' : 'h-[168px] w-[120px]');
diff --git a/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts b/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts
index ccebd29b..7b074f0b 100644
--- a/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts
+++ b/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts
@@ -12,8 +12,7 @@ describe('ConversationThumbnail', () => {
 		render(ConversationThumbnail, {
 			doc: {
 				id: '1111',
-				thumbnailKey: 'thumbnails/1111.jpg',
-				thumbnailGeneratedAt: '2026-04-10T09:00:00Z',
+				thumbnailUrl: '/api/documents/1111/thumbnail?v=2026-04-10T09%3A00%3A00Z',
 				thumbnailAspect: 'PORTRAIT',
 				pageCount: 1
 			}
@@ -29,7 +28,7 @@ describe('ConversationThumbnail', () => {
 		render(ConversationThumbnail, {
 			doc: {
 				id: 'p1',
-				thumbnailKey: 'thumbnails/p1.jpg',
+				thumbnailUrl: '/api/documents/p1/thumbnail?v=2026-04-10T09%3A00%3A00Z',
 				thumbnailAspect: 'PORTRAIT',
 				pageCount: 1
 			}
@@ -43,7 +42,7 @@ describe('ConversationThumbnail', () => {
 		render(ConversationThumbnail, {
 			doc: {
 				id: 'l1',
-				thumbnailKey: 'thumbnails/l1.jpg',
+				thumbnailUrl: '/api/documents/l1/thumbnail?v=2026-04-10T09%3A00%3A00Z',
 				thumbnailAspect: 'LANDSCAPE',
 				pageCount: 1
 			}
@@ -57,7 +56,7 @@ describe('ConversationThumbnail', () => {
 		render(ConversationThumbnail, {
 			doc: {
 				id: 'n1',
-				thumbnailKey: 'thumbnails/n1.jpg'
+				thumbnailUrl: '/api/documents/n1/thumbnail?v=2026-04-10T09%3A00%3A00Z'
 			}
 		});
 
@@ -69,7 +68,7 @@ describe('ConversationThumbnail', () => {
 		render(ConversationThumbnail, {
 			doc: {
 				id: 'm1',
-				thumbnailKey: 'thumbnails/m1.jpg',
+				thumbnailUrl: '/api/documents/m1/thumbnail?v=2026-04-10T09%3A00%3A00Z',
 				thumbnailAspect: 'PORTRAIT',
 				pageCount: 4
 			}
@@ -87,7 +86,7 @@ describe('ConversationThumbnail', () => {
 		render(ConversationThumbnail, {
 			doc: {
 				id: 's1',
-				thumbnailKey: 'thumbnails/s1.jpg',
+				thumbnailUrl: '/api/documents/s1/thumbnail?v=2026-04-10T09%3A00%3A00Z',
 				thumbnailAspect: 'PORTRAIT',
 				pageCount: 1
 			}
@@ -97,7 +96,7 @@ describe('ConversationThumbnail', () => {
 		expect(badge).toBeNull();
 	});
 
-	it('renders a skeleton placeholder when no thumbnailKey is set yet', () => {
+	it('renders a skeleton placeholder when no thumbnailUrl is set yet', () => {
 		render(ConversationThumbnail, {
 			doc: {
 				id: 'blank',