diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte
index 6f72428e..0e0e5977 100644
--- a/web/src/lib/components/settings/SettingsList.svelte
+++ b/web/src/lib/components/settings/SettingsList.svelte
@@ -2,20 +2,23 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const settingsList = tv({
-		base: "flex w-full flex-col rounded-sm border border-border-default",
+		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default",
 		variants: {
 			// Figma spaces rows with a gap and drops the hairline in the middle of it,
-			// so the divider is split evenly across the two rows it separates rather
-			// than sitting flush against one of them. Named in Tailwind spacing units
-			// because the designs use all three of 8 / 12 / 16px.
+			// so each row carries half the gap as its own padding and divide-y draws the
+			// line between the two halves — that way the divider is split evenly across
+			// the rows it separates rather than sitting flush against one of them. The
+			// card's own vertical padding is whatever is left of 12px once a row's half
+			// is counted, which is why it lives here rather than in `padding`. Named in
+			// Tailwind spacing units because the designs use all three of 8 / 12 / 16px.
 			gap: {
-				"2": "[&>*+*]:mt-1 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1",
-				"3": "[&>*+*]:mt-1.5 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1.5",
-				"4": "[&>*+*]:mt-2 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-2"
+				"2": "py-2 [&>*]:py-1",
+				"3": "py-1.5 [&>*]:py-1.5",
+				"4": "py-1 [&>*]:py-2"
 			},
 			padding: {
-				default: "px-4 py-3",
-				tight: "p-3"
+				default: "px-4",
+				tight: "px-3"
 			}
 		},
 		defaultVariants: {