diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte
index 6c0b47af..4cb8636c 100644
--- a/web/src/lib/components/repo/BranchList.svelte
+++ b/web/src/lib/components/repo/BranchList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import GitCompare from "$icon/git-compare";
+	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import type { BranchSummary } from "./types";
@@ -41,16 +42,18 @@
 				{/if}
 			</div>
 			{#if branch.name !== currentRef}
-				<a
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={GitCompare}
 					href={resolve(
 						`${base}/compare/${encodeURIComponent(currentRef)}...${encodeURIComponent(branch.name)}` as "/"
 					)}
-					class="ml-2 flex shrink-0 items-center gap-1 text-xs text-foreground-muted"
+					class="ml-2 shrink-0"
 					title="Compare branches or tags"
 				>
-					<GitCompare class="size-3" aria-hidden="true" />
 					Compare
-				</a>
+				</Button>
 			{/if}
 		</div>
 	{/each}