diff --git a/web/src/lib/components/ui/Separator.svelte b/web/src/lib/components/ui/Separator.svelte
index 79fd32b12..379df5fad 100644
--- a/web/src/lib/components/ui/Separator.svelte
+++ b/web/src/lib/components/ui/Separator.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
 	interface Props {
-		variant?: string;
+		variant?: "line" | "dot";
+		orientation?: "horizontal" | "vertical";
 		class?: string;
 	}
 
-	let { variant: variant = "line", class: className = "" }: Props = $props();
+	let { variant = "line", orientation = "horizontal", class: className = "" }: Props = $props();
 </script>
 
 {#if variant === "line"}
-	<hr class="min-h-px w-full border-none bg-border-default {className}" />
+	{#if orientation === "vertical"}
+		<hr
+			aria-orientation="vertical"
+			class="h-auto min-w-px self-stretch rounded-sm border-none bg-border-default {className}"
+		/>
+	{:else}
+		<hr class="min-h-px w-full border-none bg-border-default {className}" />
+	{/if}
 {:else if variant === "dot"}
 	<span class="text-inherit {className}">&middot</span>
 {/if}