diff --git a/frontend/src/lib/components/DocumentRow.svelte b/frontend/src/lib/components/DocumentRow.svelte
index 18766320..0bf9fdfa 100644
--- a/frontend/src/lib/components/DocumentRow.svelte
+++ b/frontend/src/lib/components/DocumentRow.svelte
@@ -6,6 +6,7 @@ import { formatDate } from '$lib/utils/date';
 import * as m from '$lib/paraglide/messages.js';
 import ProgressRing from './ProgressRing.svelte';
 import ContributorStack from './ContributorStack.svelte';
+import DocumentThumbnail from './DocumentThumbnail.svelte';
 
 type DocumentSearchItem = components['schemas']['DocumentSearchItem'];
 
@@ -37,7 +38,10 @@ function safeTagColor(color: string | null | undefined): string {
 
 <li class="group transition-colors duration-200 hover:bg-muted/50">
 	<a href="/documents/{doc.id}" class="block px-4 py-4 sm:py-5">
-		<div class="flex gap-0 sm:gap-5">
+		<div class="flex gap-3 sm:gap-5">
+			<!-- Thumbnail tile -->
+			<DocumentThumbnail doc={doc} />
+
 			<!-- Left column -->
 			<div class="flex-1 sm:border-r sm:border-line sm:pr-5">
 				<!-- Title -->
diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index 05fc412c..64978be9 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -72,14 +72,12 @@ const coCorrespondents = $derived.by(() => {
 				documents={sentDocuments}
 				heading={m.person_docs_heading()}
 				emptyMessage={m.person_no_docs()}
-				variant="sent"
 			/>
 
 			<PersonDocumentList
 				documents={receivedDocuments}
 				heading={m.person_received_docs_heading()}
 				emptyMessage={m.person_no_received_docs()}
-				variant="received"
 			/>
 		</div>
 	</div>
diff --git a/frontend/src/routes/persons/[id]/PersonDocumentList.svelte b/frontend/src/routes/persons/[id]/PersonDocumentList.svelte
index cedefbf4..64b71cfb 100644
--- a/frontend/src/routes/persons/[id]/PersonDocumentList.svelte
+++ b/frontend/src/routes/persons/[id]/PersonDocumentList.svelte
@@ -3,14 +3,14 @@ import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
 import { formatDocumentStatus } from '$lib/utils/documentStatusLabel';
 import { sortDocumentsByDate, type SortDir } from '$lib/utils/sort';
+import DocumentThumbnail from '$lib/components/DocumentThumbnail.svelte';
 
 const DOCS_PREVIEW_LIMIT = 5;
 
 let {
 	documents,
 	heading,
-	emptyMessage,
-	variant = 'sent'
+	emptyMessage
 }: {
 	documents: {
 		id: string;
@@ -19,10 +19,12 @@ let {
 		documentDate?: string | null;
 		location?: string | null;
 		status: string;
+		contentType?: string;
+		thumbnailKey?: string;
+		thumbnailGeneratedAt?: string;
 	}[];
 	heading: string;
 	emptyMessage: string;
-	variant?: 'sent' | 'received';
 } = $props();
 
 const yearRange = $derived.by(() => {
@@ -42,11 +44,6 @@ const sortedDocuments = $derived(sortDocumentsByDate(documents, sortDir));
 const visibleDocuments = $derived(
 	showAll ? sortedDocuments : sortedDocuments.slice(0, DOCS_PREVIEW_LIMIT)
 );
-
-// Spec: sent = navy-tint icon bg, received = teal-tint icon bg
-const iconClasses = $derived(
-	variant === 'sent' ? 'bg-primary/10 text-primary' : 'bg-accent/20 text-accent-fg'
-);
 </script>
 
 <div class="mb-4 rounded-sm border border-line bg-surface">
@@ -81,17 +78,8 @@ const iconClasses = $derived(
 						href="/documents/{doc.id}"
 						class="group flex items-center gap-3 border-b border-line px-4 py-3 transition-colors last:border-b-0 hover:bg-muted"
 					>
-						<!-- Tinted doc icon -->
-						<div
-							class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded {iconClasses}"
-						>
-							<img
-								src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
-								alt=""
-								aria-hidden="true"
-								class="h-4 w-4"
-							/>
-						</div>
+						<!-- Thumbnail tile -->
+						<DocumentThumbnail doc={doc} />
 
 						<!-- Title + meta -->
 						<div class="min-w-0 flex-1">