diff --git a/ui/app/model/page.tsx b/ui/app/model/page.tsx
index 7de7c4c5..6c415827 100644
--- a/ui/app/model/page.tsx
+++ b/ui/app/model/page.tsx
@@ -204,8 +204,8 @@ export default function ModelsPage() {
                                     </div>
                                   </div>
                                 </div>
-                                {totalModels === 0 ? (
-                                  <Alert>
+                                {totalModels === 0 && (
+                                  <Alert className="mb-4">
                                     <AlertCircle className='h-4 w-4' />
                                     <AlertDescription>
                                       <div className='space-y-2'>
@@ -237,14 +237,13 @@ export default function ModelsPage() {
                                       </div>
                                     </AlertDescription>
                                   </Alert>
-                                ) : (
-                                  <ModelSelector
-                                    filterProvider={provider}
-                                    groupData={groupData}
-                                    showProviderActions={true}
-                                    showDeleteAllButton={false}
-                                  />
                                 )}
+                                <ModelSelector
+                                  filterProvider={provider}
+                                  groupData={groupData}
+                                  showProviderActions={true}
+                                  showDeleteAllButton={false}
+                                />
                               </div>
                             </TabsContent>
                           );
diff --git a/ui/app/providers/page.tsx b/ui/app/providers/page.tsx
index 65f68837..f431f101 100644
--- a/ui/app/providers/page.tsx
+++ b/ui/app/providers/page.tsx
@@ -18,7 +18,9 @@ import {
   UpstreamProvider,
   CreateUpstreamProvider,
   UpdateUpstreamProvider,
+  AdminModel,
 } from '@/lib/api/services/admin';
+import { AddProviderModelDialog } from '@/components/AddProviderModelDialog';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   AlertCircle,
@@ -379,6 +381,17 @@ export default function ProvidersPage() {
   );
   const [viewingModels, setViewingModels] = useState<number | null>(null);
   const [isCreatingAccount, setIsCreatingAccount] = useState(false);
+  const [modelDialogState, setModelDialogState] = useState<{
+    isOpen: boolean;
+    providerId: number | null;
+    mode: 'create' | 'edit' | 'override';
+    initialData?: AdminModel | null;
+  }>({
+    isOpen: false,
+    providerId: null,
+    mode: 'create',
+    initialData: null,
+  });
 
   const [formData, setFormData] = useState<CreateUpstreamProvider>({
     provider_type: 'openrouter',
@@ -574,6 +587,33 @@ export default function ProvidersPage() {
     }
   };
 
+  const handleAddModel = (providerId: number) => {
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'create',
+      initialData: null,
+    });
+  };
+
+  const handleEditModel = (providerId: number, model: AdminModel) => {
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'edit',
+      initialData: model,
+    });
+  };
+
+  const handleOverrideModel = (providerId: number, model: AdminModel) => {
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'override',
+      initialData: model,
+    });
+  };
+
   return (
     <SidebarProvider>
       <AppSidebar variant='inset' />
@@ -883,9 +923,14 @@ export default function ProvidersPage() {
                                 // No provided models - show custom models directly without tabs
                                 <div className='space-y-2'>
                                   {providerModels.db_models.length === 0 ? (
-                                    <div className='text-muted-foreground py-4 text-center text-sm'>
-                                      No models configured. Add custom models to
-                                      use this provider.
+                                    <div className='flex flex-col items-center justify-center gap-2 py-4'>
+                                      <div className='text-muted-foreground text-sm'>
+                                        No models configured. Add custom models to use this provider.
+                                      </div>
+                                      <Button variant='outline' size='sm' onClick={() => handleAddModel(provider.id)}>
+                                        <Plus className='mr-2 h-4 w-4' />
+                                        Add Custom Model
+                                      </Button>
                                     </div>
                                   ) : (
                                     <div className='space-y-2'>
@@ -916,9 +961,19 @@ export default function ProvidersPage() {
                                               {model.description || model.name}
                                             </div>
                                           </div>
-                                          <div className='text-muted-foreground text-xs whitespace-nowrap'>
-                                            {model.context_length?.toLocaleString()}{' '}
-                                            tokens
+                                          <div className='flex items-center gap-2'>
+                                            <div className='text-muted-foreground text-xs whitespace-nowrap'>
+                                              {model.context_length?.toLocaleString()}{' '}
+                                              tokens
+                                            </div>
+                                            <Button
+                                              variant='ghost'
+                                              size='icon'
+                                              className='h-8 w-8'
+                                              onClick={() => handleEditModel(provider.id, model)}
+                                            >
+                                              <Pencil className='h-4 w-4' />
+                                            </Button>
                                           </div>
                                         </div>
                                       ))}
@@ -969,12 +1024,17 @@ export default function ProvidersPage() {
                                     value='custom'
                                     className='mt-4 space-y-2'
                                   >
-                                    {providerModels.db_models.length > 0 && (
-                                      <div className='text-muted-foreground mb-3 text-sm'>
-                                        Custom models override or extend the
-                                        provider&apos;s catalog.
-                                      </div>
-                                    )}
+                                    <div className='flex items-center justify-between'>
+                                      {providerModels.db_models.length > 0 && (
+                                        <div className='text-muted-foreground text-sm'>
+                                          Custom models override or extend the provider&apos;s catalog.
+                                        </div>
+                                      )}
+                                      <Button variant='outline' size='sm' onClick={() => handleAddModel(provider.id)}>
+                                        <Plus className='mr-2 h-4 w-4' />
+                                        Add
+                                      </Button>
+                                    </div>
                                     {providerModels.db_models.length === 0 ? (
                                       <div className='text-muted-foreground py-4 text-center text-sm'>
                                         No custom models configured
@@ -1010,9 +1070,19 @@ export default function ProvidersPage() {
                                                     model.name}
                                                 </div>
                                               </div>
-                                              <div className='text-muted-foreground text-xs whitespace-nowrap'>
-                                                {model.context_length?.toLocaleString()}{' '}
-                                                tokens
+                                              <div className='flex items-center gap-2'>
+                                                <div className='text-muted-foreground text-xs whitespace-nowrap'>
+                                                  {model.context_length?.toLocaleString()}{' '}
+                                                  tokens
+                                                </div>
+                                                <Button
+                                                  variant='ghost'
+                                                  size='icon'
+                                                  className='h-8 w-8'
+                                                  onClick={() => handleEditModel(provider.id, model)}
+                                                >
+                                                  <Pencil className='h-4 w-4' />
+                                                </Button>
                                               </div>
                                             </div>
                                           )
@@ -1047,9 +1117,20 @@ export default function ProvidersPage() {
                                                   model.name}
                                               </div>
                                             </div>
-                                            <div className='text-muted-foreground text-xs whitespace-nowrap'>
-                                              {model.context_length?.toLocaleString()}{' '}
-                                              tokens
+                                            <div className='flex items-center gap-2'>
+                                              <div className='text-muted-foreground text-xs whitespace-nowrap'>
+                                                {model.context_length?.toLocaleString()}{' '}
+                                                tokens
+                                              </div>
+                                              <Button
+                                                variant='outline'
+                                                size='sm'
+                                                className='h-7 text-xs'
+                                                onClick={() => handleOverrideModel(provider.id, model)}
+                                              >
+                                                <Plus className='mr-1 h-3 w-3' />
+                                                Override
+                                              </Button>
                                             </div>
                                           </div>
                                         )
@@ -1217,6 +1298,21 @@ export default function ProvidersPage() {
             </DialogFooter>
           </DialogContent>
         </Dialog>
+
+        {modelDialogState.providerId && (
+          <AddProviderModelDialog
+            providerId={modelDialogState.providerId}
+            isOpen={modelDialogState.isOpen}
+            onClose={() => setModelDialogState((prev) => ({ ...prev, isOpen: false }))}
+            onSuccess={() => {
+              queryClient.invalidateQueries({
+                queryKey: ['provider-models', modelDialogState.providerId],
+              });
+            }}
+            initialData={modelDialogState.initialData}
+            mode={modelDialogState.mode}
+          />
+        )}
       </SidebarInset>
     </SidebarProvider>
   );
diff --git a/ui/components/AddProviderModelDialog.tsx b/ui/components/AddProviderModelDialog.tsx
new file mode 100644
index 00000000..36f2eec4
--- /dev/null
+++ b/ui/components/AddProviderModelDialog.tsx
@@ -0,0 +1,921 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { Loader2, Plus } from 'lucide-react';
+import { toast } from 'sonner';
+import { AdminService, type AdminModel } from '@/lib/api/services/admin';
+
+const listFromString = (value: string): string[] =>
+  value
+    .split(',')
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0);
+
+const listToString = (value: string[] | undefined | null): string =>
+  value && value.length > 0 ? value.join(', ') : '';
+
+const FormSchema = z.object({
+  id: z.string().min(1, 'Model ID is required'),
+  name: z.string().min(1, 'Name is required'),
+  description: z.string().optional(),
+  context_length: z.coerce.number().min(0).default(8192),
+  modality: z.string().min(1, 'Modality is required'),
+  input_modalities_raw: z.string().optional(),
+  output_modalities_raw: z.string().optional(),
+  tokenizer: z.string().optional().default(''),
+  instruct_type: z.string().optional(),
+  canonical_slug: z.string().optional(),
+  alias_ids_raw: z.string().optional(),
+  upstream_provider_id: z.string().optional(),
+  input_cost: z.coerce.number().min(0).default(0),
+  output_cost: z.coerce.number().min(0).default(0),
+  request_cost: z.coerce.number().min(0).default(0),
+  image_cost: z.coerce.number().min(0).default(0),
+  web_search_cost: z.coerce.number().min(0).default(0),
+  internal_reasoning_cost: z.coerce.number().min(0).default(0),
+  max_prompt_cost: z.coerce.number().min(0).default(0),
+  max_completion_cost: z.coerce.number().min(0).default(0),
+  max_cost: z.coerce.number().min(0).default(0),
+  per_request_limits_raw: z.string().optional(),
+  top_provider_context_length: z.coerce.number().min(0).optional(),
+  top_provider_max_completion_tokens: z.coerce.number().min(0).optional(),
+  top_provider_is_moderated: z.boolean().default(false),
+  enabled: z.boolean().default(true),
+});
+
+type FormData = z.infer<typeof FormSchema>;
+
+export interface AddProviderModelDialogProps {
+  providerId: number;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  initialData?: AdminModel | null;
+  mode?: 'create' | 'edit' | 'override';
+}
+
+export function AddProviderModelDialog({
+  providerId,
+  isOpen,
+  onClose,
+  onSuccess,
+  initialData,
+  mode = 'create',
+}: AddProviderModelDialogProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isPresetOpen, setIsPresetOpen] = useState(false);
+  const [selectedPresetLabel, setSelectedPresetLabel] = useState('Select a preset');
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      id: '',
+      name: '',
+      description: '',
+      context_length: 8192,
+      modality: 'text',
+      input_modalities_raw: 'text',
+      output_modalities_raw: 'text',
+      tokenizer: '',
+      instruct_type: '',
+      canonical_slug: '',
+      alias_ids_raw: '',
+      upstream_provider_id: '',
+      input_cost: 0,
+      output_cost: 0,
+      request_cost: 0,
+      image_cost: 0,
+      web_search_cost: 0,
+      internal_reasoning_cost: 0,
+      max_prompt_cost: 0,
+      max_completion_cost: 0,
+      max_cost: 0,
+      per_request_limits_raw: '',
+      top_provider_context_length: undefined,
+      top_provider_max_completion_tokens: undefined,
+      top_provider_is_moderated: false,
+      enabled: true,
+    },
+  });
+
+  const isOverride = useMemo(() => mode === 'override', [mode]);
+  const isEdit = useMemo(() => mode === 'edit', [mode]);
+  const { data: presets = [], isLoading: isLoadingPresets } = useQuery({
+    queryKey: ['openrouter-presets'],
+    queryFn: () => AdminService.getOpenRouterPresets(),
+    staleTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+  });
+
+  useEffect(() => {
+    if (initialData) {
+      const architecture = initialData.architecture as Record<string, unknown>;
+      const pricing = initialData.pricing as Record<string, number>;
+      const topProvider = initialData.top_provider as Record<string, unknown> | null;
+
+      form.reset({
+        id: initialData.id,
+        name: initialData.name,
+        description: initialData.description,
+        context_length: initialData.context_length,
+        modality:
+          typeof architecture?.modality === 'string'
+            ? architecture.modality
+            : 'text',
+        input_modalities_raw: listToString(
+          (architecture?.input_modalities as string[]) || []
+        ),
+        output_modalities_raw: listToString(
+          (architecture?.output_modalities as string[]) || []
+        ),
+        tokenizer:
+          typeof architecture?.tokenizer === 'string'
+            ? architecture.tokenizer
+            : '',
+        instruct_type:
+          typeof architecture?.instruct_type === 'string'
+            ? architecture.instruct_type
+            : '',
+        canonical_slug: initialData.canonical_slug || '',
+        alias_ids_raw: listToString(initialData.alias_ids),
+        upstream_provider_id:
+          typeof initialData.upstream_provider_id === 'string'
+            ? initialData.upstream_provider_id
+            : initialData.upstream_provider_id?.toString() || '',
+        input_cost: pricing?.prompt ?? 0,
+        output_cost: pricing?.completion ?? 0,
+        request_cost: pricing?.request ?? 0,
+        image_cost: pricing?.image ?? 0,
+        web_search_cost: pricing?.web_search ?? 0,
+        internal_reasoning_cost: pricing?.internal_reasoning ?? 0,
+        max_prompt_cost: pricing?.max_prompt_cost ?? 0,
+        max_completion_cost: pricing?.max_completion_cost ?? 0,
+        max_cost: pricing?.max_cost ?? 0,
+        per_request_limits_raw: initialData.per_request_limits
+          ? JSON.stringify(initialData.per_request_limits, null, 2)
+          : '',
+        top_provider_context_length:
+          typeof topProvider?.context_length === 'number'
+            ? topProvider.context_length
+            : undefined,
+        top_provider_max_completion_tokens:
+          typeof topProvider?.max_completion_tokens === 'number'
+            ? topProvider.max_completion_tokens
+            : undefined,
+        top_provider_is_moderated:
+          typeof topProvider?.is_moderated === 'boolean'
+            ? topProvider.is_moderated
+            : false,
+        enabled: initialData.enabled,
+      });
+    } else {
+      form.reset({
+        id: '',
+        name: '',
+        description: '',
+        context_length: 8192,
+        modality: 'text',
+        input_modalities_raw: 'text',
+        output_modalities_raw: 'text',
+        tokenizer: '',
+        instruct_type: '',
+        canonical_slug: '',
+        alias_ids_raw: '',
+        upstream_provider_id: '',
+        input_cost: 0,
+        output_cost: 0,
+        request_cost: 0,
+        image_cost: 0,
+        web_search_cost: 0,
+        internal_reasoning_cost: 0,
+        max_prompt_cost: 0,
+        max_completion_cost: 0,
+        max_cost: 0,
+        per_request_limits_raw: '',
+        top_provider_context_length: undefined,
+        top_provider_max_completion_tokens: undefined,
+        top_provider_is_moderated: false,
+        enabled: true,
+      });
+    }
+  }, [initialData, form, isOpen]);
+
+  const applyModelToForm = (model: AdminModel) => {
+    setSelectedPresetLabel(`${model.id} — ${model.name}`);
+    const architecture = model.architecture as Record<string, unknown>;
+    const pricing = model.pricing as Record<string, number>;
+    const topProvider = model.top_provider as Record<string, unknown> | null;
+
+    form.setValue('id', model.id);
+    form.setValue('name', model.name);
+    form.setValue('description', model.description || '');
+    form.setValue('context_length', model.context_length);
+    form.setValue(
+      'modality',
+      typeof architecture?.modality === 'string' ? architecture.modality : 'text'
+    );
+    form.setValue(
+      'input_modalities_raw',
+      listToString((architecture?.input_modalities as string[]) || [])
+    );
+    form.setValue(
+      'output_modalities_raw',
+      listToString((architecture?.output_modalities as string[]) || [])
+    );
+    form.setValue(
+      'tokenizer',
+      typeof architecture?.tokenizer === 'string' ? architecture.tokenizer : ''
+    );
+    form.setValue(
+      'instruct_type',
+      typeof architecture?.instruct_type === 'string'
+        ? architecture.instruct_type
+        : ''
+    );
+    form.setValue('canonical_slug', model.canonical_slug || '');
+    form.setValue('alias_ids_raw', listToString(model.alias_ids));
+    form.setValue(
+      'upstream_provider_id',
+      typeof model.upstream_provider_id === 'string'
+        ? model.upstream_provider_id
+        : model.upstream_provider_id?.toString() || ''
+    );
+    form.setValue('input_cost', pricing?.prompt ?? 0);
+    form.setValue('output_cost', pricing?.completion ?? 0);
+    form.setValue('request_cost', pricing?.request ?? 0);
+    form.setValue('image_cost', pricing?.image ?? 0);
+    form.setValue('web_search_cost', pricing?.web_search ?? 0);
+    form.setValue('internal_reasoning_cost', pricing?.internal_reasoning ?? 0);
+    form.setValue('max_prompt_cost', pricing?.max_prompt_cost ?? 0);
+    form.setValue('max_completion_cost', pricing?.max_completion_cost ?? 0);
+    form.setValue('max_cost', pricing?.max_cost ?? 0);
+    form.setValue(
+      'per_request_limits_raw',
+      model.per_request_limits
+        ? JSON.stringify(model.per_request_limits, null, 2)
+        : ''
+    );
+    form.setValue(
+      'top_provider_context_length',
+      typeof topProvider?.context_length === 'number'
+        ? topProvider.context_length
+        : undefined
+    );
+    form.setValue(
+      'top_provider_max_completion_tokens',
+      typeof topProvider?.max_completion_tokens === 'number'
+        ? topProvider.max_completion_tokens
+        : undefined
+    );
+    form.setValue(
+      'top_provider_is_moderated',
+      typeof topProvider?.is_moderated === 'boolean'
+        ? topProvider.is_moderated
+        : false
+    );
+    form.setValue('enabled', model.enabled);
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsSubmitting(true);
+    try {
+      let perRequestLimits: Record<string, unknown> | null = null;
+      if (data.per_request_limits_raw && data.per_request_limits_raw.trim().length) {
+        try {
+          perRequestLimits = JSON.parse(data.per_request_limits_raw);
+        } catch (err) {
+          toast.error('Per-request limits must be valid JSON');
+          setIsSubmitting(false);
+          return;
+        }
+      }
+
+      const adminModel: AdminModel = {
+        id: data.id,
+        name: data.name,
+        description: data.description || '',
+        created: Math.floor(Date.now() / 1000),
+        context_length: data.context_length,
+        architecture: {
+          modality: data.modality,
+          input_modalities: listFromString(data.input_modalities_raw || data.modality),
+          output_modalities: listFromString(
+            data.output_modalities_raw || data.modality
+          ),
+          tokenizer: data.tokenizer || '',
+          instruct_type: data.instruct_type?.trim() || null,
+        },
+        pricing: {
+          prompt: data.input_cost,
+          completion: data.output_cost,
+          request: data.request_cost,
+          image: data.image_cost,
+          web_search: data.web_search_cost,
+          internal_reasoning: data.internal_reasoning_cost,
+          max_prompt_cost: data.max_prompt_cost,
+          max_completion_cost: data.max_completion_cost,
+          max_cost: data.max_cost,
+        },
+        per_request_limits: perRequestLimits,
+        top_provider:
+          data.top_provider_context_length ||
+          data.top_provider_max_completion_tokens ||
+          data.top_provider_is_moderated
+            ? {
+                context_length: data.top_provider_context_length ?? null,
+                max_completion_tokens:
+                  data.top_provider_max_completion_tokens ?? null,
+                is_moderated: data.top_provider_is_moderated,
+              }
+            : null,
+        upstream_provider_id:
+          data.upstream_provider_id?.trim().length
+            ? data.upstream_provider_id.trim()
+            : providerId,
+        canonical_slug: data.canonical_slug?.trim() || null,
+        alias_ids: listFromString(data.alias_ids_raw || ''),
+        enabled: data.enabled,
+      };
+
+      if (isEdit) {
+        await AdminService.updateProviderModel(providerId, data.id, adminModel);
+        toast.success('Model updated successfully');
+      } else {
+        await AdminService.createProviderModel(providerId, adminModel);
+        toast.success(
+          isOverride ? 'Model override created' : 'Model created successfully'
+        );
+      }
+
+      onSuccess();
+      onClose();
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : 'Unknown error saving model';
+      toast.error(`Failed to save model: ${message}`);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const title = isEdit
+    ? 'Edit Model'
+    : isOverride
+      ? 'Override Model'
+      : 'Add Custom Model';
+  const description = isOverride
+    ? 'Create a custom override for this upstream model'
+    : 'Add a new model configuration for this provider';
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className='max-h-[90vh] overflow-y-auto sm:max-w-[720px]'>
+        <DialogHeader>
+          <DialogTitle className='flex items-center gap-2'>
+            <Plus className='h-4 w-4' />
+            {title}
+          </DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        {!isEdit && !isOverride && (
+          <div className='rounded-md border bg-muted/30 p-3'>
+            <div className='mb-2 text-sm font-medium'>Presets</div>
+            <div className='grid gap-2 sm:grid-cols-3 sm:items-start'>
+              <Popover open={isPresetOpen} onOpenChange={setIsPresetOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant='outline'
+                    role='combobox'
+                    aria-expanded={isPresetOpen}
+                    className='w-full justify-between text-left text-sm overflow-hidden'
+                  >
+                    <span className='truncate'>
+                      {isLoadingPresets ? 'Loading presets...' : selectedPresetLabel}
+                    </span>
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent 
+                  className='w-80 max-w-sm p-0' 
+                  align='start' 
+                  sideOffset={4} 
+                  collisionPadding={12}
+                  onOpenAutoFocus={(e) => e.preventDefault()}
+                >
+                  <Command shouldFilter={true}>
+                    <CommandInput placeholder='Search presets...' />
+                    <CommandList 
+                      className='max-h-64 overflow-y-auto overscroll-contain'
+                      onWheel={(e) => e.stopPropagation()}
+                    >
+                      {isLoadingPresets ? (
+                        <CommandEmpty>Loading presets...</CommandEmpty>
+                      ) : presets.length === 0 ? (
+                        <CommandEmpty>No presets available.</CommandEmpty>
+                      ) : (
+                        <CommandGroup heading='Presets'>
+                          {presets.map((preset) => (
+                            <CommandItem
+                              key={preset.id}
+                              value={preset.id}
+                              onSelect={() => {
+                                applyModelToForm(preset);
+                                setIsPresetOpen(false);
+                              }}
+                            >
+                              <div className='flex flex-col text-sm'>
+                                <span className='font-medium'>{preset.id}</span>
+                                <span className='text-muted-foreground text-xs'>
+                                  {preset.name}
+                                </span>
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      )}
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+            <div className='text-muted-foreground text-xs mt-1'>
+              Prefill fields from a preset model definition, then adjust as needed.
+            </div>
+          </div>
+        )}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+              <FormField
+                control={form.control}
+                name='id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Model ID *</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='e.g., gpt-5.1'
+                        {...field}
+                        disabled={isOverride || isEdit}
+                      />
+                    </FormControl>
+                    <FormDescription>Unique identifier for the model</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='name'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Display Name *</FormLabel>
+                    <FormControl>
+                      <Input placeholder='e.g., GPT-5.1' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name='description'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder='Brief description...' {...field} rows={2} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+              <FormField
+                control={form.control}
+                name='modality'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Modality *</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='text, text+image->text, image->text, etc.'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Composite modality label (e.g., text+image-&gt;text)
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='context_length'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Context Length</FormLabel>
+                    <FormControl>
+                      <Input type='number' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+              <FormField
+                control={form.control}
+                name='input_modalities_raw'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Input Modalities</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='text, image, file'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Comma-separated list</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='output_modalities_raw'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Output Modalities</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='text, image'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Comma-separated list</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+              <FormField
+                control={form.control}
+                name='tokenizer'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Tokenizer</FormLabel>
+                    <FormControl>
+                      <Input placeholder='e.g., GPT, tiktoken' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='instruct_type'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Instruct Type</FormLabel>
+                    <FormControl>
+                      <Input placeholder='e.g., chat, completion' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+              <FormField
+                control={form.control}
+                name='canonical_slug'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Canonical Slug</FormLabel>
+                    <FormControl>
+                      <Input placeholder='google/gemini-3-pro-preview-20251117' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='alias_ids_raw'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Alias IDs</FormLabel>
+                    <FormControl>
+                      <Input placeholder='alias-1, alias-2' {...field} />
+                    </FormControl>
+                    <FormDescription>Comma-separated list</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+              <FormField
+                control={form.control}
+                name='upstream_provider_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Upstream Provider ID</FormLabel>
+                    <FormControl>
+                      <Input placeholder='gemini' {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Defaults to current provider if left blank
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='per_request_limits_raw'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Per-request Limits (JSON)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder='{"requests_per_min": 60}'
+                        {...field}
+                        rows={4}
+                      />
+                    </FormControl>
+                    <FormDescription>JSON object; leave empty for none</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className='space-y-4 rounded-md border bg-muted/20 p-4'>
+              <h4 className='text-sm font-medium'>Pricing (USD per 1M tokens)</h4>
+              <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+                <FormField
+                  control={form.control}
+                  name='input_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Input Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.01' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='output_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Output Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.01' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='request_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Per Request Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.0001' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='image_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Image Cost (per image)</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.0001' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='web_search_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Web Search Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.0001' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='internal_reasoning_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Internal Reasoning Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.0001' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='max_prompt_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Max Prompt Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.0001' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='max_completion_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Max Completion Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.0001' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='max_cost'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Max Total Cost</FormLabel>
+                      <FormControl>
+                        <Input type='number' step='0.0001' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <div className='space-y-4 rounded-md border bg-muted/20 p-4'>
+              <h4 className='text-sm font-medium'>Top Provider (optional)</h4>
+              <div className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+                <FormField
+                  control={form.control}
+                  name='top_provider_context_length'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Context Length</FormLabel>
+                      <FormControl>
+                        <Input
+                          type='number'
+                          {...field}
+                          value={field.value ?? ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='top_provider_max_completion_tokens'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Max Completion Tokens</FormLabel>
+                      <FormControl>
+                        <Input
+                          type='number'
+                          {...field}
+                          value={field.value ?? ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='top_provider_is_moderated'
+                  render={({ field }) => (
+                    <FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
+                      <div className='space-y-0.5'>
+                        <FormLabel className='text-base'>Is Moderated</FormLabel>
+                        <FormDescription>Whether provider enforces moderation</FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <FormField
+              control={form.control}
+              name='enabled'
+              render={({ field }) => (
+                <FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
+                  <div className='space-y-0.5'>
+                    <FormLabel className='text-base'>Enabled</FormLabel>
+                    <FormDescription>Enable this model for use</FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type='button'
+                variant='outline'
+                onClick={onClose}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button type='submit' disabled={isSubmitting}>
+                {isSubmitting && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
+                {isEdit ? 'Save Changes' : isOverride ? 'Create Override' : 'Create Model'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/ui/components/ModelSelector.tsx b/ui/components/ModelSelector.tsx
index 914cd850..07ac3700 100644
--- a/ui/components/ModelSelector.tsx
+++ b/ui/components/ModelSelector.tsx
@@ -4,13 +4,11 @@ import React, { useState, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   type Model,
-  type ManualModel,
   type GroupSettings,
 } from '@/lib/api/schemas/models';
-import { AdminService, type AdminModelGroup } from '@/lib/api/services/admin';
+import { AdminService, type AdminModelGroup, type AdminModel } from '@/lib/api/services/admin';
 type ModelGroup = AdminModelGroup;
-import { AddModelForm } from '@/components/AddModelForm';
-import { EditModelForm } from '@/components/EditModelForm';
+import { AddProviderModelDialog } from '@/components/AddProviderModelDialog';
 import { EditGroupForm } from '@/components/EditGroupForm';
 import { CollectModelsDialog } from '@/components/CollectModelsDialog';
 import { formatCost } from '@/lib/services/costValidation';
@@ -80,14 +78,23 @@ export function ModelSelector({
 }: ModelSelectorProps) {
   const [selectedModelId, setSelectedModelId] = useState<string>('');
   const [, setHoveredModelId] = useState<string | null>(null);
-  const [isAddFormOpen, setIsAddFormOpen] = useState(false);
-  const [editingModel, setEditingModel] = useState<Model | null>(null);
   const [editingGroup, setEditingGroup] = useState<{
     provider: string;
     models: Model[];
     groupData: ModelGroup;
   } | null>(null);
   const [isCollectDialogOpen, setIsCollectDialogOpen] = useState(false);
+  const [modelDialogState, setModelDialogState] = useState<{
+    isOpen: boolean;
+    providerId: number | null;
+    mode: 'create' | 'edit' | 'override';
+    initialData?: AdminModel | null;
+  }>({
+    isOpen: false,
+    providerId: null,
+    mode: 'create',
+    initialData: null,
+  });
 
   // Bulk selection state
   const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set());
@@ -492,44 +499,104 @@ export function ModelSelector({
     return hasIndividualApiKey || hasIndividualUrl;
   };
 
-  // Handle manual model addition
-  const handleAddModel = async (newModel: ManualModel) => {
-    try {
-      // Find or create the provider group
-      let providerGroup = groups.find((g) => g.provider === newModel.provider);
+  const handleAddModelClick = (providerId: number) => {
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'create',
+      initialData: null,
+    });
+  };
 
-      if (!providerGroup) {
-        providerGroup = await AdminService.createModelGroup({
-          provider: newModel.provider,
-          group_api_key: undefined,
-        });
-      }
-
-      const modelData = {
-        name: newModel.name,
-        full_name: newModel.name,
-        input_cost: newModel.input_cost,
-        output_cost: newModel.output_cost,
-        provider: newModel.provider,
-        modelType: newModel.modelType,
-        description: newModel.description || undefined,
-        contextLength: newModel.contextLength,
-      };
-
-      await AdminService.createModel(modelData);
-      await refetchModels();
-      toast.success(`Model "${newModel.name}" added successfully!`);
-    } catch (error) {
-      console.error('Error adding model:', error);
-      toast.error('Failed to add model. Please try again.');
-      throw error; // Re-throw to let the form handle the error
+  const handleEditModelClick = (model: Model) => {
+    if (!model.provider_id) {
+      toast.error('Provider ID missing for model');
+      return;
     }
+    const providerId = parseInt(model.provider_id);
+    
+    // Construct AdminModel from Model
+    const adminModel: AdminModel = {
+      id: model.id,
+      name: model.name,
+      description: model.description || '',
+      created: new Date(model.createdAt).getTime() / 1000,
+      context_length: model.contextLength || 0,
+      architecture: {
+        modality: model.modelType,
+        input_modalities: [model.modelType],
+        output_modalities: [model.modelType],
+        tokenizer: '',
+        instruct_type: null,
+      },
+      pricing: {
+        prompt: model.input_cost,
+        completion: model.output_cost,
+        request: model.min_cost_per_request,
+        image: 0,
+        web_search: 0,
+        internal_reasoning: 0,
+      },
+      per_request_limits: null,
+      top_provider: null,
+      upstream_provider_id: providerId,
+      enabled: model.isEnabled,
+    };
+
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'edit',
+      initialData: adminModel,
+    });
+  };
+
+  const handleOverrideModelClick = (model: Model) => {
+    if (!model.provider_id) {
+      toast.error('Provider ID missing for model');
+      return;
+    }
+    const providerId = parseInt(model.provider_id);
+    
+    // Construct AdminModel from Model
+    const adminModel: AdminModel = {
+      id: model.id,
+      name: model.name,
+      description: model.description || '',
+      created: new Date(model.createdAt).getTime() / 1000,
+      context_length: model.contextLength || 0,
+      architecture: {
+        modality: model.modelType,
+        input_modalities: [model.modelType],
+        output_modalities: [model.modelType],
+        tokenizer: '',
+        instruct_type: null,
+      },
+      pricing: {
+        prompt: model.input_cost,
+        completion: model.output_cost,
+        request: model.min_cost_per_request,
+        image: 0,
+        web_search: 0,
+        internal_reasoning: 0,
+      },
+      per_request_limits: null,
+      top_provider: null,
+      upstream_provider_id: providerId,
+      enabled: model.isEnabled,
+    };
+
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'override',
+      initialData: adminModel,
+    });
   };
 
   // Handle model update
   const handleModelUpdate = async () => {
     await refetchModels();
-    setEditingModel(null);
   };
 
   // Handle group update
@@ -832,11 +899,18 @@ export function ModelSelector({
             Delete All Overrides Permanently
           </Button>
         )}
-        {/* Model Management Actions
-        <Button onClick={() => setIsAddFormOpen(true)} className='gap-2'>
-          <Plus className='h-4 w-4' />
-          Add Model
-        </Button>
+        {/* Model Management Actions */}
+        {groupData && (
+          <Button 
+            onClick={() => handleAddModelClick(parseInt(groupData.id))} 
+            className='gap-2'
+            variant="outline"
+          >
+            <CheckSquare className='h-4 w-4' />
+            Add Custom Model
+          </Button>
+        )}
+        {/*
         <Button
           onClick={() => setIsCollectDialogOpen(true)}
           variant='outline'
@@ -1080,15 +1154,28 @@ export function ModelSelector({
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align='end'>
-                              <DropdownMenuItem
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setEditingModel(model);
-                                }}
-                              >
-                                <Edit3 className='mr-2 h-4 w-4' />
-                                Edit Model
-                              </DropdownMenuItem>
+                              {model.api_key_type !== 'remote' && (
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleEditModelClick(model);
+                                  }}
+                                >
+                                  <Edit3 className='mr-2 h-4 w-4' />
+                                  Edit Model
+                                </DropdownMenuItem>
+                              )}
+                              {model.api_key_type === 'remote' && (
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleOverrideModelClick(model);
+                                  }}
+                                >
+                                  <Edit3 className='mr-2 h-4 w-4' />
+                                  Override
+                                </DropdownMenuItem>
+                              )}
                               <DropdownMenuSeparator />
                               {model.soft_deleted ? (
                                 <DropdownMenuItem
@@ -1215,23 +1302,14 @@ export function ModelSelector({
       })}
 
       {/* Forms and Dialogs */}
-      <AddModelForm
-        isOpen={isAddFormOpen}
-        onModelAdd={handleAddModel}
-        onCancel={() => setIsAddFormOpen(false)}
-      />
-
-      {editingModel && (
-        <EditModelForm
-          model={editingModel}
-          providerId={
-            editingModel.provider_id
-              ? parseInt(editingModel.provider_id)
-              : undefined
-          }
-          onModelUpdate={handleModelUpdate}
-          onCancel={() => setEditingModel(null)}
-          isOpen={!!editingModel}
+      {modelDialogState.providerId && (
+        <AddProviderModelDialog
+          providerId={modelDialogState.providerId}
+          isOpen={modelDialogState.isOpen}
+          onClose={() => setModelDialogState((prev) => ({ ...prev, isOpen: false }))}
+          onSuccess={handleModelUpdate}
+          initialData={modelDialogState.initialData}
+          mode={modelDialogState.mode}
         />
       )}