diff --git a/src/lib/components/admin/Settings/Models/AdminViewSelector.svelte b/src/lib/components/admin/Settings/Models/AdminViewSelector.svelte
index b3c800674..244fa514b 100644
--- a/src/lib/components/admin/Settings/Models/AdminViewSelector.svelte
+++ b/src/lib/components/admin/Settings/Models/AdminViewSelector.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Select } from 'bits-ui';
 	import { getContext } from 'svelte';
 
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
+	import Select from '$lib/components/common/Select.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -22,44 +22,27 @@
 	];
 </script>
 
-<Select.Root
-	selected={items.find((item) => item.value === value)}
+<Select
+	bind:value
 	{items}
-	onSelectedChange={(selectedItem) => {
-		value = selectedItem.value;
-		onChange(value);
-	}}
+	{placeholder}
+	triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl"
+	labelClass="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
+	onChange={() => onChange(value)}
 >
-	<Select.Trigger
-		class="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl"
-		aria-label={placeholder}
-	>
-		<Select.Value
-			class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
-			{placeholder}
-		/>
+	<svelte:fragment slot="trigger" let:selectedLabel>
+		<span class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden">
+			{selectedLabel}
+		</span>
 		<ChevronDown className="size-3.5" strokeWidth="2.5" />
-	</Select.Trigger>
+	</svelte:fragment>
 
-	<Select.Content
-		class="rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-		sameWidth={false}
-		align="start"
-	>
-		{#each items as item}
-			<Select.Item
-				class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-				value={item.value}
-				label={item.label}
-			>
-				{item.label}
-
-				{#if value === item.value}
-					<div class="ml-auto">
-						<Check />
-					</div>
-				{/if}
-			</Select.Item>
-		{/each}
-	</Select.Content>
-</Select.Root>
+	<svelte:fragment slot="item" let:item let:selected>
+		{item.label}
+		{#if selected}
+			<div class="ml-auto">
+				<Check />
+			</div>
+		{/if}
+	</svelte:fragment>
+</Select>
diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index 051821615..5c5fbd4eb 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -20,7 +20,7 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
-	import { Select } from 'bits-ui';
+	import Select from '$lib/components/common/Select.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
 	import {
 		getUserDefaultPermissions,
@@ -175,46 +175,29 @@
 				{/if}
 			</div>
 
-			<Select.Root
-				selected={sortItems.find((item) => item.value === sortBy)}
+			<Select
+				bind:value={sortBy}
 				items={sortItems}
-				onSelectedChange={(selectedItem) => {
-					sortBy = selectedItem.value;
-				}}
+				placeholder={$i18n.t('Sort by')}
+				triggerClass="relative flex items-center gap-0.5 px-2.5 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl shrink-0"
+				align="end"
 			>
-				<Select.Trigger
-					class="relative flex items-center gap-0.5 px-2.5 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl shrink-0"
-					aria-label={$i18n.t('Sort by')}
-				>
-					<Select.Value
-						class="inline-flex h-input px-0.5 outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
-						placeholder={$i18n.t('Sort by')}
-					/>
+				<svelte:fragment slot="trigger" let:selectedLabel>
+					<span class="inline-flex h-input px-0.5 outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden">
+						{selectedLabel}
+					</span>
 					<ChevronDown className="size-3.5" strokeWidth="2.5" />
-				</Select.Trigger>
+				</svelte:fragment>
 
-				<Select.Content
-					class="rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-					sameWidth={false}
-					align="end"
-				>
-					{#each sortItems as item}
-						<Select.Item
-							class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-							value={item.value}
-							label={item.label}
-						>
-							{item.label}
-
-							{#if sortBy === item.value}
-								<div class="ml-auto">
-									<Check />
-								</div>
-							{/if}
-						</Select.Item>
-					{/each}
-				</Select.Content>
-			</Select.Root>
+				<svelte:fragment slot="item" let:item let:selected>
+					{item.label}
+					{#if selected}
+						<div class="ml-auto">
+							<Check />
+						</div>
+					{/if}
+				</svelte:fragment>
+			</Select>
 		</div>
 
 		{#if filteredGroups.length !== 0}
diff --git a/src/lib/components/common/DropdownOptions.svelte b/src/lib/components/common/DropdownOptions.svelte
index ecc5cc9cf..521361f53 100644
--- a/src/lib/components/common/DropdownOptions.svelte
+++ b/src/lib/components/common/DropdownOptions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import { Select, DropdownMenu } from 'bits-ui';
+	import { DropdownMenu } from 'bits-ui';
 
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	const i18n = getContext('i18n');
diff --git a/src/lib/components/common/Select.svelte b/src/lib/components/common/Select.svelte
new file mode 100644
index 000000000..bea2989b6
--- /dev/null
+++ b/src/lib/components/common/Select.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { flyAndScale } from '$lib/utils/transitions';
+	import { tick } from 'svelte';
+
+	/** Currently selected value */
+	export let value = '';
+
+	/** Items array: { value: string, label: string }[] */
+	export let items = [];
+
+	/** Placeholder text when no value is selected */
+	export let placeholder = '';
+
+	/** Callback when value changes */
+	export let onChange: (value: string) => void = () => {};
+
+	/** CSS classes for the trigger button */
+	export let triggerClass = '';
+
+	/** CSS classes for the label inside the trigger */
+	export let labelClass = '';
+
+	/** CSS classes for the dropdown content container */
+	export let contentClass = 'rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-lg';
+
+	/** CSS classes for each item button */
+	export let itemClass = 'flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl';
+
+	/** Alignment of the dropdown: 'start' | 'end' */
+	export let align = 'start';
+
+	/** Callback when dropdown closes */
+	export let onClose: () => void = () => {};
+
+	export let open = false;
+
+	let triggerEl;
+	let contentEl;
+
+	$: selectedLabel = items.find((i) => i.value === value)?.label ?? placeholder;
+
+	/** Svelte action: moves the node to document.body (portal) */
+	function portal(node) {
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				if (node.parentNode) {
+					node.parentNode.removeChild(node);
+				}
+			}
+		};
+	}
+
+	function positionContent() {
+		if (!triggerEl || !contentEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+
+		contentEl.style.position = 'fixed';
+		contentEl.style.zIndex = '9999';
+		contentEl.style.top = `${rect.bottom + 4}px`;
+		contentEl.style.minWidth = `${rect.width}px`;
+
+		if (align === 'end') {
+			contentEl.style.right = `${window.innerWidth - rect.right}px`;
+			contentEl.style.left = 'auto';
+		} else {
+			contentEl.style.left = `${rect.left}px`;
+			contentEl.style.right = 'auto';
+		}
+	}
+
+	async function toggleOpen() {
+		open = !open;
+		if (open) {
+			await tick();
+			positionContent();
+		}
+	}
+
+	function handleWindowClick(event) {
+		if (!open) return;
+		if (triggerEl?.contains(event.target)) return;
+		if (contentEl?.contains(event.target)) return;
+		open = false;
+		onClose();
+	}
+
+	function handleKeydown(event) {
+		if (event.key === 'Escape' && open) {
+			open = false;
+			onClose();
+		}
+	}
+
+	export function selectItem(item) {
+		value = item.value;
+		open = false;
+		onChange(value);
+	}
+</script>
+
+<svelte:window on:click={handleWindowClick} on:keydown={handleKeydown} on:scroll|capture={positionContent} on:resize={positionContent} />
+
+<button
+	bind:this={triggerEl}
+	class={triggerClass}
+	aria-label={placeholder}
+	type="button"
+	on:click={toggleOpen}
+>
+	<slot name="trigger" {selectedLabel} {open}>
+		<span class={labelClass}>
+			{selectedLabel}
+		</span>
+	</slot>
+</button>
+
+{#if open}
+	<div
+		use:portal
+		bind:this={contentEl}
+		class={contentClass}
+		transition:flyAndScale
+	>
+		<slot {open} {selectItem}>
+			{#each items as item}
+				<button
+					class={itemClass}
+					type="button"
+					on:click={() => selectItem(item)}
+				>
+					<slot name="item" {item} selected={value === item.value}>
+						{item.label}
+					</slot>
+				</button>
+			{/each}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/components/common/Selector.svelte b/src/lib/components/common/Selector.svelte
index 3d3579177..e1bb2f269 100644
--- a/src/lib/components/common/Selector.svelte
+++ b/src/lib/components/common/Selector.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
-	import { Select } from 'bits-ui';
 
-	import { flyAndScale } from '$lib/utils/transitions';
 
-	import { createEventDispatcher } from 'svelte';
 	import ChevronDown from '../icons/ChevronDown.svelte';
 	import Check from '../icons/Check.svelte';
 	import Search from '../icons/Search.svelte';
-
-	const dispatch = createEventDispatcher();
+	import Select from './Select.svelte';
 
 	export let value = '';
 	export let placeholder = $i18n.t('Select a model');
@@ -24,34 +20,32 @@
 	];
 
 	let searchValue = '';
+	let selectRef;
 
 	$: filteredItems = searchValue
 		? items.filter((item) => item.value.toLowerCase().includes(searchValue.toLowerCase()))
 		: items;
 </script>
 
-<Select.Root
+<Select
+	bind:value
+	bind:this={selectRef}
 	{items}
-	onOpenChange={() => {
-		searchValue = '';
-	}}
-	selected={items.find((item) => item.value === value)}
-	onSelectedChange={(selectedItem) => {
-		value = selectedItem.value;
-	}}
+	{placeholder}
+	triggerClass="relative w-full"
+	contentClass="w-full rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/40 outline-hidden"
+	onClose={() => { searchValue = ''; }}
 >
-	<Select.Trigger class="relative w-full" aria-label={placeholder}>
-		<Select.Value
-			class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate text-lg font-semibold placeholder-gray-400  focus:outline-hidden"
-			{placeholder}
-		/>
+	<svelte:fragment slot="trigger" let:selectedLabel>
+		<span
+			class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate text-lg font-semibold placeholder-gray-400 focus:outline-hidden"
+		>
+			{selectedLabel}
+		</span>
 		<ChevronDown className="absolute end-2 top-1/2 -translate-y-[45%] size-3.5" strokeWidth="2.5" />
-	</Select.Trigger>
-	<Select.Content
-		class="w-full rounded-lg  bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/40  outline-hidden"
-		transition={flyAndScale}
-		sideOffset={4}
-	>
+	</svelte:fragment>
+
+	<svelte:fragment let:selectItem>
 		<slot>
 			{#if searchEnabled}
 				<div class="flex items-center gap-2.5 px-5 mt-3.5 mb-3">
@@ -61,6 +55,7 @@
 						bind:value={searchValue}
 						class="w-full text-sm bg-transparent outline-hidden"
 						placeholder={searchPlaceholder}
+						on:click|stopPropagation
 					/>
 				</div>
 
@@ -69,10 +64,10 @@
 
 			<div class="px-3 my-2 max-h-80 overflow-y-auto">
 				{#each filteredItems as item}
-					<Select.Item
-						class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm  text-gray-700 dark:text-gray-100  outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-highlighted:bg-muted"
-						value={item.value}
-						label={item.label}
+					<button
+						class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer"
+						type="button"
+						on:click={() => selectItem(item)}
 					>
 						{item.label}
 
@@ -81,7 +76,7 @@
 								<Check />
 							</div>
 						{/if}
-					</Select.Item>
+					</button>
 				{:else}
 					<div>
 						<div class="block px-5 py-2 text-sm text-gray-700 dark:text-gray-100">
@@ -91,5 +86,5 @@
 				{/each}
 			</div>
 		</slot>
-	</Select.Content>
-</Select.Root>
+	</svelte:fragment>
+</Select>
diff --git a/src/lib/components/workspace/common/TagSelector.svelte b/src/lib/components/workspace/common/TagSelector.svelte
index 4e1b6a397..b620c8500 100644
--- a/src/lib/components/workspace/common/TagSelector.svelte
+++ b/src/lib/components/workspace/common/TagSelector.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Select } from 'bits-ui';
 	import { getContext } from 'svelte';
 
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import Select from '$lib/components/common/Select.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -15,18 +15,15 @@
 	export let items = [];
 </script>
 
-<Select.Root
-	selected={value ? items.find((item) => item.value === value) : null}
+<Select
+	bind:value
 	{items}
-	onSelectedChange={(selectedItem) => {
-		value = selectedItem.value;
-		onChange(value);
-	}}
+	{placeholder}
+	triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 rounded-xl "
+	itemClass="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl capitalize"
+	onChange={() => onChange(value)}
 >
-	<Select.Trigger
-		class="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 rounded-xl "
-		aria-label={placeholder}
-	>
+	<svelte:fragment slot="trigger" let:selectedLabel>
 		<div
 			class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden capitalize"
 		>
@@ -40,7 +37,8 @@
 		{#if value}
 			<button
 				class="outline-none"
-				on:click={() => {
+				type="button"
+				on:click|stopPropagation={() => {
 					value = '';
 					onChange(value);
 				}}
@@ -50,32 +48,17 @@
 		{:else}
 			<ChevronDown className=" size-3.5" strokeWidth="2.5" />
 		{/if}
-	</Select.Trigger>
+	</svelte:fragment>
 
-	<Select.Content
-		class="rounded-2xl min-w-[170px] p-1 border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-		sameWidth={false}
-		align="start"
-	>
-		<slot>
-			{#each items as item}
-				<Select.Item
-					class="flex  gap-2  items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl capitalize"
-					value={item.value}
-					label={item.label}
-				>
-					{item.label.length > 32 ? `${item.label.slice(0, 32)}...` : item.label}
-
-					{#if value === item.value}
-						<div class="ml-auto">
-							<Check />
-						</div>
-					{/if}
-				</Select.Item>
-			{/each}
-		</slot>
-	</Select.Content>
-</Select.Root>
+	<svelte:fragment slot="item" let:item let:selected>
+		{item.label.length > 32 ? `${item.label.slice(0, 32)}...` : item.label}
+		{#if selected}
+			<div class="ml-auto">
+				<Check />
+			</div>
+		{/if}
+	</svelte:fragment>
+</Select>
 
 <!-- <button
 	class="min-w-fit outline-none p-1.5 {selectedTag === ''
diff --git a/src/lib/components/workspace/common/ViewSelector.svelte b/src/lib/components/workspace/common/ViewSelector.svelte
index a2f8f538a..45f9ab461 100644
--- a/src/lib/components/workspace/common/ViewSelector.svelte
+++ b/src/lib/components/workspace/common/ViewSelector.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Select } from 'bits-ui';
 	import { getContext } from 'svelte';
 
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
+	import Select from '$lib/components/common/Select.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -18,49 +18,30 @@
 	];
 </script>
 
-<Select.Root
-	selected={items.find((item) => item.value === value)}
+<Select
+	bind:value
 	{items}
-	onSelectedChange={(selectedItem) => {
-		value = selectedItem.value;
-		onChange(value);
-	}}
+	{placeholder}
+	triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl "
+	labelClass="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate  placeholder-gray-400  focus:outline-hidden"
+	onChange={() => onChange(value)}
 >
-	<Select.Trigger
-		class="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl "
-		aria-label={placeholder}
-	>
-		<Select.Value
-			class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate  placeholder-gray-400  focus:outline-hidden"
-			{placeholder}
-		/>
+	<svelte:fragment slot="trigger" let:selectedLabel>
+		<span class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate  placeholder-gray-400  focus:outline-hidden">
+			{selectedLabel}
+		</span>
 		<ChevronDown className=" size-3.5" strokeWidth="2.5" />
-	</Select.Trigger>
+	</svelte:fragment>
 
-	<Select.Content
-		class="rounded-2xl min-w-[170px] p-1 border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-		sameWidth={false}
-		align="start"
-	>
-		<slot>
-			{#each items as item}
-				<Select.Item
-					class="flex  gap-2  items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-					value={item.value}
-					label={item.label}
-				>
-					{item.label}
-
-					{#if value === item.value}
-						<div class="ml-auto">
-							<Check />
-						</div>
-					{/if}
-				</Select.Item>
-			{/each}
-		</slot>
-	</Select.Content>
-</Select.Root>
+	<svelte:fragment slot="item" let:item let:selected>
+		{item.label}
+		{#if selected}
+			<div class="ml-auto">
+				<Check />
+			</div>
+		{/if}
+	</svelte:fragment>
+</Select>
 
 <!-- <button
 	class="min-w-fit outline-none p-1.5 {selectedTag === ''