diff --git a/client/src/lib/ui/DateRangePicker.svelte b/client/src/lib/ui/DateRangePicker.svelte
index 05b6a57..ff7f6a0 100644
--- a/client/src/lib/ui/DateRangePicker.svelte
+++ b/client/src/lib/ui/DateRangePicker.svelte
@@ -42,7 +42,7 @@
 		<div
 			class="bg-mantle border-surface-0 hover:border-surface-2 flex items-center rounded border pl-2 text-sm drop-shadow-md transition-all"
 		>
-			<div class="grow flex items-center justify-center">
+			<div class="flex grow items-center justify-center">
 				{#each ['start', 'end'] as const as type}
 					<DateRangePicker.Input {type}>
 						{#snippet children({ segments })}
@@ -72,7 +72,7 @@
 				{/each}
 			</div>
 			<DateRangePicker.Trigger
-				class="text-overlay-2 hover:bg-surface-0 grow flex justify-center items-center focus:outline-sky ml-1 cursor-pointer p-2 transition-all focus:outline focus:outline-offset-1"
+				class="text-overlay-2 hover:bg-surface-0 focus:outline-sky ml-1 flex grow cursor-pointer items-center justify-center p-2 transition-all focus:outline focus:outline-offset-1"
 			>
 				<Calendar size="20" />
 			</DateRangePicker.Trigger>
diff --git a/client/src/lib/ui/Select.svelte b/client/src/lib/ui/Select.svelte
index ed3121f..3dbfd8a 100644
--- a/client/src/lib/ui/Select.svelte
+++ b/client/src/lib/ui/Select.svelte
@@ -2,19 +2,20 @@
 	import { cn } from '$lib/utils';
 	import { Check, ChevronsDown, ChevronsUp, ChevronsUpDown, X } from '@lucide/svelte';
 	import { Select } from 'bits-ui';
+	import { fade } from 'svelte/transition';
 
 	let {
 		value = $bindable('10'),
 		placeholder = 'Select an item',
 		items = [],
-        defaultValue = '',
+		defaultValue = '',
 		className,
 		onchange
 	}: {
 		value?: string;
 		placeholder?: string;
 		items: { value: string; label: string; disabled?: boolean }[];
-        defaultValue?: string;
+		defaultValue?: string;
 		className?: string;
 		onchange?: (e: string) => void;
 	} = $props();
@@ -30,42 +31,53 @@
 >
 	<Select.Root type="single" {items} bind:value onValueChange={onchange}>
 		<Select.Trigger
-			class="focus:outline-sky data-placeholder:text-overlay-0 gap-2 inline-flex grow cursor-pointer select-none items-center justify-between rounded-l py-2 pl-2 text-sm transition-colors focus:outline focus:outline-offset-1"
+			class="focus:outline-sky data-placeholder:text-overlay-0 inline-flex grow cursor-pointer select-none items-center justify-between gap-2 rounded-l py-2 pl-2 text-sm transition-colors focus:outline focus:outline-offset-1"
 			aria-label={placeholder}
 		>
 			{selectedLabel}
 			<ChevronsUpDown class="text-overlay-0" size="20" />
 		</Select.Trigger>
 		<Select.Portal>
-			<Select.Content
-				class="focus-override border-surface-0 bg-mantle shadow-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 outline-hidden z-50 select-none rounded border p-1"
-				sideOffset={10}
-			>
-				<Select.ScrollUpButton class="flex w-full items-center justify-center">
-					<ChevronsUp size="20" />
-				</Select.ScrollUpButton>
-				<Select.Viewport class="p-1">
-					{#each items as item, i (i + item.value)}
-						<Select.Item
-							class="data-disabled:cursor-not-allowed data-highlighted:bg-surface-0 outline-hidden data-disabled:opacity-50 flex h-10 w-full cursor-pointer select-none items-center gap-4 rounded px-5 py-3 text-sm capitalize"
-							value={item.value}
-							label={item.label}
-							disabled={item.disabled}
-						>
-							{#snippet children({ selected })}
-								{item.label}
-								{#if selected}
-									<div class="ml-auto">
-										<Check size="20" />
-									</div>
-								{/if}
-							{/snippet}
-						</Select.Item>
-					{/each}
-				</Select.Viewport>
-				<Select.ScrollDownButton class="flex w-full items-center justify-center">
-					<ChevronsDown size="20" />
-				</Select.ScrollDownButton>
+			<Select.Content forceMount>
+				{#snippet child({ wrapperProps, props, open })}
+					{#if open}
+						<div {...wrapperProps}>
+							<div
+								{...props}
+								class="border-surface-0 bg-mantle shadow-popover outline-hidden z-50 mt-1 select-none rounded border p-1"
+								transition:fade={{
+									duration: 100
+								}}
+							>
+								<Select.ScrollUpButton class="flex w-full items-center justify-center">
+									<ChevronsUp size="20" />
+								</Select.ScrollUpButton>
+								<Select.Viewport class="p-1">
+									{#each items as item, i (i + item.value)}
+										<Select.Item
+											class="data-disabled:cursor-not-allowed data-highlighted:bg-surface-0 outline-hidden data-disabled:opacity-50 flex h-10 w-full cursor-pointer select-none items-center gap-4 rounded px-5 py-3 text-sm capitalize"
+											value={item.value}
+											label={item.label}
+											disabled={item.disabled}
+										>
+											{#snippet children({ selected })}
+												{item.label}
+												{#if selected}
+													<div class="ml-auto">
+														<Check size="20" />
+													</div>
+												{/if}
+											{/snippet}
+										</Select.Item>
+									{/each}
+								</Select.Viewport>
+								<Select.ScrollDownButton class="flex w-full items-center justify-center">
+									<ChevronsDown size="20" />
+								</Select.ScrollDownButton>
+							</div>
+						</div>
+					{/if}
+				{/snippet}
 			</Select.Content>
 		</Select.Portal>
 	</Select.Root>
@@ -74,7 +86,7 @@
 		type="button"
 		onclick={() => {
 			value = defaultValue;
-            onchange?.(value);
+			onchange?.(value);
 		}}
 	>
 		<X size="20" />