diff --git a/web/src/lib/components/profile/VouchCard.svelte b/web/src/lib/components/profile/VouchCard.svelte
index fe7ced25f..cb4501476 100644
--- a/web/src/lib/components/profile/VouchCard.svelte
+++ b/web/src/lib/components/profile/VouchCard.svelte
@@ -2,29 +2,28 @@
 	import { resolve } from "$app/paths";
 	import ArrowUpRight from "$icon/arrow-up-right";
 	import ArrowDownLeft from "$icon/arrow-down-left";
-	import { relativeTime } from "$lib/format";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import type { VouchData } from "./types";
 
 	let { vouch, profileLabel }: { vouch: VouchData; profileLabel: string } = $props();
 
 	const denounce = $derived(vouch.kind === "denounce");
 	const outgoing = $derived(vouch.direction === "outgoing");
+	const tone = $derived(
+		denounce
+			? { bg: "bg-background-danger-subtle", fg: "text-foreground-danger" }
+			: { bg: "bg-background-success-subtle", fg: "text-foreground-success" }
+	);
 </script>
 
 <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"}`}
+		class={`flex size-8 shrink-0 items-center justify-center rounded-full border border-border-default ${tone.bg}`}
 	>
 		{#if outgoing}
-			<ArrowUpRight
-				class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
-				aria-hidden="true"
-			/>
+			<ArrowUpRight class={`size-5 ${tone.fg}`} aria-hidden="true" />
 		{:else}
-			<ArrowDownLeft
-				class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
-				aria-hidden="true"
-			/>
+			<ArrowDownLeft class={`size-5 ${tone.fg}`} aria-hidden="true" />
 		{/if}
 	</div>
 
@@ -45,9 +44,10 @@
 			{:else}
 				<span class="font-medium">{profileLabel}</span>
 			{/if}
-			<span class="typography-paragraph-small text-foreground-placeholder"
-				>{relativeTime(vouch.createdAt)}</span
-			>
+			<TimeAgo
+				value={vouch.createdAt}
+				class="typography-paragraph-small text-foreground-placeholder"
+			/>
 		</div>
 		{#if vouch.reason}
 			<p class="typography-paragraph-small text-foreground-subtle">{vouch.reason}</p>
diff --git a/web/src/lib/components/settings/KeyCardContent.svelte b/web/src/lib/components/settings/KeyCardContent.svelte
index 1c2c07a5d..5a0562c60 100644
--- a/web/src/lib/components/settings/KeyCardContent.svelte
+++ b/web/src/lib/components/settings/KeyCardContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { relativeTime } from "$lib/format";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import KeyIcon from "$icon/key";
 	import Trash2 from "$icon/trash-2";
 
@@ -27,9 +27,9 @@
 				>{fingerprint}</span
 			>
 		{/if}
-		<span class="typography-paragraph-small text-foreground-subtle"
-			>added {relativeTime(createdAt)}</span
-		>
+		<span class="typography-paragraph-small text-foreground-subtle">
+			added <TimeAgo value={createdAt} variant="full" />
+		</span>
 	</div>
 	<Button
 		variant="danger"
diff --git a/web/src/lib/components/timeline/TimelineFollowEvent.svelte b/web/src/lib/components/timeline/TimelineFollowEvent.svelte
index 3e01187d5..c5dc16fc7 100644
--- a/web/src/lib/components/timeline/TimelineFollowEvent.svelte
+++ b/web/src/lib/components/timeline/TimelineFollowEvent.svelte
@@ -2,8 +2,8 @@
 	import User from "$lib/components/ui/User.svelte";
 	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import FollowCard from "$lib/components/profile/FollowCard.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import TimelineCard from "./TimelineCard.svelte";
-	import { relativeTime } from "$lib/format";
 	import { toPerson } from "./mappers";
 	import type { FollowEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
 
@@ -23,7 +23,7 @@
 		<ProfilePopover did={event.subject.did}>
 			<User handle={event.subject.handle} did={event.subject.did} link />
 		</ProfilePopover>
-		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
+		<TimeAgo value={eventAt} class="text-foreground-subtle" />
 	{/snippet}
 
 	<FollowCard
diff --git a/web/src/lib/components/timeline/TimelineRepoEvent.svelte b/web/src/lib/components/timeline/TimelineRepoEvent.svelte
index 6fc278228..781174141 100644
--- a/web/src/lib/components/timeline/TimelineRepoEvent.svelte
+++ b/web/src/lib/components/timeline/TimelineRepoEvent.svelte
@@ -2,8 +2,8 @@
 	import User from "$lib/components/ui/User.svelte";
 	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import TimelineCard from "./TimelineCard.svelte";
-	import { relativeTime } from "$lib/format";
 	import { toRepoCard, repoHref } from "./mappers";
 	import type { RepoEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
 
@@ -31,7 +31,7 @@
 		{:else}
 			<span>created {event.repo.slug}</span>
 		{/if}
-		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
+		<TimeAgo value={eventAt} class="text-foreground-subtle" />
 	{/snippet}
 
 	<RepoCard
diff --git a/web/src/lib/components/timeline/TimelineStarEvent.svelte b/web/src/lib/components/timeline/TimelineStarEvent.svelte
index a42701800..9d849d3a7 100644
--- a/web/src/lib/components/timeline/TimelineStarEvent.svelte
+++ b/web/src/lib/components/timeline/TimelineStarEvent.svelte
@@ -2,8 +2,8 @@
 	import User from "$lib/components/ui/User.svelte";
 	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import TimelineCard from "./TimelineCard.svelte";
-	import { relativeTime } from "$lib/format";
 	import { toRepoCard, repoHref } from "./mappers";
 	import type { StarEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
 
@@ -23,7 +23,7 @@
 		<a href={repoHref(event.repo)} class="text-foreground-default"
 			>{event.repo.owner.handle}/{event.repo.slug}</a
 		>
-		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
+		<TimeAgo value={eventAt} class="text-foreground-subtle" />
 	{/snippet}
 
 	<RepoCard