diff --git a/src/routes/chat/model-picker.svelte b/src/routes/chat/model-picker.svelte
index 9cd584a..2ee41a2 100644
--- a/src/routes/chat/model-picker.svelte
+++ b/src/routes/chat/model-picker.svelte
@@ -32,23 +32,6 @@
 	import MicrosoftIcon from '~icons/simple-icons/microsoft';
 	import OpenaiIcon from '~icons/simple-icons/openai';
 	import XIcon from '~icons/simple-icons/x';
-	import BrainIcon from '~icons/lucide/brain';
-	import CpuIcon from '~icons/lucide/cpu';
-	import ZapIcon from '~icons/lucide/zap';
-	import Cohere from '$lib/components/icons/cohere.svelte';
-	import Deepseek from '$lib/components/icons/deepseek.svelte';
-	import { Popover } from 'melt/builders';
-	import type { Component } from 'svelte';
-	import LogosClaudeIcon from '~icons/logos/claude-icon';
-	import LogosMistralAiIcon from '~icons/logos/mistral-ai-icon';
-	import MaterialIconThemeGeminiAi from '~icons/material-icon-theme/gemini-ai';
-	import { capitalize } from '$lib/utils/strings';
-	import { supportsImages } from '$lib/utils/model-capabilities';
-	import { models as modelsState } from '$lib/state/models.svelte';
-	import { Provider } from '$lib/types';
-	import Tooltip from '$lib/components/ui/tooltip.svelte';
-	import fuzzysearch from '$lib/utils/fuzzy-search';
-	import { IsMobile } from '$lib/hooks/is-mobile.svelte';
 
 	type Props = {
 		class?: string;
@@ -139,12 +122,10 @@
 		return 'other';
 	}
 
-	let search = $state('');
-
 	const filteredModels = $derived(
 		fuzzysearch({
 			haystack: enabledArr,
-			needle: search,
+			needle: gridCommand.inputValue,
 			property: 'model_id',
 		})
 	);
@@ -257,11 +238,7 @@
 		{...popover.content}
 		class="border-border bg-popover mt-1 max-h-200 min-w-80 flex-col overflow-hidden rounded-xl border p-0 backdrop-blur-sm data-[open]:flex"
 	>
-		<Command.Root
-			shouldFilter={false}
-			class="flex h-full flex-col overflow-hidden md:w-[572px]"
-			columns={isMobile.current ? undefined : 4}
-		>
+		<div class="flex h-full flex-col overflow-hidden md:w-[572px]" {...gridCommand.root}>
 			<label
 				class="group/label border-border relative flex items-center gap-2 border-b px-4 py-3 text-sm"
 			>
@@ -269,7 +246,6 @@
 				<input
 					class="w-full outline-none"
 					placeholder="Search models..."
-					bind:value={search}
 					{@attach (node) => {
 						if (popover.open) {
 							node.focus();
@@ -288,107 +264,95 @@
 					})}
 				/>
 			</label>
-			<Command.List class="h-[300px] overflow-y-auto md:h-[430px]">
-				<Command.Viewport>
-					<Command.Empty
-						class="text-muted-foreground flex items-center justify-center p-4 text-sm md:h-[120px]"
-					>
-						No models available. Enable some models in the account settings.
-					</Command.Empty>
-					{#each groupedModels as [company, models] (company)}
-						<Command.Group class="space-y-2">
-							<Command.GroupHeading
-								class="text-heading/75 flex items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize md:scroll-m-[180px]"
-							>
-								{company}
-							</Command.GroupHeading>
-							<Command.GroupItems
-								class="flex flex-col gap-2 px-3 pb-3 md:grid md:grid-cols-4 md:gap-3"
-							>
-								{#each models as model (model._id)}
-									{@const isSelected = settings.modelId === model.model_id}
-									{@const formatted = formatModelName(model.model_id)}
-									{#if isMobile.current}
-										<Command.Item
-											value={model.model_id}
-											onSelect={() => selectModel(model.model_id)}
-											class={cn(
-												'border-border flex h-10 items-center justify-between rounded-lg border p-2',
-												'relative scroll-m-2 select-none',
-												'data-selected:bg-accent/50 data-selected:text-accent-foreground',
-												isSelected && 'border-reflect border-none'
-											)}
-										>
-											<div class="flex items-center gap-2">
-												{#if getModelIcon(model.model_id)}
-													{@const ModelIcon = getModelIcon(model.model_id)}
-													<ModelIcon class="size-6 shrink-0" />
-												{/if}
-												<p class="font-fake-proxima text-center leading-tight font-bold">
-													{formatted.full}
-												</p>
-											</div>
+			<div class="h-[300px] overflow-y-auto md:h-[430px]">
+				{#each groupedModels as [company, models] (company)}
+					<div {...gridCommand.group} class="space-y-2">
+						<p
+							class="text-heading/75 flex scroll-m-2 items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize"
+							{...gridCommand.groupHeading}
+						>
+							{company}
+						</p>
+						<div class="flex flex-col gap-2 px-3 pb-3 md:grid md:grid-cols-4 md:gap-3">
+							{#each models as model (model._id)}
+								{@const isSelected = settings.modelId === model.model_id}
+								{@const formatted = formatModelName(model.model_id)}
+								{@const openRouterModel = modelsState
+									.from(Provider.OpenRouter)
+									.find((m) => m.id === model.model_id)}
 
-											{@const openRouterModel = modelsState
-												.from(Provider.OpenRouter)
-												.find((m) => m.id === model.model_id)}
-											{#if openRouterModel && supportsImages(openRouterModel)}
-												<Tooltip>
-													{#snippet trigger(tooltip)}
-														<div class="" {...tooltip.trigger}>
-															<EyeIcon class="size-3" />
-														</div>
-													{/snippet}
-													Supports image anaylsis
-												</Tooltip>
-											{/if}
-										</Command.Item>
-									{:else}
-										<Command.Item
-											value={model.model_id}
-											onSelect={() => selectModel(model.model_id)}
-											class={cn(
-												'border-border flex h-40 w-32 flex-col items-center justify-center rounded-lg border p-2',
-												'relative select-none',
-												'data-selected:bg-accent/50 data-selected:text-accent-foreground',
-												isSelected && 'border-reflect border-none'
-											)}
-										>
+								{#if isMobile.current}
+									<div
+										{...gridCommand.getItem(model.model_id)}
+										class={cn(
+											'border-border flex h-10 items-center justify-between rounded-lg border p-2',
+											'relative scroll-m-2 select-none',
+											'data-highlighted:bg-accent/50 data-highlighted:text-accent-foreground',
+											isSelected && 'border-reflect border-none'
+										)}
+									>
+										<div class="flex items-center gap-2">
 											{#if getModelIcon(model.model_id)}
 												{@const ModelIcon = getModelIcon(model.model_id)}
 												<ModelIcon class="size-6 shrink-0" />
 											{/if}
-											<p class="font-fake-proxima mt-2 text-center leading-tight font-bold">
-												{formatted.primary}
-											</p>
-											<p class="mt-0 text-center text-xs leading-tight font-medium">
-												{formatted.secondary}
+											<p class="font-fake-proxima text-center leading-tight font-bold">
+												{formatted.full}
 											</p>
+										</div>
 
-											{@const openRouterModel = modelsState
-												.from(Provider.OpenRouter)
-												.find((m) => m.id === model.model_id)}
-											{#if openRouterModel && supportsImages(openRouterModel)}
-												<Tooltip>
-													{#snippet trigger(tooltip)}
-														<div
-															class="abs-x-center text-muted-foreground absolute bottom-3 flex items-center gap-1 text-xs"
-															{...tooltip.trigger}
-														>
-															<EyeIcon class="size-3" />
-														</div>
-													{/snippet}
-													Supports image anaylsis
-												</Tooltip>
-											{/if}
-										</Command.Item>
-									{/if}
-								{/each}
-							</Command.GroupItems>
-						</Command.Group>
-					{/each}
-				</Command.Viewport>
-			</Command.List>
-		</Command.Root>
+										{#if openRouterModel && supportsImages(openRouterModel)}
+											<Tooltip>
+												{#snippet trigger(tooltip)}
+													<div class="" {...tooltip.trigger}>
+														<EyeIcon class="size-3" />
+													</div>
+												{/snippet}
+												Supports image anaylsis
+											</Tooltip>
+										{/if}
+									</div>
+								{:else}
+									<div
+										{...gridCommand.getItem(model.model_id)}
+										class={cn(
+											'border-border flex h-40 w-32 scroll-m-2 flex-col items-center justify-center rounded-lg border p-2',
+											'relative select-none',
+											'data-highlighted:bg-accent/50 data-highlighted:text-accent-foreground',
+											isSelected && 'border-reflect border-none'
+										)}
+									>
+										{#if getModelIcon(model.model_id)}
+											{@const ModelIcon = getModelIcon(model.model_id)}
+											<ModelIcon class="size-6 shrink-0" />
+										{/if}
+										<p class="font-fake-proxima mt-2 text-center leading-tight font-bold">
+											{formatted.primary}
+										</p>
+										<p class="mt-0 text-center text-xs leading-tight font-medium">
+											{formatted.secondary}
+										</p>
+
+										{#if openRouterModel && supportsImages(openRouterModel)}
+											<Tooltip>
+												{#snippet trigger(tooltip)}
+													<div
+														class="abs-x-center text-muted-foreground absolute bottom-3 flex items-center gap-1 text-xs"
+														{...tooltip.trigger}
+													>
+														<EyeIcon class="size-3" />
+													</div>
+												{/snippet}
+												Supports image anaylsis
+											</Tooltip>
+										{/if}
+									</div>
+								{/if}
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
 	</div>
 {/if}