diff --git a/openspec/changes/profile-avatars/tasks.md b/openspec/changes/profile-avatars/tasks.md
index 1a6541d..ca413bc 100644
--- a/openspec/changes/profile-avatars/tasks.md
+++ b/openspec/changes/profile-avatars/tasks.md
@@ -2,16 +2,16 @@
 
 ## 1. Avatar component
 
-- [ ] 1.1 Create `src/lib/components/Avatar.svelte`: renders the avatar image for a handle (resolution URL per design D1, size prop), falling back to the textual handle presentation on load error or missing handle
-- [ ] 1.2 Add the popover variant for provenance use: focusable trigger, popover with handle on hover/focus (tap-toggle on touch), DID via accessible label/title
+- [x] 1.1 Create `src/lib/components/Avatar.svelte`: renders the avatar image for a handle (resolution URL per design D1, size prop), falling back to the textual handle presentation on load error or missing handle
+- [x] 1.2 Add the popover variant for provenance use: focusable trigger, popover with handle on hover/focus (tap-toggle on touch), DID via accessible label/title
 
 ## 2. Integration
 
-- [ ] 2.1 Nav "who" chip in `src/routes/(app)/+layout.svelte`: avatar beside the handle, keeping the existing `title={did}`
-- [ ] 2.2 Categorization provenance in `src/routes/(app)/ledger/+page.svelte`: replace actor handle text with the popover avatar (fallback preserves today's text)
+- [x] 2.1 Nav "who" chip in `src/routes/(app)/+layout.svelte`: avatar beside the handle, keeping the existing `title={did}`
+- [x] 2.2 Categorization provenance in `src/routes/(app)/ledger/+page.svelte`: replace actor handle text with the popover avatar (fallback preserves today's text)
 
 ## 3. Verification
 
-- [ ] 3.1 Verify in the browser: avatar renders in nav and provenance history; popover works via mouse hover and keyboard focus; DID present in accessible attributes
-- [ ] 3.2 Verify fallback: with the avatar URL unreachable (blocked/bogus handle), text presentation returns and no layout breaks
-- [ ] 3.3 Confirm no server-side profile fetches were introduced (avatar requests appear only in browser network log)
+- [x] 3.1 Verify in the browser: avatar renders in nav and provenance history; popover works via mouse hover and keyboard focus; DID present in accessible attributes (focus rule verified by construction — sandbox pane lacks window focus, so `:focus` can't be exercised there)
+- [x] 3.2 Verify fallback: with the avatar URL unreachable (blocked/bogus handle), text presentation returns and no layout breaks
+- [x] 3.3 Confirm no server-side profile fetches were introduced (avatar requests appear only in browser network log)
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
new file mode 100644
index 0000000..d3643da
--- /dev/null
+++ b/src/lib/components/Avatar.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	let {
+		handle,
+		did = null,
+		size = 20,
+		popover = false,
+		focusable = true,
+		fallback = true
+	}: {
+		handle: string | null;
+		did?: string | null;
+		size?: number;
+		/** Reveal the handle in a popover on hover/focus instead of relying on surrounding text. */
+		popover?: boolean;
+		/** Set false when the trigger sits inside an already-focusable element (e.g. a link). */
+		focusable?: boolean;
+		/** Render the handle as text when the image is unavailable; set false when the handle is already visible nearby. */
+		fallback?: boolean;
+	} = $props();
+
+	let failed = $state(false);
+	// Public ATProto avatar resolution, keyed by handle (design D1); the app
+	// server never fetches profile data. 2x pixel density for crisp rendering.
+	let src = $derived(
+		handle ? `https://atp.pics/${encodeURIComponent(handle)}?w=${size * 2}&h=${size * 2}` : null
+	);
+</script>
+
+{#if src && !failed}
+	{#if popover}
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -- keyboard users need focus to reveal the popover -->
+		<span
+			class="wrap"
+			tabindex={focusable ? 0 : undefined}
+			role="img"
+			aria-label={handle}
+			title={did ?? undefined}
+			style:--avatar-size="{size}px"
+		>
+			<img {src} alt="" width={size} height={size} loading="lazy" onerror={() => (failed = true)} />
+			<span class="pop" aria-hidden="true">{handle}</span>
+		</span>
+	{:else}
+		<img
+			class="plain"
+			{src}
+			alt={fallback ? handle : ''}
+			title={did ?? undefined}
+			width={size}
+			height={size}
+			loading="lazy"
+			onerror={() => (failed = true)}
+		/>
+	{/if}
+{:else if fallback && (handle ?? did)}
+	<span class="fallback" title={did ?? undefined}>{handle ?? did}</span>
+{/if}
+
+<style>
+	img {
+		display: block;
+		border-radius: 50%;
+		object-fit: cover;
+		background: var(--bg-sunken);
+	}
+
+	.plain {
+		display: inline-block;
+		vertical-align: text-bottom;
+	}
+
+	.wrap {
+		position: relative;
+		display: inline-flex;
+		vertical-align: text-bottom;
+		border-radius: 50%;
+	}
+
+	.wrap:focus-visible {
+		outline: 2px solid var(--text-muted);
+		outline-offset: 1px;
+	}
+
+	.pop {
+		position: absolute;
+		bottom: calc(100% + 4px);
+		left: 50%;
+		transform: translateX(-50%);
+		background: var(--bg-raised);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		padding: 1px var(--space-2);
+		font-size: var(--text-xs);
+		line-height: 1.5;
+		color: var(--text);
+		white-space: nowrap;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--dur-micro) var(--ease-out);
+		z-index: 20;
+	}
+
+	.wrap:hover .pop,
+	.wrap:focus .pop,
+	:global(a:focus-visible) > .wrap .pop {
+		opacity: 1;
+	}
+</style>
diff --git a/src/lib/server/services/ledger.ts b/src/lib/server/services/ledger.ts
index 447e81b..37680e4 100644
--- a/src/lib/server/services/ledger.ts
+++ b/src/lib/server/services/ledger.ts
@@ -29,6 +29,7 @@ export interface LedgerRow {
 	provenance: EventSource | null;
 	provenanceRulePattern: string | null;
 	provenanceActorHandle: string | null;
+	provenanceActorDid: string | null;
 }
 
 export function monthRange(month: string): { start: number; end: number } {
@@ -73,7 +74,8 @@ export function listLedger(db: DatabaseSync, filters: LedgerFilters = {}): Ledge
 			        ${EFFECTIVE_TS} AS effective_at,
 			        t.amount_cents, a.currency, t.description, t.payee, t.memo, t.pending,
 			        t.category_id, c.name AS category_name,
-			        e.source AS prov_source, r.pattern AS prov_pattern, u.handle AS prov_handle
+			        e.source AS prov_source, r.pattern AS prov_pattern, u.handle AS prov_handle,
+			        e.actor_did AS prov_actor_did
 			 FROM transactions t
 			 JOIN accounts a ON a.id = t.account_id
 			 LEFT JOIN categories c ON c.id = t.category_id
@@ -103,7 +105,8 @@ export function listLedger(db: DatabaseSync, filters: LedgerFilters = {}): Ledge
 		categoryName: r.category_name as string | null,
 		provenance: (r.prov_source as EventSource | null) ?? null,
 		provenanceRulePattern: r.prov_pattern as string | null,
-		provenanceActorHandle: r.prov_handle as string | null
+		provenanceActorHandle: r.prov_handle as string | null,
+		provenanceActorDid: r.prov_actor_did as string | null
 	}));
 }
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 68e0d08..5dbbc9f 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { browser } from '$app/environment';
+	import Avatar from '$lib/components/Avatar.svelte';
 
 	let { data, children } = $props();
 
@@ -44,7 +45,10 @@
 		<div class="side-footer">
 			<button class="ghost" onclick={cycleTheme}>Theme: {theme}</button>
 			{#if data.user}
-				<div class="who" title={data.user.did}>{data.user.handle}</div>
+				<div class="who" title={data.user.did}>
+				<Avatar handle={data.user.handle} size={20} fallback={false} />
+				<span class="who-handle">{data.user.handle}</span>
+			</div>
 				<form method="POST" action="/logout">
 					<button class="ghost" type="submit">Sign out</button>
 				</form>
@@ -116,11 +120,17 @@
 	}
 
 	.who {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
 		color: var(--text-faint);
+		padding-inline: var(--space-2);
+	}
+
+	.who-handle {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		padding-inline: var(--space-2);
 	}
 
 	.ghost {
diff --git a/src/routes/(app)/ledger/+page.svelte b/src/routes/(app)/ledger/+page.svelte
index 168a6fc..f64bc7b 100644
--- a/src/routes/(app)/ledger/+page.svelte
+++ b/src/routes/(app)/ledger/+page.svelte
@@ -2,6 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { page } from '$app/state';
 	import { formatCents, formatDay } from '$lib/format';
+	import Avatar from '$lib/components/Avatar.svelte';
 
 	let { data } = $props();
 
@@ -16,10 +17,9 @@
 	}
 
 	function provenanceLabel(row: (typeof data.rows)[number]): string {
-		if (!row.provenance) return '';
 		if (row.provenance === 'rule') return `⚙ ${row.provenanceRulePattern ?? 'rule'}`;
 		if (row.provenance === 'reconciliation') return '↻ carried';
-		return row.provenanceActorHandle ?? 'someone';
+		return '';
 	}
 
 	function extraEntries(extra: string | null): [string, string][] {
@@ -131,7 +131,25 @@
 						</form>
 					</td>
 					<td class="prov">
-						{#if row.provenance}
+						{#if row.provenance === 'manual'}
+							<a
+								class="badge link"
+								href={filterUrl({ history: String(row.id) })}
+								data-sveltekit-noscroll
+								aria-label="Categorized by {row.provenanceActorHandle ??
+									row.provenanceActorDid ??
+									'someone'}"
+								title={row.provenanceActorDid ?? undefined}
+							>
+								<Avatar
+									handle={row.provenanceActorHandle}
+									did={row.provenanceActorDid}
+									size={16}
+									popover={true}
+									focusable={false}
+								/>
+							</a>
+						{:else if row.provenance}
 							<a
 								class="badge link"
 								href={filterUrl({ history: String(row.id) })}
@@ -185,7 +203,12 @@
 												{:else if event.source === 'reconciliation'}
 													carried from a pending transaction
 												{:else}
-													{event.actorHandle ?? event.actorDid}
+													<Avatar
+														handle={event.actorHandle}
+														did={event.actorDid}
+														size={16}
+														popover={true}
+													/>
 												{/if}
 												set <strong>{event.categoryName ?? 'uncategorized'}</strong>
 											</li>
@@ -288,6 +311,14 @@
 		background: var(--border);
 	}
 
+	/* When the chip holds an avatar (not its text fallback), hug the circle
+	   instead of using the pill's text padding. */
+	.badge.link:has(:global(.wrap)) {
+		padding: 2px;
+		line-height: 0;
+		vertical-align: middle;
+	}
+
 	.prov {
 		white-space: nowrap;
 	}