diff --git a/web/src/lib/components/ui/Separator.stories.svelte b/web/src/lib/components/ui/Separator.stories.svelte
new file mode 100644
index 000000000..f29af2642
--- /dev/null
+++ b/web/src/lib/components/ui/Separator.stories.svelte
@@ -0,0 +1,81 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Separator from "./Separator.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Separator",
+		component: Separator,
+		tags: ["autodocs"],
+		argTypes: {
+			variant: {
+				control: { type: "inline-radio" },
+				options: ["line", "dot"]
+			},
+			orientation: {
+				control: { type: "inline-radio" },
+				options: ["horizontal", "vertical"]
+			},
+			class: { control: "text" }
+		},
+		args: {
+			variant: "line",
+			orientation: "horizontal"
+		}
+	});
+</script>
+
+<Story name="Default">
+	{#snippet template(args)}
+		<div class="w-64">
+			<Separator {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Vertical" args={{ orientation: "vertical" }}>
+	{#snippet template(args)}
+		<div class="flex h-8 items-stretch gap-3">
+			<span>Before</span>
+			<Separator {...args} />
+			<span>After</span>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Dot" args={{ variant: "dot" }}>
+	{#snippet template(args)}
+		<div class="flex items-center gap-2">
+			<span>Before</span>
+			<Separator {...args} />
+			<span>After</span>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Variants">
+	<div class="flex flex-col gap-4">
+		<div class="w-64">
+			<Separator variant="line" />
+		</div>
+		<div class="flex h-8 items-stretch gap-3">
+			<span>Before</span>
+			<Separator variant="line" orientation="vertical" />
+			<span>After</span>
+		</div>
+		<div class="flex items-center gap-2">
+			<span>Before</span>
+			<Separator variant="dot" />
+			<span>After</span>
+		</div>
+	</div>
+</Story>
+
+<Story name="In a metadata row">
+	<div class="flex items-center gap-2 text-foreground-muted">
+		<span class="typography-monospace-regular text-foreground-default">a1b2c3d</span>
+		<Separator variant="dot" />
+		<span>eti</span>
+		<Separator variant="dot" />
+		<span>2 hours ago</span>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Separator.svelte b/web/src/lib/components/ui/Separator.svelte
index bc597359c..afad45f5a 100644
--- a/web/src/lib/components/ui/Separator.svelte
+++ b/web/src/lib/components/ui/Separator.svelte
@@ -18,5 +18,5 @@
 		<hr class="min-h-px w-full border-none bg-border-default {className}" />
 	{/if}
 {:else if variant === "dot"}
-	<span class="text-inherit select-none {className}">&middot</span>
+	<span class="text-inherit select-none {className}">&middot;</span>
 {/if}