diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 650c497..5302c18 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/package.json b/frontend/package.json
index fe43a53..c212169 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,13 +44,13 @@
     "@prgm/sveltekit-progress-bar": "^2.0.0",
     "@types/he": "^1.2.3",
     "apexcharts": "^3.44.0",
-    "bits-ui": "^0.21.4",
+    "bits-ui": "^0.21.12",
     "clsx": "^2.0.0",
     "cmdk-sv": "^0.0.13",
     "drizzle-orm": "latest",
     "formsnap": "^1.0.0",
     "he": "^1.2.0",
-    "lucide-svelte": "^0.356.0",
+    "lucide-svelte": "^0.412.0",
     "magic-regexp": "^0.8.0",
     "mode-watcher": "^0.1.2",
     "nanoid": "^5.0.3",
diff --git a/frontend/src/lib/components/ui/select/index.ts b/frontend/src/lib/components/ui/select/index.ts
index d300b68..327541c 100644
--- a/frontend/src/lib/components/ui/select/index.ts
+++ b/frontend/src/lib/components/ui/select/index.ts
@@ -1,15 +1,16 @@
-import { Select as SelectPrimitive } from 'bits-ui'
+import { Select as SelectPrimitive } from "bits-ui";
 
-import Root from './select.svelte'
-import Label from './select-label.svelte'
-import Item from './select-item.svelte'
-import Content from './select-content.svelte'
-import Trigger from './select-trigger.svelte'
-import Separator from './select-separator.svelte'
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
 
-const Group = SelectPrimitive.Group
-const Input = SelectPrimitive.Input
-const Value = SelectPrimitive.Value
 export {
 	Root,
 	Group,
@@ -30,4 +31,4 @@ export {
 	Content as SelectContent,
 	Trigger as SelectTrigger,
 	Separator as SelectSeparator,
-}
+};
diff --git a/frontend/src/lib/components/ui/select/select-content.svelte b/frontend/src/lib/components/ui/select/select-content.svelte
index 8b18b91..93d758e 100644
--- a/frontend/src/lib/components/ui/select/select-content.svelte
+++ b/frontend/src/lib/components/ui/select/select-content.svelte
@@ -1,22 +1,23 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui'
-	import { cn, flyAndScale } from '$lib/utils'
-	import { scale } from 'svelte/transition'
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils.js";
 
-	type $$Props = SelectPrimitive.ContentProps
-	type $$Events = SelectPrimitive.ContentEvents
-	export let inTransition: $$Props['inTransition'] = flyAndScale
-	export let inTransitionConfig: $$Props['inTransitionConfig'] =
-		undefined
-	export let outTransition: $$Props['outTransition'] = scale
-	export let outTransitionConfig: $$Props['outTransitionConfig'] = {
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
 		start: 0.95,
 		opacity: 0,
 		duration: 50,
-	}
+	};
 
-	let className: $$Props['class'] = undefined
-	export { className as class }
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
 <SelectPrimitive.Content
@@ -24,12 +25,14 @@
 	{inTransitionConfig}
 	{outTransition}
 	{outTransitionConfig}
+	{sideOffset}
 	class={cn(
-		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
-		className,
+		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+		className
 	)}
 	{...$$restProps}
-	on:keydown>
+	on:keydown
+>
 	<div class="w-full p-1">
 		<slot />
 	</div>
diff --git a/frontend/src/lib/components/ui/select/select-item.svelte b/frontend/src/lib/components/ui/select/select-item.svelte
index 4d6d225..2cd00a7 100644
--- a/frontend/src/lib/components/ui/select/select-item.svelte
+++ b/frontend/src/lib/components/ui/select/select-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { cn } from '$lib/utils'
-	import { Select as SelectPrimitive } from 'bits-ui'
-	import { Check } from 'lucide-svelte'
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = SelectPrimitive.ItemProps
-	type $$Events = SelectPrimitive.ItemEvents
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
 
-	let className: $$Props['class'] = undefined
-	export let value: $$Props['value']
-	export let label: $$Props['label'] = undefined
-	export let disabled: $$Props['disabled'] = undefined
-	export { className as class }
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
 </script>
 
 <SelectPrimitive.Item
@@ -18,8 +18,8 @@
 	{disabled}
 	{label}
 	class={cn(
-		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
-		className,
+		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
 	)}
 	{...$$restProps}
 	on:click
@@ -27,12 +27,14 @@
 	on:focusin
 	on:focusout
 	on:pointerleave
-	on:pointermove>
-	<span
-		class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 		<SelectPrimitive.ItemIndicator>
 			<Check class="h-4 w-4" />
 		</SelectPrimitive.ItemIndicator>
 	</span>
-	<slot />
+	<slot>
+		{label || value}
+	</slot>
 </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 5ed7c8d..d966450 100644
--- a/frontend/src/lib/components/ui/select/select-label.svelte
+++ b/frontend/src/lib/components/ui/select/select-label.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui'
-	import { cn } from '$lib/utils'
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = SelectPrimitive.LabelProps
+	type $$Props = SelectPrimitive.LabelProps;
 
-	let className: $$Props['class'] = undefined
-	export { className as class }
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
 <SelectPrimitive.Label
-	class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-	{...$$restProps}>
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
 	<slot />
 </SelectPrimitive.Label>
diff --git a/frontend/src/lib/components/ui/select/select-separator.svelte b/frontend/src/lib/components/ui/select/select-separator.svelte
index 3d4f76e..bc518e6 100644
--- a/frontend/src/lib/components/ui/select/select-separator.svelte
+++ b/frontend/src/lib/components/ui/select/select-separator.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui'
-	import { cn } from '$lib/utils'
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = SelectPrimitive.SeparatorProps
+	type $$Props = SelectPrimitive.SeparatorProps;
 
-	let className: $$Props['class'] = undefined
-	export { className as class }
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
-<SelectPrimitive.Separator
-	class={cn('-mx-1 my-1 h-px bg-muted', className)}
-	{...$$restProps} />
+<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", 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 f8d9c84..f5b9306 100644
--- a/frontend/src/lib/components/ui/select/select-trigger.svelte
+++ b/frontend/src/lib/components/ui/select/select-trigger.svelte
@@ -1,33 +1,27 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui'
-	import { ChevronDown } from 'lucide-svelte'
-	import { cn } from '$lib/utils'
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = SelectPrimitive.TriggerProps
-	type $$Events = SelectPrimitive.TriggerEvents
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
 
-	let className: $$Props['class'] = undefined
-	export let customIcon: any
-	export { className as class }
+	let className: $$Props["class"] = undefined;
+	export { className as class };
 </script>
 
 <SelectPrimitive.Trigger
 	class={cn(
-		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-		className,
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground",
+		className
 	)}
 	{...$$restProps}
 	let:builder
 	on:click
-	on:keydown>
+	on:keydown
+>
 	<slot {builder} />
 	<div>
-		{#if customIcon}
-			<svelte:component
-				this={customIcon}
-				class="h-4 w-4 opacity-50" />
-		{:else}
-			<ChevronDown class="h-4 w-4 opacity-50" />
-		{/if}
+		<ChevronDown class="h-4 w-4 opacity-50" />
 	</div>
 </SelectPrimitive.Trigger>
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index 96d2e7a..f7538a2 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -93,7 +93,7 @@
 			<Drawer.Footer class="gap-6">
 				<Select.Root
 					selected={{ label: data.sortBy, value: data.sortBy }}>
-					<Select.Trigger customIcon={SortDescIcon}>
+					<Select.Trigger>
 						<Select.Value placeholder="Sort By" />
 					</Select.Trigger>
 					<Select.Content>
@@ -283,7 +283,7 @@
 		</Popover.Root>
 		<Select.Root
 			selected={{ label: data.sortBy, value: data.sortBy }}>
-			<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
+			<Select.Trigger class="w-[180px]">
 				<Select.Value placeholder="Sort By" />
 			</Select.Trigger>
 			<Select.Content>
diff --git a/frontend/src/routes/(app)/projects/[id]/+page.svelte b/frontend/src/routes/(app)/projects/[id]/+page.svelte
index 37246d1..4e9f672 100644
--- a/frontend/src/routes/(app)/projects/[id]/+page.svelte
+++ b/frontend/src/routes/(app)/projects/[id]/+page.svelte
@@ -77,7 +77,7 @@
 			<Drawer.Footer class="gap-6">
 				<Select.Root
 					selected={{ label: data.sortBy, value: data.sortBy }}>
-					<Select.Trigger customIcon={SortDescIcon}>
+					<Select.Trigger>
 						<Select.Value placeholder="Sort By" />
 					</Select.Trigger>
 					<Select.Content>
@@ -124,7 +124,7 @@
 	<div class="hidden items-center gap-4 md:flex">
 		<Select.Root
 			selected={{ label: data.sortBy, value: data.sortBy }}>
-			<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
+			<Select.Trigger class="w-[180px]">
 				<Select.Value placeholder="Sort By" />
 			</Select.Trigger>
 			<Select.Content>