diff --git a/web/src/lib/components/profile/VouchCard.svelte b/web/src/lib/components/profile/VouchCard.svelte
index 3032e5da..1f21510c 100644
--- a/web/src/lib/components/profile/VouchCard.svelte
+++ b/web/src/lib/components/profile/VouchCard.svelte
@@ -1,39 +1,54 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
-	import ShieldCheck from "$icon/shield-check";
-	import ShieldAlert from "$icon/shield-alert";
+	import ArrowUpRight from "$icon/arrow-up-right";
+	import ArrowDownLeft from "$icon/arrow-down-left";
 	import { relativeTime } from "$lib/format";
 	import type { VouchData } from "./types";
 
-	let { vouch }: { vouch: VouchData } = $props();
+	let { vouch, profileLabel }: { vouch: VouchData; profileLabel: string } = $props();
+
 	const denounce = $derived(vouch.kind === "denounce");
+	const outgoing = $derived(vouch.direction === "outgoing");
 </script>
 
-<article class="rounded border border-border-default bg-background-default px-6 py-4 shadow-sm">
-	<div class="flex items-center gap-4">
-		<Avatar src={vouch.avatar} handle={vouch.handle} size="size-12" />
-		<div class="min-w-0 flex-grow">
-			<a
-				href={resolve(`/${vouch.handle}` as "/")}
-				class="block truncate font-medium text-foreground-default"
-			>
-				{vouch.handle}
-			</a>
-			<span
-				class={`flex items-center gap-1 text-sm ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
-			>
-				{#if denounce}
-					<ShieldAlert class="size-3.5" aria-hidden="true" />denounced
-				{:else}
-					<ShieldCheck class="size-3.5" aria-hidden="true" />vouched
-				{/if}
-				<span class="text-foreground-subtle">&middot; {relativeTime(vouch.createdAt)}</span>
-			</span>
-		</div>
+<div class="relative z-10 -ml-4 flex items-start gap-3">
+	<div
+		class={`flex size-8 shrink-0 items-center justify-center rounded-full border border-border-default ${denounce ? "bg-background-danger-subtle" : "bg-background-success-subtle"}`}
+	>
+		{#if outgoing}
+			<ArrowUpRight
+				class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
+				aria-hidden="true"
+			/>
+		{:else}
+			<ArrowDownLeft
+				class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
+				aria-hidden="true"
+			/>
+		{/if}
 	</div>
 
-	{#if vouch.reason}
-		<p class="mt-3 text-sm text-foreground-muted">{vouch.reason}</p>
-	{/if}
-</article>
+	<div class="mt-1 flex flex-col gap-1">
+		<div class="flex flex-wrap items-center gap-1 text-foreground-default">
+			{#if outgoing}
+				<span class="font-medium">{profileLabel}</span>
+			{:else}
+				<a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline"
+					>{vouch.handle}</a
+				>
+			{/if}
+			<span class="text-foreground-subtle">{denounce ? "denounced" : "vouched for"}</span>
+			{#if outgoing}
+				<a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline"
+					>{vouch.handle}</a
+				>
+			{:else}
+				<span class="font-medium">{profileLabel}</span>
+			{/if}
+			<span class="text-sm text-foreground-placeholder">{relativeTime(vouch.createdAt)}</span>
+		</div>
+		{#if vouch.reason}
+			<p class="text-sm text-foreground-subtle">{vouch.reason}</p>
+		{/if}
+	</div>
+</div>
diff --git a/web/src/lib/components/profile/tabs/VouchTab.svelte b/web/src/lib/components/profile/tabs/VouchTab.svelte
index 83e2f68e..45a23b33 100644
--- a/web/src/lib/components/profile/tabs/VouchTab.svelte
+++ b/web/src/lib/components/profile/tabs/VouchTab.svelte
@@ -3,7 +3,13 @@
 	import EmptyState from "../EmptyState.svelte";
 	import type { VouchData } from "../types";
 
-	let { vouches }: { vouches: VouchData[] } = $props();
+	let {
+		vouches,
+		isSelf,
+		profileHandle
+	}: { vouches: VouchData[]; isSelf: boolean; profileHandle: string } = $props();
+
+	const profileLabel = $derived(isSelf ? "you" : profileHandle);
 </script>
 
 <section>
@@ -11,9 +17,10 @@
 	{#if vouches.length === 0}
 		<EmptyState message="No vouches yet." />
 	{:else}
-		<div class="flex flex-col gap-4">
+		<div class="relative ml-5 flex flex-col gap-6 border border-transparent px-4">
+			<div class="absolute bottom-8 top-8 z-0 w-0.5 bg-border-default"></div>
 			{#each vouches as vouch (vouch.uri)}
-				<VouchCard {vouch} />
+				<VouchCard {vouch} {profileLabel} />
 			{/each}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/profile/types.ts b/web/src/lib/components/profile/types.ts
index cb3de0d4..7125e2c3 100644
--- a/web/src/lib/components/profile/types.ts
+++ b/web/src/lib/components/profile/types.ts
@@ -59,6 +59,7 @@ export interface VouchData {
 	handle: string;
 	avatar?: string;
 	kind: "vouch" | "denounce";
+	direction: "incoming" | "outgoing";
 	reason?: string;
 	createdAt: string;
 }
diff --git a/web/src/routes/[handle]/+page.svelte b/web/src/routes/[handle]/+page.svelte
index 28a74204..9b5db8a7 100644
--- a/web/src/routes/[handle]/+page.svelte
+++ b/web/src/routes/[handle]/+page.svelte
@@ -22,5 +22,5 @@
 {:else if data.tab === "following"}
 	<PeopleTab people={data.people} title="Following" emptyMessage="Not following anyone yet." />
 {:else if data.tab === "vouches"}
-	<VouchTab vouches={data.vouches} />
+	<VouchTab vouches={data.vouches} isSelf={data.isSelf} profileHandle={data.profileHandle} />
 {/if}