diff --git a/web/src/lib/components/notifications/NotificationToolbar.svelte b/web/src/lib/components/notifications/NotificationToolbar.svelte
index 3ea54eceb..56f6b92bb 100644
--- a/web/src/lib/components/notifications/NotificationToolbar.svelte
+++ b/web/src/lib/components/notifications/NotificationToolbar.svelte
@@ -56,7 +56,7 @@
 
 <div class="flex flex-wrap items-center justify-between gap-xs">
 	<div class="flex flex-wrap items-center gap-xs">
-		<ButtonGroup>
+		<ButtonGroup segmented>
 			{@render readSegment("inbox", "Inbox", Inbox)}
 			{@render readSegment("unread", "Unread", Glasses)}
 		</ButtonGroup>
@@ -74,7 +74,7 @@
 	</div>
 
 	{#if onCategoryFilter}
-		<ButtonGroup>
+		<ButtonGroup segmented>
 			{#each categories as category (category)}
 				{@const segment = segmentProps(categoryFilter === category)}
 				<Button
diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 864d1d80b..73df26e2f 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -158,7 +158,7 @@
 							</Checkbox>
 						{/if}
 						{#if hasRenderedView(kind)}
-							<ButtonGroup>
+							<ButtonGroup segmented>
 								<Button
 									size="small"
 									icon={CodeXml}
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index c145b2415..1b2f7bdbb 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -293,8 +293,9 @@
 						>
 							Wrap
 						</Toggle>
-						<ButtonGroup>
+						<ButtonGroup segmented>
 							{#each ["unified", "split"] as const as style (style)}
+								{@const segment = segmentProps(diffStyle === style)}
 								<Button
 									icon={style === "split"
 										? SquareSplitHorizontal
@@ -305,7 +306,8 @@
 									data-sveltekit-noscroll
 									onclick={styleHref ? undefined : () => (localStyle = style)}
 									size="small"
-									{...segmentProps(diffStyle === style)}
+									{...segment}
+									class={segment.class}
 								>
 									<span class="hidden @min-[42rem]/toolbar:inline"
 										>{style === "split" ? "Split" : "Unified"}</span
diff --git a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
index b48a54acf..674291bbd 100644
--- a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
@@ -42,7 +42,7 @@
 	{/snippet}
 
 	{#snippet filters()}
-		<ButtonGroup>
+		<ButtonGroup segmented>
 			<Button href={segmentHref("all")} {...segmentProps(filter === "all")} icon={Layers2}>
 				All
 			</Button>
diff --git a/web/src/lib/components/repo/tickets/TicketToolbar.svelte b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
index 451041a22..02830cd10 100644
--- a/web/src/lib/components/repo/tickets/TicketToolbar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
@@ -44,7 +44,7 @@
 	{/snippet}
 
 	{#snippet filters()}
-		<ButtonGroup>
+		<ButtonGroup segmented>
 			<Button
 				href={resolve(`${base}?state=open` as "/")}
 				{...segmentProps(state === "open")}
diff --git a/web/src/lib/components/ui/ButtonGroup.stories.svelte b/web/src/lib/components/ui/ButtonGroup.stories.svelte
index fe1b2d96a..7d32e6572 100644
--- a/web/src/lib/components/ui/ButtonGroup.stories.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.stories.svelte
@@ -56,13 +56,13 @@
 -->
 <Story name="Tab Switcher">
 	<div class="flex flex-col items-start gap-md">
-		<ButtonGroup>
+		<ButtonGroup segmented>
 			<Button {...segmentProps(true)}>Open</Button>
 			<Button {...segmentProps(false)}>Closed</Button>
 		</ButtonGroup>
 		<!-- selected in the middle: hovering either neighbour used to rub out the border on the
 		     edge they share, so this is the case to check when touching the group's layering -->
-		<ButtonGroup>
+		<ButtonGroup segmented>
 			<Button {...segmentProps(false)}>All</Button>
 			<Button {...segmentProps(true)}>Push</Button>
 			<Button {...segmentProps(false)}>Pull request</Button>
@@ -73,7 +73,7 @@
 <Story name="Vertical">
 	{#snippet template()}
 		<div class="">
-			<ButtonGroup direction="vertical">
+			<ButtonGroup segmented direction="vertical">
 				<Button {...segmentProps(true)}>Open</Button>
 				<Button {...segmentProps(true)}>Closed</Button>
 			</ButtonGroup>
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 84f2295be..5df9e21a1 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -7,7 +7,26 @@
 		variants: {
 			spaced: {
 				true: "gap-xs",
-				false: [
+				false: ""
+			},
+			segmented: {
+				true: [
+					"items-stretch rounded-md bg-[oklch(96%_0_0)] p-0.5 ring ring-border-default/70 dark:bg-background-canvas",
+					"[--seg-inset:4px] *:[--btn-radius:calc(var(--radius-md)-2px)]",
+					"[&>*:focus-visible]:-outline-offset-2"
+				],
+				false: ""
+			},
+			direction: {
+				horizontal: [""],
+				vertical: ["flex-col"]
+			}
+		},
+		compoundVariants: [
+			{
+				spaced: false,
+				segmented: false,
+				class: [
 					"relative items-stretch gap-none overflow-hidden rounded-md bg-background-subtle dark:bg-background-canvas",
 					"after:pointer-events-none after:absolute after:inset-0 after:z-20 after:rounded-md after:border after:border-border-default after:content-['']",
 					"*:relative *:border-y-transparent",
@@ -22,14 +41,11 @@
 					"[&>*:not([data-variant=ghost])]:z-10",
 					"[&>*:focus-visible]:-outline-offset-2"
 				]
-			},
-			direction: {
-				horizontal: [""],
-				vertical: ["flex-col"]
 			}
-		},
+		],
 		defaultVariants: {
 			spaced: false,
+			segmented: false,
 			direction: "horizontal"
 		}
 	});
@@ -42,8 +58,16 @@
 		class?: string;
 	} {
 		return selected
-			? { variant: "default", insetShadow: true }
-			: { variant: "ghost", insetShadow: false, class: "text-foreground-default" };
+			? {
+					variant: "default",
+					insetShadow: true,
+					class: "border-[oklch(14.5%_0_0/0.1)] shadow-sm hover:bg-background-default dark:border-alpha-dark-10"
+				}
+			: {
+					variant: "ghost",
+					insetShadow: false,
+					class: "text-foreground-muted hover:bg-transparent hover:text-foreground-default"
+				};
 	}
 </script>
 
@@ -52,6 +76,7 @@
 
 	interface Props {
 		spaced?: ButtonGroupVariants["spaced"];
+		segmented?: ButtonGroupVariants["segmented"];
 		direction?: ButtonGroupVariants["direction"];
 		class?: string;
 		children: Snippet;
@@ -59,13 +84,14 @@
 
 	let {
 		spaced = false,
+		segmented = false,
 		direction = "horizontal",
 		class: className,
 		children,
 		...rest
 	}: Props = $props();
 
-	const classes = $derived(buttonGroup({ spaced, direction, class: className }));
+	const classes = $derived(buttonGroup({ spaced, segmented, direction, class: className }));
 </script>
 
 <div class={classes} {...rest}>
diff --git a/web/src/routes/dev/components/+page.svelte b/web/src/routes/dev/components/+page.svelte
index 0d7406369..a16872796 100644
--- a/web/src/routes/dev/components/+page.svelte
+++ b/web/src/routes/dev/components/+page.svelte
@@ -240,7 +240,7 @@
 {/snippet}
 
 {#snippet buttonGroup()}
-	<ButtonGroup>
+	<ButtonGroup segmented>
 		<Button {...segmentProps(false)}>All</Button>
 		<Button {...segmentProps(true)}>Push</Button>
 		<Button {...segmentProps(false)}>Pull request</Button>