diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index e701fc84..f5486ff9 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -5,6 +5,7 @@
 	import Star from "$icon/star";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import StarButton from "./StarButton.svelte";
@@ -68,38 +69,30 @@
 					initialRkey={viewerStarRkey}
 				/>
 			{:else}
-				<a
+				<Button
 					href={resolve(`${base}/stars` as "/")}
-					class="inline-flex items-center gap-1.5 rounded border border-border-default px-2 py-1 text-sm text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
+					variant="default"
+					size="sm"
+					icon={Star}
 					title="Starred by"
 				>
-					<Star class="size-4 shrink-0" aria-hidden="true" />
 					{counts.stars}
-				</a>
+				</Button>
 			{/if}
 
-			<div
-				class="inline-flex max-h-8 items-stretch divide-x divide-border-default overflow-clip rounded border border-border-default"
-			>
-				<Button
-					href={resolve(`${base}/fork` as "/")}
-					variant="default"
-					size="sm"
-					class="min-h-7.5 rounded-none border-0 before:rounded-none before:rounded-l-sm"
-				>
-					<GitFork class="size-4 shrink-0" aria-hidden="true" />
-					<span>Fork</span>
+			<ButtonGroup>
+				<Button href={resolve(`${base}/fork` as "/")} variant="default" size="sm" icon={GitFork}>
+					Fork
 				</Button>
 				<Button
 					href={resolve(`${base}/forks` as "/")}
-					variant="ghost"
+					variant="default"
 					size="sm"
-					class="min-h-7.5 rounded-none"
 					title="Forked by"
 				>
 					{counts.forks}
 				</Button>
-			</div>
+			</ButtonGroup>
 		</div>
 	</div>
 
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 27e35530..54728a26 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -3,6 +3,7 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { createStar, deleteStar } from "$lib/api/graph";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import { getProfileCounts } from "$lib/components/profile/counts.svelte";
 	import { createOptimisticRelation, createOptimisticCount } from "$lib/optimistic.svelte";
 
@@ -61,13 +62,11 @@
 
 {#if signedIn && repoDid}
 	<div class="flex flex-col items-end">
-		<div
-			class="inline-flex max-h-8 items-stretch divide-x divide-border-default overflow-clip rounded border border-border-default"
-		>
+		<ButtonGroup>
 			<Button
 				variant="default"
 				size="sm"
-				class="min-h-7.5 flex-1 rounded-none border-0 before:rounded-none before:rounded-l-sm"
+				class="flex-1"
 				loading={busy}
 				disabled={!relation.known}
 				onclick={toggle}
@@ -80,14 +79,13 @@
 			</Button>
 			<Button
 				href={`/${repoOwnerHandle}/${repoName}/stars`}
-				variant="ghost"
+				variant="default"
 				size="sm"
-				class="min-h-7.5 rounded-none"
 				title="Starred by"
 			>
 				{starCount.value}
 			</Button>
-		</div>
+		</ButtonGroup>
 		{#if failed}
 			<p class="mt-1 text-xs text-foreground-danger">Something went wrong. Try again.</p>
 		{/if}