diff --git a/frontend/components.json b/frontend/components.json
index c810da1a..cb523fda 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -1,6 +1,5 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
 	"tailwind": {
 		"css": "src/app.css",
 		"baseColor": "neutral"
@@ -13,5 +12,9 @@
 		"lib": "$lib"
 	},
 	"typescript": true,
-	"registry": "https://shadcn-svelte.com/registry"
+	"registry": "https://shadcn-svelte.com/registry",
+	"style": "luma",
+	"iconLibrary": "lucide",
+	"menuColor": "default-translucent",
+	"menuAccent": "subtle"
 }
diff --git a/frontend/package.json b/frontend/package.json
index ee369664..7fd3a182 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,6 +49,7 @@
     "prettier-plugin-svelte": "^3.5.2",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "rollup": "^4.60.4",
+    "shadcn-svelte": "^1.3.0",
     "svelte": "^5.55.8",
     "svelte-check": "^4.4.8",
     "svelte-sonner": "^1.1.1",
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 53e05029..5d05eee5 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
+@import 'shadcn-svelte/tailwind.css';
 
 @variant dark (&:where(.dark, .dark *));
 
@@ -7,7 +8,7 @@
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
   looks the same as it did with Tailwind CSS v3.
- 
+
   If we ever want to remove these styles, we need to add an explicit border
   color utility to any element that depends on these defaults.
 */
@@ -19,10 +20,19 @@
 	::file-selector-button {
 		border-color: var(--color-gray-200, currentcolor);
 	}
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+	html {
+		@apply font-sans;
+	}
 }
 
 :root {
-	--radius: 1rem;
+	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.145 0 0);
 	--card: oklch(1 0 0);
@@ -135,6 +145,15 @@
 
 	/* Font */
 	--font-gloock: 'gloock', serif;
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
 }
 
 @layer base {
diff --git a/frontend/src/lib/components/form/auto-complete-input.svelte b/frontend/src/lib/components/form/auto-complete-input.svelte
index 5781d509..4d72ca7f 100644
--- a/frontend/src/lib/components/form/auto-complete-input.svelte
+++ b/frontend/src/lib/components/form/auto-complete-input.svelte
@@ -42,6 +42,7 @@
 			case 'Enter':
 				if (selectedIndex >= 0) {
 					handleSuggestionClick(filteredSuggestions[selectedIndex]);
+					e.preventDefault();
 				}
 				break;
 			case 'Escape':
@@ -80,8 +81,8 @@
 	<Popover.Root open={isOpen}>
 		<Popover.Trigger tabindex={-1} class="h-0 w-full" aria-hidden />
 		<Popover.Content
+			class="gap-0! px-1 py-2"
 			sameWidth
-			class="p-0"
 			sideOffset={5}
 			trapFocus={false}
 			interactOutsideBehavior="ignore"
@@ -98,7 +99,7 @@
 					onkeydown={(e) => {
 						if (e.key === 'Enter') handleSuggestionClick(suggestion);
 					}}
-					class="hover:bg-accent hover:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {selectedIndex ===
+					class="hover:bg-accent hover:text-accent-foreground relative flex w-full cursor-default items-center rounded-full py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {selectedIndex ===
 					index
 						? 'bg-accent text-accent-foreground'
 						: ''}"
diff --git a/frontend/src/lib/components/form/date-picker.svelte b/frontend/src/lib/components/form/date-picker.svelte
index fc0627ce..00076c4f 100644
--- a/frontend/src/lib/components/form/date-picker.svelte
+++ b/frontend/src/lib/components/form/date-picker.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
 	import { Calendar } from '$lib/components/ui/calendar';
 	import * as Popover from '$lib/components/ui/popover';
 	import { m } from '$lib/paraglide/messages';
@@ -68,11 +67,10 @@
 	<Popover.Root bind:open>
 		<Popover.Trigger {id} class="w-full">
 			{#snippet child({ props })}
-				<Button
+				<button
 					{...props}
-					variant="outline"
 					class={cn(
-						'w-full justify-start text-left font-normal',
+						'w-full flex justify-start items-center font-normal h-9 bg-input/50 rounded-full p-3',
 						!value && 'text-muted-foreground'
 					)}
 					aria-label={m.select_a_date()}
@@ -81,7 +79,7 @@
 					{calendarDisplayDate
 						? df.format(calendarDisplayDate.toDate(getLocalTimeZone()))
 						: m.select_a_date()}
-				</Button>
+				</button>
 			{/snippet}
 		</Popover.Trigger>
 		<Popover.Content class="w-auto p-0" align="start">
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 9d3e9585..805a9331 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -24,7 +24,7 @@
 		data-slot="alert-dialog-content"
 		data-size={size}
 		class={cn(
-			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-4xl p-5 sm:p-8 sm:pb-6 ring-1 duration-100 data-[size=default]:max-w-sm data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index 09d285f5..857e901e 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
 	class={cn(
-		'-mx-4 -mb-4 rounded-b-xl p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+		'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index 419a434b..1319d8bc 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-dialog-header"
 	class={cn(
-		'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+		'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
index ec2baca5..47ea2800 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-dialog-media"
 	class={cn(
-		"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+		"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index 5e974556..57878403 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="alert-dialog-overlay"
 	class={cn(
-		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 z-50',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index f8c458ea..1b4ebdb9 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="alert-dialog-title"
 	class={cn(
-		'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+		'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-button/dropdown-button.svelte b/frontend/src/lib/components/ui/alert/alert-action.svelte
similarity index 50%
rename from frontend/src/lib/components/ui/dropdown-button/dropdown-button.svelte
rename to frontend/src/lib/components/ui/alert/alert-action.svelte
index 18e724f3..553a4dec 100644
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button.svelte
+++ b/frontend/src/lib/components/ui/alert/alert-action.svelte
@@ -1,19 +1,20 @@
-<script lang="ts" module>
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	export type DropdownButtonProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
-</script>
-
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+
 	let {
-		class: className,
 		ref = $bindable(null),
+		class: className,
 		children,
 		...restProps
-	}: DropdownButtonProps = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="dropdown-button" class={cn('flex', className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn('absolute top-2.5 right-3', className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/ui/alert/alert-description.svelte b/frontend/src/lib/components/ui/alert/alert-description.svelte
index 6324fa81..79b13038 100644
--- a/frontend/src/lib/components/ui/alert/alert-description.svelte
+++ b/frontend/src/lib/components/ui/alert/alert-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="alert-description"
-	class={cn('col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className)}
+	class={cn(
+		'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/alert/alert-title.svelte b/frontend/src/lib/components/ui/alert/alert-title.svelte
index a229062d..d5b7bf4e 100644
--- a/frontend/src/lib/components/ui/alert/alert-title.svelte
+++ b/frontend/src/lib/components/ui/alert/alert-title.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="alert-title"
-	class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+	class={cn(
+		'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/alert/alert.svelte b/frontend/src/lib/components/ui/alert/alert.svelte
index c09ed4ac..350cb294 100644
--- a/frontend/src/lib/components/ui/alert/alert.svelte
+++ b/frontend/src/lib/components/ui/alert/alert.svelte
@@ -1,18 +1,17 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const alertVariants = tv({
-		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-3xl border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+		base: "grid gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
-				success:
-					'bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100 [&>svg]:text-green-900 dark:[&>svg]:text-green-100',
-				info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 [&>svg]:text-blue-900 dark:[&>svg]:text-blue-100',
 				destructive:
-					'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100 [&>svg]:text-red-900 dark:[&>svg]:text-red-100',
-				warning:
-					'bg-warning text-warning-foreground border-warning/40 [&>svg]:text-warning-foreground'
+					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+				success:
+					'bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100 *:[svg]:text-current',
+				info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 *:[svg]:text-current',
+				warning: 'bg-warning text-warning-foreground border-warning/40 *:[svg]:text-current'
 			}
 		},
 		defaultVariants: {
@@ -24,10 +23,10 @@
 </script>
 
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '$lib/utils/style.js';
 	import { LucideX } from '@lucide/svelte';
 	import { onMount } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -66,15 +65,15 @@
 	<div
 		bind:this={ref}
 		data-slot="alert"
+		role="alert"
 		class={cn(alertVariants({ variant }), className)}
 		{...restProps}
-		role="alert"
 	>
 		{@render children?.()}
 		{#if dismissibleId || onDismiss}
-			<button onclick={dismiss} class="absolute right-0 top-0 m-3 text-black dark:text-white"
-				><LucideX class="size-4" /></button
-			>
+			<button onclick={dismiss} class="absolute top-2.5 right-3 text-current">
+				<LucideX class="size-4" />
+			</button>
 		{/if}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/ui/alert/index.ts b/frontend/src/lib/components/ui/alert/index.ts
index 5e0f854d..0bc9d9c7 100644
--- a/frontend/src/lib/components/ui/alert/index.ts
+++ b/frontend/src/lib/components/ui/alert/index.ts
@@ -1,14 +1,17 @@
 import Root from './alert.svelte';
 import Description from './alert-description.svelte';
 import Title from './alert-title.svelte';
+import Action from './alert-action.svelte';
 export { alertVariants, type AlertVariant } from './alert.svelte';
 
 export {
 	Root,
 	Description,
 	Title,
+	Action,
 	//
 	Root as Alert,
 	Description as AlertDescription,
-	Title as AlertTitle
+	Title as AlertTitle,
+	Action as AlertAction
 };
diff --git a/frontend/src/lib/components/ui/avatar/avatar-badge.svelte b/frontend/src/lib/components/ui/avatar/avatar-badge.svelte
new file mode 100644
index 00000000..4bd66b76
--- /dev/null
+++ b/frontend/src/lib/components/ui/avatar/avatar-badge.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="avatar-badge"
+	class={cn(
+		'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+		'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+		'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+		'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte b/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
index f8d98c02..b1c8b679 100644
--- a/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -12,6 +12,9 @@
 <AvatarPrimitive.Fallback
 	bind:ref
 	data-slot="avatar-fallback"
-	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+	class={cn(
+		'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',
+		className
+	)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte b/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte
new file mode 100644
index 00000000..9a821b78
--- /dev/null
+++ b/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group-count"
+	class={cn(
+		'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/avatar/avatar-group.svelte b/frontend/src/lib/components/ui/avatar/avatar-group.svelte
new file mode 100644
index 00000000..bcd581c8
--- /dev/null
+++ b/frontend/src/lib/components/ui/avatar/avatar-group.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group"
+	class={cn(
+		'cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/avatar/avatar-image.svelte b/frontend/src/lib/components/ui/avatar/avatar-image.svelte
index ddb8a11b..21b10964 100644
--- a/frontend/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/frontend/src/lib/components/ui/avatar/avatar-image.svelte
@@ -12,6 +12,6 @@
 <AvatarPrimitive.Image
 	bind:ref
 	data-slot="avatar-image"
-	class={cn('aspect-square size-full', className)}
+	class={cn('rounded-full aspect-square size-full object-cover', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/avatar/avatar.svelte b/frontend/src/lib/components/ui/avatar/avatar.svelte
index 9b95140b..652cf655 100644
--- a/frontend/src/lib/components/ui/avatar/avatar.svelte
+++ b/frontend/src/lib/components/ui/avatar/avatar.svelte
@@ -4,14 +4,23 @@
 
 	let {
 		ref = $bindable(null),
+		loadingStatus = $bindable('loading'),
+		size = 'default',
 		class: className,
 		...restProps
-	}: AvatarPrimitive.RootProps = $props();
+	}: AvatarPrimitive.RootProps & {
+		size?: 'default' | 'sm' | 'lg';
+	} = $props();
 </script>
 
 <AvatarPrimitive.Root
 	bind:ref
+	bind:loadingStatus
 	data-slot="avatar"
-	class={cn('relative flex size-10 shrink-0 overflow-hidden rounded-full border', className)}
+	data-size={size}
+	class={cn(
+		'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',
+		className
+	)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/avatar/index.ts b/frontend/src/lib/components/ui/avatar/index.ts
index 9585f8ad..c4530fb0 100644
--- a/frontend/src/lib/components/ui/avatar/index.ts
+++ b/frontend/src/lib/components/ui/avatar/index.ts
@@ -1,13 +1,22 @@
 import Root from './avatar.svelte';
 import Image from './avatar-image.svelte';
 import Fallback from './avatar-fallback.svelte';
+import Badge from './avatar-badge.svelte';
+import Group from './avatar-group.svelte';
+import GroupCount from './avatar-group-count.svelte';
 
 export {
 	Root,
 	Image,
 	Fallback,
+	Badge,
+	Group,
+	GroupCount,
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback
+	Fallback as AvatarFallback,
+	Badge as AvatarBadge,
+	Group as AvatarGroup,
+	GroupCount as AvatarGroupCount
 };
diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
index 1a3c5b5c..66245386 100644
--- a/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
-		base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+		base: 'h-5 gap-1 rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
diff --git a/frontend/src/lib/components/ui/button-group/button-group-separator.svelte b/frontend/src/lib/components/ui/button-group/button-group-separator.svelte
new file mode 100644
index 00000000..c5290de5
--- /dev/null
+++ b/frontend/src/lib/components/ui/button-group/button-group-separator.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style.js';
+	import type { ComponentProps } from 'svelte';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="button-group-separator"
+	{orientation}
+	class={cn(
+		'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/button-group/button-group-text.svelte b/frontend/src/lib/components/ui/button-group/button-group-text.svelte
new file mode 100644
index 00000000..9f39392b
--- /dev/null
+++ b/frontend/src/lib/components/ui/button-group/button-group-text.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		...restProps,
+		class: cn(
+			"bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+			className
+		),
+		'data-slot': 'button-group-text'
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/ui/button-group/button-group.svelte b/frontend/src/lib/components/ui/button-group/button-group.svelte
new file mode 100644
index 00000000..0d0b41db
--- /dev/null
+++ b/frontend/src/lib/components/ui/button-group/button-group.svelte
@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const buttonGroupVariants = tv({
+		base: "has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		variants: {
+			orientation: {
+				horizontal:
+					'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
+				vertical:
+					'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0'
+			}
+		},
+		defaultVariants: {
+			orientation: 'horizontal'
+		}
+	});
+
+	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>['orientation'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		orientation = 'horizontal',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: ButtonGroupOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="button-group"
+	data-orientation={orientation}
+	class={cn(buttonGroupVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/button-group/index.ts b/frontend/src/lib/components/ui/button-group/index.ts
new file mode 100644
index 00000000..99d0e678
--- /dev/null
+++ b/frontend/src/lib/components/ui/button-group/index.ts
@@ -0,0 +1,15 @@
+import Root, { buttonGroupVariants, type ButtonGroupOrientation } from './button-group.svelte';
+import Text from './button-group-text.svelte';
+import Separator from './button-group-separator.svelte';
+
+export {
+	Root,
+	Text,
+	Separator,
+	buttonGroupVariants,
+	type ButtonGroupOrientation,
+	//
+	Root as ButtonGroup,
+	Text as ButtonGroupText,
+	Separator as ButtonGroupSeparator
+};
diff --git a/frontend/src/lib/components/ui/button/button.svelte b/frontend/src/lib/components/ui/button/button.svelte
index 2e640acd..578ab248 100644
--- a/frontend/src/lib/components/ui/button/button.svelte
+++ b/frontend/src/lib/components/ui/button/button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts" module>
 	import { cn, type WithElementRef } from '$lib/utils/style.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:shrink-0 transition active:scale-95",
+		base: "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
 				outline:
-					'border border-border bg-background hover:bg-muted hover:text-foreground dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent',
+					'border-border bg-background hover:bg-muted hover:text-foreground dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent',
 				secondary:
 					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
 				ghost:
@@ -19,10 +19,15 @@
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {
-				default: 'h-10 px-4 py-2',
-				sm: 'h-9 px-3 py-2',
-				lg: 'h-11 px-8',
-				icon: 'h-10 w-10'
+				default:
+					'h-9.5 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
+				xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+				sm: 'h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				lg: 'h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+				icon: 'size-9.5',
+				'icon-xs': "size-6 [&_svg:not([class*='size-'])]:size-3",
+				'icon-sm': 'size-8',
+				'icon-lg': 'size-10'
 			}
 		},
 		defaultVariants: {
@@ -110,11 +115,11 @@
 		onclick={handleOnClick}
 		{...restProps}
 	>
-		<span class="flex items-center w-full justify-center">
+		<span class="flex w-full items-center justify-center">
 			<Spinner
 				class={cn(
 					'grid overflow-hidden transition-[width,opacity,margin-right] duration-400 ease-[linear(0,0.897_14.4%,1.311_31.2%,1.338_46%,1.054_80.4%,1)]',
-					isLoading ? 'w-4 opacity-100 mr-2' : 'w-0 opacity-0'
+					isLoading ? 'mr-2 w-4 opacity-100' : 'w-0 opacity-0'
 				)}
 				aria-hidden={!isLoading}
 			/>
diff --git a/frontend/src/lib/components/ui/calendar/calendar-caption.svelte b/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
new file mode 100644
index 00000000..670ee832
--- /dev/null
+++ b/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import type Calendar from './calendar.svelte';
+	import CalendarMonthSelect from './calendar-month-select.svelte';
+	import CalendarYearSelect from './calendar-year-select.svelte';
+	import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
+		months: ComponentProps<typeof CalendarMonthSelect>['months'];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>['monthFormat'];
+		years: ComponentProps<typeof CalendarYearSelect>['years'];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>['yearFormat'];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === 'dropdown'}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === 'dropdown-months'}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === 'dropdown-years'}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-cell.svelte b/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
index 3fb29332..7142520b 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md',
+		'relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-day.svelte b/frontend/src/lib/components/ui/calendar/calendar-day.svelte
index 1a4c6d6b..4585e453 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-day.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
 	import { cn } from '$lib/utils/style.js';
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
 
@@ -13,17 +12,21 @@
 <CalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: 'ghost' }),
-		'size-8 p-0 font-normal select-none',
-		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-		// Selected
-		'data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground dark:data-selected:hover:bg-primary dark:data-selected:focus:bg-primary data-selected:opacity-100',
-		// Disabled
-		'data-disabled:text-muted-foreground data-disabled:opacity-50',
-		// Unavailable
-		'data-unavailable:text-destructive-foreground data-unavailable:line-through',
+		'flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none',
+		'[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
+		'not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground',
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground',
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground',
 		// Outside months
-		'data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30',
+		'[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
+		// Disabled
+		'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		// Unavailable
+		'data-[unavailable]:text-muted-foreground data-[unavailable]:line-through',
+		// focus
+		'focus:border-ring focus:ring-ring/50 focus:relative',
+		// inner spans
+		'[&>span]:text-xs [&>span]:opacity-70',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-grid.svelte b/frontend/src/lib/components/ui/calendar/calendar-grid.svelte
index 055a524f..155e6313 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Grid
 	bind:ref
-	class={cn('w-full border-collapse space-y-1', className)}
+	class={cn('flex w-full border-collapse flex-col', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte b/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
index 2c9e4bd9..a240857d 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -11,6 +11,9 @@
 
 <CalendarPrimitive.HeadCell
 	bind:ref
-	class={cn('text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal', className)}
+	class={cn(
+		'text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal',
+		className
+	)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/calendar/calendar-header.svelte b/frontend/src/lib/components/ui/calendar/calendar-header.svelte
index c2774781..2bc7dcdb 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-header.svelte
@@ -11,6 +11,9 @@
 
 <CalendarPrimitive.Header
 	bind:ref
-	class={cn('relative flex w-full items-center justify-between pt-1', className)}
+	class={cn(
+		'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+		className
+	)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/calendar/calendar-heading.svelte b/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
index 82ecbe86..9e5a1baf 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -9,4 +9,8 @@
 	}: CalendarPrimitive.HeadingProps = $props();
 </script>
 
-<CalendarPrimitive.Heading bind:ref class={cn('text-sm font-medium', className)} {...restProps} />
+<CalendarPrimitive.Heading
+	bind:ref
+	class={cn('px-(--cell-size) text-sm font-medium', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte b/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
new file mode 100644
index 00000000..fe321c42
--- /dev/null
+++ b/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect
+		bind:ref
+		class="bg-background dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class={cn('size-4', className)} />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>
diff --git a/frontend/src/lib/components/ui/calendar/calendar-month.svelte b/frontend/src/lib/components/ui/calendar/calendar-month.svelte
new file mode 100644
index 00000000..2154fe19
--- /dev/null
+++ b/frontend/src/lib/components/ui/calendar/calendar-month.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn('flex w-full flex-col gap-4', className)}>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/calendar/calendar-months.svelte b/frontend/src/lib/components/ui/calendar/calendar-months.svelte
index 679e9abc..0a0de706 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-months.svelte
@@ -12,7 +12,7 @@
 
 <div
 	bind:this={ref}
-	class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4', className)}
+	class={cn('relative flex flex-col gap-4 md:flex-row', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-nav.svelte b/frontend/src/lib/components/ui/calendar/calendar-nav.svelte
new file mode 100644
index 00000000..02b6f970
--- /dev/null
+++ b/frontend/src/lib/components/ui/calendar/calendar-nav.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
+>
+	{@render children?.()}
+</nav>
diff --git a/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte b/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte
index f2585a48..4bc71b8b 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,28 +1,36 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
 	import { cn } from '$lib/utils/style.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = 'ghost',
 		...restProps
-	}: CalendarPrimitive.PrevButtonProps = $props();
+	}: CalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class="size-4" />
+	<ChevronRightIcon class={cn('size-4', className)} />
 {/snippet}
 
 <CalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: 'outline' }),
-		'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		buttonVariants({ variant }),
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.NextButton>
diff --git a/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte b/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte
index 45d2877c..1b43f8e6 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,28 +1,36 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
 	import { cn } from '$lib/utils/style.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = 'ghost',
 		...restProps
-	}: CalendarPrimitive.PrevButtonProps = $props();
+	}: CalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class="size-4" />
+	<ChevronLeftIcon class={cn('size-4', className)} />
 {/snippet}
 
 <CalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: 'outline' }),
-		'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		buttonVariants({ variant }),
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.PrevButton>
diff --git a/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte b/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
new file mode 100644
index 00000000..2e4c1fab
--- /dev/null
+++ b/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
+		className
+	)}
+>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class={cn('size-4', className)} />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.YearSelect>
+</span>
diff --git a/frontend/src/lib/components/ui/calendar/calendar.svelte b/frontend/src/lib/components/ui/calendar/calendar.svelte
index 97f5f59b..e7508fd3 100644
--- a/frontend/src/lib/components/ui/calendar/calendar.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar.svelte
@@ -1,127 +1,115 @@
 <script lang="ts">
-	import * as Calendar from '$lib/components/ui/calendar/index.js';
-	import * as Select from '$lib/components/ui/select/index.js';
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import * as Calendar from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
 	import { getLocale } from '$lib/paraglide/runtime';
-	import { cn } from '$lib/utils/style';
-	import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internationalized/date';
-	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import type { ButtonVariant } from '../button/button.svelte';
+	import { isEqualMonth, type DateValue } from '@internationalized/date';
+	import type { Snippet } from 'svelte';
 
 	let {
+		ref = $bindable(null),
 		value = $bindable(),
-		placeholder = $bindable()
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = 'short',
+		buttonVariant = 'ghost',
+		captionLayout = 'dropdown',
+		locale = getLocale(),
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = 'numeric',
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
 	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
-		value: CalendarDate | undefined;
+		buttonVariant?: ButtonVariant;
+		captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+		months?: CalendarPrimitive.MonthSelectProps['months'];
+		years?: CalendarPrimitive.YearSelectProps['years'];
+		monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
+		yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
 	} = $props();
 
-	const locale = getLocale();
-	const currentDate = today(getLocalTimeZone());
-
-	const monthFmt = new DateFormatter(locale, {
-		month: 'long'
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith('dropdown')) return 'short';
+		return 'long';
 	});
-
-	const monthOptions = Array.from({ length: 12 }, (_, i) => {
-		const month = currentDate.set({ month: i + 1 });
-		return {
-			value: month.month,
-			label: monthFmt.format(month.toDate(getLocalTimeZone()))
-		};
-	});
-
-	const yearOptions = Array.from({ length: 100 }, (_, i) => ({
-		label: String(new Date().getFullYear() + i),
-		value: new Date().getFullYear() + i
-	}));
-
-	const defaultYear = $derived(
-		placeholder ? { value: placeholder.year, label: String(placeholder.year) } : undefined
-	);
-
-	const defaultMonth = $derived(
-		placeholder
-			? {
-					value: placeholder.month,
-					label: monthFmt.format(placeholder.toDate(getLocalTimeZone()))
-				}
-			: undefined
-	);
-
-	const monthLabel = $derived(
-		monthOptions.find((m) => m.value === defaultMonth?.value)?.label ?? 'Select a month'
-	);
 </script>
 
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
 <CalendarPrimitive.Root
-	type="single"
-	weekdayFormat="short"
-	class={cn('rounded-md border p-3')}
-	{locale}
-	bind:value
+	bind:value={value as never}
+	bind:ref
 	bind:placeholder
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class={cn(
+		'p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Header class="flex w-full items-center justify-between gap-2">
-			<Select.Root
-				type="single"
-				value={`${defaultMonth?.value}`}
-				onValueChange={(v) => {
-					if (!placeholder) return;
-					if (v === `${placeholder.month}`) return;
-					placeholder = placeholder.set({ month: Number.parseInt(v) });
-				}}
-			>
-				<Select.Trigger aria-label="Select month" class="w-[60%]">
-					{monthLabel}
-				</Select.Trigger>
-				<Select.Content class="max-h-[200px] overflow-y-auto">
-					{#each monthOptions as { value, label } (value)}
-						<Select.Item value={`${value}`} {label} />
-					{/each}
-				</Select.Content>
-			</Select.Root>
-			<Select.Root
-				type="single"
-				value={`${defaultYear?.value}`}
-				onValueChange={(v) => {
-					if (!v || !placeholder) return;
-					if (v === `${placeholder?.year}`) return;
-					placeholder = placeholder.set({ year: Number.parseInt(v) });
-				}}
-			>
-				<Select.Trigger aria-label="Select year" class="w-[40%]">
-					{defaultYear?.label ?? 'Select year'}
-				</Select.Trigger>
-				<Select.Content class="max-h-[200px] overflow-y-auto">
-					{#each yearOptions as { value, label } (value)}
-						<Select.Item value={`${value}`} {label} />
-					{/each}
-				</Select.Content>
-			</Select.Root>
-		</Calendar.Header>
 		<Calendar.Months>
-			{#each months as month (month)}
-				<Calendar.Grid>
-					<Calendar.GridHead>
-						<Calendar.GridRow class="flex">
-							{#each weekdays as weekday (weekday)}
-								<Calendar.HeadCell>
-									{weekday.slice(0, 2)}
-								</Calendar.HeadCell>
-							{/each}
-						</Calendar.GridRow>
-					</Calendar.GridHead>
-					<Calendar.GridBody>
-						{#each month.weeks as weekDates (weekDates)}
-							<Calendar.GridRow class="mt-2 w-full">
-								{#each weekDates as date (date)}
-									<Calendar.Cell class="select-none" {date} month={month.value}>
-										<Calendar.Day />
-									</Calendar.Cell>
+			<Calendar.Nav>
+				<Calendar.PrevButton variant={buttonVariant} />
+				<Calendar.NextButton variant={buttonVariant} />
+			</Calendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<Calendar.Month>
+					<Calendar.Header>
+						<Calendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Calendar.Header>
+					<Calendar.Grid>
+						<Calendar.GridHead>
+							<Calendar.GridRow class="select-none">
+								{#each weekdays as weekday, i (i)}
+									<Calendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</Calendar.HeadCell>
 								{/each}
 							</Calendar.GridRow>
-						{/each}
-					</Calendar.GridBody>
-				</Calendar.Grid>
+						</Calendar.GridHead>
+						<Calendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<Calendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<Calendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value)
+												})}
+											{:else}
+												<Calendar.Day />
+											{/if}
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				</Calendar.Month>
 			{/each}
 		</Calendar.Months>
 	{/snippet}
diff --git a/frontend/src/lib/components/ui/calendar/index.ts b/frontend/src/lib/components/ui/calendar/index.ts
index 5d60fa56..180d173b 100644
--- a/frontend/src/lib/components/ui/calendar/index.ts
+++ b/frontend/src/lib/components/ui/calendar/index.ts
@@ -11,6 +11,11 @@ import GridHead from './calendar-grid-head.svelte';
 import HeadCell from './calendar-head-cell.svelte';
 import NextButton from './calendar-next-button.svelte';
 import PrevButton from './calendar-prev-button.svelte';
+import MonthSelect from './calendar-month-select.svelte';
+import YearSelect from './calendar-year-select.svelte';
+import Month from './calendar-month.svelte';
+import Nav from './calendar-nav.svelte';
+import Caption from './calendar-caption.svelte';
 
 export {
 	Day,
@@ -25,6 +30,11 @@ export {
 	HeadCell,
 	NextButton,
 	PrevButton,
+	Nav,
+	Month,
+	YearSelect,
+	MonthSelect,
+	Caption,
 	//
 	Root as Calendar
 };
diff --git a/frontend/src/lib/components/ui/card/card-action.svelte b/frontend/src/lib/components/ui/card/card-action.svelte
index ee60b6d4..abd756d4 100644
--- a/frontend/src/lib/components/ui/card/card-action.svelte
+++ b/frontend/src/lib/components/ui/card/card-action.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="card-action"
-	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+	class={cn(
+		'cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/card/card-content.svelte b/frontend/src/lib/components/ui/card/card-content.svelte
index 9de02e5b..bb4d3c21 100644
--- a/frontend/src/lib/components/ui/card/card-content.svelte
+++ b/frontend/src/lib/components/ui/card/card-content.svelte
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn('px-6 group-data-[size=sm]/card:px-4', className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/ui/card/card-description.svelte b/frontend/src/lib/components/ui/card/card-description.svelte
index c9522c60..54805ad3 100644
--- a/frontend/src/lib/components/ui/card/card-description.svelte
+++ b/frontend/src/lib/components/ui/card/card-description.svelte
@@ -13,7 +13,7 @@
 <p
 	bind:this={ref}
 	data-slot="card-description"
-	class={cn('text-muted-foreground mt-1 text-sm', className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/card/card-footer.svelte b/frontend/src/lib/components/ui/card/card-footer.svelte
index 6f3add51..04b24c1e 100644
--- a/frontend/src/lib/components/ui/card/card-footer.svelte
+++ b/frontend/src/lib/components/ui/card/card-footer.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+	class={cn(
+		'rounded-b-4xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/card/card-header.svelte b/frontend/src/lib/components/ui/card/card-header.svelte
index 112c3d22..1975ac20 100644
--- a/frontend/src/lib/components/ui/card/card-header.svelte
+++ b/frontend/src/lib/components/ui/card/card-header.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+		'gap-1.5 rounded-t-4xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/card/card.svelte b/frontend/src/lib/components/ui/card/card.svelte
index 536744ca..00450eaa 100644
--- a/frontend/src/lib/components/ui/card/card.svelte
+++ b/frontend/src/lib/components/ui/card/card.svelte
@@ -6,15 +6,17 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		size = 'default',
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: 'default' | 'sm' } = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
+	data-size={size}
 	class={cn(
-		'bg-card text-card-foreground flex flex-col gap-6 rounded-4xl border py-6 shadow-sm',
+		'bg-card text-card-foreground border-foreground/5 dark:border-foreground/10 gap-6 overflow-hidden rounded-4xl py-6 text-sm shadow-sm border-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl group/card flex flex-col',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index 378aefa7..21ea5e5f 100644
--- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		'bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[5px] border border-transparent transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:checked
@@ -27,12 +27,12 @@
 	{#snippet children({ checked, indeterminate })}
 		<div
 			data-slot="checkbox-indicator"
-			class="flex items-center justify-center text-current transition-none"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
 		>
 			{#if checked}
-				<CheckIcon class="size-3.5" />
+				<CheckIcon />
 			{:else if indeterminate}
-				<MinusIcon class="size-3.5" />
+				<MinusIcon />
 			{/if}
 		</div>
 	{/snippet}
diff --git a/frontend/src/lib/components/ui/command/command-dialog.svelte b/frontend/src/lib/components/ui/command/command-dialog.svelte
index 5f091a7d..7cfd1fab 100644
--- a/frontend/src/lib/components/ui/command/command-dialog.svelte
+++ b/frontend/src/lib/components/ui/command/command-dialog.svelte
@@ -3,16 +3,18 @@
 	import type { Snippet } from 'svelte';
 	import Command from './command.svelte';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
-	import type { WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(''),
 		title = 'Command Palette',
-		description = 'Search for a command to run',
+		description = 'Search for a command to run...',
+		showCloseButton = false,
 		portalProps,
 		children,
+		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
@@ -20,6 +22,8 @@
 			children: Snippet;
 			title?: string;
 			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
 		} = $props();
 </script>
 
@@ -28,13 +32,11 @@
 		<Dialog.Title>{title}</Dialog.Title>
 		<Dialog.Description>{description}</Dialog.Description>
 	</Dialog.Header>
-	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
-		<Command
-			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
-			{...restProps}
-			bind:value
-			bind:ref
-			{children}
-		/>
+	<Dialog.Content
+		class={cn('rounded-4xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0', className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/frontend/src/lib/components/ui/command/command-group.svelte b/frontend/src/lib/components/ui/command/command-group.svelte
index 7f8227fb..156fe241 100644
--- a/frontend/src/lib/components/ui/command/command-group.svelte
+++ b/frontend/src/lib/components/ui/command/command-group.svelte
@@ -17,7 +17,10 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn('text-foreground overflow-hidden p-1', className)}
+	class={cn(
+		'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden py-2 px-1 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+		className
+	)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
diff --git a/frontend/src/lib/components/ui/command/command-input.svelte b/frontend/src/lib/components/ui/command/command-input.svelte
index 9790216d..cd7e9e9f 100644
--- a/frontend/src/lib/components/ui/command/command-input.svelte
+++ b/frontend/src/lib/components/ui/command/command-input.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import SearchIcon from '@lucide/svelte/icons/search';
 	import { cn } from '$lib/utils/style.js';
+	import * as InputGroup from '$lib/components/ui/input-group/index.js';
+	import SearchIcon from '@lucide/svelte/icons/search';
 
 	let {
 		ref = $bindable(null),
@@ -11,16 +12,23 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex h-9 items-center gap-2 border-b px-3" data-slot="command-input-wrapper">
-	<SearchIcon class="size-4 shrink-0 opacity-50" />
-	<CommandPrimitive.Input
-		data-slot="command-input"
-		class={cn(
-			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-			className
-		)}
-		bind:ref
-		{...restProps}
-		bind:value
-	/>
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root class="bg-input/50 h-9">
+		<CommandPrimitive.Input
+			{value}
+			data-slot="command-input"
+			class={cn(
+				'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...restProps}
+		>
+			{#snippet child({ props })}
+				<InputGroup.Input {...props} bind:value bind:ref />
+			{/snippet}
+		</CommandPrimitive.Input>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
 </div>
diff --git a/frontend/src/lib/components/ui/command/command-item.svelte b/frontend/src/lib/components/ui/command/command-item.svelte
index 53d26378..9ee2cd16 100644
--- a/frontend/src/lib/components/ui/command/command-item.svelte
+++ b/frontend/src/lib/components/ui/command/command-item.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils/style.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
 	}: CommandPrimitive.ItemProps = $props();
 </script>
@@ -13,8 +15,13 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-full px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+	<CheckIcon
+		class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+	/>
+</CommandPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/command/command-list.svelte b/frontend/src/lib/components/ui/command/command-list.svelte
index 8bc79c11..bda13ac6 100644
--- a/frontend/src/lib/components/ui/command/command-list.svelte
+++ b/frontend/src/lib/components/ui/command/command-list.svelte
@@ -12,6 +12,9 @@
 <CommandPrimitive.List
 	bind:ref
 	data-slot="command-list"
-	class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+	class={cn(
+		'no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto',
+		className
+	)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/command/command-loading.svelte b/frontend/src/lib/components/ui/command/command-loading.svelte
new file mode 100644
index 00000000..0aaf5c39
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-loading.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />
diff --git a/frontend/src/lib/components/ui/command/command-separator.svelte b/frontend/src/lib/components/ui/command/command-separator.svelte
index b4093482..4f10c721 100644
--- a/frontend/src/lib/components/ui/command/command-separator.svelte
+++ b/frontend/src/lib/components/ui/command/command-separator.svelte
@@ -12,6 +12,6 @@
 <CommandPrimitive.Separator
 	bind:ref
 	data-slot="command-separator"
-	class={cn('bg-border -mx-1 h-px', className)}
+	class={cn('bg-border/50 my-1.5 h-px', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/command/command-shortcut.svelte b/frontend/src/lib/components/ui/command/command-shortcut.svelte
index 67342a3f..9a6db4dc 100644
--- a/frontend/src/lib/components/ui/command/command-shortcut.svelte
+++ b/frontend/src/lib/components/ui/command/command-shortcut.svelte
@@ -13,7 +13,10 @@
 <span
 	bind:this={ref}
 	data-slot="command-shortcut"
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	class={cn(
+		'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/command/command.svelte b/frontend/src/lib/components/ui/command/command.svelte
index c89324bd..9253c2e2 100644
--- a/frontend/src/lib/components/ui/command/command.svelte
+++ b/frontend/src/lib/components/ui/command/command.svelte
@@ -1,21 +1,27 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils/style.js';
+	import { Command as CommandPrimitive } from 'bits-ui';
+
+	export type CommandRootApi = CommandPrimitive.Root;
 
 	let {
+		api = $bindable(null),
 		ref = $bindable(null),
 		value = $bindable(''),
 		class: className,
 		...restProps
-	}: CommandPrimitive.RootProps = $props();
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
 </script>
 
 <CommandPrimitive.Root
+	bind:this={api}
 	bind:value
 	bind:ref
 	data-slot="command"
 	class={cn(
-		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+		'bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/command/index.ts b/frontend/src/lib/components/ui/command/index.ts
index dee23642..d0c94761 100644
--- a/frontend/src/lib/components/ui/command/index.ts
+++ b/frontend/src/lib/components/ui/command/index.ts
@@ -1,6 +1,5 @@
-import { Command as CommandPrimitive } from 'bits-ui';
-
 import Root from './command.svelte';
+import Loading from './command-loading.svelte';
 import Dialog from './command-dialog.svelte';
 import Empty from './command-empty.svelte';
 import Group from './command-group.svelte';
@@ -11,8 +10,6 @@ import Separator from './command-separator.svelte';
 import Shortcut from './command-shortcut.svelte';
 import LinkItem from './command-link-item.svelte';
 
-const Loading = CommandPrimitive.Loading;
-
 export {
 	Root,
 	Dialog,
diff --git a/frontend/src/lib/components/ui/dialog/dialog-close.svelte b/frontend/src/lib/components/ui/dialog/dialog-close.svelte
index e8a96a77..41417047 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-close.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
 </script>
 
-<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/frontend/src/lib/components/ui/dialog/dialog-content.svelte b/frontend/src/lib/components/ui/dialog/dialog-content.svelte
index 4dce737b..656d8ca4 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,39 +1,53 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import XIcon from '@lucide/svelte/icons/x';
+	import DialogPortal from './dialog-portal.svelte';
 	import type { Snippet } from 'svelte';
 	import * as Dialog from './index.js';
 	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import XIcon from '@lucide/svelte/icons/x';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		portalProps,
 		children,
+		showCloseButton = true,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-		portalProps?: DialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
+		showCloseButton?: boolean;
 	} = $props();
 </script>
 
-<Dialog.Portal {...portalProps}>
+<DialogPortal {...portalProps}>
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-4xl border p-6 shadow-lg duration-200 sm:max-w-lg',
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 dark:ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<DialogPrimitive.Close
-			class="ring-offset-popover focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-		>
-			<XIcon />
-			<span class="sr-only">Close</span>
-		</DialogPrimitive.Close>
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button
+						variant="ghost"
+						class="bg-secondary absolute top-4 right-4"
+						size="icon-sm"
+						{...props}
+					>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
 	</DialogPrimitive.Content>
-</Dialog.Portal>
+</DialogPortal>
diff --git a/frontend/src/lib/components/ui/dialog/dialog-description.svelte b/frontend/src/lib/components/ui/dialog/dialog-description.svelte
index 0f16e8c6..8711fc2f 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-description.svelte
@@ -12,6 +12,9 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dialog/dialog-footer.svelte b/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
index 6d767f02..44986326 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,20 +1,32 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from '$lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Button } from '$lib/components/ui/button/index.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		showCloseButton = false,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+	class={cn('gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
 	{...restProps}
 >
 	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
 </div>
diff --git a/frontend/src/lib/components/ui/dialog/dialog-header.svelte b/frontend/src/lib/components/ui/dialog/dialog-header.svelte
index ce2b6e22..9df6a27c 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+	class={cn('gap-1.5 flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte b/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
index 4138dce5..27e32742 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 isolate z-50',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dialog/dialog-portal.svelte b/frontend/src/lib/components/ui/dialog/dialog-portal.svelte
index 471581e8..a60a85e7 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-portal.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
-	interface Props {
-		children?: import('svelte').Snippet;
-		[key: string]: any;
-	}
 
-	let { children, ...rest }: Props = $props();
-	type $$Props = DialogPrimitive.PortalProps;
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
 </script>
 
-<DialogPrimitive.Portal {...rest}>
-	{@render children?.()}
-</DialogPrimitive.Portal>
+<DialogPrimitive.Portal {...restProps} />
diff --git a/frontend/src/lib/components/ui/dialog/dialog-title.svelte b/frontend/src/lib/components/ui/dialog/dialog-title.svelte
index 5ed1f2e0..7ecb638e 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-title.svelte
@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn('text-lg leading-none font-semibold', className)}
+	class={cn('text-base leading-none font-medium', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte b/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
index ac04d9fe..92645417 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
 </script>
 
-<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/frontend/src/lib/components/ui/dialog/dialog.svelte b/frontend/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 00000000..c1444b2a
--- /dev/null
+++ b/frontend/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/frontend/src/lib/components/ui/dialog/index.ts b/frontend/src/lib/components/ui/dialog/index.ts
index d9e5fb86..9143f72a 100644
--- a/frontend/src/lib/components/ui/dialog/index.ts
+++ b/frontend/src/lib/components/ui/dialog/index.ts
@@ -1,5 +1,5 @@
-import { Dialog as DialogPrimitive } from 'bits-ui';
-
+import Root from './dialog.svelte';
+import Portal from './dialog-portal.svelte';
 import Title from './dialog-title.svelte';
 import Footer from './dialog-footer.svelte';
 import Header from './dialog-header.svelte';
@@ -9,9 +9,6 @@ import Description from './dialog-description.svelte';
 import Trigger from './dialog-trigger.svelte';
 import Close from './dialog-close.svelte';
 
-const Root = DialogPrimitive.Root;
-const Portal = DialogPrimitive.Portal;
-
 export {
 	Root,
 	Title,
diff --git a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-content.svelte b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-content.svelte
deleted file mode 100644
index 24af8bd4..00000000
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-content.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts" module>
-	import { cn } from '$lib/utils/style.js';
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-	export type DropdownButtonContentProps = DropdownMenuPrimitive.ContentProps;
-</script>
-
-<script lang="ts">
-	let {
-		ref = $bindable(null),
-		sideOffset = 4,
-		portalProps,
-		class: className,
-		children,
-		...restProps
-	}: DropdownMenuPrimitive.ContentProps & {
-		portalProps?: DropdownMenuPrimitive.PortalProps;
-	} = $props();
-</script>
-
-<DropdownMenuPrimitive.Portal {...portalProps}>
-	<DropdownMenuPrimitive.Content
-		bind:ref
-		{sideOffset}
-		class={cn(
-			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md outline-none',
-			className
-		)}
-		{...restProps}
-	>
-		<DropdownMenuPrimitive.Arrow />
-		{@render children?.()}
-	</DropdownMenuPrimitive.Content>
-</DropdownMenuPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-item.svelte b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-item.svelte
deleted file mode 100644
index 6399e6f9..00000000
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-item.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils/style.js';
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DropdownMenuPrimitive.ItemProps = $props();
-</script>
-
-<DropdownMenuPrimitive.Item
-	bind:ref
-	class={cn(
-		'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-		className
-	)}
-	{...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-main.svelte b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-main.svelte
deleted file mode 100644
index 60302c3f..00000000
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-main.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" module>
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import {
-		buttonVariants,
-		type ButtonVariant,
-		type ButtonSize
-	} from '$lib/components/ui/button/button.svelte';
-
-	export type DropdownButtonMainProps = WithElementRef<HTMLButtonAttributes> & {
-		variant?: ButtonVariant;
-		size?: ButtonSize;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		variant = 'default',
-		size = 'default',
-		ref = $bindable(null),
-		type = 'button',
-		disabled,
-		children,
-		...restProps
-	}: DropdownButtonMainProps = $props();
-</script>
-
-<button
-	bind:this={ref}
-	data-slot="dropdown-button-main"
-	class={cn(buttonVariants({ variant, size }), 'rounded-r-none border-r-0', className)}
-	{type}
-	{disabled}
-	{...restProps}
->
-	{@render children?.()}
-</button>
diff --git a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-separator.svelte b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-separator.svelte
deleted file mode 100644
index e50f1734..00000000
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-separator.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" module>
-	import { cn } from '$lib/utils/style.js';
-
-	export type DropdownButtonSeparatorProps = DropdownMenuPrimitive.SeparatorProps;
-</script>
-
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DropdownMenuPrimitive.SeparatorProps = $props();
-</script>
-
-<DropdownMenuPrimitive.Separator
-	bind:ref
-	class={cn('bg-muted -mx-1 my-1 h-px', className)}
-	{...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-trigger.svelte b/frontend/src/lib/components/ui/dropdown-button/dropdown-button-trigger.svelte
deleted file mode 100644
index de8ccd21..00000000
--- a/frontend/src/lib/components/ui/dropdown-button/dropdown-button-trigger.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts" module>
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import {
-		buttonVariants,
-		type ButtonVariant,
-		type ButtonSize
-	} from '$lib/components/ui/button/button.svelte';
-
-	export type DropdownButtonTriggerProps = WithElementRef<HTMLButtonAttributes> & {
-		variant?: ButtonVariant;
-		size?: ButtonSize;
-		builders?: any[];
-	};
-</script>
-
-<script lang="ts">
-	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-
-	let {
-		class: className,
-		variant = 'default',
-		size = 'default',
-		ref = $bindable(null),
-		type = 'button',
-		disabled,
-		builders = [],
-		children,
-		...restProps
-	}: DropdownButtonTriggerProps = $props();
-</script>
-
-<button
-	bind:this={ref}
-	use:builders[0]
-	data-slot="dropdown-button-trigger"
-	class={cn(
-		buttonVariants({ variant, size }),
-		'border-l-background/20 rounded-l-none border-l px-2',
-		className
-	)}
-	{type}
-	{disabled}
-	{...restProps}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<ChevronDown class="size-4" />
-	{/if}
-</button>
diff --git a/frontend/src/lib/components/ui/dropdown-button/index.ts b/frontend/src/lib/components/ui/dropdown-button/index.ts
deleted file mode 100644
index 3898acff..00000000
--- a/frontend/src/lib/components/ui/dropdown-button/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-import Root from './dropdown-button.svelte';
-import Main from './dropdown-button-main.svelte';
-import Trigger from './dropdown-button-trigger.svelte';
-import Content from './dropdown-button-content.svelte';
-import Item from './dropdown-button-item.svelte';
-import Separator from './dropdown-button-separator.svelte';
-
-const DropdownRoot = DropdownMenuPrimitive.Root;
-const DropdownTrigger = DropdownMenuPrimitive.Trigger;
-
-export {
-	Root,
-	Main,
-	Trigger,
-	Content,
-	Item,
-	Separator,
-	DropdownRoot,
-	DropdownTrigger,
-	//
-	Root as DropdownButton,
-	Main as DropdownButtonMain,
-	Trigger as DropdownButtonTrigger,
-	Content as DropdownButtonContent,
-	Item as DropdownButtonItem,
-	Separator as DropdownButtonSeparator,
-	DropdownRoot as DropdownButtonRoot,
-	DropdownTrigger as DropdownButtonPrimitiveTrigger
-};
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 8ff36900..8d00f0ef 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -23,7 +23,7 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1.5 pr-9 pl-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 955d5d98..7c100584 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
-	import DropdownMenuPortal from './dropdown-menu-portal.svelte';
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 	import type { ComponentProps } from 'svelte';
+	import DropdownMenuPortal from './dropdown-menu-portal.svelte';
 
 	let {
 		ref = $bindable(null),
@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 text-popover-foreground min-w-48 rounded-3xl p-1.5 shadow-lg ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50  overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 405fbe2e..5f970af7 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-2 py-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-2xl px-3 py-1.5 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index ed35bc77..3c4c072a 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -18,7 +18,7 @@
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
 	class={cn(
-		'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8',
+		'text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5 data-[inset]:pl-8',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 4c06cd7f..6dcfb862 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -15,14 +15,14 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
 		<span
-			class="absolute right-2 flex items-center justify-center"
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
 			data-slot="dropdown-menu-radio-item-indicator"
 		>
 			{#if checked}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index e1930cda..93c40779 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn('bg-border -mx-1 my-1 h-px', className)}
+	class={cn('bg-border/50 -mx-1.5 my-1.5 h-px', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 2d5387e4..54d51d00 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
 	class={cn(
-		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto',
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 text-popover-foreground min-w-36 rounded-3xl p-1.5 shadow-lg ring-1 duration-100 w-auto animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index db60f39a..d1682125 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -19,7 +19,7 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-2xl px-3 py-1.5 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-content.svelte b/frontend/src/lib/components/ui/field/field-content.svelte
index db017eb9..a09e3b50 100644
--- a/frontend/src/lib/components/ui/field/field-content.svelte
+++ b/frontend/src/lib/components/ui/field/field-content.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-content"
-	class={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
+	class={cn('gap-1 group/field-content flex flex-1 flex-col leading-snug', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/field/field-description.svelte b/frontend/src/lib/components/ui/field/field-description.svelte
index 348a45ad..9777d680 100644
--- a/frontend/src/lib/components/ui/field/field-description.svelte
+++ b/frontend/src/lib/components/ui/field/field-description.svelte
@@ -14,7 +14,8 @@
 	bind:this={ref}
 	data-slot="field-description"
 	class={cn(
-		'text-muted-foreground -mt-1 mb-0 text-xs leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+		'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+		'last:mt-0 nth-last-2:-mt-1',
 		'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
 		className
 	)}
diff --git a/frontend/src/lib/components/ui/field/field-error.svelte b/frontend/src/lib/components/ui/field/field-error.svelte
index 5ad1d77d..697737f7 100644
--- a/frontend/src/lib/components/ui/field/field-error.svelte
+++ b/frontend/src/lib/components/ui/field/field-error.svelte
@@ -19,7 +19,7 @@
 		if (children) return true;
 
 		// no errors
-		if (!errors) return false;
+		if (!errors || errors.length === 0) return false;
 
 		// has an error but no message
 		if (errors.length === 1 && !errors[0]?.message) {
@@ -46,7 +46,7 @@
 		{:else if singleErrorMessage}
 			{singleErrorMessage}
 		{:else if isMultipleErrors}
-			<ul class="ms-4 flex list-disc flex-col gap-1">
+			<ul class="ml-4 flex list-disc flex-col gap-1">
 				{#each errors ?? [] as error, index (index)}
 					{#if error?.message}
 						<li>{error.message}</li>
diff --git a/frontend/src/lib/components/ui/field/field-group.svelte b/frontend/src/lib/components/ui/field/field-group.svelte
index 8c357858..32916e01 100644
--- a/frontend/src/lib/components/ui/field/field-group.svelte
+++ b/frontend/src/lib/components/ui/field/field-group.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="field-group"
 	class={cn(
-		'group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+		'gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-label.svelte b/frontend/src/lib/components/ui/field/field-label.svelte
index 4d14a3c0..02c0cbf4 100644
--- a/frontend/src/lib/components/ui/field/field-label.svelte
+++ b/frontend/src/lib/components/ui/field/field-label.svelte
@@ -17,11 +17,10 @@
 <Label
 	bind:ref
 	data-slot="field-label"
-	{required}
 	class={cn(
-		'group/field-label peer/field-label mb-0 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-		'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-		'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+		'has-data-checked:bg-input/30 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug',
+		'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+		required && "after:text-red-500 after:content-['*']",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-legend.svelte b/frontend/src/lib/components/ui/field/field-legend.svelte
index 5771a482..bd66d322 100644
--- a/frontend/src/lib/components/ui/field/field-legend.svelte
+++ b/frontend/src/lib/components/ui/field/field-legend.svelte
@@ -18,9 +18,7 @@
 	data-slot="field-legend"
 	data-variant={variant}
 	class={cn(
-		'mb-3 font-medium',
-		'data-[variant=legend]:text-base',
-		'data-[variant=label]:text-sm',
+		'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-separator.svelte b/frontend/src/lib/components/ui/field/field-separator.svelte
index c6b88068..a692e8e1 100644
--- a/frontend/src/lib/components/ui/field/field-separator.svelte
+++ b/frontend/src/lib/components/ui/field/field-separator.svelte
@@ -20,13 +20,13 @@
 	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
-	class={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
+	class={cn('-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative', className)}
 	{...restProps}
 >
 	<Separator class="absolute inset-0 top-1/2" />
 	{#if children}
 		<span
-			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+			class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
 			data-slot="field-separator-content"
 		>
 			{@render children()}
diff --git a/frontend/src/lib/components/ui/field/field-set.svelte b/frontend/src/lib/components/ui/field/field-set.svelte
index c6f5aca1..14f4b38f 100644
--- a/frontend/src/lib/components/ui/field/field-set.svelte
+++ b/frontend/src/lib/components/ui/field/field-set.svelte
@@ -14,8 +14,7 @@
 	bind:this={ref}
 	data-slot="field-set"
 	class={cn(
-		'flex flex-col gap-4',
-		'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+		'gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-title.svelte b/frontend/src/lib/components/ui/field/field-title.svelte
index 9eeb49bd..cdb0b5d5 100644
--- a/frontend/src/lib/components/ui/field/field-title.svelte
+++ b/frontend/src/lib/components/ui/field/field-title.svelte
@@ -12,9 +12,9 @@
 
 <div
 	bind:this={ref}
-	data-slot="field-title"
+	data-slot="field-label"
 	class={cn(
-		'flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50',
+		'gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field.svelte b/frontend/src/lib/components/ui/field/field.svelte
index b3dc6885..f00b71c5 100644
--- a/frontend/src/lib/components/ui/field/field.svelte
+++ b/frontend/src/lib/components/ui/field/field.svelte
@@ -2,20 +2,14 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const fieldVariants = tv({
-		base: 'group/field data-[invalid=true]:text-destructive flex w-full gap-1.5',
+		base: 'data-[invalid=true]:text-destructive gap-3 group/field flex w-full',
 		variants: {
 			orientation: {
-				vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
-				horizontal: [
-					'flex-row items-center',
-					'[&>[data-slot=field-label]]:flex-auto',
-					'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start'
-				],
-				responsive: [
-					'@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto',
-					'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
-					'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
-				]
+				vertical: 'cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+				horizontal:
+					'cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				responsive:
+					'cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/form/form-button.svelte b/frontend/src/lib/components/ui/form/form-button.svelte
index 550f6ace..0b310064 100644
--- a/frontend/src/lib/components/ui/form/form-button.svelte
+++ b/frontend/src/lib/components/ui/form/form-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Button from '$lib/components/ui/button/index.js';
+	import { Button, type ButtonProps } from '$lib/components/ui/button/index.js';
 
-	let { ref = $bindable(null), ...restProps }: Button.Props = $props();
+	let { ref = $bindable(null), ...restProps }: ButtonProps = $props();
 </script>
 
-<Button.Root bind:ref type="submit" {...restProps} />
+<Button bind:ref type="submit" {...restProps} />
diff --git a/frontend/src/lib/components/ui/form/form-element-field.svelte b/frontend/src/lib/components/ui/form/form-element-field.svelte
index 67bfc417..a94adfa2 100644
--- a/frontend/src/lib/components/ui/form/form-element-field.svelte
+++ b/frontend/src/lib/components/ui/form/form-element-field.svelte
@@ -1,11 +1,6 @@
-<script lang="ts" module>
-	import type { FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
-	type T = Record<string, unknown>;
-	type U = _FormPathLeaves<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T>">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
 	import * as FormPrimitive from 'formsnap';
+	import type { FormPathLeaves } from 'sveltekit-superforms';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/style.js';
 
diff --git a/frontend/src/lib/components/ui/form/form-field.svelte b/frontend/src/lib/components/ui/form/form-field.svelte
index b958eead..4f03abe2 100644
--- a/frontend/src/lib/components/ui/form/form-field.svelte
+++ b/frontend/src/lib/components/ui/form/form-field.svelte
@@ -1,11 +1,6 @@
-<script lang="ts" module>
-	import type { FormPath as _FormPath } from 'sveltekit-superforms';
-	type T = Record<string, unknown>;
-	type U = _FormPath<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import * as FormPrimitive from 'formsnap';
+	import type { FormPath } from 'sveltekit-superforms';
 	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
diff --git a/frontend/src/lib/components/ui/form/form-fieldset.svelte b/frontend/src/lib/components/ui/form/form-fieldset.svelte
index f0aa3a32..e2ab8378 100644
--- a/frontend/src/lib/components/ui/form/form-fieldset.svelte
+++ b/frontend/src/lib/components/ui/form/form-fieldset.svelte
@@ -1,11 +1,6 @@
-<script lang="ts" module>
-	import type { FormPath as _FormPath } from 'sveltekit-superforms';
-	type T = Record<string, unknown>;
-	type U = _FormPath<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import * as FormPrimitive from 'formsnap';
+	import type { FormPath } from 'sveltekit-superforms';
 	import { cn, type WithoutChild } from '$lib/utils/style.js';
 
 	let {
diff --git a/frontend/src/lib/components/ui/input-group/index.ts b/frontend/src/lib/components/ui/input-group/index.ts
new file mode 100644
index 00000000..1bbeedfe
--- /dev/null
+++ b/frontend/src/lib/components/ui/input-group/index.ts
@@ -0,0 +1,22 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+
+export {
+	Root,
+	Addon,
+	Button,
+	Input,
+	Text,
+	Textarea,
+	//
+	Root as InputGroup,
+	Addon as InputGroupAddon,
+	Button as InputGroupButton,
+	Input as InputGroupInput,
+	Text as InputGroupText,
+	Textarea as InputGroupTextarea
+};
diff --git a/frontend/src/lib/components/ui/input-group/input-group-addon.svelte b/frontend/src/lib/components/ui/input-group/input-group-addon.svelte
new file mode 100644
index 00000000..43c298cc
--- /dev/null
+++ b/frontend/src/lib/components/ui/input-group/input-group-addon.svelte
@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		variants: {
+			align: {
+				'inline-start': 'pl-3 has-[>button]:-ml-1 has-[>kbd]:-ml-1 order-first',
+				'inline-end': 'pr-3 has-[>button]:-mr-1 has-[>kbd]:-mr-1 order-last',
+				'block-start':
+					'px-3 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5 order-first w-full justify-start',
+				'block-end':
+					'px-3 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5 order-last w-full justify-start'
+			}
+		},
+		defaultVariants: {
+			align: 'inline-start'
+		}
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = 'inline-start',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest('button')) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector('input')?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/input-group/input-group-button.svelte b/frontend/src/lib/components/ui/input-group/input-group-button.svelte
new file mode 100644
index 00000000..13bdb679
--- /dev/null
+++ b/frontend/src/lib/components/ui/input-group/input-group-button.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const inputGroupButtonVariants = tv({
+		base: 'gap-2 rounded-4xl text-sm flex items-center shadow-none',
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-xl px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: 'cn-input-group-button-size-sm',
+				'icon-xs': 'size-6 rounded-xl p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+			}
+		},
+		defaultVariants: {
+			size: 'xs'
+		}
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/utils/style.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = 'button',
+		variant = 'ghost',
+		size = 'xs',
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>
diff --git a/frontend/src/lib/components/ui/input-group/input-group-input.svelte b/frontend/src/lib/components/ui/input-group/input-group-input.svelte
new file mode 100644
index 00000000..667f41d6
--- /dev/null
+++ b/frontend/src/lib/components/ui/input-group/input-group-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style.js';
+	import type { ComponentProps } from 'svelte';
+	import { Input } from '$lib/components/ui/input/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1',
+		className
+	)}
+	bind:value
+	{...props}
+/>
diff --git a/frontend/src/lib/components/ui/input-group/input-group-text.svelte b/frontend/src/lib/components/ui/input-group/input-group-text.svelte
new file mode 100644
index 00000000..51069438
--- /dev/null
+++ b/frontend/src/lib/components/ui/input-group/input-group-text.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte b/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte
new file mode 100644
index 00000000..ad91f90f
--- /dev/null
+++ b/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'rounded-none border-0 bg-transparent py-2.5 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none',
+		className
+	)}
+	bind:value
+	{...props}
+/>
diff --git a/frontend/src/lib/components/ui/input-group/input-group.svelte b/frontend/src/lib/components/ui/input-group/input-group.svelte
new file mode 100644
index 00000000..757070fe
--- /dev/null
+++ b/frontend/src/lib/components/ui/input-group/input-group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		'group/input-group bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border border-transparent transition-[color,box-shadow,background-color] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[textarea]:rounded-2xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/input/index.ts b/frontend/src/lib/components/ui/input/index.ts
index e511dab2..ef216d22 100644
--- a/frontend/src/lib/components/ui/input/index.ts
+++ b/frontend/src/lib/components/ui/input/index.ts
@@ -1,25 +1,8 @@
 import Root from './input.svelte';
+
 export type FormInputEvent<T extends Event = Event> = T & {
 	currentTarget: EventTarget & HTMLInputElement;
 };
-export type InputEvents = {
-	blur: FormInputEvent<FocusEvent>;
-	change: FormInputEvent<Event>;
-	click: FormInputEvent<MouseEvent>;
-	focus: FormInputEvent<FocusEvent>;
-	focusin: FormInputEvent<FocusEvent>;
-	focusout: FormInputEvent<FocusEvent>;
-	keydown: FormInputEvent<KeyboardEvent>;
-	keypress: FormInputEvent<KeyboardEvent>;
-	keyup: FormInputEvent<KeyboardEvent>;
-	mouseover: FormInputEvent<MouseEvent>;
-	mouseenter: FormInputEvent<MouseEvent>;
-	mouseleave: FormInputEvent<MouseEvent>;
-	mousemove: FormInputEvent<MouseEvent>;
-	paste: FormInputEvent<ClipboardEvent>;
-	input: FormInputEvent<InputEvent>;
-	wheel: FormInputEvent<WheelEvent>;
-};
 
 export {
 	Root,
diff --git a/frontend/src/lib/components/ui/input/input.svelte b/frontend/src/lib/components/ui/input/input.svelte
index e92db9e7..e5a901b3 100644
--- a/frontend/src/lib/components/ui/input/input.svelte
+++ b/frontend/src/lib/components/ui/input/input.svelte
@@ -15,6 +15,7 @@
 		type,
 		files = $bindable(),
 		class: className,
+		'data-slot': dataSlot = 'input',
 		...restProps
 	}: Props = $props();
 </script>
@@ -22,11 +23,9 @@
 {#if type === 'file'}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
-			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-full border bg-transparent px-3 py-2 text-base font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			'bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-3xl border border-transparent px-3 py-1 text-base transition-[color,box-shadow,background-color] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		type="file"
@@ -37,11 +36,9 @@
 {:else}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
-			'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-full border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			'bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-3xl border border-transparent px-3 py-1 text-base transition-[color,box-shadow,background-color] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		{type}
diff --git a/frontend/src/lib/components/ui/item/item-actions.svelte b/frontend/src/lib/components/ui/item/item-actions.svelte
index ce37080b..375d8cb6 100644
--- a/frontend/src/lib/components/ui/item/item-actions.svelte
+++ b/frontend/src/lib/components/ui/item/item-actions.svelte
@@ -5,22 +5,15 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		wrapOnMobile,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		wrapOnMobile?: boolean;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="item-actions"
-	class={cn(
-		'flex items-center gap-2',
-		wrapOnMobile && 'w-full pl-8 sm:w-auto sm:pl-0 pt-1',
-		className
-	)}
+	class={cn('gap-2 flex items-center', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-content.svelte b/frontend/src/lib/components/ui/item/item-content.svelte
index e7e30a15..aa324394 100644
--- a/frontend/src/lib/components/ui/item/item-content.svelte
+++ b/frontend/src/lib/components/ui/item/item-content.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="item-content"
-	class={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
+	class={cn(
+		'gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-description.svelte b/frontend/src/lib/components/ui/item/item-description.svelte
index 33521ff1..3e7bf88c 100644
--- a/frontend/src/lib/components/ui/item/item-description.svelte
+++ b/frontend/src/lib/components/ui/item/item-description.svelte
@@ -14,8 +14,7 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		'text-muted-foreground text-balance text-sm font-normal leading-normal',
-		'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+		'text-muted-foreground text-left text-sm [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/item/item-footer.svelte b/frontend/src/lib/components/ui/item/item-footer.svelte
index 321e6fde..55190429 100644
--- a/frontend/src/lib/components/ui/item/item-footer.svelte
+++ b/frontend/src/lib/components/ui/item/item-footer.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-footer"
-	class={cn('flex basis-full items-center justify-between gap-2', className)}
+	class={cn('gap-2 flex basis-full items-center justify-between', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-group.svelte b/frontend/src/lib/components/ui/item/item-group.svelte
index d9a8fc4e..e219f8d8 100644
--- a/frontend/src/lib/components/ui/item/item-group.svelte
+++ b/frontend/src/lib/components/ui/item/item-group.svelte
@@ -14,7 +14,10 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn('group/item-group flex flex-col', className)}
+	class={cn(
+		'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-header.svelte b/frontend/src/lib/components/ui/item/item-header.svelte
index bd3635db..6d4ee3c0 100644
--- a/frontend/src/lib/components/ui/item/item-header.svelte
+++ b/frontend/src/lib/components/ui/item/item-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-header"
-	class={cn('flex basis-full items-center justify-between gap-2', className)}
+	class={cn('gap-2 flex basis-full items-center justify-between', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-media.svelte b/frontend/src/lib/components/ui/item/item-media.svelte
index 84d7cdf1..5736b899 100644
--- a/frontend/src/lib/components/ui/item/item-media.svelte
+++ b/frontend/src/lib/components/ui/item/item-media.svelte
@@ -2,13 +2,13 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const itemMediaVariants = tv({
-		base: 'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
+		base: 'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				transparent: 'bg-transparent',
-				icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-				image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover'
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image:
+					'size-10 overflow-hidden rounded-xl group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-lg [&_img]:size-full [&_img]:object-cover'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/item/item-separator.svelte b/frontend/src/lib/components/ui/item/item-separator.svelte
index 765d639a..a6a754b7 100644
--- a/frontend/src/lib/components/ui/item/item-separator.svelte
+++ b/frontend/src/lib/components/ui/item/item-separator.svelte
@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="item-separator"
 	orientation="horizontal"
-	class={cn('my-0', className)}
+	class={cn('my-2', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/item/item-title.svelte b/frontend/src/lib/components/ui/item/item-title.svelte
index 5b363ee9..c43131ce 100644
--- a/frontend/src/lib/components/ui/item/item-title.svelte
+++ b/frontend/src/lib/components/ui/item/item-title.svelte
@@ -12,10 +12,11 @@
 
 <div
 	bind:this={ref}
-	role="heading"
-	aria-level="3"
 	data-slot="item-title"
-	class={cn('flex w-fit items-center gap-2 font-semibold leading-snug', className)}
+	class={cn(
+		'gap-2 text-sm leading-snug font-semibold underline-offset-4 line-clamp-1 flex w-fit items-center',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item.svelte b/frontend/src/lib/components/ui/item/item.svelte
index 8f0f4e76..a8efcace 100644
--- a/frontend/src/lib/components/ui/item/item.svelte
+++ b/frontend/src/lib/components/ui/item/item.svelte
@@ -2,18 +2,19 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const itemVariants = tv({
-		base: 'group/item focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-4xl border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]',
+		base: '[a]:hover:bg-muted rounded-2xl border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
 		variants: {
 			variant: {
-				default: 'bg-transparent [a&]:hover:bg-accent/50 [a&]:transition-colors',
-				outline: 'border-border [a&]:hover:bg-accent/50 [a&]:transition-colors',
-				muted: 'bg-muted/50 [a&]:hover:bg-accent/50 [a&]:transition-colors',
-				card: 'bg-card shadow-sm [a&]:hover:bg-accent/50 [a&]:transition-colors',
-				transparent: 'bg-transparent'
+				default: 'border-transparent',
+				outline: 'border-border',
+				muted: 'bg-muted/50 border-transparent',
+				card: 'bg-card shadow-sm border-transparent',
+				transparent: 'bg-transparent border-transparent'
 			},
 			size: {
-				default: 'gap-4 p-6',
-				sm: 'gap-2.5 px-4 py-4'
+				default: 'gap-3.5 px-4 py-3.5',
+				sm: 'gap-3.5 px-3.5 py-3',
+				xs: 'gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/label/label.svelte b/frontend/src/lib/components/ui/label/label.svelte
index d249e2c7..62837f8a 100644
--- a/frontend/src/lib/components/ui/label/label.svelte
+++ b/frontend/src/lib/components/ui/label/label.svelte
@@ -1,29 +1,23 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/style.js';
 	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils/style.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		required = false,
 		children,
 		...restProps
-	}: LabelPrimitive.RootProps & {
-		required?: boolean;
-	} = $props();
+	}: LabelPrimitive.RootProps = $props();
 </script>
 
 <LabelPrimitive.Root
 	bind:ref
 	data-slot="label"
 	class={cn(
-		'mb-3 flex items-center gap-1.5 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-		required && "after:text-[14px] after:text-red-500 after:content-['*']",
+		'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
 		className
 	)}
 	{...restProps}
 >
-	{#if children}
-		{@render children()}
-	{/if}
+	{@render children?.()}
 </LabelPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/pagination/index.ts b/frontend/src/lib/components/ui/pagination/index.ts
index 2f5532a2..452fe7e6 100644
--- a/frontend/src/lib/components/ui/pagination/index.ts
+++ b/frontend/src/lib/components/ui/pagination/index.ts
@@ -5,21 +5,27 @@ import Link from './pagination-link.svelte';
 import PrevButton from './pagination-prev-button.svelte';
 import NextButton from './pagination-next-button.svelte';
 import Ellipsis from './pagination-ellipsis.svelte';
+import Previous from './pagination-previous.svelte';
+import Next from './pagination-next.svelte';
 
 export {
 	Root,
 	Content,
 	Item,
 	Link,
-	PrevButton,
-	NextButton,
+	PrevButton, // old
+	NextButton, // old
 	Ellipsis,
+	Previous,
+	Next,
 	//
 	Root as Pagination,
 	Content as PaginationContent,
 	Item as PaginationItem,
 	Link as PaginationLink,
-	PrevButton as PaginationPrevButton,
-	NextButton as PaginationNextButton,
-	Ellipsis as PaginationEllipsis
+	PrevButton as PaginationPrevButton, // old
+	NextButton as PaginationNextButton, // old
+	Ellipsis as PaginationEllipsis,
+	Previous as PaginationPrevious,
+	Next as PaginationNext
 };
diff --git a/frontend/src/lib/components/ui/pagination/pagination-content.svelte b/frontend/src/lib/components/ui/pagination/pagination-content.svelte
index 4724c00f..a58b2b71 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-content.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-content.svelte
@@ -13,7 +13,7 @@
 <ul
 	bind:this={ref}
 	data-slot="pagination-content"
-	class={cn('flex flex-row items-center gap-1', className)}
+	class={cn('gap-1 flex items-center', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index 3aca8715..85db1903 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/style.js';
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 
 	let {
 		ref = $bindable(null),
@@ -14,9 +14,12 @@
 	bind:this={ref}
 	aria-hidden="true"
 	data-slot="pagination-ellipsis"
-	class={cn('flex size-9 items-center justify-center', className)}
+	class={cn(
+		"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
+		className
+	)}
 	{...restProps}
 >
-	<EllipsisIcon class="size-4" />
+	<MoreHorizontalIcon />
 	<span class="sr-only">More pages</span>
 </span>
diff --git a/frontend/src/lib/components/ui/pagination/pagination-link.svelte b/frontend/src/lib/components/ui/pagination/pagination-link.svelte
index 6abd258d..5b2d5e62 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-link.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils/style.js';
-	import { type Props, buttonVariants } from '$lib/components/ui/button/index.js';
-
+	import { buttonVariants, type ButtonSize } from '$lib/components/ui/button/index.js';
 	let {
 		ref = $bindable(null),
 		class: className,
 		size = 'icon',
-		isActive = false,
+		isActive,
 		page,
 		children,
 		...restProps
-	}: PaginationPrimitive.PageProps &
-		Props & {
-			isActive: boolean;
-		} = $props();
+	}: PaginationPrimitive.PageProps & {
+		size?: ButtonSize;
+		isActive: boolean;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
@@ -27,13 +26,17 @@
 	aria-current={isActive ? 'page' : undefined}
 	data-slot="pagination-link"
 	data-active={isActive}
+	data-size={size}
 	class={cn(
-		buttonVariants({
-			variant: isActive ? 'outline' : 'ghost',
-			size
-		}),
+		buttonVariants({ size, variant: isActive ? 'outline' : 'ghost' }),
+		'cn-pagination-link',
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.Page>
diff --git a/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte b/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
index 65bcb3cb..827b9603 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from 'bits-ui';
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
 	import { cn } from '$lib/utils/style.js';
+	import { buttonVariants } from '../button/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,20 +13,19 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class="size-4" />
+	<span>Next</span>
+	<ChevronRightIcon class={cn('size-4', className)} />
 {/snippet}
 
 <PaginationPrimitive.NextButton
 	bind:ref
 	aria-label="Go to next page"
-	class={cn(
-		buttonVariants({
-			size: 'default',
-			variant: 'ghost',
-			class: 'gap-1 px-2.5 sm:pr-2.5'
-		}),
-		className
-	)}
-	children={children || Fallback}
+	class={cn(buttonVariants({ variant: 'ghost' }), 'pr-2!', className)}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.NextButton>
diff --git a/frontend/src/lib/components/ui/pagination/pagination-next.svelte b/frontend/src/lib/components/ui/pagination/pagination-next.svelte
new file mode 100644
index 00000000..0c736f85
--- /dev/null
+++ b/frontend/src/lib/components/ui/pagination/pagination-next.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils/style.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pr-2!', className)}
+	{...restProps}
+>
+	<span class="cn-pagination-next-text hidden sm:block">Next</span>
+	<ChevronRightIcon data-icon="inline-end" />
+</PaginationPrimitive.NextButton>
diff --git a/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte b/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
index b89b1ff9..26679989 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from 'bits-ui';
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
 	import { cn } from '$lib/utils/style.js';
+	import { buttonVariants } from '../button/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,20 +13,19 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class="size-4" />
+	<ChevronLeftIcon class={cn('size-4', className)} />
+	<span>Previous</span>
 {/snippet}
 
 <PaginationPrimitive.PrevButton
 	bind:ref
 	aria-label="Go to previous page"
-	class={cn(
-		buttonVariants({
-			size: 'default',
-			variant: 'ghost',
-			class: 'gap-1 px-2.5 sm:pl-2.5'
-		}),
-		className
-	)}
-	children={children || Fallback}
+	class={cn(buttonVariants({ variant: 'ghost' }), 'pl-2!', className)}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.PrevButton>
diff --git a/frontend/src/lib/components/ui/pagination/pagination-previous.svelte b/frontend/src/lib/components/ui/pagination/pagination-previous.svelte
new file mode 100644
index 00000000..d6bff837
--- /dev/null
+++ b/frontend/src/lib/components/ui/pagination/pagination-previous.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils/style.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pl-2!', className)}
+	{...restProps}
+>
+	<ChevronLeftIcon data-icon="inline-start" />
+	<span class="cn-pagination-previous-text hidden sm:block">Previous</span>
+</PaginationPrimitive.PrevButton>
diff --git a/frontend/src/lib/components/ui/pagination/pagination.svelte b/frontend/src/lib/components/ui/pagination/pagination.svelte
index 48a2c2dc..ac093718 100644
--- a/frontend/src/lib/components/ui/pagination/pagination.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination.svelte
@@ -20,9 +20,9 @@
 	role="navigation"
 	aria-label="pagination"
 	data-slot="pagination"
-	class={cn('mx-auto flex w-full justify-center', className)}
 	{count}
 	{perPage}
 	{siblingCount}
+	class={cn('cn-pagination mx-auto flex w-full justify-center', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/popover/popover-content.svelte b/frontend/src/lib/components/ui/popover/popover-content.svelte
index 58ef2c5d..afd55dcd 100644
--- a/frontend/src/lib/components/ui/popover/popover-content.svelte
+++ b/frontend/src/lib/components/ui/popover/popover-content.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
 	import { Popover as PopoverPrimitive } from 'bits-ui';
-	import type { ComponentProps } from 'svelte';
 	import PopoverPortal from './popover-portal.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -25,8 +25,8 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-sm p-2.5 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden',
-			sameWidth && 'w-[var(--bits-popover-anchor-width)]',
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 flex flex-col gap-4 rounded-3xl p-4 text-sm shadow-lg ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden',
+			sameWidth && 'w-(--bits-popover-anchor-width)',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/popover/popover-header.svelte b/frontend/src/lib/components/ui/popover/popover-header.svelte
index b64b0906..5c688793 100644
--- a/frontend/src/lib/components/ui/popover/popover-header.svelte
+++ b/frontend/src/lib/components/ui/popover/popover-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="popover-header"
-	class={cn('flex flex-col gap-0.5 text-sm', className)}
+	class={cn('flex flex-col gap-1 text-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/popover/popover-title.svelte b/frontend/src/lib/components/ui/popover/popover-title.svelte
index 1ca16a96..53629fdc 100644
--- a/frontend/src/lib/components/ui/popover/popover-title.svelte
+++ b/frontend/src/lib/components/ui/popover/popover-title.svelte
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="popover-title" class={cn('font-medium', className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="popover-title"
+	class={cn('text-base font-medium', className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
index 43add264..7c9fa0f7 100644
--- a/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -14,16 +14,16 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		'bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
 			{#if checked}
 				<CircleIcon
-					class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+					class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full dark:size-2.5"
 				/>
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/ui/radio-group/radio-group.svelte b/frontend/src/lib/components/ui/radio-group/radio-group.svelte
index 9ac7cab1..fd12b760 100644
--- a/frontend/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/frontend/src/lib/components/ui/radio-group/radio-group.svelte
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="radio-group"
-	class={cn('grid gap-3', className)}
+	class={cn('grid gap-3 w-full', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/select/select-content.svelte b/frontend/src/lib/components/ui/select/select-content.svelte
index edb50d06..a084642d 100644
--- a/frontend/src/lib/components/ui/select/select-content.svelte
+++ b/frontend/src/lib/components/ui/select/select-content.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { WithoutChildrenOrChild } from '$lib/utils/style.js';
-	import { cn, type WithoutChild } from '$lib/utils/style.js';
 	import { Select as SelectPrimitive } from 'bits-ui';
-	import type { ComponentProps } from 'svelte';
 	import SelectPortal from './select-portal.svelte';
-	import SelectScrollDownButton from './select-scroll-down-button.svelte';
 	import SelectScrollUpButton from './select-scroll-up-button.svelte';
+	import SelectScrollDownButton from './select-scroll-down-button.svelte';
+	import { cn, type WithoutChild } from '$lib/utils/style.js';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '$lib/utils/style.js';
 
 	let {
 		ref = $bindable(null),
@@ -27,7 +27,7 @@
 		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			'bg-popover y-5 p-1 text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto',
+			'px-1 py-2 text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 min-w-36 rounded-3xl shadow-lg ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 isolate z-50 overflow-x-hidden overflow-y-auto animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/select/select-group.svelte b/frontend/src/lib/components/ui/select/select-group.svelte
index bb26231a..4df02d3f 100644
--- a/frontend/src/lib/components/ui/select/select-group.svelte
+++ b/frontend/src/lib/components/ui/select/select-group.svelte
@@ -12,6 +12,6 @@
 <SelectPrimitive.Group
 	bind:ref
 	data-slot="select-group"
-	class={cn('scroll-my-1 p-1', className)}
+	class={cn('scroll-my-1.5 p-1.5', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/select/select-item.svelte b/frontend/src/lib/components/ui/select/select-item.svelte
index f40cb30b..7bbd29e1 100644
--- a/frontend/src/lib/components/ui/select/select-item.svelte
+++ b/frontend/src/lib/components/ui/select/select-item.svelte
@@ -18,7 +18,7 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1.5 pr-9 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-2xl py-1.5 pr-8 pl-3 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
@@ -29,10 +29,12 @@
 				<CheckIcon class="cn-select-item-indicator-icon" />
 			{/if}
 		</span>
-		{#if childrenProp}
-			{@render childrenProp({ selected, highlighted })}
-		{:else}
-			{label || value}
-		{/if}
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
+			{/if}
+		</span>
 	{/snippet}
 </SelectPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/select/select-label.svelte b/frontend/src/lib/components/ui/select/select-label.svelte
index f71701ae..61d11c7e 100644
--- a/frontend/src/lib/components/ui/select/select-label.svelte
+++ b/frontend/src/lib/components/ui/select/select-label.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
+	class={cn('text-muted-foreground px-3 py-2.5 text-xs', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
index a9d95bb9..f368e1d5 100644
--- a/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="select-scroll-down-button"
 	class={cn(
-		"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+		"z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
index 7b7fad19..e53fc27e 100644
--- a/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="select-scroll-up-button"
 	class={cn(
-		"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+		"z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/select/select-separator.svelte b/frontend/src/lib/components/ui/select/select-separator.svelte
index 62e15557..9000f24f 100644
--- a/frontend/src/lib/components/ui/select/select-separator.svelte
+++ b/frontend/src/lib/components/ui/select/select-separator.svelte
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
+	class={cn('bg-border -mx-1.5 my-1.5 h-px pointer-events-none', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/select/select-trigger.svelte b/frontend/src/lib/components/ui/select/select-trigger.svelte
index 5b045a78..ab57f07d 100644
--- a/frontend/src/lib/components/ui/select/select-trigger.svelte
+++ b/frontend/src/lib/components/ui/select/select-trigger.svelte
@@ -19,11 +19,11 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-full border bg-transparent py-2 px-4 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"bg-input/50 data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-3xl border border-transparent px-3 py-2 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon class="text-muted-foreground size-4" />
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
 </SelectPrimitive.Trigger>
diff --git a/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
index d2bdc2d4..f7168542 100644
--- a/frontend/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn('bg-accent animate-pulse rounded-md', className)}
+	class={cn('bg-muted rounded-2xl animate-pulse', className)}
 	{...restProps}
 ></div>
diff --git a/frontend/src/lib/components/ui/sonner/sonner.svelte b/frontend/src/lib/components/ui/sonner/sonner.svelte
index b8b73ac4..eee0b4d9 100644
--- a/frontend/src/lib/components/ui/sonner/sonner.svelte
+++ b/frontend/src/lib/components/ui/sonner/sonner.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
 	import { mode } from 'mode-watcher';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
 
 	let { ...restProps }: SonnerProps = $props();
 </script>
@@ -8,6 +13,22 @@
 <Sonner
 	theme={mode.current}
 	class="toaster group"
-	style="--normal-bg: var(--popover); --normal-text: var(--popover-foreground); --normal-border: var(--border);"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
-/>
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>
diff --git a/frontend/src/lib/components/ui/spinner/spinner.svelte b/frontend/src/lib/components/ui/spinner/spinner.svelte
index fa46b4db..8815f457 100644
--- a/frontend/src/lib/components/ui/spinner/spinner.svelte
+++ b/frontend/src/lib/components/ui/spinner/spinner.svelte
@@ -1,14 +1,26 @@
 <script lang="ts">
 	import { cn } from '$lib/utils/style.js';
 	import Loader2Icon from '@lucide/svelte/icons/loader-2';
-	import type { ComponentProps } from 'svelte';
+	import type { SVGAttributes } from 'svelte/elements';
 
-	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
+	let {
+		class: className,
+		role = 'status',
+		// we add name, color, and stroke for compatibility with different icon libraries props
+		name,
+		color,
+		stroke,
+		'aria-label': ariaLabel = 'Loading',
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
 </script>
 
 <Loader2Icon
-	role="status"
-	aria-label="Loading"
+	{role}
+	name={name === null ? undefined : name}
+	color={color === null ? undefined : color}
+	stroke={stroke === null ? undefined : stroke}
+	aria-label={ariaLabel}
 	class={cn('size-4 animate-spin', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte
index 1c5383f3..043692fa 100644
--- a/frontend/src/lib/components/ui/switch/switch.svelte
+++ b/frontend/src/lib/components/ui/switch/switch.svelte
@@ -6,24 +6,26 @@
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
+		size = 'default',
 		...restProps
-	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: 'sm' | 'default';
+	} = $props();
 </script>
 
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	data-slot="switch"
+	data-size={size}
 	class={cn(
-		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		'data-checked:bg-primary data-unchecked:bg-input/90 data-checked:border-primary focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-full border-2 focus-visible:ring-3 aria-invalid:ring-3 data-unchecked:border-transparent data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7 peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
-		class={cn(
-			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
-		)}
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full shadow-sm not-dark:bg-clip-padding group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-6 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-4 data-checked:translate-x-[calc(100%-8px)] data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 	/>
 </SwitchPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/table/table-cell.svelte b/frontend/src/lib/components/ui/table/table-cell.svelte
index 76e18268..ebb7833a 100644
--- a/frontend/src/lib/components/ui/table/table-cell.svelte
+++ b/frontend/src/lib/components/ui/table/table-cell.svelte
@@ -13,10 +13,7 @@
 <td
 	bind:this={ref}
 	data-slot="table-cell"
-	class={cn(
-		'py-3 px-4 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-		className
-	)}
+	class={cn('p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/table/table-head.svelte b/frontend/src/lib/components/ui/table/table-head.svelte
index 0fe7a26c..f37559a5 100644
--- a/frontend/src/lib/components/ui/table/table-head.svelte
+++ b/frontend/src/lib/components/ui/table/table-head.svelte
@@ -15,7 +15,7 @@
 	data-slot="table-head"
 	scope="col"
 	class={cn(
-		'text-foreground h-12 px-4 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+		'text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/table/table-row.svelte b/frontend/src/lib/components/ui/table/table-row.svelte
index 0bb7e966..c8719bb8 100644
--- a/frontend/src/lib/components/ui/table/table-row.svelte
+++ b/frontend/src/lib/components/ui/table/table-row.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-row"
 	class={cn(
-		'hover:bg-muted/20 data-[state=selected]:bg-muted border-b transition-colors',
+		'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
index 24177222..b6e29c2d 100644
--- a/frontend/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const tabsListVariants = tv({
-		base: 'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+		base: 'rounded-full p-1 group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
 		variants: {
 			variant: {
 				default: 'cn-tabs-list-variant-default bg-muted',
diff --git a/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte b/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
index c0a8cd18..caa55b44 100644
--- a/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -13,7 +13,10 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-offset-2 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:shadow-sm dark:data-[state=active]:bg-black [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"gap-2 rounded-full border border-transparent! px-3 py-1 text-sm font-medium group-data-vertical/tabs:rounded-2xl group-data-vertical/tabs:px-3 group-data-vertical/tabs:py-1.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+		'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+		'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/textarea/index.ts b/frontend/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 00000000..9ccb3bff
--- /dev/null
+++ b/frontend/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea
+};
diff --git a/frontend/src/lib/components/ui/textarea/textarea.svelte b/frontend/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 00000000..9b59edd7
--- /dev/null
+++ b/frontend/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/style.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		'bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-2xl border border-transparent px-3 py-3 text-base transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/frontend/src/lib/components/ui/toggle/toggle.svelte b/frontend/src/lib/components/ui/toggle/toggle.svelte
index c0d79f88..552a5d2b 100644
--- a/frontend/src/lib/components/ui/toggle/toggle.svelte
+++ b/frontend/src/lib/components/ui/toggle/toggle.svelte
@@ -2,17 +2,17 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const toggleVariants = tv({
-		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-3xl text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline:
-					'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs'
+				outline: 'border-input hover:bg-muted border bg-transparent'
 			},
 			size: {
-				default: 'h-9 min-w-9 px-2',
-				sm: 'h-8 min-w-8 px-1.5',
-				lg: 'h-10 min-w-10 px-2.5'
+				default:
+					'h-9 min-w-9 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
+				sm: 'h-8 min-w-8 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				lg: 'h-10 min-w-10 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
index 0fbd0454..d3d2097d 100644
--- a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)',
+			'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)',
 			className
 		)}
 		{...restProps}
@@ -37,7 +37,7 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						'size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50',
+						'size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] bg-foreground fill-foreground z-50',
 						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
 						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
 						'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
index 5631d1b4..0f041627 100644
--- a/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="T = never">
 	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
-	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip.svelte b/frontend/src/lib/components/ui/tooltip/tooltip.svelte
index 7c9d7125..16eeb706 100644
--- a/frontend/src/lib/components/ui/tooltip/tooltip.svelte
+++ b/frontend/src/lib/components/ui/tooltip/tooltip.svelte
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="T = never">
 	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
-	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/frontend/src/lib/utils/style.ts b/frontend/src/lib/utils/style.ts
index 1bc82b72..f92bfcbb 100644
--- a/frontend/src/lib/utils/style.ts
+++ b/frontend/src/lib/utils/style.ts
@@ -1,13 +1,13 @@
-import { type ClassValue, clsx } from 'clsx';
+import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
-export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
-	ref?: U | null;
-};
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/frontend/src/routes/settings/account/locale-picker.svelte b/frontend/src/routes/settings/account/locale-picker.svelte
index e70e170d..220d6086 100644
--- a/frontend/src/routes/settings/account/locale-picker.svelte
+++ b/frontend/src/routes/settings/account/locale-picker.svelte
@@ -49,7 +49,7 @@
 	<Select.Trigger class="max-w-[200px]" aria-label="Select locale">
 		{locales[currentLocale]}
 	</Select.Trigger>
-	<Select.Content>
+	<Select.Content class="max-h-100">
 		{#each Object.entries(locales) as [value, label]}
 			<Select.Item {value}>{label}</Select.Item>
 		{/each}
diff --git a/frontend/src/routes/settings/admin/users/+page.svelte b/frontend/src/routes/settings/admin/users/+page.svelte
index 727075d3..3db413ea 100644
--- a/frontend/src/routes/settings/admin/users/+page.svelte
+++ b/frontend/src/routes/settings/admin/users/+page.svelte
@@ -2,14 +2,15 @@
 	import SignupTokenListModal from '$lib/components/signup/signup-token-list-modal.svelte';
 	import SignupTokenModal from '$lib/components/signup/signup-token-modal.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import * as ButtonGroup from '$lib/components/ui/button-group';
 	import * as Card from '$lib/components/ui/card';
-	import * as DropdownButton from '$lib/components/ui/dropdown-button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus, UserPen, UserPlus } from '@lucide/svelte';
+	import { ChevronDown, LucideMinus, UserPen, UserPlus } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import type { PageProps } from './$types';
@@ -62,25 +63,28 @@
 				</div>
 				{#if !expandAddUser}
 					{#if $appConfigStore.allowUserSignups !== 'disabled'}
-						<DropdownButton.DropdownRoot>
-							<DropdownButton.Root>
-								<DropdownButton.Main disabled={false} onclick={() => (expandAddUser = true)}>
-									{selectedCreateOptions}
-								</DropdownButton.Main>
-								<DropdownButton.DropdownTrigger aria-label="Create options">
-									<DropdownButton.Trigger class="border-l" />
-								</DropdownButton.DropdownTrigger>
-							</DropdownButton.Root>
-
-							<DropdownButton.Content align="end">
-								<DropdownButton.Item onclick={() => (signupTokenModalOpen = true)}>
-									{m.create_signup_token()}
-								</DropdownButton.Item>
-								<DropdownButton.Item onclick={() => (signupTokenListModalOpen = true)}>
-									{m.view_active_signup_tokens()}
-								</DropdownButton.Item>
-							</DropdownButton.Content>
-						</DropdownButton.DropdownRoot>
+						<ButtonGroup.Root>
+							<Button onclick={() => (expandAddUser = true)}>
+								{selectedCreateOptions}
+							</Button>
+							<DropdownMenu.Root>
+								<DropdownMenu.Trigger>
+									{#snippet child({ props })}
+										<Button {...props} size="icon" aria-label="Create options">
+											<ChevronDown />
+										</Button>
+									{/snippet}
+								</DropdownMenu.Trigger>
+								<DropdownMenu.Content align="end">
+									<DropdownMenu.Item onclick={() => (signupTokenModalOpen = true)}>
+										{m.create_signup_token()}
+									</DropdownMenu.Item>
+									<DropdownMenu.Item onclick={() => (signupTokenListModalOpen = true)}>
+										{m.view_active_signup_tokens()}
+									</DropdownMenu.Item>
+								</DropdownMenu.Content>
+							</DropdownMenu.Root>
+						</ButtonGroup.Root>
 					{:else}
 						<Button class="w-full md:w-auto" onclick={() => (expandAddUser = true)}
 							>{m.add_user()}</Button
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebedcb1a..26eb8d88 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,6 +161,9 @@ importers:
       rollup:
         specifier: ^4.60.4
         version: 4.61.1
+      shadcn-svelte:
+        specifier: ^1.3.0
+        version: 1.3.0(svelte@5.56.3(@typescript-eslint/types@8.61.0))
       svelte:
         specifier: ^5.55.8
         version: 5.56.3(@typescript-eslint/types@8.61.0)
@@ -1831,6 +1834,10 @@ packages:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
 
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -2576,6 +2583,9 @@ packages:
       sass:
         optional: true
 
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -2898,6 +2908,12 @@ packages:
   set-cookie-parser@3.1.0:
     resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
 
+  shadcn-svelte@1.3.0:
+    resolution: {integrity: sha512-Pd4ICWTkTks/b2YU4c9vF2XsX1x5HFPRl5bKszS1LcnWS83x+7T4WiIvbWz8Qh9knkcGZ+SCz1+Dmhdq+AYooA==}
+    hasBin: true
+    peerDependencies:
+      svelte: ^5.0.0
+
   sharp@0.34.5:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -4605,6 +4621,8 @@ snapshots:
 
   commander@13.1.0: {}
 
+  commander@14.0.3: {}
+
   commander@2.20.3:
     optional: true
 
@@ -5323,6 +5341,8 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
+  node-fetch-native@1.6.7: {}
+
   normalize-path@3.0.0: {}
 
   normalize-url@8.1.1:
@@ -5617,6 +5637,14 @@ snapshots:
 
   set-cookie-parser@3.1.0: {}
 
+  shadcn-svelte@1.3.0(svelte@5.56.3(@typescript-eslint/types@8.61.0)):
+    dependencies:
+      commander: 14.0.3
+      node-fetch-native: 1.6.7
+      postcss: 8.5.15
+      svelte: 5.56.3(@typescript-eslint/types@8.61.0)
+      tailwind-merge: 3.6.0
+
   sharp@0.34.5:
     dependencies:
       '@img/colour': 1.1.0