diff --git a/frontend/src/lib/components/DashboardNeedsMetadata.svelte b/frontend/src/lib/components/DashboardNeedsMetadata.svelte
index cb197418..d7203a8b 100644
--- a/frontend/src/lib/components/DashboardNeedsMetadata.svelte
+++ b/frontend/src/lib/components/DashboardNeedsMetadata.svelte
@@ -1,37 +1,73 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
+import { relativeTimeDe } from '$lib/relativeTime';
 
-type IncompleteDocumentDTO = {
+type IncompleteDoc = {
 	id: string;
 	title: string;
+	uploadedAt: string;
 };
 
 interface Props {
-	incompleteDocs: IncompleteDocumentDTO[];
+	topDocs: IncompleteDoc[];
+	totalCount: number;
 }
 
-let { incompleteDocs }: Props = $props();
+let { topDocs, totalCount }: Props = $props();
+
+const showFooter = $derived(totalCount > 5);
 </script>
 
-{#if incompleteDocs.length > 0}
+{#if topDocs.length > 0}
 	<div data-testid="dashboard-needs-metadata" class="rounded-sm border border-line bg-surface p-6">
 		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
 			{m.dashboard_needs_metadata_heading()}
 		</h2>
-		{#each incompleteDocs as doc (doc.id)}
-			<div class="flex items-center border-b border-line py-2 last:border-0">
+		<ul class="divide-y divide-line">
+			{#each topDocs as doc (doc.id)}
+				<li>
+					<a
+						href="/enrich/{doc.id}"
+						class="group flex items-center gap-3 py-3 text-ink hover:bg-accent-bg/40"
+					>
+						<img
+							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Copy-Item-MD.svg"
+							alt=""
+							aria-hidden="true"
+							class="h-5 w-5 shrink-0 opacity-50 group-hover:opacity-80"
+						/>
+						<div class="min-w-0 flex-1">
+							<div class="truncate font-serif text-base text-ink group-hover:underline">
+								{doc.title}
+							</div>
+							<div class="font-sans text-xs text-ink-3">
+								{relativeTimeDe(new Date(doc.uploadedAt))}
+							</div>
+						</div>
+						<svg
+							class="h-4 w-4 shrink-0 text-ink-3 transition-transform group-hover:translate-x-0.5"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+							aria-hidden="true"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+						</svg>
+					</a>
+				</li>
+			{/each}
+		</ul>
+		{#if showFooter}
+			<div class="mt-4">
 				<a
-					href="/enrich/{doc.id}"
-					class="font-serif text-lg text-ink hover:text-ink-2 hover:underline"
+					href="/enrich"
+					class="font-sans text-sm font-medium text-ink-2 hover:text-ink hover:underline"
 				>
-					{doc.title}
+					{m.dashboard_needs_metadata_show_all_count({ count: totalCount })}
 				</a>
 			</div>
-		{/each}
-		<div class="mt-4">
-			<a href="/enrich" class="font-sans text-sm text-ink-2 hover:text-ink hover:underline"
-				>{m.dashboard_needs_metadata_show_all()}</a
-			>
-		</div>
+		{/if}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts b/frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts
index ee2fdeb8..b08e32ff 100644
--- a/frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts
+++ b/frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts
@@ -6,44 +6,52 @@ import DashboardNeedsMetadata from './DashboardNeedsMetadata.svelte';
 
 afterEach(cleanup);
 
-type IncompleteDocumentDTO = {
-	id: string;
-	title: string;
-};
+type IncompleteDoc = { id: string; title: string; uploadedAt: string };
 
-function makeDoc(id: string, title: string): IncompleteDocumentDTO {
-	return { id, title };
+function makeDoc(id: string, title: string, uploadedAt = '2026-04-20T12:00:00'): IncompleteDoc {
+	return { id, title, uploadedAt };
 }
 
 describe('DashboardNeedsMetadata', () => {
-	it('renders nothing when incompleteDocs is empty', async () => {
-		render(DashboardNeedsMetadata, { incompleteDocs: [] });
+	it('renders nothing when topDocs is empty', async () => {
+		render(DashboardNeedsMetadata, { topDocs: [], totalCount: 0 });
 		const widget = page.getByTestId('dashboard-needs-metadata');
 		await expect.element(widget).not.toBeInTheDocument();
 	});
 
-	it('shows the widget when incompleteDocs are present', async () => {
-		render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Taufschein')] });
-		const widget = page.getByTestId('dashboard-needs-metadata');
-		await expect.element(widget).toBeInTheDocument();
+	it('shows the widget when topDocs is present', async () => {
+		render(DashboardNeedsMetadata, { topDocs: [makeDoc('d1', 'Taufschein')], totalCount: 1 });
+		await expect.element(page.getByTestId('dashboard-needs-metadata')).toBeInTheDocument();
 	});
 
-	it('renders a link to /enrich/{id} for each document', async () => {
+	it('renders one link per row pointing at /enrich/{id}', async () => {
 		const docs = [makeDoc('d1', 'Taufschein'), makeDoc('d2', 'Heiratsurkunde')];
-		render(DashboardNeedsMetadata, { incompleteDocs: docs });
-		const links = page.getByRole('link');
-		await expect.element(links.nth(0)).toHaveAttribute('href', '/enrich/d1');
-		await expect.element(links.nth(1)).toHaveAttribute('href', '/enrich/d2');
+		render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 2 });
+		await expect
+			.element(page.getByRole('link', { name: /Taufschein/ }))
+			.toHaveAttribute('href', '/enrich/d1');
+		await expect
+			.element(page.getByRole('link', { name: /Heiratsurkunde/ }))
+			.toHaveAttribute('href', '/enrich/d2');
 	});
 
-	it('shows the document title in each row', async () => {
-		render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Sterbeurkunde 1930')] });
-		await expect.element(page.getByText('Sterbeurkunde 1930')).toBeInTheDocument();
+	it('hides the footer link when totalCount is 5 or fewer', async () => {
+		const docs = Array.from({ length: 5 }, (_, i) => makeDoc(`d${i}`, `Dok ${i}`));
+		render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 5 });
+		const footer = page.getByRole('link', { name: /Alle/i });
+		await expect.element(footer).not.toBeInTheDocument();
 	});
 
-	it('shows a "Alle anzeigen" link to /enrich', async () => {
-		render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Dok')] });
-		const allLink = page.getByRole('link', { name: /Alle anzeigen/i });
-		await expect.element(allLink).toHaveAttribute('href', '/enrich');
+	it('shows the footer link with totalCount when totalCount > 5', async () => {
+		const docs = Array.from({ length: 5 }, (_, i) => makeDoc(`d${i}`, `Dok ${i}`));
+		render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 12 });
+		const footer = page.getByRole('link', { name: /12/ });
+		await expect.element(footer).toHaveAttribute('href', '/enrich');
+	});
+
+	it('uses totalCount in the footer even when topDocs has fewer items', async () => {
+		const docs = [makeDoc('d1', 'Only one')];
+		render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 50 });
+		await expect.element(page.getByRole('link', { name: /50/ })).toBeInTheDocument();
 	});
 });