diff --git a/ui/admin/app/components/agent/AgentForm.tsx b/ui/admin/app/components/agent/AgentForm.tsx
index 93b10a3b..250a9165 100644
--- a/ui/admin/app/components/agent/AgentForm.tsx
+++ b/ui/admin/app/components/agent/AgentForm.tsx
@@ -5,24 +5,17 @@ import { useForm } from "react-hook-form";
 import useSWR from "swr";
 import { z } from "zod";
 
-import { ModelUsage } from "~/lib/model/models";
+import { Model, ModelUsage } from "~/lib/model/models";
 import { ModelApiService } from "~/lib/service/api/modelApiService";
 
 import { TypographyH4 } from "~/components/Typography";
+import { ComboBox } from "~/components/composed/ComboBox";
 import {
     ControlledAutosizeTextarea,
     ControlledCustomInput,
     ControlledInput,
 } from "~/components/form/controlledInputs";
 import { Form } from "~/components/ui/form";
-import {
-    Select,
-    SelectContent,
-    SelectEmptyItem,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "~/components/ui/select";
 
 const formSchema = z.object({
     name: z.string().min(1, {
@@ -86,6 +79,7 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
         onSubmit?.({ ...agent, ...values })
     );
 
+    const modelOptionsByGroup = getModelOptionsByModelProvider(models);
     return (
         <Form {...form}>
             <form onSubmit={handleSubmit} className="space-y-4">
@@ -125,30 +119,42 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
                     name="model"
                 >
                     {({ field: { ref: _, ...field } }) => (
-                        <Select {...field} onValueChange={field.onChange}>
-                            <SelectTrigger>
-                                <SelectValue placeholder="Use System Default" />
-                            </SelectTrigger>
-
-                            <SelectContent>
-                                <SelectEmptyItem>
-                                    Use System Default
-                                </SelectEmptyItem>
-
-                                {models.map((m) => (
-                                    <SelectItem key={m.id} value={m.id}>
-                                        {m.name || m.id}
-                                        {" - "}
-                                        <span className="text-muted-foreground">
-                                            {m.modelProvider}
-                                        </span>
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
+                        <ComboBox
+                            allowClear
+                            clearLabel="Use System Default"
+                            placeholder="Use System Default"
+                            value={models.find((m) => m.id === field.value)}
+                            onChange={(value) =>
+                                field.onChange(value?.id ?? "")
+                            }
+                            options={modelOptionsByGroup}
+                        />
                     )}
                 </ControlledCustomInput>
             </form>
         </Form>
     );
+
+    function getModelOptionsByModelProvider(models: Model[]) {
+        const byModelProviderGroups = models.reduce(
+            (acc, model) => {
+                acc[model.modelProvider] = acc[model.modelProvider] || [];
+                acc[model.modelProvider].push(model);
+                return acc;
+            },
+            {} as Record<string, Model[]>
+        );
+
+        return Object.entries(byModelProviderGroups).map(
+            ([modelProvider, models]) => {
+                const sorted = models.sort((a, b) =>
+                    (a.name ?? "").localeCompare(b.name ?? "")
+                );
+                return {
+                    heading: modelProvider,
+                    value: sorted,
+                };
+            }
+        );
+    }
 }
diff --git a/ui/admin/app/components/composed/ComboBox.tsx b/ui/admin/app/components/composed/ComboBox.tsx
new file mode 100644
index 00000000..8cae2c60
--- /dev/null
+++ b/ui/admin/app/components/composed/ComboBox.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import { ReactNode, useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "~/components/ui/command";
+import { Drawer, DrawerContent, DrawerTrigger } from "~/components/ui/drawer";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "~/components/ui/popover";
+import { useIsMobile } from "~/hooks/use-mobile";
+
+type BaseOption = {
+    id: string;
+    name?: string | undefined;
+};
+
+type GroupedOption<T extends BaseOption> = {
+    heading: string;
+    value: T[];
+};
+
+type ComboBoxProps<T extends BaseOption> = {
+    allowClear?: boolean;
+    clearLabel?: ReactNode;
+    onChange: (option: T | null) => void;
+    options: T[] | GroupedOption<T>[];
+    placeholder?: string;
+    value?: T | null;
+};
+
+export function ComboBox<T extends BaseOption>({
+    disabled,
+    placeholder,
+    value,
+    ...props
+}: {
+    disabled?: boolean;
+} & ComboBoxProps<T>) {
+    const [open, setOpen] = useState(false);
+    const isMobile = useIsMobile();
+
+    if (!isMobile) {
+        return (
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>{renderButtonContent()}</PopoverTrigger>
+                <PopoverContent className="w-full p-0" align="start">
+                    <ComboBoxList setOpen={setOpen} value={value} {...props} />
+                </PopoverContent>
+            </Popover>
+        );
+    }
+
+    return (
+        <Drawer open={open} onOpenChange={setOpen}>
+            <DrawerTrigger asChild>{renderButtonContent()}</DrawerTrigger>
+            <DrawerContent>
+                <div className="mt-4 border-t">
+                    <ComboBoxList setOpen={setOpen} value={value} {...props} />
+                </div>
+            </DrawerContent>
+        </Drawer>
+    );
+
+    function renderButtonContent() {
+        return (
+            <Button
+                disabled={disabled}
+                endContent={<ChevronsUpDownIcon />}
+                variant="outline"
+                className="px-3 w-full font-normal justify-start rounded-sm"
+                classNames={{
+                    content: "w-full justify-between",
+                }}
+            >
+                <span className="text-ellipsis overflow-hidden">
+                    {value ? value.name : placeholder}
+                </span>
+            </Button>
+        );
+    }
+}
+
+function ComboBoxList<T extends BaseOption>({
+    allowClear,
+    clearLabel,
+    onChange,
+    options,
+    placeholder = "Filter...",
+    setOpen,
+    value,
+}: { setOpen: (open: boolean) => void } & ComboBoxProps<T>) {
+    const isGrouped = options.every((option) => "heading" in option);
+    return (
+        <Command>
+            <CommandInput placeholder={placeholder} />
+            <CommandList>
+                <CommandEmpty>No results found.</CommandEmpty>
+                {allowClear && (
+                    <CommandGroup>
+                        <CommandItem
+                            onSelect={() => {
+                                onChange(null);
+                                setOpen(false);
+                            }}
+                        >
+                            {clearLabel ?? "Clear Selection"}
+                        </CommandItem>
+                    </CommandGroup>
+                )}
+                {isGrouped
+                    ? renderGroupedOptions(options)
+                    : renderUngroupedOptions(options)}
+            </CommandList>
+        </Command>
+    );
+
+    function renderGroupedOptions(items: GroupedOption<T>[]) {
+        return items.map((group) => (
+            <CommandGroup key={group.heading} heading={group.heading}>
+                {group.value.map((option) => (
+                    <CommandItem
+                        key={option.id}
+                        value={option.name}
+                        onSelect={(name) => {
+                            const match =
+                                group.value.find((opt) => opt.name === name) ||
+                                null;
+                            onChange(match);
+                            setOpen(false);
+                        }}
+                        className="justify-between"
+                    >
+                        {option.name || option.id}{" "}
+                        {value?.id === option.id && (
+                            <CheckIcon className="w-4 h-4" />
+                        )}
+                    </CommandItem>
+                ))}
+            </CommandGroup>
+        ));
+    }
+
+    function renderUngroupedOptions(items: T[]) {
+        return (
+            <CommandGroup>
+                {items.map((option) => (
+                    <CommandItem
+                        key={option.id}
+                        value={option.name}
+                        onSelect={(name) => {
+                            const match =
+                                items.find((opt) => opt.name === name) || null;
+                            onChange(match);
+                            setOpen(false);
+                        }}
+                        className="justify-between"
+                    >
+                        {option.name || option.id}{" "}
+                        {value?.id === option.id && (
+                            <CheckIcon className="w-4 h-4" />
+                        )}
+                    </CommandItem>
+                ))}
+            </CommandGroup>
+        );
+    }
+}
diff --git a/ui/admin/app/components/ui/button.tsx b/ui/admin/app/components/ui/button.tsx
index 5d8b1354..79e0f8e2 100644
--- a/ui/admin/app/components/ui/button.tsx
+++ b/ui/admin/app/components/ui/button.tsx
@@ -50,6 +50,9 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
         loading?: boolean;
         startContent?: React.ReactNode;
         endContent?: React.ReactNode;
+        classNames?: {
+            content?: string;
+        };
     };
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -64,6 +67,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             startContent,
             endContent,
             children,
+            classNames,
             ...props
         },
         ref
@@ -93,7 +97,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
                     {endContent}
                 </div>
             ) : (
-                <div className="flex items-center gap-2">
+                <div
+                    className={cn(
+                        "flex items-center gap-2",
+                        classNames?.content
+                    )}
+                >
                     {startContent}
                     {children}
                     {endContent}
diff --git a/ui/admin/app/components/ui/drawer.tsx b/ui/admin/app/components/ui/drawer.tsx
new file mode 100644
index 00000000..b5278ece
--- /dev/null
+++ b/ui/admin/app/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "~/lib/utils";
+
+const Drawer = ({
+    shouldScaleBackground = true,
+    ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+    <DrawerPrimitive.Root
+        shouldScaleBackground={shouldScaleBackground}
+        {...props}
+    />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Overlay
+        ref={ref}
+        className={cn("fixed inset-0 z-50 bg-black/80", className)}
+        {...props}
+    />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DrawerPortal>
+        <DrawerOverlay />
+        <DrawerPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+                className
+            )}
+            {...props}
+        >
+            <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+            {children}
+        </DrawerPrimitive.Content>
+    </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+        {...props}
+    />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+        {...props}
+    />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+    Drawer,
+    DrawerPortal,
+    DrawerOverlay,
+    DrawerTrigger,
+    DrawerClose,
+    DrawerContent,
+    DrawerHeader,
+    DrawerFooter,
+    DrawerTitle,
+    DrawerDescription,
+};
diff --git a/ui/admin/package.json b/ui/admin/package.json
index a585b108..379ba12c 100644
--- a/ui/admin/package.json
+++ b/ui/admin/package.json
@@ -60,6 +60,7 @@
         "swr": "^2.2.5",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
+        "vaul": "^1.1.0",
         "zod": "^3.23.8"
     },
     "devDependencies": {
diff --git a/ui/admin/pnpm-lock.yaml b/ui/admin/pnpm-lock.yaml
index 68e5723d..2d0697b8 100644
--- a/ui/admin/pnpm-lock.yaml
+++ b/ui/admin/pnpm-lock.yaml
@@ -155,6 +155,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
+      vaul:
+        specifier: ^1.1.0
+        version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -4834,6 +4837,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   vfile-message@3.1.4:
     resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
 
@@ -10424,6 +10433,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   vfile-message@3.1.4:
     dependencies:
       '@types/unist': 2.0.11