diff --git a/web/src/lib/components/profile/pages.ts b/web/src/lib/components/profile/pages.ts
index 63b12e53..de1d044e 100644
--- a/web/src/lib/components/profile/pages.ts
+++ b/web/src/lib/components/profile/pages.ts
@@ -1,5 +1,5 @@
 // page fetchers for the profile tabs, shared between the route load (first
-// page) and the tab components (load more). identities come from the enrich
+// page) and the tab components (pagination). identities come from the enrich
 // sidecar's minidoc payloads, resolveMiniDoc only fires for sidecar misses
 
 import type { BobbinContext } from "$lib/api/client";
diff --git a/web/src/lib/components/profile/pagination.svelte.ts b/web/src/lib/components/profile/pagination.svelte.ts
new file mode 100644
index 00000000..1856cf32
--- /dev/null
+++ b/web/src/lib/components/profile/pagination.svelte.ts
@@ -0,0 +1,59 @@
+export interface CursorPage<T, C> {
+	items: T[];
+	cursor?: C;
+}
+
+type CursorPagerState =
+	| { kind: "at-page"; page: number }
+	| { kind: "loading"; page: number }
+	| { kind: "failed"; page: number };
+
+export const pageCount = (total: number, limit: number): number =>
+	Math.max(1, Math.ceil(Math.max(total, 0) / limit));
+
+// search uses this since there isn't a known limit
+export const discoveredPageCount = (page: number, hasNext: boolean): number =>
+	Math.max(1, page + (hasNext ? 1 : 0));
+
+export const createCursorPager = <T, C>(
+	initial: CursorPage<T, C>,
+	load: (cursor: C) => Promise<CursorPage<T, C>>,
+	hasNext: (cursor: C | undefined) => boolean = (cursor) => cursor !== undefined
+) => {
+	let state = $state<CursorPagerState>({ kind: "at-page", page: 1 });
+	let pages = $state<Record<number, CursorPage<T, C>>>({ 1: initial });
+
+	const select = async (target: number) => {
+		if (state.kind === "loading" || target < 1 || target === state.page) return;
+
+		const currentPage = state.page;
+		state = { kind: "loading", page: currentPage };
+		try {
+			const loaded = { ...pages };
+			for (let next = 2; next <= target; next++) {
+				if (loaded[next]) continue;
+				const cursor = loaded[next - 1]?.cursor;
+				if (!hasNext(cursor)) break;
+				loaded[next] = await load(cursor as C);
+			}
+
+			pages = loaded;
+			state = { kind: "at-page", page: loaded[target] ? target : currentPage };
+		} catch {
+			state = { kind: "failed", page: currentPage };
+		}
+	};
+
+	return {
+		get state() {
+			return state;
+		},
+		get items() {
+			return pages[state.page]?.items ?? [];
+		},
+		get hasNext() {
+			return hasNext(pages[state.page]?.cursor);
+		},
+		select
+	};
+};
diff --git a/web/src/lib/components/profile/pagination.test.ts b/web/src/lib/components/profile/pagination.test.ts
new file mode 100644
index 00000000..b5537b69
--- /dev/null
+++ b/web/src/lib/components/profile/pagination.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { createCursorPager, discoveredPageCount, pageCount } from "./pagination.svelte";
+
+describe("profile pagination counts", () => {
+	it("uses the known total for profile lists", () => {
+		expect(pageCount(4, 30)).toBe(1);
+		expect(pageCount(30, 30)).toBe(1);
+		expect(pageCount(31, 30)).toBe(2);
+	});
+
+	it("only discovers an extra page when totals are unavailable", () => {
+		expect(discoveredPageCount(1, false)).toBe(1);
+		expect(discoveredPageCount(1, true)).toBe(2);
+		expect(discoveredPageCount(2, true)).toBe(3);
+	});
+
+	it("keeps pager lifecycle in one state", async () => {
+		let release!: (page: { items: string[] }) => void;
+		const pager = createCursorPager(
+			{ items: ["first"], cursor: "next" },
+			() => new Promise<{ items: string[] }>((resolve) => (release = resolve))
+		);
+
+		const loading = pager.select(2);
+		expect(pager.state).toEqual({ kind: "loading", page: 1 });
+		release({ items: ["second"] });
+		await loading;
+		expect(pager.state).toEqual({ kind: "at-page", page: 2 });
+
+		const failing = createCursorPager({ items: ["first"], cursor: "next" }, async () => {
+			throw new Error("nope");
+		});
+		await failing.select(2);
+		expect(failing.state).toEqual({ kind: "failed", page: 1 });
+	});
+});
diff --git a/web/src/lib/components/profile/tabs/PeopleTab.svelte b/web/src/lib/components/profile/tabs/PeopleTab.svelte
index 2ce617c8..37c1d7aa 100644
--- a/web/src/lib/components/profile/tabs/PeopleTab.svelte
+++ b/web/src/lib/components/profile/tabs/PeopleTab.svelte
@@ -3,63 +3,75 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
 	import { IdentityCache } from "$lib/api/identity";
-	import { fetchPeoplePage } from "../pages";
 	import FollowCard from "../FollowCard.svelte";
 	import Section from "$lib/components/ui/Section.svelte";
-	import LoadMore from "$lib/components/ui/LoadMore.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Error from "$lib/components/ui/Error.svelte";
+	import { createCursorPager, pageCount } from "../pagination.svelte";
+	import { PROFILE_PAGE_LIMIT, fetchPeoplePage } from "../pages";
 	import type { PersonData } from "../types";
 
 	interface Props {
 		initial: PersonData[];
 		cursor?: string;
+		total: number;
 		did: string;
 		direction: "followers" | "following";
 		title: string;
 		emptyMessage: string;
 	}
 
-	let { initial, cursor: initialCursor, did, direction, title, emptyMessage }: Props = $props();
+	let {
+		initial,
+		cursor: initialCursor,
+		total,
+		did,
+		direction,
+		title,
+		emptyMessage
+	}: Props = $props();
 
 	const auth = getAuth();
 
-	let extra = $state<PersonData[]>([]);
-	let cursor = $state(untrack(() => initialCursor));
-	let loading = $state(false);
-	let failed = $state(false);
 	// shared across pages so repeat dids only resolve once
 	let identityCache: IdentityCache | undefined;
-
-	const people = $derived([...initial, ...extra]);
-
-	const loadMore = async () => {
-		if (loading || !cursor) return;
-		loading = true;
-		failed = false;
-		try {
+	const pager = createCursorPager(
+		{ items: untrack(() => initial), cursor: untrack(() => initialCursor) },
+		(cursor) => {
 			const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
 			identityCache ??= new IdentityCache(ctx);
-			const next = await fetchPeoplePage(ctx, {
+			return fetchPeoplePage(ctx, {
 				did,
 				viewerDid: auth.currentDid ?? undefined,
 				direction,
 				cursor,
 				cache: identityCache
 			});
-			extra = [...extra, ...next.items];
-			cursor = next.cursor;
-		} catch {
-			failed = true;
-		} finally {
-			loading = false;
 		}
-	};
+	);
+	const people = $derived(pager.items);
+	const pages = $derived(pageCount(total, PROFILE_PAGE_LIMIT));
 </script>
 
 <Section {title} empty={people.length === 0} {emptyMessage} listClass="flex flex-col gap-8">
 	{#each people as person (person.did)}
 		<FollowCard {person} />
 	{/each}
-	{#if cursor}
-		<LoadMore {loading} {failed} onclick={loadMore} />
-	{/if}
+	{#snippet footer()}
+		{#if pages > 1}
+			<div class="mt-4 flex justify-center">
+				<Pagination
+					page={pager.state.page}
+					total={pages}
+					labels
+					disabled={pager.state.kind === "loading"}
+					onchange={pager.select}
+					class="gap-5"
+				/>
+			</div>
+		{/if}
+		{#if pager.state.kind === "failed"}
+			<Error label="couldn't load that page. try again." class="mt-2" />
+		{/if}
+	{/snippet}
 </Section>
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.stories.svelte b/web/src/lib/components/profile/tabs/RepoListTab.stories.svelte
new file mode 100644
index 00000000..bfae5402
--- /dev/null
+++ b/web/src/lib/components/profile/tabs/RepoListTab.stories.svelte
@@ -0,0 +1,49 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import type { RepoCardData } from "../types";
+	import RepoListTab from "./RepoListTab.svelte";
+
+	const repo = (name: string, index: number): RepoCardData => ({
+		name,
+		repoDid: `did:plc:repo${index}`,
+		ownerHandle: "dawn.tngl.boltless.dev",
+		createdAt: "2026-08-01T00:00:00Z"
+	});
+
+	const repos = [
+		repo("mittens", 1),
+		repo("goggles", 2),
+		repo("agv5di3saewnn", 3),
+		repo("wetsuit", 4)
+	];
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	const onePage = async ({ canvas }: PlayContext) => {
+		for (const { name } of repos) {
+			await expect(canvas.getByRole("link", { name })).toBeVisible();
+		}
+		await expect(canvas.queryByRole("navigation", { name: "Pagination" })).toBeNull();
+	};
+
+	const { Story } = defineMeta({
+		title: "Profile/RepoListTab",
+		component: RepoListTab,
+		tags: ["autodocs"],
+		args: {
+			initial: repos,
+			total: repos.length,
+			did: "did:plc:dawn",
+			handle: "dawn.tngl.boltless.dev"
+		}
+	});
+</script>
+
+<Story name="Four repositories fit on one page" play={onePage}>
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<RepoListTab {...args} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.svelte b/web/src/lib/components/profile/tabs/RepoListTab.svelte
index ceebf3b9..f723bbfd 100644
--- a/web/src/lib/components/profile/tabs/RepoListTab.svelte
+++ b/web/src/lib/components/profile/tabs/RepoListTab.svelte
@@ -4,10 +4,12 @@
 	import { resolve } from "$app/paths";
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
-	import { fetchReposPage } from "../pages";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
 	import Section from "$lib/components/ui/Section.svelte";
-	import LoadMore from "$lib/components/ui/LoadMore.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Error from "$lib/components/ui/Error.svelte";
+	import { createCursorPager, discoveredPageCount, pageCount } from "../pagination.svelte";
+	import { PROFILE_PAGE_LIMIT, fetchReposPage } from "../pages";
 	import { repoKey, type RepoCardData } from "../types";
 	import Search from "$icon/search";
 	import X from "$icon/x";
@@ -15,43 +17,35 @@
 	interface Props {
 		initial: RepoCardData[];
 		cursor?: string;
+		total: number;
 		did: string;
 		handle: string;
 	}
 
-	let { initial, cursor: initialCursor, did, handle }: Props = $props();
+	let { initial, cursor: initialCursor, total, did, handle }: Props = $props();
 
 	const auth = getAuth();
 
-	let extra = $state<RepoCardData[]>([]);
-	let cursor = $state(untrack(() => initialCursor));
-	let loading = $state(false);
-	let failed = $state(false);
-
-	const repos = $derived([...initial, ...extra]);
 	let searchQuery = $derived(page.url.searchParams.get("q") ?? "");
-
-	const loadMore = async () => {
-		if (loading || !cursor) return;
-		loading = true;
-		failed = false;
-		try {
+	const pager = createCursorPager(
+		{ items: untrack(() => initial), cursor: untrack(() => initialCursor) },
+		(cursor) => {
 			const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
-			const next = await fetchReposPage(ctx, {
+			return fetchReposPage(ctx, {
 				did,
 				handle,
 				viewerDid: auth.currentDid ?? undefined,
 				q: searchQuery || undefined,
 				cursor
 			});
-			extra = [...extra, ...next.items];
-			cursor = next.cursor;
-		} catch {
-			failed = true;
-		} finally {
-			loading = false;
 		}
-	};
+	);
+	const repos = $derived(pager.items);
+	const pages = $derived(
+		searchQuery
+			? discoveredPageCount(pager.state.page, pager.hasNext)
+			: pageCount(total, PROFILE_PAGE_LIMIT)
+	);
 </script>
 
 <Section
@@ -89,7 +83,21 @@
 	{#each repos as repo (repoKey(repo))}
 		<RepoCard {repo} showOwner={false} />
 	{/each}
-	{#if cursor}
-		<LoadMore {loading} {failed} onclick={loadMore} />
-	{/if}
+	{#snippet footer()}
+		{#if pages > 1}
+			<div class="mt-4 flex justify-center">
+				<Pagination
+					page={pager.state.page}
+					total={pages}
+					labels
+					disabled={pager.state.kind === "loading"}
+					onchange={pager.select}
+					class="gap-5"
+				/>
+			</div>
+		{/if}
+		{#if pager.state.kind === "failed"}
+			<Error label="couldn't load that page. try again." class="mt-2" />
+		{/if}
+	{/snippet}
 </Section>
diff --git a/web/src/lib/components/profile/tabs/StarredTab.svelte b/web/src/lib/components/profile/tabs/StarredTab.svelte
index d5096904..f110bafa 100644
--- a/web/src/lib/components/profile/tabs/StarredTab.svelte
+++ b/web/src/lib/components/profile/tabs/StarredTab.svelte
@@ -4,53 +4,43 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
 	import { IdentityCache } from "$lib/api/identity";
-	import { fetchStarredPage } from "../pages";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
 	import Card from "$lib/components/ui/Card.svelte";
 	import Section from "$lib/components/ui/Section.svelte";
-	import LoadMore from "$lib/components/ui/LoadMore.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Error from "$lib/components/ui/Error.svelte";
+	import { createCursorPager, pageCount } from "../pagination.svelte";
+	import { PROFILE_PAGE_LIMIT, fetchStarredPage } from "../pages";
 	import type { StarData } from "../types";
 
 	interface Props {
 		initial: StarData[];
 		cursor?: string;
+		total: number;
 		did: string;
 	}
 
-	let { initial, cursor: initialCursor, did }: Props = $props();
+	let { initial, cursor: initialCursor, total, did }: Props = $props();
 
 	const auth = getAuth();
 
-	let extra = $state<StarData[]>([]);
-	let cursor = $state(untrack(() => initialCursor));
-	let loading = $state(false);
-	let failed = $state(false);
 	// shared across pages so repeat repo owners only resolve once
 	let identityCache: IdentityCache | undefined;
-
-	const stars = $derived([...initial, ...extra]);
-
-	const loadMore = async () => {
-		if (loading || !cursor) return;
-		loading = true;
-		failed = false;
-		try {
+	const pager = createCursorPager(
+		{ items: untrack(() => initial), cursor: untrack(() => initialCursor) },
+		(cursor) => {
 			const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
 			identityCache ??= new IdentityCache(ctx);
-			const next = await fetchStarredPage(ctx, {
+			return fetchStarredPage(ctx, {
 				did,
 				viewerDid: auth.currentDid ?? undefined,
 				cursor,
 				cache: identityCache
 			});
-			extra = [...extra, ...next.items];
-			cursor = next.cursor;
-		} catch {
-			failed = true;
-		} finally {
-			loading = false;
 		}
-	};
+	);
+	const stars = $derived(pager.items);
+	const pages = $derived(pageCount(total, PROFILE_PAGE_LIMIT));
 </script>
 
 <Section title="Starred" empty={stars.length === 0} emptyMessage="No stars yet.">
@@ -68,7 +58,21 @@
 			</Card>
 		{/if}
 	{/each}
-	{#if cursor}
-		<LoadMore {loading} {failed} onclick={loadMore} />
-	{/if}
+	{#snippet footer()}
+		{#if pages > 1}
+			<div class="mt-4 flex justify-center">
+				<Pagination
+					page={pager.state.page}
+					total={pages}
+					labels
+					disabled={pager.state.kind === "loading"}
+					onchange={pager.select}
+					class="gap-5"
+				/>
+			</div>
+		{/if}
+		{#if pager.state.kind === "failed"}
+			<Error label="couldn't load that page. try again." class="mt-2" />
+		{/if}
+	{/snippet}
 </Section>
diff --git a/web/src/lib/components/profile/tabs/StringListTab.svelte b/web/src/lib/components/profile/tabs/StringListTab.svelte
index 62fc458e..fb9059f0 100644
--- a/web/src/lib/components/profile/tabs/StringListTab.svelte
+++ b/web/src/lib/components/profile/tabs/StringListTab.svelte
@@ -2,52 +2,56 @@
 	import { untrack } from "svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
-	import { fetchStringsPage } from "../pages";
 	import StringCard from "../StringCard.svelte";
 	import Section from "$lib/components/ui/Section.svelte";
-	import LoadMore from "$lib/components/ui/LoadMore.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Error from "$lib/components/ui/Error.svelte";
+	import { createCursorPager, pageCount } from "../pagination.svelte";
+	import { PROFILE_PAGE_LIMIT, fetchStringsPage } from "../pages";
 	import type { StringCardData } from "../types";
 
 	interface Props {
 		initial: StringCardData[];
 		cursor?: string;
+		total: number;
 		did: string;
 		handle: string;
 	}
 
-	let { initial, cursor: initialCursor, did, handle }: Props = $props();
+	let { initial, cursor: initialCursor, total, did, handle }: Props = $props();
 
 	const auth = getAuth();
 
-	let extra = $state<StringCardData[]>([]);
-	let cursor = $state(untrack(() => initialCursor));
-	let loading = $state(false);
-	let failed = $state(false);
-
-	const strings = $derived([...initial, ...extra]);
-
-	const loadMore = async () => {
-		if (loading || !cursor) return;
-		loading = true;
-		failed = false;
-		try {
+	const pager = createCursorPager(
+		{ items: untrack(() => initial), cursor: untrack(() => initialCursor) },
+		(cursor) => {
 			const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
-			const next = await fetchStringsPage(ctx, { did, handle, cursor });
-			extra = [...extra, ...next.items];
-			cursor = next.cursor;
-		} catch {
-			failed = true;
-		} finally {
-			loading = false;
+			return fetchStringsPage(ctx, { did, handle, cursor });
 		}
-	};
+	);
+	const strings = $derived(pager.items);
+	const pages = $derived(pageCount(total, PROFILE_PAGE_LIMIT));
 </script>
 
 <Section title="Strings" empty={strings.length === 0} emptyMessage="No strings yet.">
 	{#each strings as entry (entry.rkey)}
 		<StringCard {entry} />
 	{/each}
-	{#if cursor}
-		<LoadMore {loading} {failed} onclick={loadMore} />
-	{/if}
+	{#snippet footer()}
+		{#if pages > 1}
+			<div class="mt-4 flex justify-center">
+				<Pagination
+					page={pager.state.page}
+					total={pages}
+					labels
+					disabled={pager.state.kind === "loading"}
+					onchange={pager.select}
+					class="gap-5"
+				/>
+			</div>
+		{/if}
+		{#if pager.state.kind === "failed"}
+			<Error label="couldn't load that page. try again." class="mt-2" />
+		{/if}
+	{/snippet}
 </Section>
diff --git a/web/src/lib/components/profile/tabs/VouchTab.svelte b/web/src/lib/components/profile/tabs/VouchTab.svelte
index edf62d18..c8a8d42a 100644
--- a/web/src/lib/components/profile/tabs/VouchTab.svelte
+++ b/web/src/lib/components/profile/tabs/VouchTab.svelte
@@ -3,56 +3,45 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
 	import { IdentityCache } from "$lib/api/identity";
-	import { fetchVouchesPage, type VouchCursors } from "../pages";
 	import VouchCard from "../VouchCard.svelte";
 	import Section from "$lib/components/ui/Section.svelte";
-	import LoadMore from "$lib/components/ui/LoadMore.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Error from "$lib/components/ui/Error.svelte";
+	import { createCursorPager, pageCount } from "../pagination.svelte";
+	import { PROFILE_PAGE_LIMIT, fetchVouchesPage, type VouchCursors } from "../pages";
 	import type { VouchData } from "../types";
 
 	interface Props {
 		initial: VouchData[];
 		cursors: VouchCursors;
+		total: number;
 		did: string;
 		isSelf: boolean;
 		profileHandle: string;
 	}
 
-	let { initial, cursors: initialCursors, did, isSelf, profileHandle }: Props = $props();
+	let { initial, cursors: initialCursors, total, did, isSelf, profileHandle }: Props = $props();
 
 	const auth = getAuth();
 
-	let extra = $state<VouchData[]>([]);
-	let cursors = $state(untrack(() => initialCursors));
-	let loading = $state(false);
-	let failed = $state(false);
 	// shared across pages so repeat dids only resolve once
 	let identityCache: IdentityCache | undefined;
 
 	const profileLabel = $derived(isSelf ? "you" : profileHandle);
-	// incoming and outgoing pages interleave, so the merged list re-sorts on append
-	const vouches = $derived(
-		[...initial, ...extra].sort(
-			(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-		)
-	);
-	const exhausted = $derived(cursors.incoming === null && cursors.outgoing === null);
-
-	const loadMore = async () => {
-		if (loading || exhausted) return;
-		loading = true;
-		failed = false;
-		try {
+	const pager = createCursorPager<VouchData, VouchCursors>(
+		{ items: untrack(() => initial), cursor: untrack(() => initialCursors) },
+		(cursors) => {
 			const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
 			identityCache ??= new IdentityCache(ctx);
-			const next = await fetchVouchesPage(ctx, { did, cursors, cache: identityCache });
-			extra = [...extra, ...next.items];
-			cursors = next.cursors;
-		} catch {
-			failed = true;
-		} finally {
-			loading = false;
-		}
-	};
+			return fetchVouchesPage(ctx, { did, cursors, cache: identityCache }).then((next) => ({
+				items: next.items,
+				cursor: next.cursors
+			}));
+		},
+		(cursors) => Boolean(cursors?.incoming ?? cursors?.outgoing)
+	);
+	const vouches = $derived(pager.items);
+	const pages = $derived(pageCount(total, PROFILE_PAGE_LIMIT));
 </script>
 
 <Section
@@ -65,7 +54,21 @@
 	{#each vouches as vouch (vouch.uri)}
 		<VouchCard {vouch} {profileLabel} />
 	{/each}
-	{#if !exhausted}
-		<LoadMore {loading} {failed} onclick={loadMore} />
-	{/if}
+	{#snippet footer()}
+		{#if pages > 1}
+			<div class="mt-4 flex justify-center">
+				<Pagination
+					page={pager.state.page}
+					total={pages}
+					labels
+					disabled={pager.state.kind === "loading"}
+					onchange={pager.select}
+					class="gap-5"
+				/>
+			</div>
+		{/if}
+		{#if pager.state.kind === "failed"}
+			<Error label="couldn't load that page. try again." class="mt-2" />
+		{/if}
+	{/snippet}
 </Section>
diff --git a/web/src/lib/components/repo/CommitLogView.stories.svelte b/web/src/lib/components/repo/CommitLogView.stories.svelte
index 2f07c0d0..8f4a4e27 100644
--- a/web/src/lib/components/repo/CommitLogView.stories.svelte
+++ b/web/src/lib/components/repo/CommitLogView.stories.svelte
@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
-	import { expect, userEvent } from "storybook/test";
+	import { expect, fn, userEvent } from "storybook/test";
 	import CommitLogView from "./CommitLogView.svelte";
 	import type { CommitSummary } from "./types";
 
@@ -14,12 +14,19 @@
 		when: "2026-07-28T09:00:00Z"
 	});
 	const commits = Array.from({ length: 12 }, (_, index) => commit(index + 1));
+	const onPageChange = fn();
 	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
 
 	const firstPage = async ({ canvas }: PlayContext) => {
-		await expect(canvas.queryByRole("link", { name: "Previous" })).toBeNull();
-		const next = canvas.getByRole("link", { name: "Next" });
-		await expect(next).toHaveAttribute("href", "/dawn/tangled/commits/main?page=2");
+		await expect(canvas.getByRole("button", { name: "Previous page" })).toBeDisabled();
+		const next = canvas.getByRole("button", { name: "Next page" });
+		await expect(next).toBeEnabled();
+		await expect(canvas.getByRole("button", { name: "Page 1" })).toHaveAttribute(
+			"aria-current",
+			"page"
+		);
+		await userEvent.click(next);
+		await expect(onPageChange).toHaveBeenCalledWith(2);
 
 		await expect(canvas.getAllByTitle("Copy SHA")).toHaveLength(commits.length);
 		await expect(canvas.getAllByTitle("Browse repository at this commit")).toHaveLength(
@@ -33,10 +40,12 @@
 	};
 
 	const middlePage = async ({ canvas }: PlayContext) => {
-		const prev = canvas.getByRole("link", { name: "Previous" });
-		const next = canvas.getByRole("link", { name: "Next" });
-		await expect(prev).toHaveAttribute("href", "/dawn/tangled/commits/main?page=3");
-		await expect(next).toHaveAttribute("href", "/dawn/tangled/commits/main?page=5");
+		await expect(canvas.getByRole("button", { name: "Previous page" })).toBeEnabled();
+		await expect(canvas.getByRole("button", { name: "Next page" })).toBeEnabled();
+		await expect(canvas.getByRole("button", { name: "Page 4" })).toHaveAttribute(
+			"aria-current",
+			"page"
+		);
 	};
 
 	const bodyExpand = async ({ canvas }: PlayContext) => {
@@ -50,7 +59,7 @@
 
 	const emptyLog = async ({ canvas }: PlayContext) => {
 		await expect(canvas.getByText("No commits at main.")).toBeVisible();
-		await expect(canvas.queryByRole("link", { name: "Next" })).toBeNull();
+		await expect(canvas.queryByRole("navigation", { name: "Pagination" })).toBeNull();
 	};
 
 	const { Story } = defineMeta({
@@ -66,7 +75,8 @@
 				[commits[0].hash]: ["v1.0.0"]
 			},
 			page: 1,
-			pageCount: 5
+			pageCount: 5,
+			onPageChange
 		}
 	});
 </script>
diff --git a/web/src/lib/components/repo/CommitLogView.svelte b/web/src/lib/components/repo/CommitLogView.svelte
index 5c064ae2..d07df54f 100644
--- a/web/src/lib/components/repo/CommitLogView.svelte
+++ b/web/src/lib/components/repo/CommitLogView.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import ChevronLeft from "$icon/chevron-left";
-	import ChevronRight from "$icon/chevron-right";
 	import Copy from "$icon/copy";
 	import CopyCheck from "$icon/copy-check";
 	import Ellipsis from "$icon/ellipsis";
 	import FolderCode from "$icon/folder-code";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import { createCopyFeedback } from "$lib/copy.svelte";
@@ -21,17 +19,21 @@
 		tagsByCommit?: Record<string, string[]>;
 		page: number;
 		pageCount: number;
+		onPageChange?: (page: number) => void;
 	}
 
-	let { ownerHandle, repoName, ref, commits, tagsByCommit = {}, page, pageCount }: Props = $props();
+	let {
+		ownerHandle,
+		repoName,
+		ref,
+		commits,
+		tagsByCommit = {},
+		page,
+		pageCount,
+		onPageChange
+	}: Props = $props();
 
 	const base = $derived(`/${ownerHandle}/${repoName}`);
-	const encodedRef = $derived(encodeURIComponent(ref));
-
-	const hasPrev = $derived(page > 1);
-	const hasNext = $derived(page < pageCount);
-	const pageHref = (next: number) =>
-		resolve(`${base}/commits/${encodedRef}${next > 1 ? `?page=${next}` : ""}` as "/");
 
 	let expanded = $state<Record<string, boolean>>({});
 	const copyFeedback = createCopyFeedback();
@@ -39,7 +41,7 @@
 
 {#snippet authorCell(commit: CommitSummary)}
 	<span class="flex items-center gap-1">
-<!-- no did/handle on a commit summary, always the placeholder -->
+		<!-- no did/handle on a commit summary, always the placeholder -->
 		<Avatar size="size-6" />
 		{#if commit.authorEmail}
 			<a href="mailto:{commit.authorEmail}" class="no-underline hover:underline">
@@ -206,13 +208,8 @@
 	{/if}
 </section>
 
-{#if hasPrev || hasNext}
-	<div class="mt-4 flex justify-end gap-2">
-		{#if hasPrev}
-			<Button href={pageHref(page - 1)} icon={ChevronLeft} size="sm">Previous</Button>
-		{/if}
-		{#if hasNext}
-			<Button href={pageHref(page + 1)} icon={ChevronRight} iconSide="right" size="sm">Next</Button>
-		{/if}
+{#if pageCount > 1}
+	<div class="mt-4 flex justify-center">
+		<Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-5" />
 	</div>
 {/if}
diff --git a/web/src/lib/components/ui/LoadMore.stories.svelte b/web/src/lib/components/ui/LoadMore.stories.svelte
deleted file mode 100644
index dca9c2fc..00000000
--- a/web/src/lib/components/ui/LoadMore.stories.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import LoadMore from "./LoadMore.svelte";
-
-	const { Story } = defineMeta({
-		title: "UI/LoadMore",
-		component: LoadMore,
-		tags: ["autodocs"],
-		argTypes: {
-			loading: { control: { type: "boolean" } },
-			failed: { control: { type: "boolean" } }
-		},
-		args: {
-			onclick: () => {}
-		}
-	});
-</script>
-
-<Story name="Default" />
-<Story name="Loading" args={{ loading: true }} />
-<Story name="Failed" args={{ failed: true }} />
diff --git a/web/src/lib/components/ui/LoadMore.svelte b/web/src/lib/components/ui/LoadMore.svelte
deleted file mode 100644
index 31f5bbd3..00000000
--- a/web/src/lib/components/ui/LoadMore.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import Button from "./Button.svelte";
-
-	interface Props {
-		loading?: boolean;
-		failed?: boolean;
-		onclick: () => void;
-		class?: string;
-	}
-
-	let { loading = false, failed = false, onclick, class: className }: Props = $props();
-</script>
-
-<div class="flex justify-center pt-4 {className ?? ''}">
-	<Button variant="ghost" {loading} {onclick}>
-		{failed ? "couldn't load more, retry?" : "load more"}
-	</Button>
-</div>
diff --git a/web/src/lib/components/ui/Pagination.stories.svelte b/web/src/lib/components/ui/Pagination.stories.svelte
index dd5efa29..82310faf 100644
--- a/web/src/lib/components/ui/Pagination.stories.svelte
+++ b/web/src/lib/components/ui/Pagination.stories.svelte
@@ -9,7 +9,8 @@
 		argTypes: {
 			page: { control: { type: "number" } },
 			total: { control: { type: "number" } },
-			labels: { control: { type: "boolean" } }
+			labels: { control: { type: "boolean" } },
+			disabled: { control: { type: "boolean" } }
 		},
 		args: {
 			page: 1,
@@ -25,3 +26,4 @@
 <Story name="SinglePage" args={{ page: 1, total: 1 }} />
 <Story name="ManyPages" args={{ page: 12, total: 40 }} />
 <Story name="WithLabels" args={{ page: 5, total: 10, labels: true }} />
+<Story name="Disabled" args={{ page: 5, total: 10, disabled: true }} />
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
index ef3d5d4b..a9771bef 100644
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -59,14 +59,23 @@
 		onchange?: (page: number) => void;
 		class?: string;
 		labels?: boolean;
+		disabled?: boolean;
 	}
 
-	let { page = $bindable(1), total, onchange, class: className, labels }: Props = $props();
+	let {
+		page = $bindable(1),
+		total,
+		onchange,
+		class: className,
+		labels,
+		disabled = false
+	}: Props = $props();
 
 	const count = $derived(Math.max(total, 1));
 	const items = $derived(getPageItems(Math.min(Math.max(page, 1), count), count));
 
 	function goTo(target: number) {
+		if (disabled) return;
 		const next = Math.min(Math.max(target, 1), count);
 		if (next === page) return;
 		page = next;
@@ -74,11 +83,15 @@
 	}
 </script>
 
-<nav aria-label="Pagination" class={pagination({ class: className })}>
+<nav
+	aria-label="Pagination"
+	aria-busy={disabled || undefined}
+	class={pagination({ class: className })}
+>
 	<Button
 		variant="ghost"
 		icon={ChevronLeft}
-		disabled={page <= 1}
+		disabled={disabled || page <= 1}
 		aria-label="Previous page"
 		onclick={() => goTo(page - 1)}
 	>
@@ -89,6 +102,7 @@
 		{#if typeof item === "number"}
 			<Button
 				variant={item === page ? "default" : "ghost"}
+				{disabled}
 				aria-current={item === page ? "page" : undefined}
 				aria-label={`Page ${item}`}
 				onclick={() => goTo(item)}
@@ -109,7 +123,7 @@
 		variant="ghost"
 		icon={ChevronRight}
 		iconSide="right"
-		disabled={page >= count}
+		disabled={disabled || page >= count}
 		aria-label="Next page"
 		onclick={() => goTo(page + 1)}
 	>
diff --git a/web/src/lib/components/ui/Section.stories.svelte b/web/src/lib/components/ui/Section.stories.svelte
index 1a573e6c..b6924584 100644
--- a/web/src/lib/components/ui/Section.stories.svelte
+++ b/web/src/lib/components/ui/Section.stories.svelte
@@ -48,3 +48,12 @@
 		{@render items()}
 	</Section>
 </Story>
+
+<Story name="Footer" asChild>
+	<Section title="Repositories" empty={false} emptyMessage="Nothing here.">
+		{@render items()}
+		{#snippet footer()}
+			<div class="mt-4 flex justify-center text-sm text-foreground-subtle">footer</div>
+		{/snippet}
+	</Section>
+</Story>
diff --git a/web/src/lib/components/ui/Section.svelte b/web/src/lib/components/ui/Section.svelte
index 6d5a183d..61198656 100644
--- a/web/src/lib/components/ui/Section.svelte
+++ b/web/src/lib/components/ui/Section.svelte
@@ -8,6 +8,7 @@
 		emptyMessage: string;
 		listClass?: string;
 		header?: Snippet;
+		footer?: Snippet;
 		children: Snippet;
 	}
 
@@ -17,6 +18,7 @@
 		emptyMessage,
 		listClass = "flex flex-col gap-4",
 		header,
+		footer,
 		children
 	}: Props = $props();
 </script>
@@ -32,5 +34,6 @@
 		<div class={listClass}>
 			{@render children()}
 		</div>
+		{@render footer?.()}
 	{/if}
 </section>
diff --git a/web/src/routes/[handle]/+page.svelte b/web/src/routes/[handle]/+page.svelte
index 6c0d52ec..7b0fd398 100644
--- a/web/src/routes/[handle]/+page.svelte
+++ b/web/src/routes/[handle]/+page.svelte
@@ -16,19 +16,26 @@
 		<RepoListTab
 			initial={data.repos}
 			cursor={data.cursor}
+			total={data.counts.repos}
 			did={data.identity.did}
 			handle={data.identity.handle}
 		/>
 	{/key}
 {:else if data.tab === "starred"}
 	{#key data.stars}
-		<StarredTab initial={data.stars} cursor={data.cursor} did={data.identity.did} />
+		<StarredTab
+			initial={data.stars}
+			cursor={data.cursor}
+			total={data.counts.stars}
+			did={data.identity.did}
+		/>
 	{/key}
 {:else if data.tab === "strings"}
 	{#key data.strings}
 		<StringListTab
 			initial={data.strings}
 			cursor={data.cursor}
+			total={data.counts.strings}
 			did={data.identity.did}
 			handle={data.identity.handle}
 		/>
@@ -38,6 +45,7 @@
 		<PeopleTab
 			initial={data.people}
 			cursor={data.cursor}
+			total={data.counts.followers}
 			did={data.identity.did}
 			direction="followers"
 			title="Followers"
@@ -49,6 +57,7 @@
 		<PeopleTab
 			initial={data.people}
 			cursor={data.cursor}
+			total={data.counts.following}
 			did={data.identity.did}
 			direction="following"
 			title="Following"
@@ -60,6 +69,7 @@
 		<VouchTab
 			initial={data.vouches}
 			cursors={data.cursors}
+			total={data.vouchTotal}
 			did={data.identity.did}
 			isSelf={data.isSelf}
 			profileHandle={data.profileHandle}
diff --git a/web/src/routes/[handle]/+page.ts b/web/src/routes/[handle]/+page.ts
index dc761a8d..251be325 100644
--- a/web/src/routes/[handle]/+page.ts
+++ b/web/src/routes/[handle]/+page.ts
@@ -1,5 +1,6 @@
 import type { Did } from "@atcute/lexicons/syntax";
 import { createBobbinClient } from "$lib/api/client";
+import { count } from "$lib/api/count";
 import { toHttpError } from "$lib/api/load";
 import {
 	fetchReposPage,
@@ -54,10 +55,12 @@ export const load: PageLoad = async (event) => {
 			}
 			case "vouches": {
 				const page = await fetchVouchesPage(ctx, { did });
+				const outgoing = await count(ctx, "sh.tangled.graph.countVouchesBy", did);
 				return {
 					tab: "vouches" as const,
 					vouches: page.items,
 					cursors: page.cursors,
+					vouchTotal: parent.counts.vouches + outgoing.count,
 					isSelf: viewerDid === did,
 					profileHandle: handle
 				};
diff --git a/web/src/routes/[handle]/[repo]/branches/+page.svelte b/web/src/routes/[handle]/[repo]/branches/+page.svelte
index c725d28b..4d997039 100644
--- a/web/src/routes/[handle]/[repo]/branches/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/branches/+page.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
+	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
-	import ChevronLeft from "$icon/chevron-left";
-	import ChevronRight from "$icon/chevron-right";
 	import BranchTable from "$lib/components/repo/BranchTable.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
 
 	let { data } = $props();
 
-	const hasPrev = $derived(data.page > 1);
-	const hasNext = $derived(data.page < data.pageCount);
-	const pageHref = (next: number) =>
+	const pageHref = (page: number) =>
 		resolve(
-			`/${data.repo.ownerHandle}/${data.repo.name}/branches${next > 1 ? `?page=${next}` : ""}` as "/"
+			`/${data.repo.ownerHandle}/${data.repo.name}/branches${page > 1 ? `?page=${page}` : ""}` as "/"
 		);
+	const changePage = (page: number) => void goto(pageHref(page));
 </script>
 
 <BranchTable
@@ -21,13 +19,14 @@
 	branches={data.branches}
 />
 
-{#if hasPrev || hasNext}
-	<div class="mt-4 flex justify-end gap-2">
-		{#if hasPrev}
-			<Button href={pageHref(data.page - 1)} icon={ChevronLeft} size="sm">Previous</Button>
-		{/if}
-		{#if hasNext}
-			<Button href={pageHref(data.page + 1)} icon={ChevronRight} iconSide="right" size="sm">Next</Button>
-		{/if}
+{#if data.pageCount > 1}
+	<div class="mt-4 flex justify-center">
+		<Pagination
+			page={data.page}
+			total={data.pageCount}
+			labels
+			onchange={changePage}
+			class="gap-5"
+		/>
 	</div>
 {/if}
diff --git a/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte b/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte
index 07506ec6..bf9bcaba 100644
--- a/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
 	import CommitLogView from "$lib/components/repo/CommitLogView.svelte";
 
 	let { data } = $props();
+
+	const pageHref = (page: number) =>
+		resolve(
+			`/${data.repo.ownerHandle}/${data.repo.name}/commits/${encodeURIComponent(data.ref)}${page > 1 ? `?page=${page}` : ""}` as "/"
+		);
+	const changePage = (page: number) => void goto(pageHref(page));
 </script>
 
 <CommitLogView
@@ -12,4 +20,5 @@
 	tagsByCommit={data.tagsByCommit}
 	page={data.page}
 	pageCount={data.pageCount}
+	onPageChange={changePage}
 />
diff --git a/web/src/routes/[handle]/[repo]/tags/+page.svelte b/web/src/routes/[handle]/[repo]/tags/+page.svelte
index 459292e2..48fcdfd1 100644
--- a/web/src/routes/[handle]/[repo]/tags/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tags/+page.svelte
@@ -1,19 +1,17 @@
 <script lang="ts">
+	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
-	import ChevronLeft from "$icon/chevron-left";
-	import ChevronRight from "$icon/chevron-right";
 	import TagCard from "$lib/components/repo/TagCard.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Pagination from "$lib/components/ui/Pagination.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 
-	const hasPrev = $derived(data.page > 1);
-	const hasNext = $derived(data.page < data.pageCount);
-	const pageHref = (next: number) =>
+	const pageHref = (page: number) =>
 		resolve(
-			`/${data.repo.ownerHandle}/${data.repo.name}/tags${next > 1 ? `?page=${next}` : ""}` as "/"
+			`/${data.repo.ownerHandle}/${data.repo.name}/tags${page > 1 ? `?page=${page}` : ""}` as "/"
 		);
+	const changePage = (page: number) => void goto(pageHref(page));
 </script>
 
 <TabPanel>
@@ -29,13 +27,14 @@
 	</div>
 </TabPanel>
 
-{#if hasPrev || hasNext}
-	<div class="mt-4 flex justify-end gap-2">
-		{#if hasPrev}
-			<Button href={pageHref(data.page - 1)} icon={ChevronLeft} size="sm">Previous</Button>
-		{/if}
-		{#if hasNext}
-			<Button href={pageHref(data.page + 1)} icon={ChevronRight} iconSide="right" size="sm">Next</Button>
-		{/if}
+{#if data.pageCount > 1}
+	<div class="mt-4 flex justify-center">
+		<Pagination
+			page={data.page}
+			total={data.pageCount}
+			labels
+			onchange={changePage}
+			class="gap-5"
+		/>
 	</div>
 {/if}