diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 7acd3e6de6..a4f4af2cb1 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -124,4 +124,54 @@
 
 p {
   margin: 0;
-}
\ No newline at end of file
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-4px);
+    visibility: hidden;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-4px);
+    visibility: hidden;
+  }
+}
+
+.collapsible-content[data-state='open'] {
+  animation: collapsible-down 300ms ease-out;
+  visibility: visible;
+}
+
+.collapsible-content[data-state='closed'] {
+  animation: collapsible-up 300ms ease-out;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapsible-content {
+    animation: none !important;
+  }
+}
diff --git a/frontend/src/app/launch-model/[modelType]/page.tsx b/frontend/src/app/launch-model/[modelType]/page.tsx
index e8b947dcc6..c0c0d0f797 100644
--- a/frontend/src/app/launch-model/[modelType]/page.tsx
+++ b/frontend/src/app/launch-model/[modelType]/page.tsx
@@ -1,13 +1,24 @@
 import LaunchModel from '@/components/pages/launch-model';
-import { getLaunchModelRouteType } from '@/components/pages/launch-model/utils';
+import { getLaunchModelRouteType, getInitialCustomType } from '@/components/pages/launch-model/utils';
 
 interface LaunchModelPageProps {
   params: Promise<{
     modelType: string;
   }>;
+
+  searchParams: Promise<{
+    activeType?: string;
+  }>;
 }
 
-export default async function LaunchModelPage({ params }: LaunchModelPageProps) {
+export default async function LaunchModelPage({ params, searchParams }: LaunchModelPageProps) {
   const { modelType } = await params;
-  return <LaunchModel routeType={getLaunchModelRouteType(modelType)} />;
+  const { activeType } = await searchParams;
+
+  return (
+    <LaunchModel
+      routeType={getLaunchModelRouteType(modelType)}
+      initialCustomType={getInitialCustomType(activeType)}
+    />
+  );
 }
diff --git a/frontend/src/app/register-model/[modelType]/[modelName]/page.tsx b/frontend/src/app/register-model/[modelType]/[modelName]/page.tsx
new file mode 100644
index 0000000000..4783bdba4b
--- /dev/null
+++ b/frontend/src/app/register-model/[modelType]/[modelName]/page.tsx
@@ -0,0 +1,14 @@
+import RegisterModel from '@/components/pages/register-model';
+import { getRigisterModelTyps } from '@/components/pages/register-model/utils';
+
+interface RegisterModelPageProps {
+  params: Promise<{
+    modelType: string;
+    modelName: string;
+  }>;
+}
+
+export default async function RegisterModelPage({ params }: RegisterModelPageProps) {
+  const { modelType, modelName } = await params;
+  return <RegisterModel modelType={getRigisterModelTyps(modelType)} modelName={modelName} />;
+}
diff --git a/frontend/src/app/register-model/[modelType]/page.tsx b/frontend/src/app/register-model/[modelType]/page.tsx
new file mode 100644
index 0000000000..4242e3eade
--- /dev/null
+++ b/frontend/src/app/register-model/[modelType]/page.tsx
@@ -0,0 +1,13 @@
+import RegisterModel from '@/components/pages/register-model';
+import { getRigisterModelTyps } from '@/components/pages/register-model/utils';
+
+interface RegisterModelPageProps {
+  params: Promise<{
+    modelType: string;
+  }>;
+}
+
+export default async function RegisterModelPage({ params }: RegisterModelPageProps) {
+  const { modelType } = await params;
+  return <RegisterModel modelType={getRigisterModelTyps(modelType)} />;
+}
diff --git a/frontend/src/app/register-model/page.tsx b/frontend/src/app/register-model/page.tsx
index a52c5d1f74..884ae0bcb4 100644
--- a/frontend/src/app/register-model/page.tsx
+++ b/frontend/src/app/register-model/page.tsx
@@ -1,5 +1,5 @@
-import RegisterModel from '@/components/pages/register-model';
+import { redirect } from 'next/navigation';
 
-export default function RegisterModelPage() {
-  return <RegisterModel />;
+export default function LaunchModelPage() {
+  redirect('/register-model/LLM');
 }
diff --git a/frontend/src/app/running-model/page.tsx b/frontend/src/app/running-model/page.tsx
index c58e8cc95e..dbfc26dd6f 100644
--- a/frontend/src/app/running-model/page.tsx
+++ b/frontend/src/app/running-model/page.tsx
@@ -1,6 +1,6 @@
-const RunningModel = ()=>{
-  return (
-    <div className="h-[2000px] overflow-y-auto"></div>
-  )
-}
-export default RunningModel;
\ No newline at end of file
+import RunningModel from '@/components/pages/running-model';
+
+const RunningModelPages = () => {
+  return <RunningModel />;
+};
+export default RunningModelPages;
diff --git a/frontend/src/app/workbench/page.tsx b/frontend/src/app/workbench/page.tsx
index 8dbf5beaed..d210c54690 100644
--- a/frontend/src/app/workbench/page.tsx
+++ b/frontend/src/app/workbench/page.tsx
@@ -1,3 +1,8 @@
 export default function Page() {
-  return <div>workbench</div>;
-}
\ No newline at end of file
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 py-8">
+      
+    </div>
+  );
+}
+
diff --git a/frontend/src/components/layout/sidebar.tsx b/frontend/src/components/layout/sidebar.tsx
index c93590f319..07e1ec2c0f 100644
--- a/frontend/src/components/layout/sidebar.tsx
+++ b/frontend/src/components/layout/sidebar.tsx
@@ -81,12 +81,12 @@ export function Sidebar() {
       Icon: Rocket,
       Extra: ChevronRight,
     },
-    // {
-    //   path: '/running-model',
-    //   name: t('menu.runningModels'),
-    //   Icon: Layers,
-    //   Extra: ChevronRight,
-    // },
+    {
+      path: '/running-model',
+      name: t('menu.runningModels'),
+      Icon: Layers,
+      Extra: ChevronRight,
+    },
     {
       path: '/register-model',
       name: t('menu.registerModel'),
diff --git a/frontend/src/components/pages/launch-model/cache-management.dialog.tsx b/frontend/src/components/pages/launch-model/cache-management.dialog.tsx
index f67753c52c..d5503f0552 100644
--- a/frontend/src/components/pages/launch-model/cache-management.dialog.tsx
+++ b/frontend/src/components/pages/launch-model/cache-management.dialog.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { FC, PropsWithChildren, useState } from 'react';
-import { Copy, Trash2 } from 'lucide-react';
+import { FC, useState } from 'react';
+import { Box, Copy, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import request from '@/lib/request';
 import { Button } from '@/components/ui/button';
@@ -31,8 +31,7 @@ interface CacheManagementDialogProps {
   onCacheDelete: () => void;
 }
 
-const CacheManagementDialog: FC<PropsWithChildren<CacheManagementDialogProps>> = ({
-  children,
+const CacheManagementDialog: FC<CacheManagementDialogProps> = ({
   modelDetail,
   onCacheDelete,
 }) => {
@@ -86,7 +85,15 @@ const CacheManagementDialog: FC<PropsWithChildren<CacheManagementDialogProps>> =
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex shrink-0 items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 transition-colors hover:bg-emerald-500/20"
+        >
+          <Box className="size-3.5" />
+          {t('launchModel.manageCachedModels')}
+        </button>
+      </DialogTrigger>
       <DialogContent className="!max-w-5xl">
         <DialogHeader>
           <DialogTitle>{modelDetail.model_name}</DialogTitle>
diff --git a/frontend/src/components/pages/launch-model/custom-edit-dialog.tsx b/frontend/src/components/pages/launch-model/custom-edit-dialog.tsx
new file mode 100644
index 0000000000..95b8e60d7f
--- /dev/null
+++ b/frontend/src/components/pages/launch-model/custom-edit-dialog.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { FC, useState, useMemo } from 'react';
+import { SquarePen, Copy } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useI18n } from '@/contexts/i18n-context';
+import type { CatalogModel, RequestModelType } from './types';
+import { copyText } from '@/lib/utils';
+
+interface EnvManagementDialogProps {
+  model: CatalogModel;
+  modelType: RequestModelType;
+}
+const CustomEditDialog: FC<EnvManagementDialogProps> = ({ model, modelType }) => {
+  const { t } = useI18n();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const value = useMemo(() => JSON.stringify(model, null, 4), [model]);
+  const handleEdit = () => {
+    // set model detail
+    sessionStorage.setItem('customJsonData', JSON.stringify(model));
+    router.push(`/register-model/${modelType}/${model.model_name}`);
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          aria-label="Delete model"
+          className="rounded-full p-1 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <SquarePen className="size-5" />
+        </button>
+      </DialogTrigger>
+      <DialogContent className="!max-w-2xl" showCloseButton={false}>
+        <DialogHeader className="flex !flex-row items-center justify-between">
+          <DialogTitle className="truncate">{model.model_name}</DialogTitle>
+          <button
+            className="shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
+            onClick={() => copyText(value)}
+          >
+            <Copy className="size-4" />
+          </button>
+        </DialogHeader>
+        <Textarea value={value} className="min-h-96" disabled />
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleEdit}>{t('common.edit')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+export default CustomEditDialog;
diff --git a/frontend/src/components/pages/launch-model/env-management-dialog.tsx b/frontend/src/components/pages/launch-model/env-management-dialog.tsx
index d230ddde0e..b69003ef31 100644
--- a/frontend/src/components/pages/launch-model/env-management-dialog.tsx
+++ b/frontend/src/components/pages/launch-model/env-management-dialog.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { FC, PropsWithChildren, useState } from 'react';
-import { Copy, Trash2 } from 'lucide-react';
+import { FC, useState } from 'react';
+import { Settings2, Copy, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import request from '@/lib/request';
 import { Button } from '@/components/ui/button';
@@ -31,11 +31,7 @@ interface EnvManagementDialogProps {
   onEnvDelete: () => void;
 }
 
-const EnvManagementDialog: FC<PropsWithChildren<EnvManagementDialogProps>> = ({
-  children,
-  modelDetail,
-  onEnvDelete,
-}) => {
+const EnvManagementDialog: FC<EnvManagementDialogProps> = ({ modelDetail, onEnvDelete }) => {
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const [dataSource, setDataSource] = useState<ModelEnvItem[]>([]);
@@ -55,7 +51,7 @@ const EnvManagementDialog: FC<PropsWithChildren<EnvManagementDialogProps>> = ({
   };
 
   const handleConfirmDelete = async () => {
-    if(!pendingDeleteItem) return;
+    if (!pendingDeleteItem) return;
     setDeletingLoading(true);
 
     try {
@@ -89,7 +85,15 @@ const EnvManagementDialog: FC<PropsWithChildren<EnvManagementDialogProps>> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex shrink-0 items-center gap-1 rounded-full border border-sky-500/30 bg-sky-500/10 px-3 py-1 text-xs font-medium text-sky-700 transition-colors hover:bg-sky-500/20"
+        >
+          <Settings2 className="size-3.5" />
+          {t('launchModel.manageVirtualEnvironments')}
+        </button>
+      </DialogTrigger>
       <DialogContent className="!max-w-5xl">
         <DialogHeader>
           <DialogTitle>{modelDetail.model_name}</DialogTitle>
diff --git a/frontend/src/components/pages/launch-model/index.tsx b/frontend/src/components/pages/launch-model/index.tsx
index ee3f4cdb02..ba926bc8e1 100644
--- a/frontend/src/components/pages/launch-model/index.tsx
+++ b/frontend/src/components/pages/launch-model/index.tsx
@@ -10,8 +10,8 @@ import {
   RefreshCw,
   Rocket,
   Search,
-  Settings2,
   Star,
+  Trash2,
 } from 'lucide-react';
 import request from '@/lib/request';
 import PageContainer from '@/components/ui/page-container';
@@ -20,18 +20,21 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Select } from '@/components/ui/select';
 import { RadioGroup } from '@/components/ui/radio-group';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { useI18n } from '@/contexts/i18n-context';
 import { cn } from '@/lib/utils';
-import { ModelType } from '@/constants';
+import { ModelType, CUSTOM_MODEL_OPTIONS } from '@/constants';
 import {
   LAUNCH_MODEL_ROUTE_TABS,
   COLLECTION_STORAGE_KEY,
   LAUNCH_MODEL_UPDATE_OPTIONS,
 } from '@/constants/launch';
-import LaunchDialog from './launch-dialog';
+import LaunchDialog from './launch-dialog/launch-dialog';
 import CacheManagementDialog from './cache-management.dialog';
 import EnvManagementDialog from './env-management-dialog';
-import type { CatalogModel, VirtualEnv, RouteModelType, RequestModelType } from './types';
+import CustomEditDialog from './custom-edit-dialog';
+import type { VirtualEnv } from '@/types/services';
+import type { CatalogModel, RouteModelType, RequestModelType } from './types';
 import {
   getString,
   isRecord,
@@ -42,13 +45,15 @@ import {
 
 interface LaunchModelProps {
   routeType: RouteModelType;
+  initialCustomType: RequestModelType;
 }
 
-const LaunchModel = ({ routeType }: LaunchModelProps) => {
+const LaunchModel = ({ routeType, initialCustomType }: LaunchModelProps) => {
   const { t } = useI18n();
   const router = useRouter();
   const isCustomRoute = routeType === ModelType.Custom;
-  const [customType, setCustomType] = useState<RequestModelType>(ModelType.LLM);
+  const [gpuAvailable, setGPUAvailable] = useState(-1);
+  const [customType, setCustomType] = useState<RequestModelType>(initialCustomType);
   const [models, setModels] = useState<CatalogModel[]>([]);
   const [virtualenvs, setVirtualenvs] = useState<VirtualEnv[]>([]);
   const [loading, setLoading] = useState(false);
@@ -59,6 +64,7 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
   const [status, setStatus] = useState('');
   const [favorites, setFavorites] = useState<string[]>([]);
   const [selectedModel, setSelectedModel] = useState<CatalogModel>();
+  const [deleteModel, setDeleteModel] = useState<CatalogModel>();
   const requestType = isCustomRoute ? customType : (routeType as RequestModelType);
   const showAbilityFilter = ![ModelType.Embedding, ModelType.Rerank, ModelType.Custom].includes(
     routeType
@@ -69,15 +75,16 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
     { label: t('launchModel.cached'), value: 'cached' },
     { label: t('launchModel.favorite'), value: 'favorites' },
   ];
-  const customTypesRadioOption = [
-    { value: ModelType.LLM, label: t('model.languageModels') },
-    { value: ModelType.Embedding, label: t('model.embeddingModels') },
-    { value: ModelType.Rerank, label: t('model.rerankModels') },
-    { value: ModelType.Image, label: t('model.imageModels') },
-    { value: ModelType.Audio, label: t('model.audioModels') },
-    { value: ModelType.Flexible, label: t('model.flexibleModels') },
-  ];
-
+  const customTypesRadioOptions = useMemo(
+    () => CUSTOM_MODEL_OPTIONS.map((item) => ({ value: item.value, label: t(item.labelKey) })),
+    []
+  );
+  const fetDevices = useCallback(async () => {
+    try {
+      const res = await request.get('/v1/cluster/devices');
+      setGPUAvailable(parseInt(res, 10));
+    } catch {}
+  }, []);
   const fetchVirtualenvs = useCallback(async () => {
     const res = await request.get('/v1/virtualenvs');
     setVirtualenvs(Array.isArray(res?.list) ? res.list : []);
@@ -145,13 +152,17 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
     setQuery('');
 
     if (isCustomRoute) {
-      setCustomType(ModelType.LLM);
+      setCustomType(initialCustomType);
       setRefreshType(ModelType.LLM);
       return;
     }
 
     setRefreshType(routeType as RequestModelType);
-  }, [isCustomRoute, routeType]);
+  }, [isCustomRoute, initialCustomType, routeType]);
+
+  useEffect(() => {
+    fetDevices();
+  }, [fetDevices]);
 
   useEffect(() => {
     fetchModels();
@@ -225,8 +236,8 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
     setUpdateLoading(true);
     try {
       await request.post('/v1/models/update_type', { model_type: refreshType.toLowerCase() });
-      if(isCustomRoute) {
-        fetchModels(refreshType)
+      if (isCustomRoute) {
+        fetchModels(refreshType);
       } else {
         onTabChange(refreshType);
       }
@@ -247,7 +258,19 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
       return next;
     });
   };
-
+  const handleDelete = (event: MouseEvent<HTMLButtonElement>, model: CatalogModel) => {
+    event.stopPropagation();
+    setDeleteModel(model);
+  };
+  const handleDeleteModel = () => {
+    if(!deleteModel) return;
+    request
+      .delete(`/v1/model_registrations/${customType}/${deleteModel?.model_name}`)
+      .then(() => {
+        fetchModels(customType);
+      })
+      .finally(() => setDeleteModel(undefined));
+  };
   const handleDetail = (event: MouseEvent<HTMLButtonElement>, model: CatalogModel) => {
     event.stopPropagation();
 
@@ -271,15 +294,31 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
         )}
       >
         <div className="flex items-start justify-between gap-3">
-          <h3 className="line-clamp-1 text-lg font-semibold text-foreground">{model.model_name}</h3>
-          <button
-            type="button"
-            aria-label="Favorite model"
-            onClick={(event) => handleFavorite(event, model)}
-            className="rounded-full p-1 text-muted-foreground transition-colors hover:text-primary"
-          >
-            <Star className={cn('size-5', isFavorite && 'fill-primary text-primary')} />
-          </button>
+          <h3 className="line-clamp-1 text-lg font-semibold text-foreground truncate">
+            {model.model_name}
+          </h3>
+          {isCustomRoute ? (
+            <div className="flex gap-1 shrink-0">
+              <CustomEditDialog model={model} modelType={customType} />
+              <button
+                type="button"
+                aria-label="Delete model"
+                onClick={(event) => handleDelete(event, model)}
+                className="rounded-full p-1 text-muted-foreground transition-colors hover:text-destructive"
+              >
+                <Trash2 className="size-5" />
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              aria-label="Favorite model"
+              onClick={(event) => handleFavorite(event, model)}
+              className="shrink-0 rounded-full p-1 text-muted-foreground transition-colors hover:text-primary"
+            >
+              <Star className={cn('size-5', isFavorite && 'fill-primary text-primary')} />
+            </button>
+          )}
         </div>
 
         <div className="mt-4 flex flex-wrap gap-1.5 ">
@@ -292,26 +331,10 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
             </span>
           ))}
           {model.cached && (
-            <CacheManagementDialog modelDetail={model} onCacheDelete={fetchModels}>
-              <button
-                type="button"
-                className="inline-flex shrink-0 items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 transition-colors hover:bg-emerald-500/20"
-              >
-                <Box className="size-3.5" />
-                {t('launchModel.manageCachedModels')}
-              </button>
-            </CacheManagementDialog>
+            <CacheManagementDialog modelDetail={model} onCacheDelete={fetchModels} />
           )}
           {hasVirtualenv && (
-            <EnvManagementDialog modelDetail={model} onEnvDelete={fetchVirtualenvs}>
-              <button
-                type="button"
-                className="inline-flex shrink-0 items-center gap-1 rounded-full border border-sky-500/30 bg-sky-500/10 px-3 py-1 text-xs font-medium text-sky-700 transition-colors hover:bg-sky-500/20"
-              >
-                <Settings2 className="size-3.5" />
-                {t('launchModel.manageVirtualEnvironments')}
-              </button>
-            </EnvManagementDialog>
+            <EnvManagementDialog modelDetail={model} onEnvDelete={fetchVirtualenvs} />
           )}
         </div>
 
@@ -337,8 +360,7 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
               Details
             </button>
           )}
-          <div/>
-          {/* <Button
+          <Button
             size="sm"
             onClick={(event) => {
               event.stopPropagation();
@@ -347,7 +369,7 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
           >
             <Rocket />
             Launch
-          </Button> */}
+          </Button>
         </div>
       </div>
     );
@@ -387,7 +409,8 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
 
         <TabsContent value={routeType} className="space-y-5">
           {isCustomRoute && (
-            <div className="border-b border-border/80 pb-4">
+            <div className="border-b border-border/80 pb-4 flex items-center gap-4 pl-4">
+              <span className="font-medium">{t('launchModel.modelType')}:</span>
               <RadioGroup
                 value={customType}
                 onChange={(value) => {
@@ -397,8 +420,8 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
                   setStatus('');
                   setQuery('');
                 }}
-                options={customTypesRadioOption}
-                className="flex flex-wrap gap-8"
+                options={customTypesRadioOptions}
+                className="flex flex-wrap gap-6"
               />
             </div>
           )}
@@ -417,7 +440,7 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
               {showAbilityFilter && (
                 <Select
                   value={ability}
-                  onChange={setAbility}
+                  onChange={(value) => setAbility(value ?? '')}
                   options={abilityOptions}
                   placeholder="Ability"
                   allowClear
@@ -427,7 +450,7 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
               {showStatusFilter && (
                 <Select
                   value={status}
-                  onChange={setStatus}
+                  onChange={(value) => setStatus(value ?? '')}
                   options={statusOptions}
                   placeholder="Status"
                   allowClear
@@ -458,9 +481,20 @@ const LaunchModel = ({ routeType }: LaunchModelProps) => {
         </TabsContent>
       </Tabs>
 
+      <ConfirmDialog
+        isOpen={!!deleteModel}
+        onOpenChange={(open) => !open && setDeleteModel(undefined)}
+        description={t('launchModel.confirmDeleteCustomModel', {
+          modelName: deleteModel?.model_name,
+        })}
+        confirmText={t('common.confirm')}
+        confirmClassName="bg-destructive  hover:bg-destructive/90"
+        onConfirm={handleDeleteModel}
+      />
       <LaunchDialog
         model={selectedModel}
         modelType={requestType}
+        gpuAvailable={gpuAvailable}
         onOpenChange={(open) => !open && setSelectedModel(undefined)}
       />
     </PageContainer>
diff --git a/frontend/src/components/pages/launch-model/launch-dialog.tsx b/frontend/src/components/pages/launch-model/launch-dialog.tsx
deleted file mode 100644
index 8f3bceeb00..0000000000
--- a/frontend/src/components/pages/launch-model/launch-dialog.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Rocket } from 'lucide-react';
-import request from '@/lib/request';
-import { ModelType } from '@/constants';
-import { useI18n } from '@/contexts/i18n-context';
-import { useForm, useWatch } from '@/hooks/use-form';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Form } from '@/components/ui/form';
-import { FormField } from '@/components/ui/form-field';
-import { Select } from '@/components/ui/select';
-import { isCachedSpec } from './utils';
-import type { CatalogModel, RequestModelType } from './types';
-
-import type { ModelEngine, ModelEngineItem } from '@/types/services';
-import type { FormValues } from '@/types/form';
-
-interface LaunchDialogProps {
-  model?: CatalogModel;
-  modelType: RequestModelType;
-  onOpenChange: (open: boolean) => void;
-}
-
-export default function LaunchDialog({ model, modelType, onOpenChange }: LaunchDialogProps) {
-  const isOpen = Boolean(model);
-  const [form] = useForm();
-  const { t } = useI18n();
-  const [loading, setLoading] = useState(false);
-  const [modelEngineMap, setModelEngineMap] = useState<ModelEngine>({});
-  const modelEngineValue = useWatch('model_engine', form);
-
-  const fetchModelEngine = useCallback(async () => {
-    if (!model?.model_name || [ModelType.Audio, ModelType.Video].includes(modelType)) {
-      setModelEngineMap({});
-      return;
-    }
-
-    const url =
-      modelType === ModelType.LLM
-        ? `/v1/engines/${model.model_name}`
-        : `/v1/engines/${modelType}/${model.model_name}`;
-    const res = await request.get(url);
-
-    setModelEngineMap(res || {});
-  }, [model?.model_name, modelType]);
-
-  const modelEngineOptions = useMemo(() => {
-    const cachedFormats = new Set(
-      (model?.modelSpecs || [])
-        .filter((spec) => isCachedSpec(spec))
-        .map((spec) => spec.model_format)
-    );
-
-    return Object.entries(modelEngineMap).map(([key, engineData]) => {
-      if (typeof engineData === 'string') {
-        return {
-          label: `${key} (${engineData})`,
-          value: key,
-          disabled: true,
-        };
-      }
-      const cached = engineData.some((item) => cachedFormats.has(item.model_format));
-
-      return {
-        label: key,
-        value: key,
-        suffix: cached ? t('launchModel.cached') : undefined,
-      };
-    });
-  }, [model?.modelSpecs, modelEngineMap]);
-  // console.log(modelEngineValue, 'modelEngineValue');
-
-  const fields = {
-    modelEngine: (
-      <FormField
-        name="model_engine"
-        label={t('launchModel.modelEngine')}
-        rules={[{ required: true }]}
-      >
-        <Select options={modelEngineOptions}></Select>
-      </FormField>
-    ),
-    modelFormat: (
-      <FormField
-        name="model_format"
-        label={t('launchModel.modelFormat')}
-        rules={[{ required: true }]}
-      >
-        <Select options={[]}></Select>
-      </FormField>
-    ),
-  };
-  const modelTypeFields: Partial<Record<ModelType, (keyof typeof fields)[]>> = {
-    [ModelType.LLM]: [
-      'modelEngine',
-      'modelFormat',
-      //  'model_size_in_billions', 'quantization'
-    ],
-  };
-  const handleLaunch = async (values: FormValues) => {
-    console.log(values);
-    // if (!model) return;
-
-    // setLoading(true);
-
-    // try {
-    //   await request.post('/v1/models', {
-    //     model_type: modelType,
-    //     model_name: model.model_name,
-    //     model_uid: form.modelUid || model.model_name,
-    //     n_gpu: form.nGpu === '' ? undefined : Number(form.nGpu),
-    //     replica: form.replica === '' ? undefined : Number(form.replica),
-    //   });
-    //   toast.success('Model launch request submitted');
-    //   onOpenChange(false);
-    // } finally {
-    //   setLoading(false);
-    // }
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      fetchModelEngine();
-    }
-  }, [fetchModelEngine, isOpen]);
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <Form form={form} onFinish={handleLaunch}>
-        <DialogContent className="!max-w-3xl min-h-[500px]" maskClosable={false}>
-          <DialogHeader>
-            <DialogTitle>{model?.model_name}</DialogTitle>
-          </DialogHeader>
-
-          {(modelTypeFields[modelType] || []).map((fieldKey) => (
-            <div key={fieldKey}>{fields[fieldKey]}</div>
-          ))}
-          <DialogFooter>
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Cancel
-            </Button>
-            <Button onClick={handleLaunch} loading={loading} type="submit">
-              <Rocket />
-              Launch
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Form>
-    </Dialog>
-  );
-}
diff --git a/frontend/src/components/pages/launch-model/launch-dialog/advanced-config.tsx b/frontend/src/components/pages/launch-model/launch-dialog/advanced-config.tsx
new file mode 100644
index 0000000000..60e8306471
--- /dev/null
+++ b/frontend/src/components/pages/launch-model/launch-dialog/advanced-config.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { FC, ReactNode } from 'react';
+import { Settings } from 'lucide-react';
+
+import { CollapsiblePanel } from '@/components/ui/collapsible';
+import { FormField } from '@/components/ui/form-field';
+import { RadioGroup } from '@/components/ui/radio-group';
+import {
+  KWARGS_OPTIONS_FOR_ENGINES,
+  QUANTIZATION_OPTIONS,
+  VIRTUAL_ENV_OPTIONS,
+} from '@/constants/launch';
+import { useI18n } from '@/contexts/i18n-context';
+import { useWatch } from '@/hooks/use-form';
+import type { FormInstance } from '@/types/form';
+import type { RequestModelType } from '../types';
+import { toOptionValue } from '../utils';
+import CommonFormList from './common-form-list';
+import { ModelType } from '@/constants';
+
+interface AdvancedConfigProps {
+  form: FormInstance;
+  modelType: RequestModelType;
+}
+
+interface ConfigSectionProps {
+  title: ReactNode;
+  children: ReactNode;
+}
+
+function ConfigSection({ title, children }: ConfigSectionProps) {
+  return (
+    <section className="space-y-2">
+      <h4 className="px-1 text-xs font-semibold tracking-normal text-muted-foreground">{title}</h4>
+      <div className="divide-y divide-border/60 rounded-md border border-border/70 bg-background">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+const AdvancedConfig: FC<AdvancedConfigProps> = ({ form, modelType }) => {
+  const { t } = useI18n();
+  const modelEngineValue = toOptionValue(useWatch('model_engine', form));
+
+  const kwargsOptionsForEngine = modelEngineValue
+    ? KWARGS_OPTIONS_FOR_ENGINES[modelEngineValue.toLowerCase()]
+    : undefined;
+  const showLora = [ModelType.LLM, ModelType.Image, ModelType.Video].includes(modelType);
+  const showLoraKwargs = [ModelType.Image, ModelType.Video].includes(modelType);
+  return (
+    <CollapsiblePanel
+      title={t('launchModel.advancedConfiguration')}
+      icon={<Settings className="size-4" />}
+      className="rounded-lg"
+      contentClassName="space-y-4 bg-muted/10 p-4"
+    >
+      {showLora && (
+        <ConfigSection title="Lora">
+          <div className="p-2">
+            <CommonFormList
+              name={['peft_model_config', 'lora_list']}
+              label={t('launchModel.loraModelConfig')}
+              childFirstKey="lora_name"
+              childSecondKey="local_path"
+            />
+          </div>
+          {showLoraKwargs && (
+            <>
+              <div className="p-2">
+                <CommonFormList
+                  name={['peft_model_config', 'image_lora_load_kwargs']}
+                  label={t('launchModel.loraLoadKwargsForImageModel')}
+                />
+              </div>
+              <div className="p-2">
+                <CommonFormList
+                  name={['peft_model_config', 'image_lora_fuse_kwargs']}
+                  label={t('launchModel.loraFuseKwargsForImageModel')}
+                />
+              </div>
+            </>
+          )}
+        </ConfigSection>
+      )}
+
+      <ConfigSection title={t('launchModel.runtimeEnvironment')}>
+        <div className="px-2 py-3.5 flex items-center justify-between ">
+          <span className="text-sm font-medium">{t('launchModel.modelVirtualEnv')}</span>
+          <FormField name="enable_virtual_env">
+            <RadioGroup options={VIRTUAL_ENV_OPTIONS} />
+          </FormField>
+        </div>
+        <div className="p-2">
+          <CommonFormList
+            name="virtual_env_packages"
+            label={t('launchModel.virtualEnvPackage')}
+            onlyValue
+          />
+        </div>
+
+        <div className="p-2">
+          <CommonFormList name="envs" label={t('launchModel.envVariable')} />
+        </div>
+      </ConfigSection>
+
+      <ConfigSection title={t('launchModel.engineParameters')}>
+        {modelEngineValue === 'Transformers' && (
+          <div className="p-2">
+            <CommonFormList
+              name="quantization_config"
+              label={t('launchModel.engineQuantizationParameters')}
+              keyOptions={QUANTIZATION_OPTIONS}
+            />
+          </div>
+        )}
+
+        <div className="p-2">
+          <CommonFormList
+            name="kwargs"
+            label={`${t('launchModel.engineAdditionalParameters')}${
+              modelEngineValue ? ': ' + modelEngineValue : ''
+            }`}
+            keyOptions={kwargsOptionsForEngine}
+          />
+        </div>
+      </ConfigSection>
+    </CollapsiblePanel>
+  );
+};
+
+export default AdvancedConfig;
diff --git a/frontend/src/components/pages/launch-model/launch-dialog/command-line.tsx b/frontend/src/components/pages/launch-model/launch-dialog/command-line.tsx
new file mode 100644
index 0000000000..d4034cb71b
--- /dev/null
+++ b/frontend/src/components/pages/launch-model/launch-dialog/command-line.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { FC, useState } from 'react';
+import { Terminal, Copy } from 'lucide-react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogHeader,
+  DialogContent,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { useI18n } from '@/contexts/i18n-context';
+import { copyText } from '@/lib/utils';
+import type { FormInstance } from '@/types/form';
+import { transformFormToFetch, generateCommandLineStatement, transformFetchToForm, parseXinferenceCommand } from '../utils';
+
+interface CommandLineProps {
+  canCopyCommandLine: boolean;
+  form: FormInstance;
+}
+const CommandLine: FC<CommandLineProps> = ({ canCopyCommandLine, form }) => {
+  const [commandLineParsingOpen, setCommandLineParsingOpen] = useState(false);
+  const [commandLineParsingValue, setCommandLineParsingValue] = useState('');
+  const { t } = useI18n();
+  const handleCopyCommandLine = () => {
+    if (!canCopyCommandLine) return;
+
+    const params = transformFormToFetch(form.getFieldsValue());
+
+    copyText(generateCommandLineStatement(params));
+  };
+  const onOpenChange = (open: boolean)=>{
+    if(!open) setCommandLineParsingValue('');
+    setCommandLineParsingOpen(open)
+  }
+  const handleClose = () => {
+    setCommandLineParsingOpen(false);
+    setCommandLineParsingValue('');
+  };
+  const handleCommandLineParsingConfirm = () => {
+    if(!commandLineParsingValue) {
+      setCommandLineParsingOpen(false);
+      return;
+    }
+    const params = parseXinferenceCommand(commandLineParsingValue);
+    const formData = transformFetchToForm(params);
+    form.setFieldsValue(formData);
+    setCommandLineParsingOpen(false)
+  };
+  return (
+    <>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              aria-label={t('launchModel.commandLineParsing')}
+              onClick={() => setCommandLineParsingOpen(true)}
+              className='h-8'
+            >
+              <Terminal />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t('launchModel.commandLineParsing')}</TooltipContent>
+        </Tooltip>
+        {canCopyCommandLine && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                aria-label={t('launchModel.copyToCommandLine')}
+                onClick={handleCopyCommandLine}
+                className='h-8'
+              >
+                <Copy />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t('launchModel.copyToCommandLine')}</TooltipContent>
+          </Tooltip>
+        )}
+      </TooltipProvider>
+      <Dialog open={commandLineParsingOpen} onOpenChange={onOpenChange}>
+        <DialogContent className="!max-w-2xl" showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>{t('launchModel.commandLineParsing')}</DialogTitle>
+          </DialogHeader>
+          <Textarea
+            className="min-h-48"
+            placeholder={t('launchModel.placeholderTip')}
+            value={commandLineParsingValue}
+            onChange={(event) => setCommandLineParsingValue(event.target.value)}
+          />
+          <DialogFooter>
+            <Button variant="outline" onClick={handleClose}>
+              {t('common.cancel')}
+            </Button>
+            <Button  onClick={handleCommandLineParsingConfirm}>
+              {t('common.confirm')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+export default CommandLine;
diff --git a/frontend/src/components/pages/launch-model/launch-dialog/common-form-list.tsx b/frontend/src/components/pages/launch-model/launch-dialog/common-form-list.tsx
new file mode 100644
index 0000000000..6ecd3c820b
--- /dev/null
+++ b/frontend/src/components/pages/launch-model/launch-dialog/common-form-list.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { FC } from 'react';
+import { Trash2, Plus } from 'lucide-react';
+import { FormList } from '@/components/ui/form-list';
+import { FormField } from '@/components/ui/form-field';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { AutoComplete, type AutoCompleteOption } from '@/components/ui/auto-complete';
+import { useI18n } from '@/contexts/i18n-context';
+
+export interface CommonFormListProps {
+  name: string | string[];
+  label: string;
+  childFirstKey?: string;
+  childSecondKey?: string;
+  onlyValue?: boolean;
+  keyOptions?: AutoCompleteOption[];
+}
+const CommonFormList: FC<CommonFormListProps> = ({
+  name,
+  label,
+  childFirstKey = 'key',
+  childSecondKey = 'value',
+  onlyValue = false,
+  keyOptions,
+}) => {
+  const { t } = useI18n();
+
+  return (
+    <FormList name={name} layout="horizontal">
+      {({ fields, add, remove }) => {
+        return (
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <div className="flex min-w-0 flex-1 items-center gap-3 text-left">
+                <span className="min-w-0 flex-1 truncate text-sm font-medium">{label}</span>
+                <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                  {t('common.itemsCount', { count: fields.length })}
+                </span>
+              </div>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-8"
+                onClick={() => add('')}
+              >
+                <Plus />
+                {t('common.add')}
+              </Button>
+            </div>
+
+            {fields.map((field) => (
+              <div className="flex gap-2" key={field.name}>
+                {!onlyValue && (
+                  <FormField
+                    className="flex-1"
+                    rules={[{ required: true }]}
+                    name={[...(Array.isArray(name) ? name : [name]), field.name, childFirstKey]}
+                    placeholder={childFirstKey}
+                  >
+                    {Array.isArray(keyOptions) ? (
+                      <AutoComplete
+                        optionsTips={t('common.autoCompleteOptionsTips')}
+                        options={keyOptions}
+                      />
+                    ) : (
+                      <Input />
+                    )}
+                  </FormField>
+                )}
+
+                <FormField
+                  className="flex-1"
+                  rules={[{ required: true }]}
+                  name={[...(Array.isArray(name) ? name : [name]), field.name, childSecondKey]}
+                  placeholder={childSecondKey}
+                >
+                  <Input />
+                </FormField>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="shrink-0 rounded-full text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                  onClick={() => remove(field.name)}
+                >
+                  <Trash2 />
+                </Button>
+              </div>
+            ))}
+          </div>
+        );
+      }}
+    </FormList>
+  );
+};
+export default CommonFormList;
diff --git a/frontend/src/components/pages/launch-model/launch-dialog/config-cache.tsx b/frontend/src/components/pages/launch-model/launch-dialog/config-cache.tsx
new file mode 100644
index 0000000000..8a619dc802
--- /dev/null
+++ b/frontend/src/components/pages/launch-model/launch-dialog/config-cache.tsx
@@ -0,0 +1,321 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { X } from 'lucide-react';
+import { useI18n } from '@/contexts/i18n-context';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import type { FormInstance, FormValues } from '@/types/form';
+import { toOptionValue, transformFetchToForm, transformFormToFetch } from '../utils';
+
+export interface LaunchConfigHistoryItem {
+  data: FormValues;
+  model_name: string;
+  model_uid: string;
+  updated_at: number;
+}
+
+interface ConfigCacheProps {
+  form: FormInstance;
+  modelName?: string;
+  refreshKey?: number;
+}
+
+const LAUNCH_CONFIG_HISTORY_KEY = 'historyArr';
+
+export const readLaunchConfigHistory = (): LaunchConfigHistoryItem[] => {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const history = JSON.parse(window.localStorage.getItem(LAUNCH_CONFIG_HISTORY_KEY) || '[]');
+
+    if (!Array.isArray(history)) return [];
+
+    return history.filter(
+      (item): item is LaunchConfigHistoryItem =>
+        Boolean(
+          item &&
+            typeof item === 'object' &&
+            typeof item.model_name === 'string' &&
+            typeof item.updated_at === 'number' &&
+            item.data &&
+            typeof item.data === 'object' &&
+            !Array.isArray(item.data)
+        )
+    );
+  } catch {
+    return [];
+  }
+};
+
+const writeLaunchConfigHistory = (history: LaunchConfigHistoryItem[]) => {
+  if (typeof window === 'undefined') return;
+
+  window.localStorage.setItem(LAUNCH_CONFIG_HISTORY_KEY, JSON.stringify(history));
+};
+
+export const getModelConfigHistory = (history: LaunchConfigHistoryItem[], modelName?: string) => {
+  if (!modelName) return [];
+
+  return history
+    .filter((item) => item.model_name === modelName)
+    .sort((a, b) => b.updated_at - a.updated_at);
+};
+
+export const getLatestModelConfigHistory = (modelName?: string) => {
+  return getModelConfigHistory(readLaunchConfigHistory(), modelName)[0];
+};
+
+export const saveLaunchConfigHistory = (values: FormValues) => {
+  const modelName = toOptionValue(values.model_name);
+  const modelUid = toOptionValue(values?.model_uid);
+
+  if (!modelName) return;
+
+  const history = readLaunchConfigHistory();
+  const nextItem = {
+    data: values,
+    model_name: modelName,
+    model_uid: modelUid,
+    updated_at: Date.now(),
+  };
+  const matchedIndex = history.findIndex((item) => {
+    if (item.model_name !== modelName) return false;
+
+    return modelUid ? item.model_uid === modelUid : !item.model_uid;
+  });
+  const nextHistory =
+    matchedIndex >= 0
+      ? history.map((item, index) => (index === matchedIndex ? nextItem : item))
+      : [nextItem, ...history];
+
+  writeLaunchConfigHistory(nextHistory);
+};
+
+const normalizeForCompare = (value: unknown): unknown => {
+  if (Array.isArray(value)) {
+    return value.map(normalizeForCompare);
+  }
+
+  if (value && typeof value === 'object') {
+    return Object.fromEntries(
+      Object.entries(value)
+        .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
+        .map(([key, itemValue]) => [key, normalizeForCompare(itemValue)])
+    );
+  }
+
+  return value;
+};
+
+const isSameConfig = (left: FormValues, right: FormValues) => {
+  return JSON.stringify(normalizeForCompare(left)) === JSON.stringify(normalizeForCompare(right));
+};
+
+export default function ConfigCache({ form, modelName, refreshKey }: ConfigCacheProps) {
+  const { t } = useI18n();
+  const [configCacheOpen, setConfigCacheOpen] = useState(false);
+  const [clearConfigCacheOpen, setClearConfigCacheOpen] = useState(false);
+  const [pendingDeleteConfig, setPendingDeleteConfig] = useState<LaunchConfigHistoryItem>();
+  const [configHistory, setConfigHistory] = useState<LaunchConfigHistoryItem[]>([]);
+  const [formUpdateKey, setFormUpdateKey] = useState(0);
+  const modelConfigHistory = useMemo(
+    () => getModelConfigHistory(configHistory, modelName),
+    [configHistory, modelName]
+  );
+  const currentFetchValues = useMemo(
+    () =>
+      transformFormToFetch(form.getFieldsValue()),
+    [form, formUpdateKey]
+  );
+  const hasModelConfigHistory = modelConfigHistory.length > 0;
+
+  const refreshConfigHistory = () => {
+    setConfigHistory(readLaunchConfigHistory());
+  };
+
+  const handleOpenConfigCache = () => {
+    refreshConfigHistory();
+    setConfigCacheOpen(true);
+  };
+
+  const handleUseConfigCache = (item: LaunchConfigHistoryItem) => {
+    form.resetFields();
+    form.setFieldsValue(transformFetchToForm(item.data));
+    setConfigCacheOpen(false);
+  };
+
+  const deleteConfigCache = (item: LaunchConfigHistoryItem) => {
+    const nextHistory = readLaunchConfigHistory().filter(
+      (historyItem) =>
+        historyItem.model_name !== item.model_name || historyItem.updated_at !== item.updated_at
+    );
+
+    writeLaunchConfigHistory(nextHistory);
+    setConfigHistory(nextHistory);
+  };
+
+  const handleConfirmDeleteConfigCache = () => {
+    if (!pendingDeleteConfig) return;
+
+    deleteConfigCache(pendingDeleteConfig);
+    setPendingDeleteConfig(undefined);
+  };
+
+  const handleNewConfigCache = () => {
+    form.resetFields();
+    setConfigCacheOpen(false);
+  };
+
+  const handleClearModelConfigCache = () => {
+    const nextHistory = readLaunchConfigHistory().filter((item) => item.model_name !== modelName);
+
+    writeLaunchConfigHistory(nextHistory);
+    setConfigHistory(nextHistory);
+    setClearConfigCacheOpen(false);
+    setConfigCacheOpen(false);
+    form.resetFields();
+  };
+
+  useEffect(() => {
+    setConfigHistory(readLaunchConfigHistory());
+  }, [modelName, refreshKey]);
+
+  useEffect(() => {
+    if (modelName) return;
+
+    setConfigCacheOpen(false);
+    setClearConfigCacheOpen(false);
+    setPendingDeleteConfig(undefined);
+  }, [modelName]);
+
+  useEffect(() => {
+    return form.subscribe(() => {
+      setFormUpdateKey((key) => key + 1);
+    });
+  }, [form]);
+
+  return (
+    <>
+      <div className="flex shrink-0 items-center">
+        <div className="inline-flex h-8 overflow-hidden rounded-md border bg-background text-sm font-medium shadow-xs">
+          <button
+            type="button"
+            className="flex h-full items-center gap-2 px-3 transition-colors hover:bg-accent hover:text-accent-foreground"
+            onClick={handleOpenConfigCache}
+          >
+            {t('launchModel.configCache')}
+            {hasModelConfigHistory && (
+              <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
+                {modelConfigHistory.length}
+              </span>
+            )}
+          </button>
+          {hasModelConfigHistory && (
+            <button
+              type="button"
+              className="flex h-full w-8 items-center justify-center border-l text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+              onClick={() => {
+                setClearConfigCacheOpen(true);
+              }}
+            >
+              <X className="size-3.5" />
+            </button>
+          )}
+        </div>
+      </div>
+      <Dialog open={configCacheOpen} onOpenChange={setConfigCacheOpen}>
+        <DialogContent className="!max-w-2xl gap-0 p-0" showCloseButton={false}>
+          <DialogHeader className="border-b px-6 py-5">
+            <DialogTitle>{t('launchModel.configCache')}</DialogTitle>
+          </DialogHeader>
+          <div className="max-h-[52vh] space-y-3 overflow-y-auto px-6 py-5">
+            {modelConfigHistory.length ? (
+              modelConfigHistory.map((item) => {
+                const isActiveConfig = isSameConfig(currentFetchValues, item.data);
+
+                return (
+                  <div
+                    key={`${item.model_name}-${item.updated_at}`}
+                    className={cn(
+                      'flex items-center justify-between gap-4 rounded-md border p-5',
+                      isActiveConfig ? 'border-primary' : 'border-border'
+                    )}
+                  >
+                    <div className="min-w-0 space-y-1">
+                      <div className="font-semibold">
+                        {item.model_uid || t('launchModel.defaultConfig')}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {t('launchModel.modelUid')}: {item.model_uid || '-'}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {t('launchModel.lastUpdated')}:{' '}
+                        {new Date(item.updated_at).toLocaleString()}
+                      </div>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-4">
+                      <Button onClick={() => handleUseConfigCache(item)}>
+                        {t('launchModel.loadCache')}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                        onClick={() => setPendingDeleteConfig(item)}
+                      >
+                        {t('launchModel.deleteCache')}
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="rounded-md border border-dashed py-10 text-center text-sm text-muted-foreground">
+                {t('launchModel.noConfigCache')}
+              </div>
+            )}
+          </div>
+          <DialogFooter className="border-t px-6 py-4 sm:justify-between">
+            <Button variant="ghost" className="text-primary" onClick={handleNewConfigCache}>
+              {t('launchModel.newCache')}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => setConfigCacheOpen(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <ConfirmDialog
+        isOpen={clearConfigCacheOpen}
+        onOpenChange={setClearConfigCacheOpen}
+        description={t('launchModel.confirmDeleteConfigCache')}
+        confirmText={t('common.confirm')}
+        onConfirm={handleClearModelConfigCache}
+        confirmClassName="bg-destructive  hover:bg-destructive/90"
+      />
+      <ConfirmDialog
+        isOpen={Boolean(pendingDeleteConfig)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPendingDeleteConfig(undefined);
+          }
+        }}
+        description={t('launchModel.confirmDeleteConfigCache')}
+        confirmText={t('common.confirm')}
+        onConfirm={handleConfirmDeleteConfigCache}
+        confirmClassName="bg-destructive  hover:bg-destructive/90"
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/pages/launch-model/launch-dialog/launch-dialog.tsx b/frontend/src/components/pages/launch-model/launch-dialog/launch-dialog.tsx
new file mode 100644
index 0000000000..f677e4ff43
--- /dev/null
+++ b/frontend/src/components/pages/launch-model/launch-dialog/launch-dialog.tsx
@@ -0,0 +1,1363 @@
+'use client';
+
+import { useCallback, useEffect, useId, useMemo, useState, useRef } from 'react';
+import { Ban, Rocket } from 'lucide-react';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import request from '@/lib/request';
+import { ModelType, ModelAbility } from '@/constants';
+import { ENGINES_WITH_WORKER } from '@/constants/launch';
+import { ModelFormat } from '@/constants/register';
+import { useI18n } from '@/contexts/i18n-context';
+import { useForm, useFormValues, useWatch } from '@/hooks/use-form';
+import { cn, copyText } from '@/lib/utils';
+import { Progress } from '@/components/ui/progress';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Form } from '@/components/ui/form';
+import type { ModelEngine, ModelEngineItem, ReplicaItem } from '@/types/services';
+import type { FormValues } from '@/types/form';
+import CollapsibleConfig from './advanced-config';
+import ConfigCache, { getLatestModelConfigHistory, saveLaunchConfigHistory } from './config-cache';
+import type { CatalogModel, LaunchFieldConfig, RequestModelType } from '../types';
+import {
+  MODEL_ENGINE_TYPES,
+  buildEngineIndex,
+  createCacheKey,
+  isCachedSpec,
+  normalizeModelSize,
+  range,
+  renderLaunchFields,
+  syncLinkedField,
+  toOptionValue,
+  transformFetchToForm,
+  transformFormToFetch,
+  normalizeProgress,
+  normalizeReplicaStatuses,
+  isEmptyLaunchValue,
+  isVisibleRequiredLaunchField,
+} from '../utils';
+import CommandLine from './command-line';
+import { FormField } from '@/components/ui/form-field';
+
+interface LaunchDialogProps {
+  model?: CatalogModel;
+  modelType: RequestModelType;
+  gpuAvailable: number;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function LaunchDialog({
+  model,
+  modelType,
+  gpuAvailable,
+  onOpenChange,
+}: LaunchDialogProps) {
+  const isOpen = Boolean(model);
+  const formId = useId();
+  const [form] = useForm();
+  const { t } = useI18n();
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [canceling, setCanceling] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [replicaStatuses, setReplicaStatuses] = useState<ReplicaItem[]>([]);
+  const [configCacheRefreshKey, setConfigCacheRefreshKey] = useState(0);
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const isLLM = modelType === ModelType.LLM;
+  const [modelEngineMap, setModelEngineMap] = useState<ModelEngine>({});
+  const launchFormValues = useFormValues(form);
+  const modelEngineValue = toOptionValue(useWatch('model_engine', form));
+  const modelFormatValue = toOptionValue(useWatch('model_format', form));
+  const modelSizeInBillionsValue = useWatch('model_size_in_billions', form) as
+    | ModelEngineItem['model_size_in_billions']
+    | undefined;
+  const enableThinkingValue = useWatch('enable_thinking', form);
+  const modelSizeInBillionsKey = toOptionValue(modelSizeInBillionsValue);
+  const quantizationValue = toOptionValue(useWatch('quantization', form));
+  const multimodalProjectorValue = toOptionValue(useWatch('multimodal_projector', form));
+  const nGpuValue = useWatch('n_gpu', form);
+
+  const fetchModelEngine = useCallback(async () => {
+    if (!model?.model_name || !MODEL_ENGINE_TYPES.includes(modelType)) {
+      setModelEngineMap({});
+      return;
+    }
+
+    const url = isLLM
+      ? `/v1/engines/${model.model_name}`
+      : `/v1/engines/${modelType}/${model.model_name}`;
+
+    setModelEngineMap({});
+
+    const res = await request.get(url);
+
+    setModelEngineMap(res || {});
+  }, [isLLM, model?.model_name, modelType]);
+
+  const engineIndex = useMemo(() => buildEngineIndex(modelEngineMap), [modelEngineMap]);
+  const cacheIndex = useMemo(() => {
+    const formats = new Set<string>();
+    const sizes = new Set<string>();
+    const quantizations = new Set<string>();
+
+    (model?.modelSpecs || []).forEach((spec) => {
+      const format = toOptionValue(spec.model_format);
+      const size = normalizeModelSize(spec.model_size_in_billions);
+
+      if (!format || !isCachedSpec(spec)) return;
+
+      formats.add(format);
+
+      if (size) {
+        sizes.add(createCacheKey(format, size));
+      }
+
+      if (Array.isArray(spec.quantizations)) {
+        spec.quantizations.forEach((quantization, index) => {
+          const cached = Array.isArray(spec.cache_status)
+            ? spec.cache_status[index]
+            : spec.cache_status;
+
+          if (!cached) return;
+
+          quantizations.add(createCacheKey(format, size, quantization));
+          quantizations.add(createCacheKey(format, '', quantization));
+        });
+      } else if (spec.quantization) {
+        quantizations.add(createCacheKey(format, size, spec.quantization));
+        quantizations.add(createCacheKey(format, '', spec.quantization));
+      }
+    });
+
+    return { formats, sizes, quantizations };
+  }, [model?.modelSpecs]);
+
+  const modelEngineOptions = useMemo(() => {
+    return Object.entries(modelEngineMap).map(([key, engineData]) => {
+      if (typeof engineData === 'string') {
+        return {
+          label: `${key} (${engineData})`,
+          value: key,
+          disabled: true,
+        };
+      }
+      const cached = engineData.some((item) => cacheIndex.formats.has(item.model_format));
+
+      return {
+        label: key,
+        value: key,
+        suffix: cached ? t('launchModel.cached') : undefined,
+      };
+    });
+  }, [cacheIndex.formats, modelEngineMap, t]);
+
+  const selectedEngineFormats = engineIndex.get(modelEngineValue);
+  const selectedFormatIndex = selectedEngineFormats?.get(modelFormatValue);
+
+  const modelFormatOptions = useMemo(
+    () =>
+      Array.from(selectedEngineFormats?.keys() || []).map((format) => ({
+        label: format,
+        value: format,
+        suffix: cacheIndex.formats.has(format) ? t('launchModel.cached') : undefined,
+      })),
+    [cacheIndex.formats, selectedEngineFormats, t]
+  );
+  const modelSizeInBillionsOptions = useMemo(
+    () =>
+      Array.from(selectedFormatIndex?.sizes.values() || []).map((sizeIndex) => ({
+        label: String(sizeIndex.value),
+        value: sizeIndex.value,
+        suffix: cacheIndex.sizes.has(
+          createCacheKey(modelFormatValue, normalizeModelSize(sizeIndex.value))
+        )
+          ? t('launchModel.cached')
+          : undefined,
+      })),
+    [cacheIndex.sizes, modelFormatValue, selectedFormatIndex, t]
+  );
+
+  const quantizationOptions = useMemo(() => {
+    const quantizations =
+      modelType === ModelType.LLM
+        ? selectedFormatIndex?.sizes.get(modelSizeInBillionsKey)?.quantizations
+        : selectedFormatIndex?.quantizations;
+
+    return Array.from(quantizations || []).map((quantization) => ({
+      label: quantization,
+      value: quantization,
+      suffix: cacheIndex.quantizations.has(
+        createCacheKey(
+          modelFormatValue,
+          modelType === ModelType.LLM ? normalizeModelSize(modelSizeInBillionsKey) : '',
+          quantization
+        )
+      )
+        ? t('launchModel.cached')
+        : undefined,
+    }));
+  }, [
+    cacheIndex.quantizations,
+    modelFormatValue,
+    modelSizeInBillionsKey,
+    modelType,
+    selectedFormatIndex,
+    t,
+  ]);
+
+  const multimodalProjectorOptions = useMemo(
+    () =>
+      Array.from(
+        selectedFormatIndex?.sizes.get(modelSizeInBillionsKey)?.multimodalProjectors || []
+      ).map((projector) => ({
+        label: projector,
+        value: projector,
+      })),
+    [modelSizeInBillionsKey, selectedFormatIndex]
+  );
+  const nGpuOptions = useMemo(() => {
+    let options = [];
+    if ([ModelType.LLM, ModelType.Image].includes(modelType)) {
+      options = gpuAvailable > 0 ? ['auto', 'CPU', ...range(1, gpuAvailable)] : ['auto', 'CPU'];
+    } else {
+      options = gpuAvailable === 0 ? ['CPU'] : ['GPU', 'CPU'];
+    }
+    return options.map((item) => ({ label: String(item), value: item }));
+  }, [gpuAvailable, modelType]);
+
+  const downloadHubOptions = useMemo(
+    () => ['none', ...(model?.download_hubs || [])].map((item) => ({ label: item, value: item })),
+    [model?.download_hubs]
+  );
+  const ggufQuantizations =
+    model?.gguf_quantizations ??
+    model?.modelSpecs?.find((spec) => spec.gguf_quantizations)?.gguf_quantizations ??
+    null;
+
+  const ggufQuantizationsOptions = useMemo(() => {
+    if (Array.isArray(ggufQuantizations)) {
+      return ['none', ...ggufQuantizations].map((item) => ({
+        label: item,
+        value: item,
+      }));
+    }
+
+    return [];
+  }, [ggufQuantizations]);
+
+  const lightningVersionOptions = useMemo(() => {
+    if (Array.isArray(model?.lightning_versions)) {
+      return ['none', ...(model?.lightning_versions || [])].map((item) => ({
+        label: item,
+        value: item,
+      }));
+    }
+    return [];
+  }, [model?.lightning_versions]);
+  useEffect(() => {
+    const selectableOptions = modelEngineOptions.filter((option) => !option.disabled);
+
+    if (
+      modelEngineValue &&
+      selectableOptions.length > 0 &&
+      !selectableOptions.some((option) => option.value === modelEngineValue)
+    ) {
+      form.setFieldValue('model_engine', '');
+    }
+  }, [form, modelEngineOptions, modelEngineValue]);
+
+  useEffect(() => {
+    if (modelEngineValue && modelFormatOptions.length === 0) return;
+
+    syncLinkedField(form, 'model_format', modelFormatValue, modelFormatOptions);
+  }, [form, modelEngineValue, modelFormatOptions, modelFormatValue]);
+
+  useEffect(() => {
+    if (
+      modelType === ModelType.LLM &&
+      modelFormatValue &&
+      modelSizeInBillionsOptions.length === 0
+    ) {
+      return;
+    }
+
+    syncLinkedField(
+      form,
+      'model_size_in_billions',
+      modelSizeInBillionsValue,
+      modelType === ModelType.LLM ? modelSizeInBillionsOptions : []
+    );
+  }, [form, modelFormatValue, modelSizeInBillionsOptions, modelSizeInBillionsValue, modelType]);
+
+  useEffect(() => {
+    if (modelFormatValue && quantizationOptions.length === 0) return;
+
+    syncLinkedField(form, 'quantization', quantizationValue, quantizationOptions);
+  }, [form, modelFormatValue, quantizationOptions, quantizationValue]);
+
+  useEffect(() => {
+    if (multimodalProjectorValue && multimodalProjectorOptions.length === 0) return;
+
+    syncLinkedField(
+      form,
+      'multimodal_projector',
+      multimodalProjectorValue,
+      multimodalProjectorOptions,
+      true
+    );
+  }, [form, multimodalProjectorOptions, multimodalProjectorValue]);
+
+  const modelTypeFields: Partial<Record<ModelType, LaunchFieldConfig[]>> = {
+    [ModelType.LLM]: [
+      {
+        name: 'model_engine',
+        type: 'select',
+        label: t('launchModel.modelEngine'),
+        rules: [{ required: true }],
+        fieldProps: { options: modelEngineOptions },
+      },
+      {
+        name: 'model_format',
+        type: 'select',
+        label: t('launchModel.modelFormat'),
+        rules: [{ required: true }],
+        disabled: !modelEngineValue,
+        fieldProps: { options: modelFormatOptions },
+      },
+      {
+        name: 'model_size_in_billions',
+        type: 'select',
+        label: t('launchModel.modelSize'),
+        rules: [{ required: true }],
+        disabled: !modelFormatValue,
+        fieldProps: { options: modelSizeInBillionsOptions },
+      },
+      {
+        name: 'quantization',
+        type: 'select',
+        label: t('launchModel.quantization'),
+        rules: [{ required: true }],
+        disabled: !modelSizeInBillionsValue,
+        fieldProps: { options: quantizationOptions },
+      },
+      {
+        name: 'multimodal_projector',
+        type: 'select',
+        label: t('launchModel.multimodelProjector'),
+        rules: [{ required: true }],
+        disabled: !modelSizeInBillionsValue,
+        show: Boolean(multimodalProjectorOptions.length),
+        fieldProps: { options: multimodalProjectorOptions },
+      },
+      {
+        name: 'n_gpu',
+        type: 'select',
+        label: t(
+          ENGINES_WITH_WORKER.includes(modelEngineValue)
+            ? 'launchModel.nGPUPerWorker'
+            : 'launchModel.nGPU'
+        ),
+        fieldProps: { options: nGpuOptions },
+      },
+      {
+        name: 'n_gpu_layers',
+        type: 'input',
+        label: t('launchModel.nGpuLayers'),
+        show: [ModelFormat.GGMLV3, ModelFormat.GGUFV2].includes(modelFormatValue as ModelFormat),
+        fieldProps: { type: 'number', min: -1 },
+      },
+      {
+        name: 'replica',
+        type: 'input',
+        label: t('launchModel.replica'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'model_uid',
+        type: 'input',
+        label: t('launchModel.modelUid'),
+        placeholder: t('launchModel.modelUidPlaceholder'),
+      },
+      {
+        name: 'request_limits',
+        type: 'input',
+        label: t('launchModel.requestLimits'),
+        placeholder: t('launchModel.requestLimitsPlaceholder'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+        normalize: (v) => (v === '' ? undefined : Number(v)),
+      },
+      {
+        name: 'n_worker',
+        type: 'input',
+        label: t('launchModel.workerCount'),
+        placeholder: t('launchModel.workerCountPlaceholder'),
+        show: ENGINES_WITH_WORKER.includes(modelEngineValue),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'gpu_idx',
+        type: 'input',
+        label: t('launchModel.GPUIdx'),
+        placeholder: t('launchModel.GPUIdxPlaceholder'),
+        rules: [
+          {
+            pattern: /^\d+(?:,\d+)*$/,
+            message: t('launchModel.enterCommaSeparatedNumbers'),
+          },
+        ],
+      },
+      {
+        name: 'download_hub',
+        type: 'select',
+        label: t('launchModel.downloadHub'),
+        placeholder: t('launchModel.downloadHubPlaceholder'),
+        fieldProps: { options: downloadHubOptions },
+      },
+      {
+        name: 'enable_thinking',
+        type: 'switch',
+        label: t('launchModel.enableThinking'),
+        valuePropName: 'checked',
+        show: model?.abilities.includes(ModelAbility.Hybrid),
+      },
+      {
+        name: 'reasoning_content',
+        type: 'switch',
+        label: t('launchModel.parsingReasoningContent'),
+        valuePropName: 'checked',
+        show: model?.abilities.includes(ModelAbility.Reasoning) && enableThinkingValue,
+      },
+      {
+        name: 'worker_ip',
+        type: 'input',
+        label: t('launchModel.workerIp'),
+        placeholder: t('launchModel.workerIpPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'model_path',
+        type: 'input',
+        label: t('launchModel.modelPath'),
+        placeholder: t('launchModel.modelPathPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'collapsibleConfig',
+        type: 'custom',
+        colSpan: 2,
+        content: <CollapsibleConfig form={form} modelType={modelType} />,
+      },
+    ],
+    [ModelType.Embedding]: [
+      {
+        name: 'model_engine',
+        type: 'select',
+        label: t('launchModel.modelEngine'),
+        rules: [{ required: true }],
+        fieldProps: { options: modelEngineOptions },
+      },
+      {
+        name: 'model_format',
+        type: 'select',
+        label: t('launchModel.modelFormat'),
+        rules: [{ required: true }],
+        disabled: !modelEngineValue,
+        fieldProps: { options: modelFormatOptions },
+      },
+      {
+        name: 'quantization',
+        type: 'select',
+        label: t('launchModel.quantization'),
+        rules: [{ required: true }],
+        disabled: !modelFormatValue,
+        fieldProps: { options: quantizationOptions },
+      },
+      {
+        name: 'replica',
+        type: 'input',
+        label: t('launchModel.replica'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'n_gpu',
+        type: 'select',
+        label: t('launchModel.nGPU'),
+        fieldProps: { options: nGpuOptions },
+      },
+      {
+        name: 'gpu_idx',
+        type: 'input',
+        label: t('launchModel.GPUIdx'),
+        placeholder: t('launchModel.GPUIdxPlaceholder'),
+        rules: [
+          {
+            pattern: /^\d+(?:,\d+)*$/,
+            message: t('launchModel.enterCommaSeparatedNumbers'),
+          },
+        ],
+        show: nGpuValue === 'GPU',
+      },
+      {
+        name: 'model_uid',
+        type: 'input',
+        label: t('launchModel.modelUid'),
+        placeholder: t('launchModel.modelUidPlaceholder'),
+      },
+      {
+        name: 'download_hub',
+        type: 'select',
+        label: t('launchModel.downloadHub'),
+        placeholder: t('launchModel.downloadHubPlaceholder'),
+        fieldProps: { options: downloadHubOptions },
+      },
+      {
+        name: 'request_limits',
+        type: 'input',
+        label: t('launchModel.requestLimits'),
+        placeholder: t('launchModel.requestLimitsPlaceholder'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+        normalize: (v) => (v === '' ? undefined : Number(v))
+      },
+      {
+        name: 'worker_ip',
+        type: 'input',
+        label: t('launchModel.workerIp'),
+        placeholder: t('launchModel.workerIpPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'model_path',
+        type: 'input',
+        label: t('launchModel.modelPath'),
+        placeholder: t('launchModel.modelPathPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'collapsibleConfig',
+        type: 'custom',
+        colSpan: 2,
+        content: <CollapsibleConfig form={form} modelType={modelType} />,
+      },
+    ],
+    [ModelType.Rerank]: [
+      {
+        name: 'model_engine',
+        type: 'select',
+        label: t('launchModel.modelEngine'),
+        rules: [{ required: true }],
+        fieldProps: { options: modelEngineOptions },
+      },
+      {
+        name: 'model_format',
+        type: 'select',
+        label: t('launchModel.modelFormat'),
+        rules: [{ required: true }],
+        disabled: !modelEngineValue,
+        fieldProps: { options: modelFormatOptions },
+      },
+      {
+        name: 'quantization',
+        type: 'select',
+        label: t('launchModel.quantization'),
+        rules: [{ required: true }],
+        disabled: !modelFormatValue,
+        fieldProps: { options: quantizationOptions },
+      },
+      {
+        name: 'replica',
+        type: 'input',
+        label: t('launchModel.replica'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'n_gpu',
+        type: 'select',
+        label: t('launchModel.nGPU'),
+        fieldProps: { options: nGpuOptions },
+      },
+      {
+        name: 'gpu_idx',
+        type: 'input',
+        label: t('launchModel.GPUIdx'),
+        placeholder: t('launchModel.GPUIdxPlaceholder'),
+        rules: [
+          {
+            pattern: /^\d+(?:,\d+)*$/,
+            message: t('launchModel.enterCommaSeparatedNumbers'),
+          },
+        ],
+        show: nGpuValue === 'GPU',
+      },
+      {
+        name: 'model_uid',
+        type: 'input',
+        label: t('launchModel.modelUid'),
+        placeholder: t('launchModel.modelUidPlaceholder'),
+      },
+      {
+        name: 'download_hub',
+        type: 'select',
+        label: t('launchModel.downloadHub'),
+        placeholder: t('launchModel.downloadHubPlaceholder'),
+        fieldProps: { options: downloadHubOptions },
+      },
+      {
+        name: 'gguf_quantization',
+        label: t('launchModel.GGUFQuantization'),
+        placeholder: t('launchModel.GGUFQuantizationPlaceholder'),
+        type: 'select',
+        fieldProps: { options: ggufQuantizationsOptions },
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'gguf_model_path',
+        label: t('launchModel.GGUFModelPath'),
+        placeholder: t('launchModel.GGUFModelPathPlaceholder'),
+        type: 'input',
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'request_limits',
+        type: 'input',
+        label: t('launchModel.requestLimits'),
+        placeholder: t('launchModel.requestLimitsPlaceholder'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+        normalize: (v) => (v === '' ? undefined : Number(v))
+      },
+      {
+        name: 'worker_ip',
+        type: 'input',
+        label: t('launchModel.workerIp'),
+        placeholder: t('launchModel.workerIpPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'model_path',
+        type: 'input',
+        label: t('launchModel.modelPath'),
+        placeholder: t('launchModel.modelPathPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'collapsibleConfig',
+        type: 'custom',
+        colSpan: 2,
+        content: <CollapsibleConfig form={form} modelType={modelType} />,
+      },
+    ],
+    [ModelType.Image]: [
+      {
+        name: 'model_uid',
+        type: 'input',
+        label: t('launchModel.modelUid'),
+        placeholder: t('launchModel.modelUidPlaceholder'),
+      },
+      {
+        name: 'model_engine',
+        type: 'select',
+        label: t('launchModel.modelEngine'),
+        fieldProps: { options: modelEngineOptions },
+        show: !!modelEngineOptions.length,
+      },
+      {
+        name: 'model_format',
+        type: 'select',
+        label: t('launchModel.modelFormat'),
+        disabled: !modelEngineValue,
+        fieldProps: { options: modelFormatOptions },
+        show: !!modelFormatOptions.length,
+      },
+      {
+        name: 'quantization',
+        type: 'select',
+        label: t('launchModel.quantization'),
+        disabled: !modelFormatValue,
+        fieldProps: { options: quantizationOptions },
+        show: !!quantizationOptions.length,
+      },
+      {
+        name: 'replica',
+        type: 'input',
+        label: t('launchModel.replica'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'n_gpu',
+        type: 'select',
+        label: t('launchModel.nGPU'),
+        fieldProps: { options: nGpuOptions },
+      },
+      {
+        name: 'gpu_idx',
+        type: 'input',
+        label: t('launchModel.GPUIdx'),
+        placeholder: t('launchModel.GPUIdxPlaceholder'),
+        rules: [
+          {
+            pattern: /^\d+(?:,\d+)*$/,
+            message: t('launchModel.enterCommaSeparatedNumbers'),
+          },
+        ],
+        show: nGpuValue === 'GPU',
+      },
+      {
+        name: 'download_hub',
+        type: 'select',
+        label: t('launchModel.downloadHub'),
+        placeholder: t('launchModel.downloadHubPlaceholder'),
+        fieldProps: { options: downloadHubOptions },
+      },
+      {
+        name: 'request_limits',
+        type: 'input',
+        label: t('launchModel.requestLimits'),
+        placeholder: t('launchModel.requestLimitsPlaceholder'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+        normalize: (v) => (v === '' ? undefined : Number(v))
+      },
+      {
+        name: 'gguf_quantization',
+        label: t('launchModel.GGUFQuantization'),
+        placeholder: t('launchModel.GGUFQuantizationPlaceholder'),
+        type: 'select',
+        fieldProps: { options: ggufQuantizationsOptions },
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'gguf_model_path',
+        label: t('launchModel.GGUFModelPath'),
+        placeholder: t('launchModel.GGUFModelPathPlaceholder'),
+        type: 'input',
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'lightning_version',
+        label: t('launchModel.lightningVersions'),
+        placeholder: t('launchModel.lightningVersionsPlaceholder'),
+        type: 'select',
+        fieldProps: { options: lightningVersionOptions },
+        show: !!lightningVersionOptions.length,
+      },
+      {
+        name: 'lightning_model_path',
+        label: t('launchModel.lightningModelPath'),
+        placeholder: t('launchModel.lightningModelPathPlaceholder'),
+        type: 'input',
+        show: !!lightningVersionOptions.length,
+      },
+      {
+        name: 'worker_ip',
+        type: 'input',
+        label: t('launchModel.workerIp'),
+        placeholder: t('launchModel.workerIpPlaceholder'),
+        colSpan: 2,
+      },
+      {
+        name: 'model_path',
+        type: 'input',
+        label: t('launchModel.modelPath'),
+        placeholder: t('launchModel.modelPathPlaceholder'),
+        colSpan: 2,
+      },
+      {
+        name: 'cpu_offload',
+        label: t('launchModel.CPUOffload'),
+        type: 'switch',
+        valuePropName: 'checked',
+        tooltip: t('launchModel.CPUOffloadTip'),
+      },
+      {
+        name: 'collapsibleConfig',
+        type: 'custom',
+        colSpan: 2,
+        content: <CollapsibleConfig form={form} modelType={modelType} />,
+      },
+    ],
+    [ModelType.Audio]: [
+      {
+        name: 'model_uid',
+        type: 'input',
+        label: t('launchModel.modelUid'),
+        placeholder: t('launchModel.modelUidPlaceholder'),
+      },
+      {
+        name: 'replica',
+        type: 'input',
+        label: t('launchModel.replica'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'n_gpu',
+        type: 'select',
+        label: t('launchModel.nGPU'),
+        fieldProps: { options: nGpuOptions },
+      },
+      {
+        name: 'gpu_idx',
+        type: 'input',
+        label: t('launchModel.GPUIdx'),
+        placeholder: t('launchModel.GPUIdxPlaceholder'),
+        rules: [
+          {
+            pattern: /^\d+(?:,\d+)*$/,
+            message: t('launchModel.enterCommaSeparatedNumbers'),
+          },
+        ],
+        show: nGpuValue === 'GPU',
+      },
+      
+      {
+        name: 'download_hub',
+        type: 'select',
+        label: t('launchModel.downloadHub'),
+        placeholder: t('launchModel.downloadHubPlaceholder'),
+        fieldProps: { options: downloadHubOptions },
+      },
+      {
+        name: 'request_limits',
+        type: 'input',
+        label: t('launchModel.requestLimits'),
+        placeholder: t('launchModel.requestLimitsPlaceholder'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+        normalize: (v) => (v === '' ? undefined : Number(v))
+      },
+      {
+        name: 'gguf_quantization',
+        label: t('launchModel.GGUFQuantization'),
+        placeholder: t('launchModel.GGUFQuantizationPlaceholder'),
+        type: 'select',
+        fieldProps: { options: ggufQuantizationsOptions },
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'gguf_model_path',
+        label: t('launchModel.GGUFModelPath'),
+        placeholder: t('launchModel.GGUFModelPathPlaceholder'),
+        type: 'input',
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'worker_ip',
+        type: 'input',
+        label: t('launchModel.workerIp'),
+        placeholder: t('launchModel.workerIpPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'model_path',
+        type: 'input',
+        label: t('launchModel.modelPath'),
+        placeholder: t('launchModel.modelPathPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'collapsibleConfig',
+        type: 'custom',
+        colSpan: 2,
+        content: <CollapsibleConfig form={form} modelType={modelType} />,
+      },
+    ],
+    [ModelType.Video]: [
+      {
+        name: 'model_uid',
+        type: 'input',
+        label: t('launchModel.modelUid'),
+        placeholder: t('launchModel.modelUidPlaceholder'),
+      },
+      {
+        name: 'replica',
+        type: 'input',
+        label: t('launchModel.replica'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'n_gpu',
+        type: 'select',
+        label: t('launchModel.nGPU'),
+        fieldProps: { options: nGpuOptions },
+      },
+      {
+        name: 'gpu_idx',
+        type: 'input',
+        label: t('launchModel.GPUIdx'),
+        placeholder: t('launchModel.GPUIdxPlaceholder'),
+        rules: [
+          {
+            pattern: /^\d+(?:,\d+)*$/,
+            message: t('launchModel.enterCommaSeparatedNumbers'),
+          },
+        ],
+        show: nGpuValue === 'GPU',
+      },
+
+      {
+        name: 'download_hub',
+        type: 'select',
+        label: t('launchModel.downloadHub'),
+        placeholder: t('launchModel.downloadHubPlaceholder'),
+        fieldProps: { options: downloadHubOptions },
+      },
+      {
+        name: 'request_limits',
+        type: 'input',
+        label: t('launchModel.requestLimits'),
+        placeholder: t('launchModel.requestLimitsPlaceholder'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+        normalize: (v) => (v === '' ? undefined : Number(v))
+      },
+      {
+        name: 'gguf_quantization',
+        label: t('launchModel.GGUFQuantization'),
+        placeholder: t('launchModel.GGUFQuantizationPlaceholder'),
+        type: 'select',
+        fieldProps: { options: ggufQuantizationsOptions },
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'gguf_model_path',
+        label: t('launchModel.GGUFModelPath'),
+        placeholder: t('launchModel.GGUFModelPathPlaceholder'),
+        type: 'input',
+        show: !!ggufQuantizations,
+      },
+      {
+        name: 'worker_ip',
+        type: 'input',
+        label: t('launchModel.workerIp'),
+        placeholder: t('launchModel.workerIpPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'model_path',
+        type: 'input',
+        label: t('launchModel.modelPath'),
+        placeholder: t('launchModel.modelPathPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'cpu_offload',
+        label: t('launchModel.CPUOffload'),
+        type: 'switch',
+        valuePropName: 'checked',
+        tooltip: t('launchModel.CPUOffloadTip'),
+      },
+      {
+        name: 'collapsibleConfig',
+        type: 'custom',
+        colSpan: 2,
+        content: <CollapsibleConfig form={form} modelType={modelType} />,
+      },
+    ],
+    [ModelType.Flexible]: [
+      {
+        name: 'model_uid',
+        type: 'input',
+        label: t('launchModel.modelUid'),
+        placeholder: t('launchModel.modelUidPlaceholder'),
+      },
+      {
+        name: 'replica',
+        type: 'input',
+        label: t('launchModel.replica'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+      },
+      {
+        name: 'n_gpu',
+        type: 'select',
+        label: t('launchModel.nGPU'),
+        fieldProps: { options: nGpuOptions },
+      },
+      {
+        name: 'gpu_idx',
+        type: 'input',
+        label: t('launchModel.GPUIdx'),
+        placeholder: t('launchModel.GPUIdxPlaceholder'),
+        rules: [
+          {
+            pattern: /^\d+(?:,\d+)*$/,
+            message: t('launchModel.enterCommaSeparatedNumbers'),
+          },
+        ],
+        show: nGpuValue === 'GPU',
+      },
+      {
+        name: 'request_limits',
+        type: 'input',
+        label: t('launchModel.requestLimits'),
+        placeholder: t('launchModel.requestLimitsPlaceholder'),
+        rules: [
+          {
+            pattern: /^[1-9]\d*$/,
+            message: t('launchModel.enterIntegerGreaterThanZero'),
+          },
+        ],
+        fieldProps: { type: 'number', min: 1 },
+        normalize: (v) => (v === '' ? undefined : Number(v))
+      },
+      {
+        name: 'worker_ip',
+        type: 'input',
+        label: t('launchModel.workerIp'),
+        placeholder: t('launchModel.workerIpPlaceholder'),
+        colSpan: 2
+      },
+      {
+        name: 'model_path',
+        type: 'input',
+        label: t('launchModel.modelPath'),
+        placeholder: t('launchModel.modelPathPlaceholder'),
+        colSpan: 2
+
+      },
+      {
+        name: 'collapsibleConfig',
+        type: 'custom',
+        colSpan: 2,
+        content: <CollapsibleConfig form={form} modelType={modelType} />,
+      },
+    ]
+  };
+
+  const currentLaunchFields = modelTypeFields[modelType] || [];
+  // required fields is filled in
+  const isReady = currentLaunchFields
+    .filter(isVisibleRequiredLaunchField)
+    .every((field) => !isEmptyLaunchValue(launchFormValues[field.name]));
+
+  const stopPolling = useCallback(() => {
+    if (pollingRef.current !== null) {
+      clearInterval(pollingRef.current);
+      pollingRef.current = null;
+    }
+  }, []);
+
+  const fetchProgress = useCallback(async () => {
+    const modelUid = form.getFieldValue('model_uid') || model?.model_name;
+    try {
+      const [progressRes, replicaRes] = await Promise.all([
+        request.get<number | string | { progress?: number | string }>(
+          `/v1/models/${modelUid}/progress`
+        ),
+        request.get<unknown>(`/v1/models/${modelUid}/replicas`),
+      ]);
+
+      const progressValue =
+        progressRes && typeof progressRes === 'object' ? progressRes.progress : progressRes;
+      const nextProgress = normalizeProgress(progressValue);
+
+      setProgress(nextProgress);
+      setReplicaStatuses(normalizeReplicaStatuses(replicaRes));
+
+      if (nextProgress >= 100) {
+        stopPolling();
+      }
+    } catch {
+      stopPolling();
+    }
+  }, [stopPolling, form, model]);
+
+  const startPolling = useCallback(() => {
+    if (pollingRef.current) return;
+    pollingRef.current = setInterval(fetchProgress, 1000);
+  }, [fetchProgress]);
+
+  const renderReplicaStatuses = () => {
+    if (!replicaStatuses.length) {
+      return (
+        <div className="text-sm text-muted-foreground">{t('launchModel.noReplicaStatus')}</div>
+      );
+    }
+
+    return (
+      <div className="max-w-md space-y-2 overflow-auto">
+        <div className="text-sm font-medium">{t('launchModel.launchProgress')}</div>
+        {replicaStatuses.map((replica) => {
+          const statusClassName =
+            replica.status === 'READY'
+              ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+              : replica.status === 'ERROR'
+                ? 'border-red-200 bg-red-50 text-red-700'
+                : 'border-border bg-muted/40 text-muted-foreground';
+
+          return (
+            <div key={replica.replica_id} className="flex items-center justify-between gap-8">
+              <div className="flex flex-col gap-0.5 text-xs">
+                <span className="font-semibold">
+                  {t('launchModel.replica')}&nbsp;{replica.replica_id}
+                </span>
+                <span className="text-muted-foreground">{replica?.worker_address || '-'}</span>
+              </div>
+              <div
+                className={cn(
+                  'rounded-md border px-2 py-1 text-xs font-medium leading-none',
+                  statusClassName
+                )}
+              >
+                {replica.status}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const handleCancelLaunch = async () => {
+    const modelUid = form.getFieldValue('model_uid') || model?.model_name;
+    setCanceling(true);
+
+    try {
+      await request.post(`/v1/models/${encodeURIComponent(modelUid)}/cancel`);
+      stopPolling();
+      setLoading(false);
+      setProgress(0);
+      setReplicaStatuses([]);
+      toast.success(t('launchModel.launchCanceled'));
+    } finally {
+      setCanceling(false);
+    }
+  };
+
+  const handleLaunch = async (values: FormValues) => {
+    const newValues = transformFormToFetch(values);
+    setLoading(true);
+    setProgress(0);
+    setReplicaStatuses([]);
+
+    request
+      .post('/v1/models', newValues)
+      .then(() => {
+        saveLaunchConfigHistory(newValues);
+        setConfigCacheRefreshKey((key) => key + 1);
+        setLoading(false);
+        stopPolling();
+        onOpenChange(false);
+        toast.success(t('launchModel.launchCompleted'));
+        router.push('/running-model')
+      })
+      .catch(() => {
+        stopPolling();
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+    startPolling();
+  };
+  const handleClose = () => {
+    setLoading(false);
+    setCanceling(false);
+    setProgress(0);
+    setReplicaStatuses([]);
+    stopPolling();
+    onOpenChange(false);
+    form.resetFields();
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchModelEngine();
+    }
+  }, [fetchModelEngine, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const latestConfig = getLatestModelConfigHistory(model?.model_name);
+
+    form.resetFields();
+
+    if (latestConfig) {
+      form.setFieldsValue(transformFetchToForm(latestConfig.data));
+    }
+  }, [form, isOpen, model?.model_name]);
+
+  useEffect(() => {
+    return () => {
+      stopPolling();
+    };
+  }, [stopPolling]);
+
+  const initialValues = {
+    model_name: model?.model_name,
+    model_type: modelType,
+    n_gpu: [ModelType.LLM, ModelType.Image].includes(modelType)
+      ? 'auto'
+      : gpuAvailable === 0
+        ? 'CPU'
+        : 'GPU',
+    n_gpu_layers: -1,
+    replica: 1,
+    enable_thinking: true,
+    reasoning_content: false,
+    enable_virtual_env: 'unset',
+    cpu_offload: false,
+  };
+  return (
+    <>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            handleClose();
+            return;
+          }
+          onOpenChange(open);
+        }}
+      >
+        <DialogContent className="!max-w-3xl" maskClosable={false}>
+          <DialogHeader>
+            <div className="flex min-w-0 items-center justify-between gap-3 pr-10">
+              <DialogTitle className="min-w-0 truncate">{model?.model_name}</DialogTitle>
+              <div className="flex gap-2">
+                <ConfigCache
+                  form={form}
+                  modelName={model?.model_name}
+                  refreshKey={configCacheRefreshKey}
+                />
+                <CommandLine form={form} canCopyCommandLine={isReady} />
+              </div>
+            </div>
+          </DialogHeader>
+          <Form
+            id={formId}
+            form={form}
+            onFinish={handleLaunch}
+            initialValues={initialValues}
+            className="grid grid-cols-2 gap-x-4 gap-y-3 space-y-0"
+          >
+            <FormField hidden name="model_name"/>
+            <FormField hidden name="model_type"/>
+            {renderLaunchFields(currentLaunchFields)}
+          </Form>
+          <DialogFooter className={cn(loading ? '!flex-col' : '')}>
+            {loading && <Progress value={progress} />}
+            <div className="flex items-center justify-end gap-2">
+              <TooltipProvider>
+                <Button variant="outline" onClick={handleClose}>
+                  {t('common.cancel')}
+                </Button>
+                {loading ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        disabled={canceling}
+                        loading={canceling}
+                        onClick={handleCancelLaunch}
+                        className="border-destructive text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      >
+                        <Ban />
+                        {t('common.stop')}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" align="end">
+                      {renderReplicaStatuses()}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : (
+                  <Button type="submit" form={formId}>
+                    <Rocket />
+                    {t('common.deploy')}
+                  </Button>
+                )}
+              </TooltipProvider>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/frontend/src/components/pages/launch-model/types.ts b/frontend/src/components/pages/launch-model/types.ts
index 76106fadbc..1d4728c96e 100644
--- a/frontend/src/components/pages/launch-model/types.ts
+++ b/frontend/src/components/pages/launch-model/types.ts
@@ -1,12 +1,23 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Input } from '@/components/ui/input';
+import type { RadioGroup } from '@/components/ui/radio-group';
+import type { Select } from '@/components/ui/select';
+import type { Switch } from '@/components/ui/switch';
 import { ModelType } from '@/constants';
+import type { FormFieldProps } from '@/types/form';
+import type { ModelEngineItem } from '@/types/services';
+import type { CommonFormListProps } from './launch-dialog/common-form-list';
+
 export type UnknownRecord = Record<string, unknown>;
 
 export interface ModelSpec {
-  cache_status: boolean | boolean[];
+  cache_status?: boolean | boolean[];
   model_format: string;
   model_uri: string;
-  quantization: string;
+  quantization?: string;
+  quantizations?: string[];
   model_size_in_billions: string | number;
+  gguf_quantizations?: string[];
   [key: string]: unknown;
 }
 
@@ -20,18 +31,11 @@ export interface CatalogModel {
   modelSpecs?: ModelSpec[];
   featured?: boolean;
   cached?: boolean;
+  download_hubs?: string[];
+  gguf_quantizations?: string[];
+  lightning_versions?: string[];
 }
 
-export interface VirtualEnv {
-  model_name?: string;
-  model_engine?: string;
-  python_version?: string;
-  worker_ip?: string;
-  env_path?: string;
-  path?: string;
-  real_path?: string;
-  [key: string]: unknown;
-}
 export type RouteModelType =
   | ModelType.LLM
   | ModelType.Embedding
@@ -40,7 +44,6 @@ export type RouteModelType =
   | ModelType.Audio
   | ModelType.Video
   | ModelType.Custom;
-  
 export type RequestModelType =
   | ModelType.LLM
   | ModelType.Embedding
@@ -48,4 +51,52 @@ export type RequestModelType =
   | ModelType.Image
   | ModelType.Audio
   | ModelType.Video
-  | ModelType.Flexible;
\ No newline at end of file
+  | ModelType.Flexible;
+
+export type FormatIndex = {
+  quantizations: Set<string>;
+  sizes: Map<
+    string,
+    {
+      multimodalProjectors: Set<string>;
+      quantizations: Set<string>;
+      value: ModelEngineItem['model_size_in_billions'];
+    }
+  >;
+};
+
+export type EngineIndex = Map<string, Map<string, FormatIndex>>;
+
+export type LaunchFieldBase = {
+  name: string;
+  colSpan?: 1 | 2;
+  show?: boolean;
+};
+
+export type FormLaunchFieldBase = LaunchFieldBase & Omit<FormFieldProps, 'children'>;
+
+export type LaunchFieldConfig =
+  | (FormLaunchFieldBase & {
+      type: 'input';
+      fieldProps?: ComponentProps<typeof Input>;
+    })
+  | (FormLaunchFieldBase & {
+      type: 'select';
+      fieldProps?: ComponentProps<typeof Select>;
+    })
+  | (FormLaunchFieldBase & {
+      type: 'switch';
+      fieldProps?: ComponentProps<typeof Switch>;
+    })
+  | (FormLaunchFieldBase & {
+      type: 'radio-group';
+      fieldProps?: ComponentProps<typeof RadioGroup>;
+    })
+  | (LaunchFieldBase & {
+      type: 'form-list';
+      fieldProps: CommonFormListProps;
+    })
+  | (LaunchFieldBase & {
+      type: 'custom';
+      content: ReactNode;
+    });
diff --git a/frontend/src/components/pages/launch-model/utils.ts b/frontend/src/components/pages/launch-model/utils.ts
deleted file mode 100644
index c4da1100fe..0000000000
--- a/frontend/src/components/pages/launch-model/utils.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { XINFERENCE_IO, ModelType } from '@/constants';
-import { LAUNCH_MODEL_ROUTE_TABS } from '@/constants/launch';
-import type {
-  ModelSpec,
-  CatalogModel,
-  UnknownRecord,
-  VirtualEnv,
-  RequestModelType,
-  RouteModelType,
-} from './types';
-
-export function isCachedSpec(spec: unknown): boolean {
-  if (!isRecord(spec)) {
-    return false;
-  }
-
-  const cacheStatus = spec.cache_status;
-
-  if (Array.isArray(cacheStatus)) {
-    return cacheStatus.some(Boolean);
-  }
-
-  return cacheStatus === true;
-}
-
-export function isRecord(value: unknown): value is UnknownRecord {
-  return value !== null && typeof value === 'object' && !Array.isArray(value);
-}
-
-export function toStringArray(value: unknown) {
-  if (Array.isArray(value)) {
-    return value.map((item) => String(item)).filter(Boolean);
-  }
-
-  if (typeof value === 'string' && value) {
-    return [value];
-  }
-
-  return [];
-}
-
-export function getString(record: UnknownRecord, keys: string[]) {
-  const value = keys.map((key) => record[key]).find((item) => typeof item === 'string');
-
-  return typeof value === 'string' ? value : '';
-}
-
-export function normalizeModels(response: unknown): CatalogModel[] {
-  if (!Array.isArray(response)) {
-    return [];
-  }
-  return response.map((model) => {
-    const modelSpecs = (Array.isArray(model.model_specs) ? model.model_specs : []) as ModelSpec[];
-    return {
-      ...model,
-      model_description: model?.model_description || '',
-      abilities: toStringArray(model.model_ability),
-      languages: toStringArray(model.model_lang ?? model.language),
-      detailUrl: `${XINFERENCE_IO}/models/detail/${encodeURIComponent(model.model_name)}`,
-      modelSpecs,
-      featured: model.featured === true,
-      cached: modelSpecs.some((spec) => isCachedSpec(spec)),
-    };
-  });
-}
-
-export function getVirtualEnvPath(item: VirtualEnv) {
-  return String(item.env_path || item.path || item.real_path || '');
-}
-
-export function getLaunchModelEndpointType(type: RequestModelType) {
-  return type === ModelType.LLM ? 'LLM' : type;
-}
-
-export function getLaunchModelRouteType(value: string): RouteModelType {
-  const normalized = value.toLowerCase();
-  const matched = LAUNCH_MODEL_ROUTE_TABS.find((item) => item.path === normalized);
-
-  return matched?.key || ModelType.LLM;
-}
-
-export function getSortedModels(models: CatalogModel[], favorites: string[]) {
-  return [...models].sort((a, b) => {
-    const aPriority = Number(Boolean(a.featured)) * 2 + Number(favorites.includes(a.model_name));
-    const bPriority = Number(Boolean(b.featured)) * 2 + Number(favorites.includes(b.model_name));
-
-    return bPriority - aPriority;
-  });
-}
diff --git a/frontend/src/components/pages/launch-model/utils.tsx b/frontend/src/components/pages/launch-model/utils.tsx
new file mode 100644
index 0000000000..68b89a9e8b
--- /dev/null
+++ b/frontend/src/components/pages/launch-model/utils.tsx
@@ -0,0 +1,851 @@
+import type { ReactElement } from 'react';
+import { FormField } from '@/components/ui/form-field';
+import { Input } from '@/components/ui/input';
+import { RadioGroup } from '@/components/ui/radio-group';
+import { Select } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { ModelType, XINFERENCE_IO, CUSTOM_MODEL_OPTIONS } from '@/constants';
+import { ALL_FORM_KEYS, LAUNCH_MODEL_ROUTE_TABS } from '@/constants/launch';
+import type { FormInstance, FormValues } from '@/types/form';
+import { transformFormListToObj, transformObjToFormList } from '@/lib/utils';
+import type { ModelEngine, ModelEngineItem, ReplicaItem } from '@/types/services';
+import CommonFormList from './launch-dialog/common-form-list';
+import type {
+  CatalogModel,
+  EngineIndex,
+  FormatIndex,
+  FormLaunchFieldBase,
+  LaunchFieldConfig,
+  ModelSpec,
+  RequestModelType,
+  RouteModelType,
+  UnknownRecord,
+} from './types';
+
+export const MODEL_ENGINE_TYPES: RequestModelType[] = [
+  ModelType.LLM,
+  ModelType.Embedding,
+  ModelType.Rerank,
+  ModelType.Image,
+];
+
+export function normalizeModelSize(value: unknown) {
+  return toOptionValue(value).replace('.', '_');
+}
+
+export function createCacheKey(...parts: unknown[]) {
+  return parts.map(toOptionValue).join('\u0000');
+}
+
+export function getItemQuantizations(item: ModelEngineItem) {
+  const quantizations = Array.isArray(item.quantizations)
+    ? item.quantizations
+    : [item.quantization];
+
+  return quantizations.map(toOptionValue).filter(Boolean);
+}
+
+export function buildEngineIndex(modelEngineMap: ModelEngine): EngineIndex {
+  const index: EngineIndex = new Map();
+
+  Object.entries(modelEngineMap).forEach(([engine, engineItems]) => {
+    if (!Array.isArray(engineItems)) return;
+
+    const formats = new Map<string, FormatIndex>();
+
+    engineItems.forEach((item) => {
+      const format = toOptionValue(item.model_format);
+
+      if (!format) return;
+
+      const formatIndex = formats.get(format) || {
+        quantizations: new Set<string>(),
+        sizes: new Map(),
+      };
+      const size = toOptionValue(item.model_size_in_billions);
+      const quantizations = getItemQuantizations(item);
+
+      quantizations.forEach((quantization) => formatIndex.quantizations.add(quantization));
+
+      if (size) {
+        const sizeIndex = formatIndex.sizes.get(size) || {
+          multimodalProjectors: new Set<string>(),
+          quantizations: new Set<string>(),
+          value: item.model_size_in_billions,
+        };
+
+        quantizations.forEach((quantization) => sizeIndex.quantizations.add(quantization));
+        (item.multimodal_projectors || []).forEach((projector) =>
+          sizeIndex.multimodalProjectors.add(projector)
+        );
+        formatIndex.sizes.set(size, sizeIndex);
+      }
+
+      formats.set(format, formatIndex);
+    });
+
+    index.set(engine, formats);
+  });
+
+  return index;
+}
+
+export function syncLinkedField<T>(
+  form: FormInstance,
+  name: string,
+  currentValue: T | undefined,
+  options: Array<{ value: T }>,
+  selectFirst = false
+) {
+  const values = options.map((option) => option.value);
+  const nextValue =
+    currentValue !== undefined && values.includes(currentValue)
+      ? currentValue
+      : values.length === 1 || (selectFirst && values.length > 0)
+        ? values[0]
+        : undefined;
+
+  if (currentValue !== nextValue) {
+    form.setFieldValue(name, nextValue);
+  }
+}
+
+export function renderFormField(field: FormLaunchFieldBase, child: ReactElement) {
+  return (
+    <FormField
+      name={field.name}
+      label={field.label}
+      extra={field.extra}
+      rules={field.rules}
+      placeholder={field.placeholder}
+      disabled={field.disabled}
+      valuePropName={field.valuePropName}
+      layout={field.layout}
+      tooltip={field.tooltip}
+      className={field.className}
+      normalize={field.normalize}
+    >
+      {child}
+    </FormField>
+  );
+}
+
+export function renderLaunchField(field: LaunchFieldConfig) {
+  switch (field.type) {
+    case 'input':
+      return renderFormField(field, <Input {...field.fieldProps} />);
+    case 'select':
+      return renderFormField(field, <Select {...field.fieldProps} />);
+    case 'switch':
+      return renderFormField(field, <Switch {...field.fieldProps} />);
+    case 'radio-group':
+      return renderFormField(field, <RadioGroup {...field.fieldProps} />);
+    case 'form-list':
+      return <CommonFormList {...field.fieldProps} />;
+    case 'custom':
+      return field.content;
+  }
+}
+
+export function renderLaunchFields(fields: LaunchFieldConfig[]) {
+  return fields
+    .filter((field) => field.show !== false)
+    .map((field) => (
+      <div key={field.name} className={field.colSpan === 2 ? 'col-span-2' : undefined}>
+        {renderLaunchField(field)}
+      </div>
+    ));
+}
+
+export function isCachedSpec(spec: unknown): boolean {
+  if (!isRecord(spec)) {
+    return false;
+  }
+
+  const cacheStatus = spec.cache_status;
+
+  if (Array.isArray(cacheStatus)) {
+    return cacheStatus.some(Boolean);
+  }
+
+  return cacheStatus === true;
+}
+
+export function isRecord(value: unknown): value is UnknownRecord {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function toStringArray(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item)).filter(Boolean);
+  }
+
+  if (typeof value === 'string' && value) {
+    return [value];
+  }
+
+  return [];
+}
+
+export function getString(record: UnknownRecord, keys: string[]) {
+  const value = keys.map((key) => record[key]).find((item) => typeof item === 'string');
+
+  return typeof value === 'string' ? value : '';
+}
+
+export function normalizeModels(response: unknown): CatalogModel[] {
+  if (!Array.isArray(response)) {
+    return [];
+  }
+  return response.map((model) => {
+    const modelSpecs = (Array.isArray(model.model_specs) ? model.model_specs : []) as ModelSpec[];
+    return {
+      ...model,
+      model_description: model?.model_description || '',
+      abilities: toStringArray(model.model_ability),
+      languages: toStringArray(model.model_lang ?? model.language),
+      detailUrl: `${XINFERENCE_IO}/models/detail/${encodeURIComponent(model.model_name)}`,
+      modelSpecs,
+      featured: model.featured === true,
+      cached: modelSpecs.some((spec) => isCachedSpec(spec)),
+    };
+  });
+}
+
+export function getLaunchModelEndpointType(type: RequestModelType) {
+  return type === ModelType.LLM ? 'LLM' : type;
+}
+
+export function getLaunchModelRouteType(value: string): RouteModelType {
+  const normalized = value.toLowerCase();
+  const matched = LAUNCH_MODEL_ROUTE_TABS.find((item) => item.path === normalized);
+
+  return matched?.key || ModelType.LLM;
+}
+export function getInitialCustomType(activeType?: string) {
+  const matched = CUSTOM_MODEL_OPTIONS.find((item) => item.value === activeType);
+
+  return (matched?.value || ModelType.LLM) as RequestModelType;
+}
+
+export function getSortedModels(models: CatalogModel[], favorites: string[]) {
+  return [...models].sort((a, b) => {
+    const aPriority = Number(Boolean(a.featured)) * 2 + Number(favorites.includes(a.model_name));
+    const bPriority = Number(Boolean(b.featured)) * 2 + Number(favorites.includes(b.model_name));
+
+    return bPriority - aPriority;
+  });
+}
+
+export function range(start: number, end: number) {
+  return new Array(end - start + 1).fill(undefined).map((_, i) => i + start);
+}
+
+export function toOptionValue(value: unknown) {
+  return value === undefined || value === null ? '' : String(value);
+}
+
+function getFormListObject(value: unknown, transformValue = true) {
+  if (!Array.isArray(value) || value.length === 0) {
+    return undefined;
+  }
+
+  const nextValue = transformFormListToObj(value, transformValue);
+
+  return Object.keys(nextValue).length > 0 ? nextValue : undefined;
+}
+
+function restoreFormListObject(values: FormValues, field: string) {
+  if (!(field in values)) return;
+  const fieldValue = values[field];
+
+  if (!isRecord(fieldValue)) return;
+
+  const nextValue = transformObjToFormList(fieldValue);
+
+  values[field] = nextValue;
+}
+
+function restoreNestedFormListObject(values: FormValues, parent: string, field: string) {
+  const parentValue = values[parent];
+
+  if (!isRecord(parentValue) || !(field in parentValue)) return;
+
+  const fieldValue = parentValue[field];
+
+  if (!isRecord(fieldValue)) return;
+
+  const nextParentValue = { ...parentValue };
+
+  values[parent] = nextParentValue;
+  nextParentValue[field] = transformObjToFormList(fieldValue);
+}
+
+function transformOnlyValueFormListToArray(values: FormValues, field: string) {
+  if (!(field in values)) return;
+
+  if (!Array.isArray(values[field]) || values[field].length === 0) {
+    delete values[field];
+    return;
+  }
+
+  const fieldValue = values[field] as unknown[];
+  const nextValue = fieldValue
+    .map((item: unknown) => {
+      if (isRecord(item) && 'value' in item) return item.value;
+
+      return item;
+    })
+    .filter((item: unknown) => item !== undefined && item !== null && item !== '');
+
+  if (nextValue.length > 0) {
+    values[field] = nextValue;
+  } else {
+    delete values[field];
+  }
+}
+
+function transformArrayToOnlyValueFormList(values: FormValues, field: string) {
+  if (!Array.isArray(values[field])) return;
+
+  values[field] = (values[field] as unknown[]).map((value: unknown) => ({ value }));
+}
+
+function restoreKwargsFormList(values: FormValues) {
+  const kwargsValue = values.kwargs;
+  const kwargs = isRecord(kwargsValue) ? transformObjToFormList(kwargsValue) : [];
+  const extraKwargs: Record<string, unknown> = {};
+
+  Object.keys(values)
+    .filter((key) => key !== 'kwargs' && !ALL_FORM_KEYS.includes(key))
+    .forEach((key) => {
+      extraKwargs[key] = values[key];
+
+      delete values[key];
+    });
+
+  kwargs.push(...transformObjToFormList(extraKwargs));
+
+  if (kwargs.length > 0) {
+    values.kwargs = kwargs;
+  }
+}
+
+function applyFormListObject(values: FormValues, field: string, transformValue = true) {
+  if (!(field in values)) return;
+
+  const nextValue = getFormListObject(values[field], transformValue);
+
+  if (nextValue) {
+    values[field] = nextValue;
+    return;
+  }
+
+  delete values[field];
+}
+function mergeFormListObject(values: FormValues, field: string) {
+  if (!(field in values)) return;
+
+  const nextValue = getFormListObject(values[field]);
+
+  delete values[field];
+
+  if (nextValue) {
+    Object.assign(values, nextValue);
+  }
+}
+
+function applyNestedFormListObject(values: FormValues, parent: string, field: string) {
+  const parentValue = values[parent];
+
+  if (!parentValue || typeof parentValue !== 'object' || Array.isArray(parentValue)) return;
+  if (!(field in parentValue)) return;
+
+  const nextParentValue = { ...parentValue };
+  const nextValue = getFormListObject(nextParentValue[field]);
+
+  values[parent] = nextParentValue;
+
+  if (nextValue) {
+    nextParentValue[field] = nextValue;
+  } else {
+    delete nextParentValue[field];
+  }
+
+  if (Object.keys(nextParentValue).length === 0) {
+    delete values[parent];
+  }
+}
+
+function deleteNestedEmptyArrayField(values: FormValues, parent: string, field: string) {
+  const parentValue = values[parent];
+
+  if (!parentValue || typeof parentValue !== 'object' || Array.isArray(parentValue)) return;
+  if (!Array.isArray(parentValue[field]) || parentValue[field].length > 0) return;
+
+  const nextParentValue = { ...parentValue };
+
+  delete nextParentValue[field];
+
+  if (Object.keys(nextParentValue).length > 0) {
+    values[parent] = nextParentValue;
+  } else {
+    delete values[parent];
+  }
+}
+
+function normalizeNGPU (value?: string | number) {
+  if (!value) return null
+
+  if (value === 'CPU') return null
+  if (value === 'auto' || value === 'GPU') return 'auto'
+
+  return value === 0 ? null : value
+}
+
+export function transformFormToFetch(values: FormValues) {
+  const nextValues = { ...values };
+
+  applyFormListObject(nextValues, 'quantization_config');
+  applyFormListObject(nextValues, 'envs', false);
+  mergeFormListObject(nextValues, 'kwargs');
+  applyNestedFormListObject(nextValues, 'peft_model_config', 'image_lora_load_kwargs');
+  applyNestedFormListObject(nextValues, 'peft_model_config', 'image_lora_fuse_kwargs');
+  transformOnlyValueFormListToArray(nextValues, 'virtual_env_packages');
+  deleteNestedEmptyArrayField(nextValues, 'peft_model_config', 'lora_list');
+
+  if (nextValues?.enable_virtual_env === 'unset') {
+    delete nextValues.enable_virtual_env;
+  }
+  if('n_gpu' in values){
+    nextValues.n_gpu = normalizeNGPU(values.n_gpu)
+  }
+  if('gpu_idx' in values && values.gpu_idx) {
+    nextValues.gpu_idx = values.gpu_idx.split(',').map((item: string)=> Number(item));
+  }
+  if ('n_gpu_layers' in values && values.n_gpu_layers < 0) {
+    delete nextValues.n_gpu_layers
+  }
+  if (nextValues.download_hub === 'none') {
+    delete nextValues.download_hub
+  }
+  if (nextValues.gguf_quantization === 'none') {
+    delete nextValues.gguf_quantization
+  }
+  return nextValues;
+}
+function restoreNGPU (value: null | string | number, modelType: RequestModelType) {
+  if (value === null) return 'CPU'
+  if (value === 'auto') {
+    return [ModelType.LLM, ModelType.Image].includes(modelType) ? 'auto' : 'GPU'
+  }
+  if (typeof value === 'number') return value
+  return value || 'CPU'
+}
+export function transformFetchToForm(values: FormValues) {
+  const nextValues = { ...values };
+
+  restoreFormListObject(nextValues, 'quantization_config');
+  restoreFormListObject(nextValues, 'envs');
+  transformArrayToOnlyValueFormList(nextValues, 'virtual_env_packages');
+  restoreKwargsFormList(nextValues);
+  restoreNestedFormListObject(nextValues, 'peft_model_config', 'image_lora_load_kwargs');
+  restoreNestedFormListObject(nextValues, 'peft_model_config', 'image_lora_fuse_kwargs');
+  if('n_gpu' in values){
+    nextValues.n_gpu = restoreNGPU(values.n_gpu, values?.model_type)
+  }
+  if('gpu_idx' in values){
+    nextValues.gpu_idx = Array.isArray(values.gpu_idx) ? values.gpu_idx.join(',') : undefined;
+  }
+  return nextValues;
+}
+
+const commandLineKeyMap: Record<string, string> = {
+  model_size_in_billions: '--size-in-billions',
+  download_hub: '--download_hub',
+  enable_thinking: '--enable-thinking',
+  reasoning_content: '--reasoning_content',
+  lightning_version: '--lightning_version',
+  lightning_model_path: '--lightning_model_path',
+};
+
+const predefinedLaunchKeySet = new Set<string>(ALL_FORM_KEYS);
+
+function isEmptyCommandValue(value: unknown) {
+  if (value === null || value === undefined) return true;
+  if (typeof value === 'string') return value.trim() === '';
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') return Object.keys(value).length === 0;
+
+  return false;
+}
+
+function stringifyCommandValue(value: unknown) {
+  if (value === null) return 'none';
+  if (typeof value === 'boolean') return value ? 'true' : 'false';
+  if (typeof value === 'object') return JSON.stringify(value);
+
+  return String(value);
+}
+
+function quoteCommandValue(value: unknown) {
+  const stringValue = stringifyCommandValue(value);
+
+  if (/^[A-Za-z0-9_@%+=:,./-]+$/.test(stringValue)) {
+    return stringValue;
+  }
+
+  return `'${stringValue.replace(/'/g, `'\\''`)}'`;
+}
+
+function getCommandKey(key: string) {
+  if (predefinedLaunchKeySet.has(key)) {
+    return commandLineKeyMap[key] ?? `--${key.replace(/_/g, '-')}`;
+  }
+
+  return `--${key}`;
+}
+
+const commandLeadingKeys = ['model_name', 'model_type'];
+
+const booleanCommandKeys = new Set(['enable_thinking', 'reasoning_content', 'cpu_offload']);
+
+const commandLineKeyMapEntries = Object.entries(commandLineKeyMap);
+
+function tokenizeCommand(command: string) {
+  const tokens: string[] = [];
+  let current = '';
+  let quote: '"' | "'" | null = null;
+  let escaping = false;
+
+  for (const char of command.trim()) {
+    if (escaping) {
+      current += char;
+      escaping = false;
+      continue;
+    }
+
+    if (char === '\\' && quote !== "'") {
+      escaping = true;
+      continue;
+    }
+
+    if (quote) {
+      if (char === quote) {
+        quote = null;
+      } else {
+        current += char;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+
+    if (/\s/.test(char)) {
+      if (current) {
+        tokens.push(current);
+        current = '';
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current) {
+    tokens.push(current);
+  }
+
+  return tokens;
+}
+
+function normalizeCommandKey(key: string) {
+  const commandKey = `--${key}`;
+  const mappedEntry = commandLineKeyMapEntries.find(([, value]) => value === commandKey);
+
+  if (mappedEntry) {
+    return mappedEntry[0];
+  }
+
+  return key.replace(/-/g, '_');
+}
+
+function readBooleanCommandValue(value: string | undefined) {
+  if (value === undefined || value === '') return true;
+
+  return value === 'true';
+}
+
+function setObjectPair(target: Record<string, unknown>, values: string[]) {
+  const [key, value] = values;
+
+  if (key && value !== undefined) {
+    target[key] = value;
+  }
+}
+
+export function generateCommandLineStatement(params: FormValues) {
+  const entries = Object.entries(params).filter(([, value]) => !isEmptyCommandValue(value));
+
+  const args = [
+    ...commandLeadingKeys.flatMap((leadingKey) =>
+      entries.filter(([key]) => key === leadingKey)
+    ),
+    ...entries.filter(([key]) => !commandLeadingKeys.includes(key)),
+  ]
+    .flatMap(([key, value]) => {
+      if (key === 'gpu_idx' && Array.isArray(value)) {
+        return `--gpu-idx ${quoteCommandValue(value.join(','))}`;
+      }
+
+      if (key === 'peft_model_config' && typeof value === 'object' && value !== null) {
+        const config = value as {
+          lora_list?: Array<{ lora_name?: unknown; local_path?: unknown }>;
+          image_lora_load_kwargs?: Record<string, unknown>;
+          image_lora_fuse_kwargs?: Record<string, unknown>;
+        };
+        const peftArgs = [];
+
+        if (Array.isArray(config.lora_list)) {
+          peftArgs.push(
+            ...config.lora_list
+              .filter(
+                (lora) =>
+                  !isEmptyCommandValue(lora.lora_name) && !isEmptyCommandValue(lora.local_path)
+              )
+              .map(
+                (lora) =>
+                  `--lora-modules ${quoteCommandValue(lora.lora_name)} ${quoteCommandValue(lora.local_path)}`
+              )
+          );
+        }
+
+        if (config.image_lora_load_kwargs) {
+          peftArgs.push(
+            ...Object.entries(config.image_lora_load_kwargs)
+              .filter(([, v]) => !isEmptyCommandValue(v))
+              .map(
+                ([k, v]) =>
+                  `--image-lora-load-kwargs ${quoteCommandValue(k)} ${quoteCommandValue(v)}`
+              )
+          );
+        }
+
+        if (config.image_lora_fuse_kwargs) {
+          peftArgs.push(
+            ...Object.entries(config.image_lora_fuse_kwargs)
+              .filter(([, v]) => !isEmptyCommandValue(v))
+              .map(
+                ([k, v]) =>
+                  `--image-lora-fuse-kwargs ${quoteCommandValue(k)} ${quoteCommandValue(v)}`
+              )
+          );
+        }
+
+        return peftArgs;
+      }
+
+      if (key === 'quantization_config' && typeof value === 'object' && value !== null) {
+        return Object.entries(value)
+          .filter(([, v]) => v !== undefined && v !== '')
+          .map(([k, v]) => `--quantization-config ${quoteCommandValue(k)} ${quoteCommandValue(v)}`);
+      }
+
+      if (key === 'envs' && typeof value === 'object' && value !== null) {
+        return Object.entries(value)
+          .filter(([, v]) => !isEmptyCommandValue(v))
+          .map(([k, v]) => `--env ${quoteCommandValue(k)} ${quoteCommandValue(v)}`);
+      }
+
+      if (key === 'virtual_env_packages' && Array.isArray(value)) {
+        return value
+          .filter((pkg) => !isEmptyCommandValue(pkg))
+          .map((pkg) => `--virtual-env-package ${quoteCommandValue(pkg)}`);
+      }
+
+      if (key === 'enable_virtual_env') {
+        if (value === true) return '--enable-virtual-env';
+        if (value === false) return '--disable-virtual-env';
+
+        return [];
+      }
+
+      if (key === 'enable_thinking') {
+        if (value === true) return '--enable-thinking';
+
+        return [];
+      }
+
+      return `${getCommandKey(key)} ${quoteCommandValue(value)}`;
+    })
+    .join(' ');
+
+  return args ? `xinference launch ${args}` : 'xinference launch';
+}
+
+export function parseXinferenceCommand(command: string) {
+  const tokens = tokenizeCommand(command);
+  const params: FormValues = {};
+  const peftModelConfig: {
+    lora_list: Array<{ lora_name: string; local_path: string }>;
+    image_lora_load_kwargs: Record<string, unknown>;
+    image_lora_fuse_kwargs: Record<string, unknown>;
+  } = {
+    lora_list: [],
+    image_lora_load_kwargs: {},
+    image_lora_fuse_kwargs: {},
+  };
+  const quantizationConfig: Record<string, unknown> = {};
+  const virtualEnvPackages: string[] = [];
+  const envs: Record<string, unknown> = {};
+  const args =
+    tokens[0] === 'xinference' && tokens[1] === 'launch'
+      ? tokens.slice(2)
+      : tokens[0] === 'launch'
+        ? tokens.slice(1)
+        : tokens;
+
+  for (let index = 0; index < args.length; index += 1) {
+    const flag = args[index];
+
+    if (!flag.startsWith('--')) {
+      continue;
+    }
+
+    const valueTokens: string[] = [];
+
+    while (index + 1 < args.length && !args[index + 1].startsWith('--')) {
+      valueTokens.push(args[index + 1]);
+      index += 1;
+    }
+
+    const key = flag.slice(2);
+    const normalizedKey = normalizeCommandKey(key);
+    const value = valueTokens.join(' ');
+
+    if (normalizedKey === 'gpu_idx') {
+      params.gpu_idx = value
+        .split(',')
+        .map((item) => Number(item.trim()))
+        .filter((item) => Number.isFinite(item));
+      continue;
+    }
+
+    if (normalizedKey === 'lora_modules') {
+      for (let i = 0; i < valueTokens.length; i += 2) {
+        const loraName = valueTokens[i];
+        const localPath = valueTokens[i + 1];
+
+        if (loraName && localPath) {
+          peftModelConfig.lora_list.push({
+            lora_name: loraName,
+            local_path: localPath,
+          });
+        }
+      }
+      continue;
+    }
+
+    if (normalizedKey === 'image_lora_load_kwargs') {
+      setObjectPair(peftModelConfig.image_lora_load_kwargs, valueTokens);
+      continue;
+    }
+
+    if (normalizedKey === 'image_lora_fuse_kwargs') {
+      setObjectPair(peftModelConfig.image_lora_fuse_kwargs, valueTokens);
+      continue;
+    }
+
+    if (normalizedKey === 'quantization_config') {
+      setObjectPair(quantizationConfig, valueTokens);
+      continue;
+    }
+
+    if (normalizedKey === 'enable_virtual_env') {
+      params.enable_virtual_env = true;
+      continue;
+    }
+
+    if (normalizedKey === 'disable_virtual_env') {
+      params.enable_virtual_env = false;
+      continue;
+    }
+
+    if (normalizedKey === 'virtual_env_package') {
+      if (value) {
+        virtualEnvPackages.push(value);
+      }
+      continue;
+    }
+
+    if (normalizedKey === 'env') {
+      setObjectPair(envs, valueTokens);
+      continue;
+    }
+
+    if (booleanCommandKeys.has(normalizedKey)) {
+      params[normalizedKey] = readBooleanCommandValue(valueTokens[0]);
+      continue;
+    }
+
+    params[normalizedKey] = valueTokens.length === 0 ? true : value;
+  }
+
+  if (
+    peftModelConfig.lora_list.length > 0 ||
+    Object.keys(peftModelConfig.image_lora_load_kwargs).length > 0 ||
+    Object.keys(peftModelConfig.image_lora_fuse_kwargs).length > 0
+  ) {
+    params.peft_model_config = peftModelConfig;
+  }
+
+  if (Object.keys(quantizationConfig).length > 0) {
+    params.quantization_config = quantizationConfig;
+  }
+
+  if (virtualEnvPackages.length > 0) {
+    params.virtual_env_packages = virtualEnvPackages;
+  }
+
+  if (Object.keys(envs).length > 0) {
+    params.envs = envs;
+  }
+
+  return params;
+}
+
+export function normalizeProgress(value: unknown) {
+  const numericValue = Number(value || 0);
+  if (!Number.isFinite(numericValue)) return 0;
+
+  const percentValue = numericValue <= 1 ? numericValue * 100 : numericValue;
+
+  return Math.max(0, Math.min(100, percentValue));
+}
+
+export function normalizeReplicaStatuses(value: unknown): ReplicaItem[] {
+  const statuses = Array.isArray(value)
+    ? value
+    : value &&
+        typeof value === 'object' &&
+        Array.isArray((value as { replicas?: unknown }).replicas)
+      ? (value as { replicas: unknown[] }).replicas
+      : [];
+
+  return statuses.filter(isRecord) as unknown as ReplicaItem[];
+}
+
+export function isEmptyLaunchValue(value: unknown) {
+  if (value === undefined || value === null) return true;
+  if (typeof value === 'string') return value.trim() === '';
+  if (Array.isArray(value)) return value.length === 0;
+
+  return false;
+}
+
+export function isVisibleRequiredLaunchField(field: LaunchFieldConfig) {
+  return field.show !== false && 'rules' in field && field.rules?.some((rule) => rule.required);
+}
diff --git a/frontend/src/components/pages/register-model/form-content.tsx b/frontend/src/components/pages/register-model/form-content.tsx
index 3bf0adc99d..77141dde8b 100644
--- a/frontend/src/components/pages/register-model/form-content.tsx
+++ b/frontend/src/components/pages/register-model/form-content.tsx
@@ -465,6 +465,7 @@ const FormContent: FC<FormContentProps> = ({
   };
   return (
     <div className="space-y-3">
+      <FormField name="version" hidden />
       {(modelTypeFields[modelType] || []).map((fieldKey) => (
         <div key={fieldKey}>{fields[fieldKey]}</div>
       ))}
diff --git a/frontend/src/components/pages/register-model/index.tsx b/frontend/src/components/pages/register-model/index.tsx
index 73931ec64d..e6ef71dd76 100644
--- a/frontend/src/components/pages/register-model/index.tsx
+++ b/frontend/src/components/pages/register-model/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState, FC, useMemo } from 'react';
 import { PanelRightClose, PanelRight } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import request from '@/lib/request';
@@ -11,36 +11,37 @@ import { Button } from '@/components/ui/button';
 import { useI18n } from '@/contexts/i18n-context';
 import { useForm } from '@/hooks/use-form';
 import { cn } from '@/lib/utils';
-import { ModelType } from '@/constants';
+import { ModelType, CUSTOM_MODEL_OPTIONS } from '@/constants';
 import { ModelFormat, REGISTER_MODEL_INIT_DATA } from '@/constants/register';
 import type { ModelPrompts, ModelFamily } from '@/types/services';
+import type { RegisterModelType } from '@/types/common';
 import AutoFill from './auto-fill';
 import FormContent from './form-content';
 import JsonView from './json-view';
 
-type RegisterModelType = Exclude<ModelType, ModelType.Video | ModelType.Custom>;
-
 const getPath = (path: string) => {
   const normalizedPath = (path || '').replace(/\\/g, '/');
   const baseDir = normalizedPath.substring(0, normalizedPath.lastIndexOf('/'));
   const filename = normalizedPath.substring(normalizedPath.lastIndexOf('/') + 1);
   return { baseDir, filename };
 };
-const RegisterModel = () => {
+
+interface RegisterModelProps {
+  modelType: RegisterModelType;
+  modelName?: string;
+}
+const RegisterModel: FC<RegisterModelProps> = ({ modelType, modelName }) => {
+  const isEdit = !!modelName;
+  const isLLM = modelType === ModelType.LLM;
   const [form] = useForm();
   const { t } = useI18n();
   const router = useRouter();
-  const tabs = [
-    { key: ModelType.LLM, label: t('model.languageModels') },
-    { key: ModelType.Embedding, label: t('model.embeddingModels') },
-    { key: ModelType.Rerank, label: t('model.rerankModels') },
-    { key: ModelType.Image, label: t('model.imageModels') },
-    { key: ModelType.Audio, label: t('model.audioModels') },
-    { key: ModelType.Flexible, label: t('model.flexibleModels') },
-  ];
+  const tabs = useMemo(
+    () => CUSTOM_MODEL_OPTIONS.map((item) => ({ value: item.value, label: t(item.labelKey) })),
+    []
+  );
   const [loading, setLoading] = useState(false);
-  const [activeTab, setActiveTab] = useState<RegisterModelType>(ModelType.LLM);
-  const [showJsonPreview, setShowJsonPreview] = useState(false);
+  const [showJsonPreview, setShowJsonPreview] = useState(isEdit || false);
   const [modelPromptsMap, setModelPromptsMap] = useState<ModelPrompts>({});
   const [modelFamilyMap, setModelFamilyMap] = useState<ModelFamily>({});
 
@@ -54,13 +55,11 @@ const RegisterModel = () => {
   };
   const handleJsonView = () => setShowJsonPreview(!showJsonPreview);
   const handleTabChange = (tab: string) => {
-    setActiveTab(tab as RegisterModelType);
-
-    setTimeout(() => form.setFieldsValue(REGISTER_MODEL_INIT_DATA[tab as RegisterModelType]), 0);
+    router.push(`/register-model/${tab}`);
   };
 
   const transformFormValues = (values: Record<string, unknown>) => {
-    let newValues: Record<string, unknown> = { version: 2, ...values };
+    let newValues: Record<string, unknown> = { ...values };
 
     if (Array.isArray(newValues?.model_specs)) {
       newValues.model_specs = newValues.model_specs.map((item: any) => {
@@ -73,7 +72,7 @@ const RegisterModel = () => {
             : Number(modelSizeInBillions);
         }
         // model_file_name_template is the part after the last '/', while model_uri is the part before it.
-        if (item.model_format === ModelFormat.GGUF) {
+        if (item.model_format === ModelFormat.GGUFV2) {
           const { baseDir, filename } = getPath(item.model_uri);
           newItem.model_uri = baseDir;
           newItem.model_file_name_template = filename;
@@ -81,7 +80,7 @@ const RegisterModel = () => {
         return newItem;
       });
     }
-    if (activeTab === ModelType.Audio && typeof newValues.model_ability === 'string') {
+    if (modelType === ModelType.Audio && typeof newValues.model_ability === 'string') {
       newValues.model_ability = [newValues.model_ability];
     }
     return newValues;
@@ -90,11 +89,15 @@ const RegisterModel = () => {
     const data = transformFormValues(values);
     setLoading(true);
     try {
-      await request.post(`/v1/model_registrations/${activeTab}`, {
+      // Edit the registration model logic to first delete and then create
+      if (isEdit) {
+        await request.delete(`/v1/model_registrations/${modelType}/${modelName}`);
+      }
+      await request.post(`/v1/model_registrations/${modelType}`, {
         model: JSON.stringify(data),
         persist: true,
       });
-      router.push('/launch-model');
+      router.push(`/launch-model/custom?activeType=${modelType}`);
     } finally {
       setLoading(false);
     }
@@ -102,10 +105,46 @@ const RegisterModel = () => {
   const onAutoFillBack = (data: Record<string, unknown>) => {
     form.setFieldsValue(data);
   };
+
+  const handleGoBack = () => {
+    router.push(`/launch-model/custom?activeType=${modelType}`);
+  };
   useEffect(() => {
     fetchPrompts();
     fetchFamilies();
   }, []);
+
+  useEffect(() => {
+    if (modelType && modelName) {
+      try {
+        // read the model detail
+        const modelStr = sessionStorage.getItem('customJsonData');
+        if (!modelStr) {
+          router.replace(`/register-model/${modelType}`);
+          return;
+        }
+        let formData = JSON.parse(modelStr);
+        if (formData.model_name !== modelName) {
+          router.replace(`/register-model/${modelType}`);
+          return;
+        }
+
+        if (Array.isArray(formData?.model_specs)) {
+          formData.model_specs = formData.model_specs.map((item: any) => ({
+            ...item,
+            model_size_in_billions:
+              typeof item?.model_size_in_billions === 'string' &&
+              item.model_size_in_billions.includes('_')
+                ? item.model_size_in_billions.replace('_', '.')
+                : item?.model_size_in_billions,
+          }));
+        }
+        form.setFieldsValue(formData);
+      } catch {
+        router.replace(`/register-model/${modelType}`);
+      }
+    }
+  }, [modelType, modelName]);
   return (
     <PageContainer
       title={t('menu.registerModel')}
@@ -128,9 +167,9 @@ const RegisterModel = () => {
         </div>
       }
     >
-      <Form form={form} onFinish={handleSubmit} initialValues={REGISTER_MODEL_INIT_DATA[activeTab]}>
+      <Form form={form} onFinish={handleSubmit} initialValues={REGISTER_MODEL_INIT_DATA[modelType]}>
         <Tabs
-          value={activeTab}
+          value={modelType}
           onValueChange={handleTabChange}
           className="w-full gap-6 overflow-hidden"
         >
@@ -138,27 +177,34 @@ const RegisterModel = () => {
             <div className="flex space-x-4">
               {tabs.map((item) => (
                 <TabsTrigger
-                  value={item.key}
-                  key={item.key}
+                  value={item.value}
+                  key={item.value}
                   className="data-[state=active]:text-primary font-medium data-[state=active]:border-b-2 data-[state=active]:border-primary"
                 >
                   {item.label}
                 </TabsTrigger>
               ))}
             </div>
-            <AutoFill modelFamilyMap={modelFamilyMap} autoFillBack={onAutoFillBack} />
+            {isLLM && <AutoFill modelFamilyMap={modelFamilyMap} autoFillBack={onAutoFillBack} />}
           </TabsList>
-          <TabsContent value={activeTab} className="flex">
+          <TabsContent value={modelType} className="flex px-1 pb-1">
             <div className="flex-1 min-w-0">
               <FormContent
-                modelType={activeTab}
+                modelType={modelType}
                 form={form}
                 modelPromptsMap={modelPromptsMap}
                 modelFamilyMap={modelFamilyMap}
               />
-              <Button className="mt-4" type="submit" loading={loading}>
-                {t('registerModel.registerModel')}
-              </Button>
+              <div className="mt-4 flex items-center gap-2">
+                <Button type="submit" loading={loading}>
+                  {isEdit ? t('common.edit') : t('registerModel.registerModel')}
+                </Button>
+                {isEdit && (
+                  <Button variant="outline" onClick={handleGoBack}>
+                    {t('common.goBack')}
+                  </Button>
+                )}
+              </div>
             </div>
             <div
               className={cn(
diff --git a/frontend/src/components/pages/register-model/json-view.tsx b/frontend/src/components/pages/register-model/json-view.tsx
index 75da3c3af8..2db8c245aa 100644
--- a/frontend/src/components/pages/register-model/json-view.tsx
+++ b/frontend/src/components/pages/register-model/json-view.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import { FC, useMemo } from 'react';
+import { FC, useMemo, MouseEvent } from 'react';
+import { Copy } from 'lucide-react';
 import { useFormValues } from '@/hooks/use-form';
 import { JSONSyntaxHighlighter } from '@/components/ui/json-syntax-highlighter';
 import { FormInstance } from '@/types/form';
+import { copyText } from '@/lib/utils';
 
 interface JsonViewProps {
   form: FormInstance;
@@ -12,12 +14,24 @@ interface JsonViewProps {
 const JsonView: FC<JsonViewProps> = ({ form, transformFormValues }) => {
   const values = useFormValues(form);
   const data = useMemo(() => transformFormValues(values), [values, transformFormValues]);
-
+  const handleCopy = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const str = JSON.stringify(data, null, 2);
+    copyText(str);
+  };
   return (
-    <JSONSyntaxHighlighter
-      className="whitespace-pre-wrap break-words overflow-x-hidden"
-      data={data}
-    />
+    <div className="relative">
+      <button
+        className="absolute right-2 top-2 p-1 text-muted-foreground transition-colors hover:text-foreground"
+        onClick={handleCopy}
+      >
+        <Copy className="size-4" />
+      </button>
+      <JSONSyntaxHighlighter
+        className="whitespace-pre-wrap break-words overflow-x-hidden"
+        data={data}
+      />
+    </div>
   );
 };
 export default JsonView;
diff --git a/frontend/src/components/pages/register-model/model-specs.tsx b/frontend/src/components/pages/register-model/model-specs.tsx
index f8532c36a7..34ad0fe9a6 100644
--- a/frontend/src/components/pages/register-model/model-specs.tsx
+++ b/frontend/src/components/pages/register-model/model-specs.tsx
@@ -63,7 +63,7 @@ const ModelSpecs: FC<ModelSpecsProps> = ({ modelType, form }) => {
                     rules={[
                       { required: true },
                       // GGUF model path must start with "/" and contain at least two "/" separators.
-                      ...(modelFormat && modelFormat === ModelFormat.GGUF
+                      ...(modelFormat && modelFormat === ModelFormat.GGUFV2
                         ? [
                             {
                               pattern: /^\/[^/]+(\/[^/]*)+$/,
@@ -92,15 +92,17 @@ const ModelSpecs: FC<ModelSpecsProps> = ({ modelType, form }) => {
                     </FormField>
                   )}
 
-                  {modelFormat && modelFormat !== ModelFormat.PyTorch && (
+                  {modelFormat && modelFormat !== ModelFormat.PyTorch ? (
                     <FormField
                       name={['model_specs', field.name, 'quantization']}
                       label={t('registerModel.quantization')}
-                      rules={[{ required: modelFormat !== ModelFormat.GGUF }]}
+                      rules={[{ required: modelFormat !== ModelFormat.GGUFV2 }]}
                       extra={t('registerModel.carefulQuantizationForModelRegistration')}
                     >
                       <Input />
                     </FormField>
+                  ) : (
+                    <FormField hidden name={['model_specs', field.name, 'quantization']} />
                   )}
                 </div>
                 {fields.length !== 1 && (
diff --git a/frontend/src/components/pages/register-model/utils.tsx b/frontend/src/components/pages/register-model/utils.tsx
new file mode 100644
index 0000000000..591ef17632
--- /dev/null
+++ b/frontend/src/components/pages/register-model/utils.tsx
@@ -0,0 +1,8 @@
+import { RegisterModelType } from '@/types/common';
+import { CUSTOM_MODEL_OPTIONS, ModelType } from '@/constants';
+
+export function getRigisterModelTyps(value: string): RegisterModelType {
+  const matched = CUSTOM_MODEL_OPTIONS.find((item) => item.value === value);
+
+  return (matched?.value || ModelType.LLM) as RegisterModelType;
+}
diff --git a/frontend/src/components/pages/running-model/index.tsx b/frontend/src/components/pages/running-model/index.tsx
new file mode 100644
index 0000000000..8c2473661b
--- /dev/null
+++ b/frontend/src/components/pages/running-model/index.tsx
@@ -0,0 +1,373 @@
+'use client';
+
+import { type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Loader2,
+  MousePointerClick,
+  SearchX,
+  ServerOff,
+  Trash2,
+  MessageCircleMore,
+  Cpu,
+  Server,
+} from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import PageContainer from '@/components/ui/page-container';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { useI18n } from '@/contexts/i18n-context';
+import type { RunningModelItem, ReplicaItem } from '@/types/services';
+import request from '@/lib/request';
+import { cn } from '@/lib/utils';
+
+interface EmptyStateProps {
+  icon: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  loading?: boolean;
+}
+
+const EmptyState = ({ icon, title, description, loading = false }: EmptyStateProps) => (
+  <div className="flex min-h-72 flex-1 flex-col items-center justify-center px-6 py-10 text-center">
+    {loading ? (
+      <Loader2 className="size-7 animate-spin text-muted-foreground mb-2" />
+    ) : (
+      <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70">
+        {icon}
+      </div>
+    )}
+
+    <p className="text-sm font-medium text-foreground">{title}</p>
+    {description && <p className="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>}
+  </div>
+);
+interface ContentItemInfoProps {
+  title: React.ReactNode;
+  value: React.ReactNode;
+}
+const ContentItemInfo = ({ title, value }: ContentItemInfoProps) => {
+  return (
+    <div className="p-3 rounded-lg bg-muted/50">
+      <div className="text-xs text-muted-foreground">{title}</div>
+      <div className="font-medium mt-1.5">{value}</div>
+    </div>
+  );
+};
+
+const RunningModel = () => {
+  const { t } = useI18n();
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [query, setQuery] = useState('');
+  const [models, setModels] = useState<RunningModelItem[]>([]);
+  const [activeModel, setActiveModel] = useState<RunningModelItem | undefined>(undefined);
+  const [replicaLogs, setReplicaLogs] = useState<Record<string, ReplicaItem[]>>({});
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [deleteConfirmLoading, setDeleteConfirmLoading] = useState(false);
+  const [deleteReplicaId, setDeleteReplicaId] = useState<string | undefined>(undefined);
+  const [deleteReplicaLoading, setDeleteReplicaLoading] = useState(false);
+  const visibleModels = useMemo(() => {
+    const keyword = query.trim().toLowerCase();
+
+    const filteredModels = models.filter((model) => {
+      const matchesKeyword =
+        !keyword ||
+        model.model_name.toLowerCase().includes(keyword) ||
+        model.id.toLowerCase().includes(keyword);
+      return matchesKeyword;
+    });
+
+    return filteredModels;
+  }, [models, query]);
+
+  const fetchModels = useCallback(() => {
+    setLoading(true);
+    request
+      .get('/v1/models')
+      .then((res) => {
+        const list = (res?.data || []) as RunningModelItem[];
+        setModels(list);
+        setActiveModel((prev) => {
+          if (!prev) {
+            return list?.[0];
+          }
+          const current = list.find(
+            (item) => item.id === prev.id
+          );
+      
+          return current ?? list?.[0];
+        });
+      })
+      .catch(() => setModels([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const fetchReplicas = useCallback((modelUid: string) => {
+    request.get(`/v1/models/${modelUid}/replicas`).then((res) => {
+      setReplicaLogs((prev) => ({
+        ...prev,
+        [modelUid]: Array.isArray(res) ? res : [],
+      }));
+    });
+  }, []);
+  const handleDeleteModel = () => {
+    if (!activeModel) return;
+    setDeleteConfirmLoading(true);
+    request
+      .delete(`/v1/models/${activeModel?.id}`)
+      .then(() => {
+        setDeleteConfirmOpen(false);
+        setActiveModel(undefined);
+        setReplicaLogs((prev) => {
+          const next = { ...prev };
+          delete next[activeModel.id];
+          return next;
+        });
+        fetchModels();
+      })
+      .finally(() => {
+        setDeleteConfirmLoading(false);
+      });
+  };
+  const handleDeleteReplica = () => {
+    if (!activeModel || !deleteReplicaId) return;
+    setDeleteReplicaLoading(true);
+    request
+      .delete(`/v1/models/${activeModel.id}/replicas/${deleteReplicaId}`)
+      .then((res) => {
+        setDeleteReplicaId(undefined);
+        if (res?.remaining_replicas > 0) {
+          fetchReplicas(activeModel.id);
+        }
+        fetchModels();
+      })
+      .finally(() => {
+        setDeleteReplicaLoading(false);
+      });
+  };
+
+  const renderModelCardList = () => {
+    if (loading) {
+      return (
+        <EmptyState
+          loading
+          icon={null}
+          title="Loading models..."
+          description="Fetching the latest running model list."
+        />
+      );
+    }
+    if (!models.length) {
+      return (
+        <EmptyState
+          icon={<ServerOff className="size-7" />}
+          title="No running models"
+          description="Please launch a model first"
+        />
+      );
+    }
+    if (!visibleModels.length) {
+      return (
+        <EmptyState
+          icon={<SearchX className="size-7" />}
+          title="No models found"
+          description="Try changing your search keywords."
+        />
+      );
+    }
+    return visibleModels.map((model) => (
+      <div
+        key={model.id}
+        className={cn(
+          'relative p-4 border border-border/50 rounded-xl flex items-start justify-between gap-1 cursor-pointer transition-colors hover:bg-accent',
+          activeModel?.id === model.id && 'bg-primary/10 text-primary border-primary/50'
+        )}
+        onClick={() => setActiveModel(model)}
+      >
+        <div className="flex-1 min-w-0">
+          <h4 className="mb-1 font-semibold truncate">{model.id}</h4>
+          <div className="text-muted-foreground text-xs truncate">{model.model_name}</div>
+        </div>
+        <button className="shrink-0 rounded-full border border-primary/20 bg-primary/5 text-primary px-3 py-1 text-xs font-medium text-muted-foreground">
+          {model.model_type}
+        </button>
+      </div>
+    ));
+  };
+  const renderModelContent = () => {
+    if (!activeModel) {
+      return (
+        <EmptyState
+          icon={<MousePointerClick className="size-7" />}
+          title="Select a model"
+          description="Click an item in the left list to view details."
+        />
+      );
+    }
+
+    return (
+      <>
+        <div className="p-6 flex items-start justify-between border-b">
+          <div className="flex-1 min-w-0">
+            <h4 className="mb-1 font-semibold truncate">{activeModel?.id}</h4>
+            <div className="text-muted-foreground text-xs truncate">{activeModel?.model_name}</div>
+          </div>
+          <div className="shrink-0 flex item-center gap-2">
+            {/* <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={() => router.push('/running-model')}
+              className="h-8 text-muted-foreground"
+            >
+              <MessageCircleMore />
+            </Button> */}
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={() => setDeleteConfirmOpen(true)}
+              className="h-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/50"
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        </div>
+        <div className="p-6 space-y-3 overflow-y-auto">
+          <h3 className="font-medium">{t('runningModels.baseInfo')}</h3>
+          <div className="grid grid-cols-2 gap-4">
+            <ContentItemInfo title={t('runningModels.modelType')} value={activeModel.model_type} />
+            <ContentItemInfo
+              title={t('runningModels.modelFormat')}
+              value={activeModel.model_format}
+            />
+            {'model_size_in_billions' in activeModel && (
+              <ContentItemInfo
+                title={t('runningModels.modelSize')}
+                value={activeModel.model_size_in_billions ?? '-'}
+              />
+            )}
+
+            <ContentItemInfo
+              title={t('runningModels.quantization')}
+              value={activeModel.quantization}
+            />
+          </div>
+          <h3 className="font-medium">{t('runningModels.resources')}</h3>
+          <div className="grid grid-cols-2 gap-4">
+            <ContentItemInfo title={t('runningModels.workerAddress')} value={activeModel.address} />
+            <ContentItemInfo
+              title={t('runningModels.gpuIndexes')}
+              value={
+                Array.isArray(activeModel?.accelerators) ? (
+                  <div className="flex gap-1 text-xs">
+                    {activeModel.accelerators.map((item) => (
+                      <span
+                        key={item}
+                        className="flex items-center gap-1 rounded-full border border-primary/20 bg-primary/5 py-0.5 px-1 text-primary"
+                      >
+                        <Cpu className="size-3" />
+                        GPU {item}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  '-'
+                )
+              }
+            />
+          </div>
+          <h3 className="font-medium">{t('runningModels.replicaDetail')}</h3>
+          {(replicaLogs?.[activeModel.id] || []).map((replica) => (
+            <div key={replica.replica_model_uid} className="p-3 rounded-lg border">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Server size={16} className="text-muted-foreground" />
+                  <span className="font-mono">{replica.replica_model_uid}</span>
+                  <div
+                    className={cn(
+                      'rounded-md border px-2 py-1 text-xs font-medium leading-none',
+                      replica.status === 'READY'
+                        ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300'
+                        : replica.status === 'ERROR'
+                          ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300'
+                          : 'border-border bg-muted/40 text-muted-foreground'
+                    )}
+                  >
+                    {replica.status}
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="shrink-0 h-8 w-8 rounded-full text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                  onClick={() => setDeleteReplicaId(String(replica.replica_id))}
+                >
+                  <Trash2 />
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground mt-2">
+                {t('runningModels.workerAddress')}: {replica.worker_address}
+              </p>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  };
+  useEffect(() => {
+    if (activeModel && !replicaLogs[activeModel.id]) {
+      fetchReplicas(activeModel.id);
+    }
+  }, [activeModel, fetchReplicas, replicaLogs]);
+  useEffect(() => fetchModels(), [fetchModels]);
+
+  return (
+    <PageContainer title={t('menu.runningModels')}>
+      <div className="flex gap-6 h-[calc(100vh-130px)]">
+        <div className="w-80 rounded-xl bg-card text-card-foreground shadow-sm shrink-0 border border-border flex flex-col overflow-hidden overflow-y-auto">
+          <div className="px-4 pt-6 pb-2 shrink-0">
+            <Input
+              placeholder={t('runningModels.searchPlaceholder')}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          </div>
+          <div className="flex flex-1 flex-col gap-2 p-4 overflow-y-auto">
+            {renderModelCardList()}
+          </div>
+        </div>
+        <div className="rounded-2xl bg-card text-card-foreground shadow-sm flex-1 border border-border flex flex-col min-w-0 overflow-hidden">
+          {renderModelContent()}
+        </div>
+      </div>
+      <ConfirmDialog
+        isOpen={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
+        description={t('runningModels.terminateConfirmBody', {
+          name: activeModel?.model_name,
+          replica: activeModel?.replica,
+        })}
+        confirmText={t('runningModels.terminateConfirmOk')}
+        confirmClassName="bg-destructive  hover:bg-destructive/90"
+        onConfirm={handleDeleteModel}
+        isLoading={deleteConfirmLoading}
+      />
+      <ConfirmDialog
+        isOpen={!!deleteReplicaId}
+        onOpenChange={(open) => {
+          if (!open) setDeleteReplicaId(undefined);
+        }}
+        description={t('runningModels.removeReplicaConfirm', {
+          modelUid: activeModel?.id,
+          replicaId: deleteReplicaId,
+        })}
+        confirmClassName="bg-destructive  hover:bg-destructive/90"
+        onConfirm={handleDeleteReplica}
+        isLoading={deleteReplicaLoading}
+      />
+    </PageContainer>
+  );
+};
+export default RunningModel;
diff --git a/frontend/src/components/ui/auto-complete.tsx b/frontend/src/components/ui/auto-complete.tsx
index 47472db72e..69a26c8b71 100644
--- a/frontend/src/components/ui/auto-complete.tsx
+++ b/frontend/src/components/ui/auto-complete.tsx
@@ -1,99 +1,114 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
+import * as React from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import { Check, ChevronDown, X } from "lucide-react"
+import { Check, ChevronDown, X } from 'lucide-react';
 
-import { cn } from "@/lib/utils"
-import { useI18n } from "@/contexts/i18n-context"
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/contexts/i18n-context';
 
 export interface AutoCompleteOption {
-  label: string
-  value: string
-  description?: string
+  label: string;
+  value: string;
+  description?: string;
 }
 
 interface AutoCompleteProps {
-  value?: string
-  onChange?: (value?: string) => void
+  value?: string;
+  onChange?: (value?: string) => void;
 
-  options?: AutoCompleteOption[]
+  options?: AutoCompleteOption[];
 
-  placeholder?: string
-  className?: string
+  optionsTips?: React.ReactNode;
 
-  disabled?: boolean
-  error?: boolean
+  placeholder?: string;
 
-  allowClear?: boolean
+  className?: string;
+
+  disabled?: boolean;
+
+  error?: boolean;
+
+  allowClear?: boolean;
 
   /**
    * Whether to allow entering values not in options
    */
-  allowCustomValue?: boolean
+  allowCustomValue?: boolean;
 
   /**
    * Text to display when there is no data
    */
-  emptyText?: string
+  emptyText?: string;
 }
 
 export function AutoComplete({
   value,
-  onChange,
-
   options = [],
-
+  optionsTips,
   placeholder,
   className,
-
   disabled,
   error,
-
   allowClear = true,
-
   allowCustomValue = true,
-
   emptyText,
+  onChange,
 }: AutoCompleteProps) {
-  const { t } = useI18n()
+  const { t } = useI18n();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const triggerRef = useRef<HTMLDivElement>(null);
 
-  const containerRef =
-    useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const inputRef =
-    useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
 
-  const [inputValue, setInputValue] =
-    useState("")
+  const [dropdownDirection, setDropdownDirection] = useState<'down' | 'up'>('down');
+
+  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>();
+
+  const [inputValue, setInputValue] = useState('');
 
   /**
    * Whether the user is currently typing
    */
-  const [typing, setTyping] = useState(false)
+  const [typing, setTyping] = useState(false);
 
   const selectedOption = useMemo(() => {
-    return options.find(
-      (option) => option.value === value
-    )
-  }, [options, value])
+    return options.find((option) => option.value === value);
+  }, [options, value]);
 
   /**
    * Sync input when value changes
    */
   useEffect(() => {
     if (!typing) {
-      setInputValue(selectedOption?.label || value || "")
+      setInputValue(selectedOption?.label || value || '');
     }
-  }, [selectedOption, value, typing])
+  }, [selectedOption, value, typing]);
+
+  const updateDropdownPosition = React.useCallback(() => {
+    if (!triggerRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - triggerRect.bottom - 50;
+    const spaceAbove = triggerRect.top - 50;
+    const direction = spaceBelow < 200 && spaceAbove > spaceBelow ? 'up' : 'down';
+
+    setDropdownDirection(direction);
+    setDropdownStyle({
+      left: triggerRect.left,
+      top: direction === 'down' ? triggerRect.bottom + 4 : triggerRect.top - 4,
+      width: triggerRect.width,
+      transform: direction === 'up' ? 'translateY(-100%)' : undefined,
+    });
+  }, []);
 
   const handleBlurBehavior = React.useCallback(() => {
     setOpen(false)
@@ -125,112 +140,116 @@ export function AutoComplete({
    * Close when clicking outside
    */
   useEffect(() => {
-    const handleClickOutside = (
-      event: MouseEvent
-    ) => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+
       if (
         containerRef.current &&
-        !containerRef.current.contains(
-          event.target as Node
-        )
+        !containerRef.current.contains(target) &&
+        !dropdownRef.current?.contains(target)
       ) {
-        if (
-          inputRef.current &&
-          document.activeElement ===
-          inputRef.current
-        ) {
-          inputRef.current.blur()
+        if (inputRef.current && document.activeElement === inputRef.current) {
+          inputRef.current.blur();
         } else {
-          handleBlurBehavior()
+          handleBlurBehavior();
         }
       }
-    }
+    };
 
     if (open) {
-      document.addEventListener(
-        "mousedown",
-        handleClickOutside
-      )
+      document.addEventListener('mousedown', handleClickOutside);
     }
 
     return () => {
-      document.removeEventListener(
-        "mousedown",
-        handleClickOutside
-      )
-    }
-  }, [handleBlurBehavior, open])
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleBlurBehavior, open]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    updateDropdownPosition();
+    window.addEventListener('resize', updateDropdownPosition);
+    window.addEventListener('scroll', updateDropdownPosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updateDropdownPosition);
+      window.removeEventListener('scroll', updateDropdownPosition, true);
+    };
+  }, [open, updateDropdownPosition]);
+
+  useEffect(() => {
+    const dropdown = dropdownRef.current;
+
+    if (!dropdown) return;
+
+    const stopScrollPropagation = (event: Event) => event.stopPropagation();
+
+    dropdown.addEventListener('wheel', stopScrollPropagation);
+    dropdown.addEventListener('touchmove', stopScrollPropagation);
+
+    return () => {
+      dropdown.removeEventListener('wheel', stopScrollPropagation);
+      dropdown.removeEventListener('touchmove', stopScrollPropagation);
+    };
+  }, [open, dropdownStyle]);
 
   const filteredOptions = useMemo(() => {
-    const keyword =
-      inputValue.trim().toLowerCase()
+    const keyword = inputValue.trim().toLowerCase();
 
     if (!keyword) {
-      return options
+      return options;
     }
 
     return options.filter((option) => {
       return (
-        option.label
-          .toLowerCase()
-          .includes(keyword) ||
-        option.value
-          .toLowerCase()
-          .includes(keyword) ||
-        option.description
-          ?.toLowerCase()
-          .includes(keyword)
-      )
-    })
-  }, [options, inputValue])
-
-  const handleSelect = (
-    option: AutoCompleteOption
-  ) => {
-    onChange?.(option.value)
-
-    setInputValue(option.label)
+        option.label.toLowerCase().includes(keyword) ||
+        option.value.toLowerCase().includes(keyword) ||
+        option.description?.toLowerCase().includes(keyword)
+      );
+    });
+  }, [options, inputValue]);
 
-    setTyping(false)
-    setOpen(false)
-  }
+  const handleSelect = (option: AutoCompleteOption) => {
+    onChange?.(option.value);
 
-  const handleClear = (
-    e: React.MouseEvent
-  ) => {
-    e.stopPropagation()
+    setInputValue(option.label);
 
-    if (disabled) return
+    setTyping(false);
+    setOpen(false);
+  };
 
-    setInputValue("")
-    setTyping(false)
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
 
-    onChange?.(undefined)
+    if (disabled) return;
 
-    inputRef.current?.focus()
-  }
+    setInputValue('');
+    setTyping(false);
+
+    onChange?.(undefined);
+
+    inputRef.current?.focus();
+  };
 
   return (
-    <div
-      ref={containerRef}
-      className={cn("relative", className)}
-    >
+    <div ref={containerRef} className={cn('relative', className)}>
       <div
+        ref={triggerRef}
         className={cn(
-          "border-input flex h-9 w-full items-center rounded-md border bg-transparent px-3 py-1 text-sm outline-none transition-all",
+          'border-input flex h-9 w-full items-center rounded-md border bg-transparent px-3 py-1 text-sm outline-none transition-all',
 
-          "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+          'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
 
           error &&
-            "border-destructive focus-within:border-destructive focus-within:ring-destructive/40",
+            'border-destructive focus-within:border-destructive focus-within:ring-destructive/40',
 
-          disabled &&
-            "cursor-not-allowed opacity-50"
+          disabled && 'cursor-not-allowed opacity-50'
         )}
         onClick={() => {
-          if (disabled) return
+          if (disabled) return;
 
-          inputRef.current?.focus()
+          inputRef.current?.focus();
         }}
       >
         <input
@@ -239,55 +258,56 @@ export function AutoComplete({
           disabled={disabled}
           placeholder={placeholder}
           className={cn(
-            "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
-            disabled &&
-              "cursor-not-allowed"
+            'flex-1 bg-transparent outline-none placeholder:text-muted-foreground',
+            disabled && 'cursor-not-allowed'
           )}
           onFocus={() => {
-            if (disabled) return
+            if (disabled) return;
 
-            setOpen(true)
+            setOpen(true);
           }}
           onBlur={handleBlurBehavior}
           onChange={(e) => {
-            if (disabled) return
+            if (disabled) return;
+
+            const nextValue = e.target.value;
 
-            setTyping(true)
-            setInputValue(e.target.value)
+            setTyping(true);
+            setInputValue(nextValue);
+
+            if (allowCustomValue) {
+              onChange?.(nextValue || undefined);
+            }
 
             if (!open) {
-              setOpen(true)
+              setOpen(true);
             }
           }}
           onKeyDown={(e) => {
-            if (disabled) return
-            console.log(e.key, 'key')
+            if (disabled) return;
             /**
              * Tab
              */
-            if (e.key === "Tab") {
-              setOpen(false)
+            if (e.key === 'Tab') {
+              setOpen(false);
             }
 
             /**
              * Enter:
              * allowCustomValue=true submit value
              */
-            if (
-              e.key === "Enter" &&
-              allowCustomValue
-            ) {
-              e.preventDefault()
+            if (e.key === 'Enter' && allowCustomValue) {
+              e.preventDefault();
 
-              inputRef.current?.blur()
+              inputRef.current?.blur();
             }
 
             /**
              * ESC
              */
-            if (e.key === "Escape") {
-              setOpen(false)
-              inputRef.current?.blur()
+            if (e.key === 'Escape') {
+              setOpen(false);
+              inputRef.current?.blur();
             }
           }}
         />
@@ -298,78 +318,84 @@ export function AutoComplete({
             disabled={disabled}
             onClick={handleClear}
             className={cn(
-              "ml-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors",
+              'ml-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors',
 
-              !disabled &&
-                "hover:bg-muted hover:text-foreground"
+              !disabled && 'hover:bg-muted hover:text-foreground'
             )}
           >
             <X className="h-4 w-4" />
           </button>
-        ) : (
+        ) : !allowCustomValue ? (
           <ChevronDown
             className={cn(
-              "ml-2 h-4 w-4 shrink-0 text-muted-foreground transition-transform",
-              open && "rotate-180"
+              'ml-2 h-4 w-4 shrink-0 text-muted-foreground transition-transform',
+              open && 'rotate-180'
             )}
           />
-        )}
+        ) : null}
       </div>
 
-      {open && (
-        <div className="absolute top-full left-0 right-0 z-[9999] mt-1 overflow-hidden rounded-md border border-border bg-popover shadow-lg">
-          <div className="max-h-60 overflow-auto">
-            {filteredOptions.length === 0 ? (
-              <div className="py-10 text-center text-sm text-muted-foreground">
-                {emptyText ||
-                  t("common.noOptions")}
-              </div>
-            ) : (
-              filteredOptions.map((option) => {
-                const active =
-                  value === option.value
-
-                return (
-                  <button
-                    key={option.value}
-                    type="button"
-                    className={cn(
-                      "flex w-full items-start justify-between gap-2 border-b border-border px-3 py-2 text-left text-sm transition-colors last:border-b-0",
-
-                      "hover:bg-accent hover:text-accent-foreground",
-
-                      active &&
-                        "bg-accent text-accent-foreground"
-                    )}
-                    onMouseDown={(e) => {
-                      e.preventDefault()
-                    }}
-                    onClick={() =>
-                      handleSelect(option)
-                    }
-                  >
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate font-medium">
-                        {option.label}
-                      </div>
-
-                      {option.description && (
-                        <div className="mt-1 truncate text-xs text-muted-foreground">
-                          {option.description}
-                        </div>
-                      )}
-                    </div>
-
-                    {active && (
-                      <Check className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
-                    )}
-                  </button>
-                )
-              })
+      {open &&
+        dropdownStyle &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            data-slot="auto-complete-dropdown"
+            style={dropdownStyle}
+            className={cn(
+              'pointer-events-auto fixed z-[9999] overflow-hidden rounded-md border border-border bg-popover shadow-lg',
+              dropdownDirection === 'up' && 'origin-bottom'
             )}
-          </div>
-        </div>
-      )}
+          >
+            <div className="max-h-60 overflow-auto">
+              {filteredOptions.length === 0 ? (
+                <div className="py-10 text-center text-sm text-muted-foreground">
+                  {emptyText || t('common.noOptions')}
+                </div>
+              ) : (
+                <>
+                  {!!optionsTips && (
+                    <div className="px-3 py-2 text-muted-foreground">{optionsTips}</div>
+                  )}
+                  {filteredOptions.map((option) => {
+                    const active = value === option.value;
+
+                    return (
+                      <button
+                        key={option.value}
+                        type="button"
+                        className={cn(
+                          'flex w-full items-start justify-between gap-2 border-b border-border px-3 py-2 text-left text-sm transition-colors last:border-b-0',
+
+                          'hover:bg-accent hover:text-accent-foreground',
+
+                          active && 'bg-accent text-accent-foreground'
+                        )}
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                        }}
+                        onClick={() => handleSelect(option)}
+                      >
+                        <div className="min-w-0 flex-1">
+                          <div className="truncate font-medium">{option.label}</div>
+
+                          {option.description && (
+                            <div className="mt-1 truncate text-xs text-muted-foreground">
+                              {option.description}
+                            </div>
+                          )}
+                        </div>
+
+                        {active && <Check className="mt-0.5 h-4 w-4 shrink-0 text-primary" />}
+                      </button>
+                    );
+                  })}
+                </>
+              )}
+            </div>
+          </div>,
+          document.body
+        )}
     </div>
-  )
+  );
 }
diff --git a/frontend/src/components/ui/collapsible.tsx b/frontend/src/components/ui/collapsible.tsx
index b60be650ea..16581fdee5 100644
--- a/frontend/src/components/ui/collapsible.tsx
+++ b/frontend/src/components/ui/collapsible.tsx
@@ -1,12 +1,82 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { ChevronDown } from 'lucide-react';
 
-const Collapsible = CollapsiblePrimitive.Root
+import { cn } from '@/lib/utils';
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
+  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;
+}
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+function CollapsibleContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      className={cn('collapsible-content overflow-hidden', className)}
+      {...props}
+    />
+  );
+}
+
+interface CollapsiblePanelProps extends Omit<
+  React.ComponentProps<typeof CollapsiblePrimitive.Root>,
+  'title'
+> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  contentClassName?: string;
+}
+
+function CollapsiblePanel({
+  title,
+  description,
+  icon,
+  children,
+  className,
+  contentClassName,
+  ...props
+}: CollapsiblePanelProps) {
+  return (
+    <Collapsible
+      className={cn('group overflow-hidden rounded-xl border bg-card duration-300', className)}
+      {...props}
+    >
+      <CollapsibleTrigger className="flex w-full items-center gap-3 px-4 py-3 text-left outline-none transition-colors duration-300 hover:bg-accent/60 ">
+        {icon && (
+          // <span className="shrink-0 flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <span className="shrink-0">{icon}</span>
+        )}
+        <span className="min-w-0 flex-1">
+          <span className="block font-medium text-foreground">{title}</span>
+          {description && (
+            <span className="mt-1 block text-sm leading-5 text-muted-foreground">
+              {description}
+            </span>
+          )}
+        </span>
+        <span className="flex shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors duration-300">
+          <ChevronDown className="size-4 transition-transform duration-300 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent forceMount>
+        <div className={cn('border-t border-border/70 p-4 text-sm leading-6', contentClassName)}>
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export { Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger };
diff --git a/frontend/src/components/ui/confirm-dialog.tsx b/frontend/src/components/ui/confirm-dialog.tsx
index 9d0384680e..5c12e945e2 100644
--- a/frontend/src/components/ui/confirm-dialog.tsx
+++ b/frontend/src/components/ui/confirm-dialog.tsx
@@ -19,6 +19,7 @@ interface ConfirmDialogProps {
   title?: string
   description?: string
   confirmText?: string
+  confirmClassName?: string
   cancelText?: string
   isLoading?: boolean
 }
@@ -30,6 +31,7 @@ export function ConfirmDialog({
   title,
   description,
   confirmText,
+  confirmClassName,
   cancelText,
   isLoading = false,
 }: ConfirmDialogProps) {
@@ -52,6 +54,7 @@ export function ConfirmDialog({
               if (!isLoading) onConfirm()
             }}
             disabled={isLoading}
+            className={confirmClassName}
           >
             {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
             {confirmText || t("common.confirm")}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index af48d32e6b..6ac84ff623 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -101,6 +101,12 @@ function DialogContent({
         onPointerDownOutside={(event) => {
           onPointerDownOutside?.(event)
 
+          if ((event.target as Element | null)?.closest?.('[data-slot="select-dropdown"]')) {
+            event.preventDefault()
+
+            return
+          }
+
           if (!maskClosable) {
             event.preventDefault()
           }
@@ -109,7 +115,10 @@ function DialogContent({
       >
         {headerChildren}
         {bodyChildren.length > 0 && (
-          <div data-slot="dialog-body" className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden pr-2">
+          <div
+            data-slot="dialog-body"
+            className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden py-1 pl-1 pr-3"
+          >
             {bodyChildren}
           </div>
         )}
diff --git a/frontend/src/components/ui/form-field.tsx b/frontend/src/components/ui/form-field.tsx
index 03ba0da791..7d12046aaf 100644
--- a/frontend/src/components/ui/form-field.tsx
+++ b/frontend/src/components/ui/form-field.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/contexts/i18n-context';
 import { getNamePathString } from '@/lib/form';
+import { InfoTooltip } from '@/components/ui/tooltip';
 import type { BaseFormFieldProps, FormFieldProps } from '@/types/form';
 import { useFormContext } from './form';
 
@@ -50,6 +51,7 @@ function getDefaultValue(value: any, valuePropName: string) {
 
 function FormField({
   name,
+  hidden = false,
   label,
   extra,
   rules,
@@ -59,6 +61,7 @@ function FormField({
   valuePropName = 'value',
   layout = 'vertical',
   className,
+  tooltip,
   normalize,
 }: FormFieldProps) {
   const { t } = useI18n();
@@ -132,6 +135,14 @@ function FormField({
     };
   }, [form, fieldKey, registerField, unregisterField]);
 
+  if (hidden) {
+    return null;
+  }
+
+  if (!children) {
+    throw new Error('FormField requires children unless hidden is true');
+  }
+
   const handleChange = (nextValueOrEvent: any, ...args: any[]) => {
     const rawValue = nextValueOrEvent?.target ? nextValueOrEvent.target.value : nextValueOrEvent;
 
@@ -179,10 +190,10 @@ function FormField({
         )}
       >
         {label && (
-          <label className={cn('text-sm font-medium', layout === 'horizontal' && 'shrink-0')}>
+          <label className={cn('text-sm font-medium flex items-center gap-1', layout === 'horizontal' && 'shrink-0')}>
             {label}
-
-            {isRequired && <span className="ml-1 text-destructive">*</span>}
+            {!!tooltip && <InfoTooltip content={tooltip} />}
+            {isRequired && <span className="text-destructive">*</span>}
           </label>
         )}
 
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
index f14dc14937..164b34ece0 100644
--- a/frontend/src/components/ui/form.tsx
+++ b/frontend/src/components/ui/form.tsx
@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { getNamePathString } from '@/lib/form';
-import { FieldName, FormInstance, FormContextType } from '@/types/form';
+import { cn } from '@/lib/utils';
+import { FieldName, FormInstance, FormContextType, FormValues } from '@/types/form';
 
 const FormContext = React.createContext<FormContextType | null>(null);
 
@@ -16,25 +17,27 @@ export function useFormContext() {
   return context;
 }
 
-interface FormProps {
+interface FormProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {
   form: FormInstance;
 
-  initialValues?: Record<string, any>;
+  initialValues?: Record<string, unknown>;
 
-  children: React.ReactNode;
-
-  onFinish?: (values: Record<string, any>) => void;
+  onFinish?: (values: FormValues) => void;
 }
 
-export function Form({ form, initialValues, children, onFinish }: FormProps) {
+export function Form({ form, initialValues, children, onFinish, className, ...props }: FormProps) {
   const [, forceUpdate] = React.useState({});
 
   const [errors, setErrors] = React.useState<Record<string, string>>({});
 
   const [touched, setTouched] = React.useState<Record<string, boolean>>({});
 
+  const touchedRef = React.useRef(touched);
+
   const validatorsRef = React.useRef<Record<string, () => string>>({});
 
+  touchedRef.current = touched;
+
   // Keep initial values as a template; visible fields pull from it when they mount.
   if (initialValues && form.initialValues.current !== initialValues) {
     form.initialValues.current = initialValues;
@@ -43,6 +46,35 @@ export function Form({ form, initialValues, children, onFinish }: FormProps) {
   React.useEffect(() => {
     return form.subscribe(() => {
       forceUpdate({});
+
+      setErrors((prev) => {
+        const next = { ...prev };
+
+        Object.keys(touchedRef.current).forEach((name) => {
+          const validate = validatorsRef.current[name];
+
+          if (!validate) return;
+
+          const error = validate();
+
+          if (error) {
+            next[name] = error;
+          } else {
+            delete next[name];
+          }
+        });
+
+        const keys = Object.keys(next);
+
+        if (
+          keys.length === Object.keys(prev).length &&
+          keys.every((name) => next[name] === prev[name])
+        ) {
+          return prev;
+        }
+
+        return next;
+      });
     });
   }, [form]);
 
@@ -194,7 +226,7 @@ export function Form({ form, initialValues, children, onFinish }: FormProps) {
         unregisterField,
       }}
     >
-      <form onSubmit={handleSubmit} className="space-y-3">
+      <form {...props} onSubmit={handleSubmit} className={cn('space-y-3', className)}>
         {children}
       </form>
     </FormContext.Provider>
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index c4980d95ae..1e0140c903 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -19,6 +19,7 @@ function Input({
       data-slot="input"
       className={cn(
         "border-input flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm outline-none transition-all",
+        "placeholder:text-muted-foreground",
 
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 
@@ -33,4 +34,4 @@ function Input({
   );
 }
 
-export { Input };
\ No newline at end of file
+export { Input };
diff --git a/frontend/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx
index 93e5a0d070..d338abdebf 100644
--- a/frontend/src/components/ui/radio-group.tsx
+++ b/frontend/src/components/ui/radio-group.tsx
@@ -7,9 +7,11 @@ import { Circle } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
 
+export type RadioValue = string | boolean
+
 export interface RadioOption {
   label: React.ReactNode
-  value: string
+  value: RadioValue
   disabled?: boolean
 }
 
@@ -26,12 +28,13 @@ export interface RadioGroupProps
     React.ComponentPropsWithoutRef<
       typeof RadioGroupPrimitive.Root
     >,
-    'onValueChange' | 'onChange'
+    'onValueChange' | 'onChange' | 'value'
   > {
   options?: RadioOption[]
+  value?: RadioValue
   error?: boolean
   direction?: 'horizontal' | 'vertical'
-  onChange?: (value: string) => void
+  onChange?: (value: RadioValue) => void
   renderLabel?: (
     option: RadioOption,
     checked: boolean,
@@ -116,9 +119,21 @@ export const RadioGroup = React.forwardRef<
     return (
       <RadioGroupPrimitive.Root
         ref={ref}
-        value={value}
+        value={
+          value === undefined
+            ? undefined
+            : String(value)
+        }
         disabled={disabled}
-        onValueChange={onChange}
+        onValueChange={(nextValue) => {
+          onChange?.(
+            options.find(
+              (option) =>
+                String(option.value) ===
+                nextValue,
+            )?.value ?? nextValue,
+          )
+        }}
         className={cn(
           'flex gap-3',
           direction === 'vertical'
@@ -133,9 +148,9 @@ export const RadioGroup = React.forwardRef<
 
           return (
             <RadioGroupItem
-              key={option.value}
-              id={option.value}
-              value={option.value}
+              key={String(option.value)}
+              id={String(option.value)}
+              value={String(option.value)}
               error={error}
               disabled={disabled || option.disabled}
               label={
@@ -152,4 +167,4 @@ export const RadioGroup = React.forwardRef<
 )
 
 RadioGroup.displayName =
-  RadioGroupPrimitive.Root.displayName
\ No newline at end of file
+  RadioGroupPrimitive.Root.displayName
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index 7fccdc3c9d..4d37f77444 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,24 +1,27 @@
 'use client';
 
 import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { cn } from '@/lib/utils';
 import { ChevronDown, Check, X } from 'lucide-react';
 import { useI18n } from '@/contexts/i18n-context';
 
-export interface SelectOption {
-  value: string;
+export type SelectValue = string | number;
+
+export interface SelectOption<T extends SelectValue = SelectValue> {
+  value: T;
   label: string;
   disabled?: boolean;
   description?: string;
   suffix?: React.ReactNode;
 }
 
-interface SelectProps {
-  value?: string;
-  onChange?: (value: string) => void;
+interface SelectProps<T extends SelectValue = SelectValue> {
+  value?: T;
+  onChange?: (value: T | undefined) => void;
 
-  options?: SelectOption[];
+  options?: SelectOption<T>[];
   placeholder?: string;
   className?: string;
   disabled?: boolean;
@@ -34,7 +37,7 @@ interface SelectProps {
   onCustomAdd?: (value: string) => void;
 }
 
-export function Select({
+export function Select<T extends SelectValue = SelectValue>({
   value,
   onChange,
   options = [],
@@ -50,7 +53,7 @@ export function Select({
   customPlaceholder,
   customButtonText,
   onCustomAdd,
-}: SelectProps) {
+}: SelectProps<T>) {
   const { t } = useI18n();
 
   const _customPlaceholder = customPlaceholder || 'Select...';
@@ -69,10 +72,37 @@ export function Select({
 
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>();
+
+  const updateDropdownPosition = useCallback(() => {
+    if (!buttonRef.current) return;
+
+    const buttonRect = buttonRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - buttonRect.bottom - 50;
+    const spaceAbove = buttonRect.top - 50;
+    const direction = spaceBelow < 200 && spaceAbove > spaceBelow ? 'up' : 'down';
+
+    setDropdownDirection(direction);
+    setDropdownStyle({
+      left: buttonRect.left,
+      top: direction === 'down' ? buttonRect.bottom + 4 : buttonRect.top - 4,
+      width: buttonRect.width,
+      transform: direction === 'up' ? 'translateY(-100%)' : undefined,
+    });
+  }, []);
+
   // Handle clicking outside to close the dropdown
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+      const target = event.target as Node;
+
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(target) &&
+        !dropdownRef.current?.contains(target)
+      ) {
         setOpen(false);
         setSearchValue('');
       }
@@ -89,22 +119,38 @@ export function Select({
 
   // Check if the dropdown menu should expand up or down
   useEffect(() => {
-    if (open && buttonRef.current) {
-      const buttonRect = buttonRef.current.getBoundingClientRect();
+    if (!open) return;
 
-      const spaceBelow = window.innerHeight - buttonRect.bottom - 50;
+    updateDropdownPosition();
+    window.addEventListener('resize', updateDropdownPosition);
+    window.addEventListener('scroll', updateDropdownPosition, true);
 
-      const spaceAbove = buttonRect.top - 50;
+    return () => {
+      window.removeEventListener('resize', updateDropdownPosition);
+      window.removeEventListener('scroll', updateDropdownPosition, true);
+    };
+  }, [open, updateDropdownPosition]);
 
-      if (spaceBelow < 200 && spaceAbove > spaceBelow) {
-        setDropdownDirection('up');
-      } else {
-        setDropdownDirection('down');
-      }
-    }
-  }, [open]);
+  useEffect(() => {
+    const dropdown = dropdownRef.current;
+
+    if (!dropdown) return;
+
+    // Keep portal dropdown scrolling inside the menu instead of letting Dialog's
+    // document-level scroll lock treat it as an outside interaction.
+    const stopScrollPropagation = (event: Event) => event.stopPropagation();
+
+    dropdown.addEventListener('wheel', stopScrollPropagation);
+    dropdown.addEventListener('touchmove', stopScrollPropagation);
+
+    return () => {
+      dropdown.removeEventListener('wheel', stopScrollPropagation);
+      dropdown.removeEventListener('touchmove', stopScrollPropagation);
+    };
+  }, [open, dropdownStyle]);
 
   const selectedOption = options.find((opt) => opt.value === value);
+  const hasValue = value !== undefined && value !== null && String(value) !== '';
 
   const filteredOptions = options.filter((option) => {
     if (!showSearch || !searchValue.trim()) {
@@ -115,12 +161,12 @@ export function Select({
 
     return (
       option.label.toLowerCase().includes(keyword) ||
-      option.value.toLowerCase().includes(keyword) ||
+      String(option.value).toLowerCase().includes(keyword) ||
       option.description?.toLowerCase().includes(keyword)
     );
   });
 
-  const handleOptionClick = (option: SelectOption) => {
+  const handleOptionClick = (option: SelectOption<T>) => {
     if (disabled || option.disabled) return;
 
     onChange?.(option.value);
@@ -133,7 +179,7 @@ export function Select({
 
     if (disabled) return;
 
-    onChange?.('');
+    onChange?.(undefined);
 
     setSearchValue('');
     setOpen(false);
@@ -196,11 +242,11 @@ export function Select({
               <span className="font-medium truncate">{selectedOption.label}</span>
             </div>
           ) : (
-            <span className="text-muted-foreground">{placeholder || 'Select...'}</span>
+            <span className="text-muted-foreground truncate">{placeholder || 'Select...'}</span>
           )}
         </div>
 
-        {allowClear && value ? (
+        {allowClear && hasValue ? (
           <button
             type="button"
             onClick={handleClear}
@@ -222,11 +268,16 @@ export function Select({
         )}
       </div>
 
-      {open && (
+      {open &&
+        dropdownStyle &&
+        createPortal(
         <div
+          ref={dropdownRef}
+          data-slot="select-dropdown"
+          style={dropdownStyle}
           className={cn(
-            'absolute left-0 right-0 z-[9999] mt-1 flex flex-col rounded-md border border-border bg-popover shadow-lg',
-            dropdownDirection === 'down' ? 'top-full' : 'bottom-full mb-1 mt-0'
+            'pointer-events-auto fixed z-[9999] flex flex-col rounded-md border border-border bg-popover shadow-lg',
+            dropdownDirection === 'up' && 'origin-bottom'
           )}
         >
           <div className="max-h-60 overflow-auto">
@@ -313,7 +364,8 @@ export function Select({
               </button>
             </div>
           )}
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index 3d4ffaac11..652e170d9b 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -1,48 +1,67 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-import { Info } from "lucide-react"
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { CircleQuestionMark, type LucideIcon } from 'lucide-react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export function InfoTooltip({ content, icon = <Info /> }: { content: React.ReactNode; icon?: React.ReactNode }) {
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-[10000] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+interface InfoTooltipProps {
+  content: React.ReactNode;
+  icon?: LucideIcon;
+  iconClassName?: string;
+  contentClassName?: string;
+}
+
+export function InfoTooltip({
+  content,
+  icon: Icon = CircleQuestionMark,
+  iconClassName,
+  contentClassName,
+}: InfoTooltipProps) {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={300}>
         <TooltipTrigger asChild>
-          <div className="cursor-default">
-            {/* {React.cloneElement(icon as React.ReactElement, { className: "h-3 w-3 text-muted-foreground/70 hover:text-muted-foreground" })} */}
-          </div>
+          <span className="inline-flex cursor-pointer items-center">
+            <Icon
+              className={cn(
+                'h-3.5 w-3.5 text-muted-foreground/70 hover:text-muted-foreground',
+                iconClassName
+              )}
+            />
+          </span>
         </TooltipTrigger>
-        <TooltipContent>
-          <p className="max-w-[200px]">{content}</p>
+        <TooltipContent sideOffset={6} className={cn('max-w-72', contentClassName)}>
+          <p>{content}</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index 46c9a9a137..30b5fa4115 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -47,3 +47,12 @@ export enum ModelAbility {
   Omni = 'omni',
   Hybrid = 'hybrid',
 }
+
+export const CUSTOM_MODEL_OPTIONS = [
+  { value: ModelType.LLM, labelKey: 'model.languageModels' },
+  { value: ModelType.Embedding, labelKey: 'model.embeddingModels' },
+  { value: ModelType.Rerank, labelKey: 'model.rerankModels' },
+  { value: ModelType.Image, labelKey: 'model.imageModels' },
+  { value: ModelType.Audio, labelKey: 'model.audioModels' },
+  { value: ModelType.Flexible, labelKey: 'model.flexibleModels' },
+];
\ No newline at end of file
diff --git a/frontend/src/constants/launch.ts b/frontend/src/constants/launch.ts
index 69921ecda0..0607a895bc 100644
--- a/frontend/src/constants/launch.ts
+++ b/frontend/src/constants/launch.ts
@@ -20,3 +20,108 @@ export const LAUNCH_MODEL_UPDATE_OPTIONS = [
 ];
 
 export const COLLECTION_STORAGE_KEY = 'collectionArr';
+
+export const ENGINES_WITH_WORKER = ['SGLang', 'vLLM', 'MLX'];
+
+export const VIRTUAL_ENV_OPTIONS = [
+  { label: 'Unset', value: 'unset' },
+  { label: 'False', value: false },
+  { label: 'True', value: true },
+];
+
+export const KWARGS_OPTIONS_FOR_ENGINES: Record<string, Array<{ label: string; value: string }>> = {
+  transformers: [
+    { label: 'torch_dtype', value: 'torch_dtype' },
+    { label: 'device', value: 'device' },
+    { label: 'enable_flash_attn', value: 'enable_flash_attn' },
+  ],
+  'llama.cpp': [
+    { label: 'n_ctx', value: 'n_ctx' },
+    { label: 'use_mmap', value: 'use_mmap' },
+    { label: 'use_mlock', value: 'use_mlock' },
+  ],
+  vllm: [
+    { label: 'block_size', value: 'block_size' },
+    { label: 'gpu_memory_utilization', value: 'gpu_memory_utilization' },
+    { label: 'max_num_seqs', value: 'max_num_seqs' },
+    { label: 'max_model_len', value: 'max_model_len' },
+    { label: 'guided_decoding_backend', value: 'guided_decoding_backend' },
+    { label: 'scheduling_policy', value: 'scheduling_policy' },
+    { label: 'tensor_parallel_size', value: 'tensor_parallel_size' },
+    { label: 'pipeline_parallel_size', value: 'pipeline_parallel_size' },
+    { label: 'enable_prefix_caching', value: 'enable_prefix_caching' },
+    { label: 'enable_chunked_prefill', value: 'enable_chunked_prefill' },
+    { label: 'enable_expert_parallel', value: 'enable_expert_parallel' },
+    { label: 'enforce_eager', value: 'enforce_eager' },
+    { label: 'cpu_offload_gb', value: 'cpu_offload_gb' },
+    { label: 'disable_custom_all_reduce', value: 'disable_custom_all_reduce' },
+    { label: 'limit_mm_per_prompt', value: 'limit_mm_per_prompt' },
+    { label: 'model_quantization', value: 'model_quantization' },
+    { label: 'mm_processor_kwargs', value: 'mm_processor_kwargs' },
+    { label: 'min_pixels', value: 'min_pixels' },
+    { label: 'max_pixels', value: 'max_pixels' },
+  ],
+  sglang: [
+    { label: 'mem_fraction_static', value: 'mem_fraction_static' },
+    { label: 'attention_reduce_in_fp32', value: 'attention_reduce_in_fp32' },
+    { label: 'tp_size', value: 'tp_size' },
+    { label: 'dp_size', value: 'dp_size' },
+    { label: 'chunked_prefill_size', value: 'chunked_prefill_size' },
+    { label: 'cpu_offload_gb', value: 'cpu_offload_gb' },
+    { label: 'enable_dp_attention', value: 'enable_dp_attention' },
+    { label: 'enable_ep_moe', value: 'enable_ep_moe' },
+  ],
+  mlx: [
+    { label: 'cache_limit_gb', value: 'cache_limit_gb' },
+    { label: 'max_kv_size', value: 'max_kv_size' },
+  ],
+};
+export const QUANTIZATION_OPTIONS = [
+  { label: 'load_in_8bit', value: 'load_in_8bit' },
+  { label: 'load_in_4bit', value: 'load_in_4bit' },
+  { label: 'llm_int8_threshold', value: 'llm_int8_threshold' },
+  { label: 'llm_int8_skip_modules', value: 'llm_int8_skip_modules' },
+  { label: 'llm_int8_enable_fp32_cpu_offload', value: 'llm_int8_enable_fp32_cpu_offload' },
+  { label: 'llm_int8_has_fp16_weight', value: 'llm_int8_has_fp16_weight' },
+  { label: 'bnb_4bit_compute_dtype', value: 'bnb_4bit_compute_dtype' },
+  { label: 'bnb_4bit_quant_type', value: 'bnb_4bit_quant_type' },
+  { label: 'bnb_4bit_use_double_quant', value: 'bnb_4bit_use_double_quant' },
+  { label: 'bnb_4bit_quant_storage', value: 'bnb_4bit_quant_storage' },
+];
+/**
+ * Keys owned by the launch form.
+ * Extra top-level fields are created from kwargs during submit, so cache restore
+ * moves keys outside this list back into the kwargs form-list.
+ * Add new launch form fields here when the dialog gains new submit fields.
+ */
+export const ALL_FORM_KEYS = [
+  'model_uid',
+  'model_name',
+  'model_type',
+  'model_engine',
+  'model_format',
+  'model_size_in_billions',
+  'quantization',
+  'n_worker',
+  'n_gpu',
+  'n_gpu_layers',
+  'replica',
+  'request_limits',
+  'worker_ip',
+  'gpu_idx',
+  'download_hub',
+  'model_path',
+  'reasoning_content',
+  'gguf_quantization',
+  'gguf_model_path',
+  'lightning_version',
+  'lightning_model_path',
+  'cpu_offload',
+  'peft_model_config',
+  'quantization_config',
+  'enable_thinking',
+  'multimodal_projector',
+  'enable_virtual_env',
+  'virtual_env_packages',
+  'envs',
+];
diff --git a/frontend/src/constants/register.ts b/frontend/src/constants/register.ts
index a7c5775843..5b75e4af02 100644
--- a/frontend/src/constants/register.ts
+++ b/frontend/src/constants/register.ts
@@ -288,15 +288,16 @@ export const MODEL_TEMPLATE_TEST_MSG = [
 ];
 export enum ModelFormat {
   PyTorch = 'pytorch',
-  GGUF = 'ggufv2',
+  GGUFV2 = 'ggufv2',
   GPTQ = 'gptq',
   AWQ = 'awq',
   FP8 = 'fp8',
   MLX = 'mlx',
+  GGMLV3 ='ggmlv3'
 }
 export const MODEL_FORMAT_LLM_OPTIONS = [
   { value: ModelFormat.PyTorch, label: 'PyTorch' },
-  { value: ModelFormat.GGUF, label: 'GGUF' },
+  { value: ModelFormat.GGUFV2, label: 'GGUF' },
   { value: ModelFormat.GPTQ, label: 'GPTQ' },
   { value: ModelFormat.AWQ, label: 'AWQ' },
   { value: ModelFormat.FP8, label: 'FP8' },
@@ -304,11 +305,11 @@ export const MODEL_FORMAT_LLM_OPTIONS = [
 ];
 export const MODEL_FORMAT_EMBEDDING_OPTIONS = [
   { value: ModelFormat.PyTorch, label: 'PyTorch' },
-  { value: ModelFormat.GGUF, label: 'GGUF' },
+  { value: ModelFormat.GGUFV2, label: 'GGUF' },
 ];
 export const MODEL_FORMAT_RERANK_OPTIONS = [
   { value: ModelFormat.PyTorch, label: 'PyTorch' },
-  { value: ModelFormat.GGUF, label: 'GGUF' },
+  { value: ModelFormat.GGUFV2, label: 'GGUF' },
 ];
 export const MODEL_FORMAT_OPTIONS_MAP: Partial<
   Record<ModelType, { label: string; value: string }[]>
@@ -326,6 +327,7 @@ export const CONTROLNET_MODEL_FAMILY_OPTIONS = [
 ]
 export const REGISTER_MODEL_INIT_DATA = {
   [ModelType.LLM]: {
+    version: 2,
     model_name: 'custom-llm',
     model_description: 'This is a custom model description.',
     context_length: 2048,
@@ -345,6 +347,7 @@ export const REGISTER_MODEL_INIT_DATA = {
     },
   },
   [ModelType.Embedding]: {
+    version: 2,
     model_name: 'custom-embedding',
     dimensions: 768,
     max_tokens: 512,
@@ -361,6 +364,7 @@ export const REGISTER_MODEL_INIT_DATA = {
     },
   },
   [ModelType.Rerank]: {
+    version: 2,
     model_name: 'custom-rerank',
     language: ['en'],
     max_tokens: 512,
@@ -376,6 +380,7 @@ export const REGISTER_MODEL_INIT_DATA = {
     },
   },
   [ModelType.Image]: {
+    version: 2,
     model_name: 'custom-image',
     model_uri: '/path/to/image-model',
     model_ability: [ModelAbilityForImage.Text2Image],
@@ -386,6 +391,7 @@ export const REGISTER_MODEL_INIT_DATA = {
     },
   },
   [ModelType.Audio]: {
+    version: 2,
     model_name: 'custom-audio',
     model_uri: '/path/to/audio-model',
     multilingual: false,
@@ -396,6 +402,7 @@ export const REGISTER_MODEL_INIT_DATA = {
     },
   },
   [ModelType.Flexible]: {
+    version: 2,
     model_name: 'flexible-model',
     model_description: 'This is a model description.',
     model_uri: '/path/to/model',
diff --git a/frontend/src/contexts/i18n-context.tsx b/frontend/src/contexts/i18n-context.tsx
index 4141cbada2..bdee439144 100644
--- a/frontend/src/contexts/i18n-context.tsx
+++ b/frontend/src/contexts/i18n-context.tsx
@@ -4,7 +4,8 @@ import React, { createContext, useContext, useEffect, useMemo, useState } from '
 import { translations } from '@/i18n/translations';
 import type { Locale } from '@/types/common';
 import { LANGUAGES_KEYS, DEFAULT_LANGUAGE } from '@/constants';
-type TFunc = (key: string, vars?: Record<string, string | number>) => string;
+type InterpolationValue = string | number | boolean | null | undefined;
+type TFunc = (key: string, vars?: Record<string, InterpolationValue>) => string;
 
 interface I18nContextValue {
   locale: Locale;
@@ -14,12 +15,19 @@ interface I18nContextValue {
 
 const I18nContext = createContext<I18nContextValue | undefined>(undefined);
 
-function interpolate(str: string, vars?: Record<string, string | number>) {
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function interpolate(str: string, vars?: Record<string, InterpolationValue>) {
   if (!vars) return str;
-  return Object.entries(vars).reduce(
-    (s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v)),
-    str
-  );
+
+  return Object.entries(vars).reduce((s, [key, value]) => {
+    const escapedKey = escapeRegExp(key);
+    const normalizedValue = value === null || value === undefined ? '' : String(value);
+
+    return s.replace(new RegExp(`\\{\\{\\s*${escapedKey}\\s*\\}\\}`, 'g'), normalizedValue);
+  }, str);
 }
 
 export function I18nProvider({
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index d93e6ca52e..65c875ead7 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -22,6 +22,7 @@ const en = {
     flexibleModels: 'Flexible Models',
   },
   launchModel: {
+    modelType: 'Model Type',
     modelAbility: 'Model Ability',
     generate: 'Text Generation',
     chat: 'Conversation',
@@ -60,7 +61,7 @@ const en = {
     generateModel: 'generate model',
     otherModel: 'other model',
     confirmDeleteCustomModel:
-      'Are you sure to delete this custom model? This behavior is irreversible.',
+      'Are you sure to delete custom model {{modelName}}? This behavior is irreversible.',
     modelName: 'Model Name',
     envPath: 'Environment Path',
     realPath: 'Real Path',
@@ -97,29 +98,39 @@ const en = {
     nGPUPerWorker: 'GPU Count per Worker',
     nGpuLayers: 'N GPU Layers',
     replica: 'Replica',
-    optionalConfigurations: 'Optional Configurations',
-    'modelUID.optional': '(Optional) Model UID, model name by default',
-    'requestLimits.optional':
-      '(Optional) Request Limits, the number of request limits for this model, default is None',
-    'workerIp.optional':
-      '(Optional) Worker Ip, specify the worker ip where the model is located in a distributed scenario,multiple IPs can be specified by separating them with commas.',
-    workerIp:
-      'Worker Ip, specify the worker ip where the model is located in a distributed scenario',
-    'workerCount.optional': '(Optional) Worker Count',
-    'GPUIdx.optional': '(Optional) GPU Idx, Specify the GPU index where the model is located',
-    GPUIdx: 'GPU Idx, Specify the GPU index where the model is located',
-    'downloadHub.optional': '(Optional) Download_hub',
-    'modelPath.optional':
-      '(Optional) Model Path, For PyTorch, provide the model directory. For GGML/GGUF, provide the model file path.',
-    'GGUFQuantization.optional':
-      '(Optional) GGUF quantization format, quantizing the Transformer part.',
-    'GGUFModelPath.optional': '(Optional) GGUF model path, should be a file ending with .gguf.',
-    'lightningVersions.optional': '(Optional) Lightning Versions',
-    'lightningModelPath.optional': '(Optional) Lightning Model Path',
+    advancedConfiguration: 'Advanced Configuration',
+    runtimeEnvironment: 'Runtime Environment',
+    engineParameters: 'Engine Parameters',
+    engineQuantizationParameters: 'Quantization Parameters',
+    engineAdditionalParameters: 'Additional Parameters',
+    modelUid: 'Model UID',
+    modelUidPlaceholder: 'Model name by default',
+    requestLimits: 'Request Limits',
+    requestLimitsPlaceholder: 'The request limit for this model, default is None',
+    workerIp: 'Worker IP',
+    workerIpPlaceholder:
+      'Specify the worker IP where the model is located in a distributed scenario. Multiple IPs can be separated by commas.',
+    workerCount: 'Worker Count',
+    workerCountPlaceholder: 'Worker Count',
+    GPUIdx: 'GPU Idx',
+    GPUIdxPlaceholder: 'Specify the GPU index where the model is located',
+    downloadHub: 'Download Hub',
+    downloadHubPlaceholder: 'Download_hub',
+    modelPath: 'Model Path',
+    modelPathPlaceholder:
+      'For PyTorch, provide the model directory. For GGML/GGUF, provide the model file path.',
+    GGUFQuantization: 'GGUF Quantization',
+    GGUFQuantizationPlaceholder: 'Quantizes the Transformer part.',
+    GGUFModelPath: 'GGUF Model Path',
+    GGUFModelPathPlaceholder: 'Should be a file ending with .gguf.',
+    lightningVersions: 'Lightning Versions',
+    lightningVersionsPlaceholder: 'Lightning Versions',
+    lightningModelPath: 'Lightning Model Path',
+    lightningModelPathPlaceholder: 'Lightning Model Path',
     enableThinking: 'Enable Thinking',
     parsingReasoningContent: 'Parsing Reasoning Content',
     CPUOffload: 'CPU Offload',
-    'CPUOffload.tip':
+    CPUOffloadTip:
       'Unload the model to the CPU. Recommend to enable this when resources are limited or when using the GGUF option.',
     loraConfig: 'Lora Config',
     loraModelConfig: 'Lora Model Config',
@@ -158,9 +169,28 @@ const en = {
     cancelledSuccessfully: 'Cancelled Successfully!',
     mustBeUnique: '{{key}} must be unique',
     launchProgress: 'Launch Progress',
+    launchCompleted: 'Model deployment completed',
+    launchCanceled: 'Deployment stopped',
     initializing: 'Initializing...',
     moreDetails: 'More Details',
   },
+  runningModels: {
+    searchPlaceholder: 'Search model name or model UID...',
+    terminateConfirmBody:
+      'The current model {{name}} has {{replica}} replicas. When the cluster is busy or the replica count is high, termination may take several minutes. The total duration depends on the slowest Worker node. Please do not click Terminate repeatedly.',
+    terminateConfirmOk: 'Terminate',
+    baseInfo: 'Basic Information',
+    modelType: 'Model Type',
+    modelFormat: 'Model Format',
+    modelSize: 'Model Size',
+    quantization: 'Quantization',
+    resources: 'Resource Allocation',
+    workerAddress: 'Worker Node',
+    gpuIndexes: 'GPU Indexes',
+    replicaDetail: 'Replica Details',
+    removeReplicaConfirm:
+      'Are you sure you want to remove replica {{replicaId}} of model {{modelUid}}?',
+  },
   registerModel: {
     modelName: 'Model Name',
     modelDescription: 'Model Description (Optional)',
@@ -266,13 +296,19 @@ const en = {
     add: 'Add',
     delete: 'Delete',
     edit: 'Edit',
+    modify: 'Modify',
     cancel: 'Cancel',
     confirm: 'Confirm',
     update: 'Update',
+    deploy: 'Deploy',
+    stop: 'Stop',
     packUp: 'Collapse',
     unfold: 'Expand',
     operation: 'Operation',
-    notice: "Notice",
+    notice: 'Notice',
+    itemsCount: '{{count}} items',
+    autoCompleteOptionsTips:
+      'Common parameters are listed below. You can also enter a custom parameter.',
   },
 } as const;
 export default en;
diff --git a/frontend/src/i18n/locales/ja.ts b/frontend/src/i18n/locales/ja.ts
index 6c5f555af6..ef0b94c12a 100644
--- a/frontend/src/i18n/locales/ja.ts
+++ b/frontend/src/i18n/locales/ja.ts
@@ -22,6 +22,7 @@ const ja = {
     flexibleModels: 'フレキシブルモデル',
   },
   launchModel: {
+    modelType: 'モデルタイプ',
     modelAbility: 'モデル機能',
     generate: 'テキスト生成',
     chat: '会話',
@@ -59,7 +60,8 @@ const ja = {
     chatModel: 'チャットモデル',
     generateModel: '生成モデル',
     otherModel: 'その他モデル',
-    confirmDeleteCustomModel: 'このカスタムモデルを削除しますか？この操作は元に戻せません。',
+    confirmDeleteCustomModel:
+      'カスタムモデル {{modelName}} を削除しますか？この操作は元に戻せません。',
     modelName: '모델 이름',
     envPath: '환경 경로',
     realPath: '실제 경로',
@@ -96,27 +98,39 @@ const ja = {
     nGPUPerWorker: 'ワーカーあたりのGPU数',
     nGpuLayers: 'GPUレイヤー数',
     replica: 'レプリカ',
-    optionalConfigurations: 'オプション設定',
-    'modelUID.optional': '(オプション) モデルUID、デフォルトはモデル名',
-    'requestLimits.optional':
-      '(オプション) リクエスト制限、このモデルのリクエスト制限数、デフォルトは無制限',
-    'workerIp.optional':
-      '(オプション) ワーカーIP、分散シナリオでモデルが配置されているワーカーIPを指定,カンマで区切ることで複数の IP を指定できます。',
-    workerIp: 'ワーカーIP、分散シナリオでモデルが配置されているワーカーIPを指定',
-    'workerCount.optional': '(オプション) ワーカー数',
-    'GPUIdx.optional': '(オプション) GPUインデックス、モデルが配置されているGPUインデックスを指定',
-    GPUIdx: 'GPUインデックス、モデルが配置されているGPUインデックスを指定',
-    'downloadHub.optional': '(オプション) ダウンロードハブ',
-    'modelPath.optional':
-      '(オプション) モデルパス、PyTorchの場合はモデルディレクトリ、GGML/GGUFの場合はモデルファイルパスを指定',
-    'GGUFQuantization.optional': '(オプション) GGUF量子化フォーマット、Transformer部分を量子化',
-    'GGUFModelPath.optional': '(オプション) GGUFモデルパス、.ggufで終わるファイルを指定',
-    'lightningVersions.optional': '(オプション) 軽量化バージョン',
-    'lightningModelPath.optional': '(オプション) 軽量化LoRAモデルパス',
+    advancedConfiguration: '高度な設定',
+    runtimeEnvironment: '実行環境',
+    engineParameters: 'エンジンパラメータ',
+    engineQuantizationParameters: '量子化パラメータ',
+    engineAdditionalParameters: '追加パラメータ',
+    modelUid: 'モデルUID',
+    modelUidPlaceholder: 'デフォルトはモデル名',
+    requestLimits: 'リクエスト制限',
+    requestLimitsPlaceholder: 'このモデルのリクエスト制限数、デフォルトは無制限',
+    workerIp: 'ワーカーIP',
+    workerIpPlaceholder:
+      '分散シナリオでモデルが配置されているワーカーIPを指定。カンマで区切ることで複数の IP を指定できます。',
+    workerCount: 'ワーカー数',
+    workerCountPlaceholder: 'ワーカー数',
+    GPUIdx: 'GPUインデックス',
+    GPUIdxPlaceholder: 'モデルが配置されているGPUインデックスを指定',
+    downloadHub: 'ダウンロードハブ',
+    downloadHubPlaceholder: 'ダウンロードハブ',
+    modelPath: 'モデルパス',
+    modelPathPlaceholder:
+      'PyTorchの場合はモデルディレクトリ、GGML/GGUFの場合はモデルファイルパスを指定',
+    GGUFQuantization: 'GGUF量子化フォーマット',
+    GGUFQuantizationPlaceholder: 'Transformer部分を量子化',
+    GGUFModelPath: 'GGUFモデルパス',
+    GGUFModelPathPlaceholder: '.ggufで終わるファイルを指定',
+    lightningVersions: '軽量化バージョン',
+    lightningVersionsPlaceholder: '軽量化バージョン',
+    lightningModelPath: '軽量化LoRAモデルパス',
+    lightningModelPathPlaceholder: '軽量化LoRAモデルパス',
     enableThinking: '思考を有効化',
     parsingReasoningContent: '推論内容の解析',
     CPUOffload: 'CPUオフロード',
-    'CPUOffload.tip':
+    CPUOffloadTip:
       'モデルをCPUにアンロードします。リソースが限られている場合やGGUFオプションを使用する場合に推奨されます。',
     loraConfig: 'Lora設定',
     loraModelConfig: 'Loraモデル設定',
@@ -154,9 +168,28 @@ const ja = {
     cancelledSuccessfully: '正常にキャンセルされました！',
     mustBeUnique: '{{key}} は一意でなければなりません',
     launchProgress: '起動状況',
+    launchCompleted: 'モデルのデプロイが完了しました',
+    launchCanceled: 'デプロイを停止しました',
     initializing: '初期化中...',
     moreDetails: '詳細を見る',
   },
+  runningModels: {
+    searchPlaceholder: 'モデル名またはモデルUIDを検索...',
+    terminateConfirmBody:
+      '現在のモデル {{name}} には {{replica}} 個のレプリカがあります。クラスターが混雑している場合やレプリカ数が多い場合、終了処理には数分かかることがあります。所要時間は最も遅い Worker ノードに依存します。終了ボタンを繰り返しクリックしないでください。',
+    terminateConfirmOk: '終了',
+    baseInfo: '基本情報',
+    modelType: 'モデルタイプ',
+    modelFormat: 'モデル形式',
+    modelSize: 'モデルサイズ',
+    quantization: '量子化',
+    resources: 'リソース割り当て',
+    workerAddress: 'Worker ノード',
+    gpuIndexes: 'GPU インデックス',
+    replicaDetail: 'レプリカ詳細',
+    removeReplicaConfirm:
+      'モデル {{modelUid}} のレプリカ {{replicaId}} を削除してもよろしいですか？',
+  },
   registerModel: {
     modelName: 'モデル名',
     modelDescription: 'モデル説明（オプション）',
@@ -261,13 +294,19 @@ const ja = {
     add: '追加',
     delete: '削除',
     edit: '編集',
+    modify: '変更',
     cancel: 'キャンセル',
     confirm: '確認',
     update: '更新',
+    deploy: '配備',
+    stop: '停止',
     packUp: '折りたたむ',
     unfold: '展開',
     operation: '操作',
-    notice: "通知",
+    notice: '通知',
+    itemsCount: '{{count}} 件',
+    autoCompleteOptionsTips:
+      'よく使われるパラメータを表示しています。カスタムパラメータも入力できます。',
   },
 } as const;
 export default ja;
diff --git a/frontend/src/i18n/locales/ko.ts b/frontend/src/i18n/locales/ko.ts
index 140b349183..98e2e8b06b 100644
--- a/frontend/src/i18n/locales/ko.ts
+++ b/frontend/src/i18n/locales/ko.ts
@@ -22,6 +22,7 @@ const ko = {
     flexibleModels: '유연한 모델',
   },
   launchModel: {
+    modelType: '모델 유형',
     modelAbility: '모델 기능',
     generate: '텍스트 생성',
     chat: '대화',
@@ -59,7 +60,8 @@ const ko = {
     chatModel: '채팅 모델',
     generateModel: '생성 모델',
     otherModel: '기타 모델',
-    confirmDeleteCustomModel: '이 커스텀 모델을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
+    confirmDeleteCustomModel:
+      '커스텀 모델 {{modelName}}을(를) 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
     modelName: '모델 이름',
     envPath: '환경 경로',
     realPath: '실제 경로',
@@ -96,26 +98,38 @@ const ko = {
     nGPUPerWorker: '워커당 GPU 수',
     nGpuLayers: 'GPU 레이어 수',
     replica: '레플리카',
-    optionalConfigurations: '선택적 구성',
-    'modelUID.optional': '(선택) 모델 UID, 기본값은 모델 이름',
-    'requestLimits.optional': '(선택) 요청 제한, 이 모델의 요청 제한 수, 기본값은 없음',
-    'workerIp.optional':
-      '(선택) 워커 IP, 분산 시나리오에서 모델이 위치한 워커 IP 지정,여러 개의 IP를 쉼표로 구분하여 지정할 수 있습니다.',
-    workerIp: '워커 IP, 분산 시나리오에서 모델이 위치한 워커 IP 지정',
-    'workerCount.optional': '(선택) 워커 수',
-    'GPUIdx.optional': '(선택) GPU 인덱스, 모델이 위치한 GPU 인덱스 지정',
-    GPUIdx: 'GPU 인덱스, 모델이 위치한 GPU 인덱스 지정',
-    'downloadHub.optional': '(선택) 다운로드 허브',
-    'modelPath.optional':
-      '(선택) 모델 경로, PyTorch의 경우 모델 디렉토리, GGML/GGUF의 경우 모델 파일 경로 지정',
-    'GGUFQuantization.optional': '(선택) GGUF 양자화 형식, Transformer 부분 양자화',
-    'GGUFModelPath.optional': '(선택) GGUF 모델 경로, .gguf로 끝나는 파일 지정',
-    'lightningVersions.optional': '(선택) 경량화 버전',
-    'lightningModelPath.optional': '(선택) 경량화 lora 모델 경로',
+    advancedConfiguration: '고급 설정',
+    runtimeEnvironment: '실행 환경',
+    engineParameters: '엔진 매개변수',
+    engineQuantizationParameters: '양자화 매개변수',
+    engineAdditionalParameters: '추가 매개변수',
+    modelUid: '모델 UID',
+    modelUidPlaceholder: '기본값은 모델 이름',
+    requestLimits: '요청 제한',
+    requestLimitsPlaceholder: '이 모델의 요청 제한 수, 기본값은 없음',
+    workerIp: '워커 IP',
+    workerIpPlaceholder:
+      '분산 시나리오에서 모델이 위치한 워커 IP 지정. 여러 개의 IP를 쉼표로 구분하여 지정할 수 있습니다.',
+    workerCount: '워커 수',
+    workerCountPlaceholder: '워커 수',
+    GPUIdx: 'GPU 인덱스',
+    GPUIdxPlaceholder: '모델이 위치한 GPU 인덱스 지정',
+    downloadHub: '다운로드 허브',
+    downloadHubPlaceholder: '다운로드 허브',
+    modelPath: '모델 경로',
+    modelPathPlaceholder: 'PyTorch의 경우 모델 디렉토리, GGML/GGUF의 경우 모델 파일 경로 지정',
+    GGUFQuantization: 'GGUF 양자화 형식',
+    GGUFQuantizationPlaceholder: 'Transformer 부분 양자화',
+    GGUFModelPath: 'GGUF 모델 경로',
+    GGUFModelPathPlaceholder: '.gguf로 끝나는 파일 지정',
+    lightningVersions: '경량화 버전',
+    lightningVersionsPlaceholder: '경량화 버전',
+    lightningModelPath: '경량화 lora 모델 경로',
+    lightningModelPathPlaceholder: '경량화 lora 모델 경로',
     enableThinking: '사고 활성화',
     parsingReasoningContent: '추론 내용 파싱',
     CPUOffload: 'CPU 오프로드',
-    'CPUOffload.tip':
+    CPUOffloadTip:
       '모델을 CPU로 언로드합니다. 리소스가 제한된 경우 또는 GGUF 옵션을 사용할 때 권장됩니다.',
     loraConfig: 'Lora 설정',
     loraModelConfig: 'Lora 모델 설정',
@@ -152,9 +166,28 @@ const ko = {
     cancelledSuccessfully: '성공적으로 취소되었습니다!',
     mustBeUnique: '{{key}} 는 고유해야 합니다',
     launchProgress: '시작 진행 상황',
+    launchCompleted: '모델 배포가 완료되었습니다',
+    launchCanceled: '배포가 중지되었습니다',
     initializing: '초기화 중...',
     moreDetails: '자세히 보기',
   },
+  runningModels: {
+    searchPlaceholder: '모델 이름 또는 모델 UID 검색...',
+    terminateConfirmBody:
+      '현재 모델 {{name}}에는 {{replica}}개의 복제본이 있습니다. 클러스터가 바쁘거나 복제본 수가 많은 경우 종료 작업에 몇 분 정도 소요될 수 있습니다. 전체 소요 시간은 가장 느린 Worker 노드에 따라 달라집니다. 종료 버튼을 반복해서 클릭하지 마세요.',
+    terminateConfirmOk: '종료',
+    baseInfo: '기본 정보',
+    modelType: '모델 유형',
+    modelFormat: '모델 형식',
+    modelSize: '모델 크기',
+    quantization: '양자화',
+    resources: '리소스 할당',
+    workerAddress: 'Worker 노드',
+    gpuIndexes: 'GPU 인덱스',
+    replicaDetail: '복제본 상세 정보',
+    removeReplicaConfirm:
+      '모델 {{modelUid}}의 복제본 {{replicaId}}을(를) 제거하시겠습니까?',
+  },
   registerModel: {
     modelName: '모델 이름',
     modelDescription: '모델 설명 (선택)',
@@ -259,13 +292,19 @@ const ko = {
     add: '추가',
     delete: '삭제',
     edit: '수정',
+    modify: '수정',
     cancel: '취소',
     confirm: '확인',
     update: '업데이트',
+    deploy: '배포',
+    stop: '중지',
     packUp: '접기',
     unfold: '펼치기',
     operation: '작업',
-    notice: "알림",
+    notice: '알림',
+    itemsCount: '{{count}}개',
+    autoCompleteOptionsTips:
+      '자주 사용하는 매개변수를 표시합니다. 사용자 지정 매개변수도 입력할 수 있습니다.',
   },
 } as const;
 export default ko;
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 7d0b4ffaaf..044197c8dc 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -21,6 +21,7 @@ const zh = {
     flexibleModels: '灵活模型',
   },
   launchModel: {
+    modelType: '模型类型',
     modelAbility: '模型能力',
     generate: '文本生成',
     chat: '对话',
@@ -54,13 +55,11 @@ const zh = {
     clickToLaunchModel: '点击鼠标以启动模型',
     dimensions: '维度',
     maxTokens: '最大 token 数',
-    edit: '编辑', //
-    delete: '删除', //
     contextLength: '上下文长度',
     chatModel: '聊天模型',
     generateModel: '生成模型',
     otherModel: '其他模型',
-    confirmDeleteCustomModel: '您确定要删除这个自定义模型吗？此操作无法恢复。',
+    confirmDeleteCustomModel: '您确定要删除{{modelName}}这个自定义模型吗？此操作无法恢复。',
     modelName: '模型名称',
     envPath: '环境路径',
     realPath: '真实路径',
@@ -97,26 +96,37 @@ const zh = {
     nGPUPerWorker: '每个 Worker 上的 GPU 数量',
     nGpuLayers: 'GPU 层数',
     replica: '副本',
-    optionalConfigurations: '可选配置',
-    'modelUID.optional': '(可选) 模型 UID，默认是模型名称',
-    'requestLimits.optional': '(可选) 请求限制，模型的请求限制数，默认值为无',
-    'workerIp.optional':
-      '(可选) 工作节点 IP，在分布式场景中指定模型所在的工作节点 IP,可以用英文逗号分隔指定多个 IP',
-    workerIp: '工作节点 IP，在分布式场景中指定模型所在的工作节点 IP',
-    'workerCount.optional': '(可选) Worker 数量',
-    'GPUIdx.optional': '(可选) GPU 索引，指定模型所在的 GPU 索引',
-    GPUIdx: 'GPU 索引，指定模型所在的 GPU 索引',
-    'downloadHub.optional': '(可选) 下载中心',
-    'modelPath.optional':
-      '(可选) 模型路径，对于 PyTorch，提供模型目录；对于 GGML/GGUF，提供模型文件路径。',
-    'GGUFQuantization.optional': '(可选) GGUF量化格式，对Transformer部分进行量化。',
-    'GGUFModelPath.optional': '(可选) GGUF模型路径，应为以 .gguf 结尾的文件。',
-    'lightningVersions.optional': '(可选) 蒸馏版本',
-    'lightningModelPath.optional': '(可选) 蒸馏lora路径',
+    advancedConfiguration: '高级配置',
+    runtimeEnvironment: '运行环境',
+    engineParameters: '引擎参数',
+    engineQuantizationParameters: '量化参数',
+    engineAdditionalParameters: '附加参数',
+    modelUid: '模型 UID',
+    modelUidPlaceholder: '默认是模型名称',
+    requestLimits: '请求限制',
+    requestLimitsPlaceholder: '模型的请求限制数，默认值为无',
+    workerIp: '工作节点 IP',
+    workerIpPlaceholder: '在分布式场景中指定模型所在的工作节点 IP，可以用英文逗号分隔指定多个 IP',
+    workerCount: 'Worker 数量',
+    workerCountPlaceholder: 'Worker 数量',
+    GPUIdx: 'GPU 索引',
+    GPUIdxPlaceholder: '指定模型所在的 GPU 索引',
+    downloadHub: '下载中心',
+    downloadHubPlaceholder: '下载中心',
+    modelPath: '模型路径',
+    modelPathPlaceholder: '对于 PyTorch，提供模型目录；对于 GGML/GGUF，提供模型文件路径。',
+    GGUFQuantization: 'GGUF 量化格式',
+    GGUFQuantizationPlaceholder: '对 Transformer 部分进行量化。',
+    GGUFModelPath: 'GGUF 模型路径',
+    GGUFModelPathPlaceholder: '应为以 .gguf 结尾的文件。',
+    lightningVersions: '蒸馏版本',
+    lightningVersionsPlaceholder: '蒸馏版本',
+    lightningModelPath: '蒸馏 Lora 路径',
+    lightningModelPathPlaceholder: '蒸馏lora路径',
     enableThinking: '开启思考模式',
     parsingReasoningContent: '解析推理内容',
     CPUOffload: 'CPU卸载',
-    'CPUOffload.tip': '将模型卸载到CPU。当资源有限或使用GGUF选项时，建议启用此功能。',
+    CPUOffloadTip: '将模型卸载到CPU。当资源有限或使用GGUF选项时，建议启用此功能。',
     loraConfig: 'Lora 配置',
     loraModelConfig: 'Lora 模型配置',
     virtualEnvConfig: '虚拟空间配置',
@@ -132,10 +142,7 @@ const zh = {
     loraLoadKwargsForImageModel: '图像模型的 Lora 加载参数',
     loraFuseKwargsForImageModel: '图像模型的 Lora 融合参数',
     launch: '启动',
-    goBack: '返回', //
     copyJson: '复制 JSON',
-    cancel: '取消', //
-    confirm: '确定', //
     placeholderTip: '请输入',
     fillCompleteParametersBeforeAdding: '请在添加之前填写完整的参数！',
     model_format: '模型格式',
@@ -154,11 +161,28 @@ const zh = {
     all: '全部',
     cancelledSuccessfully: '取消成功!',
     mustBeUnique: '{{key}} 必须唯一',
-    update: '更新', //
     launchProgress: '启动进度',
+    launchCompleted: '模型部署完成',
+    launchCanceled: '已停止部署',
     initializing: '初始化中...',
     moreDetails: '更多详情',
   },
+  runningModels: {
+    searchPlaceholder: '搜索模型名称或模型UID...',
+    terminateConfirmBody:
+      '当前模型 {{name}} 共有 {{replica}} 个副本。集群繁忙或副本较多时，终止操作可能需要数分钟；总耗时取决于最慢的 Worker 节点。请勿重复点击终止。',
+    terminateConfirmOk: '终止',
+    baseInfo: '基本信息',
+    modelType: '模型类型',
+    modelFormat: '模型格式',
+    modelSize: '模型大小',
+    quantization: '量化',
+    resources: '资源分配',
+    workerAddress: '工作节点',
+    gpuIndexes: 'GPU 索引',
+    replicaDetail: '副本详情',
+    removeReplicaConfirm: '确认移除模型 {{modelUid}} 的副本 {{replicaId}} 吗？',
+  },
   registerModel: {
     modelName: '模型名称',
     modelDescription: '模型描述（可选）',
@@ -269,13 +293,18 @@ const zh = {
     add: '添加',
     delete: '删除',
     edit: '编辑',
+    modify: '修改',
     cancel: '取消',
     confirm: '确定',
     update: '更新',
+    deploy: '部署',
+    stop: '停止',
     packUp: '收起',
     unfold: '展开',
     operation: '操作',
-    notice: "提示",
+    notice: '提示',
+    itemsCount: '{{count}} 项',
+    autoCompleteOptionsTips: '以下为常用参数，也可以输入自定义参数。',
   },
 } as const;
 export default zh;
diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts
index 0cbe60ff14..5b113819e7 100644
--- a/frontend/src/i18n/translations.ts
+++ b/frontend/src/i18n/translations.ts
@@ -2,7 +2,6 @@ import zh from "./locales/zh"
 import en from "./locales/en"
 import ja from "./locales/ja"
 import ko from "./locales/ko"
-import type { Locale } from '@/types/common';
 
 export const translations= {
   zh,
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 3fbd4d6216..eb04829351 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,6 +1,7 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 import { toast } from 'sonner'; 
+import type { BaseFormListValueItem } from '@/types/common'; 
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -59,6 +60,44 @@ export function sleep(ms: number): Promise<void>{
   });
 };
 
+/** transform formValue example: 'true' to true */
+export const transformValueType = (str: any) => {
+  const value = String(str).trim();
+  if (value === '') return '';
+  if (value.toLowerCase() === 'none') return null;
+  if (value.toLowerCase() === 'true') return true;
+  if (value.toLowerCase() === 'false') return false;
+  if (!isNaN(Number(value))) return Number(value);
+  return value;
+};
+/** transform [{key: 'min', value: 1}] to { min: 1} */
+export const transformFormListToObj = (formList: unknown = [], transformValue = true) => {
+  if (!Array.isArray(formList)) {
+    return {};
+  }
+
+  return formList.reduce((acc, item) => {
+    if (!item || typeof item !== 'object' || Array.isArray(item)) {
+      return acc;
+    }
+
+    const { key, value } = item as Partial<BaseFormListValueItem>;
+    const normalizedKey = typeof key === 'string' ? key.trim() : '';
+
+    if (normalizedKey) {
+      acc[normalizedKey] = transformValue ? transformValueType(value) : value;
+    }
+
+    return acc;
+  }, {} as Record<string, any>);
+};
+/** transform { abc: 123 } to [{ key: 'abc', value: '123'}] */
+export const transformObjToFormList = (obj: Record<string, any> = {}) => {
+  return Object.entries(obj || {}).map(([key, value]) => ({
+    key,
+    value: String(value),
+  }));
+};
 export const copyText = async (value: string) => {
   if (!value) return;
 
@@ -72,4 +111,4 @@ export const copyText = async (value: string) => {
   } catch {
     toast.error('Failed to copy');
   }
-};
\ No newline at end of file
+};
diff --git a/frontend/src/types/common.ts b/frontend/src/types/common.ts
index 3a3aa81c40..cb377ef5b1 100644
--- a/frontend/src/types/common.ts
+++ b/frontend/src/types/common.ts
@@ -1,11 +1,15 @@
-import { LANGUAGES_KEYS } from '@/constants';
+import { LANGUAGES_KEYS, ModelType } from '@/constants';
 import type { ReactNode } from 'react';
 
 export type Locale = (typeof LANGUAGES_KEYS)[number];
 
-export type Option = {
+export type Option<T extends string | number = string | number> = {
   label: string;
-  value: string;
+  value: T;
   disabled?: boolean;
   suffix?: ReactNode;
 };
+
+export type BaseFormListValueItem = { key: string; value: string };
+
+export type RegisterModelType = Exclude<ModelType, ModelType.Video | ModelType.Custom>;
\ No newline at end of file
diff --git a/frontend/src/types/form.ts b/frontend/src/types/form.ts
index a20c39e2d4..5d7fa1d9d0 100644
--- a/frontend/src/types/form.ts
+++ b/frontend/src/types/form.ts
@@ -101,6 +101,8 @@ export type FormContextType = {
 export interface FormFieldProps {
   name: FieldName;
 
+  hidden?: boolean;
+
   label?: React.ReactNode;
 
   extra?: React.ReactNode;
@@ -111,7 +113,7 @@ export interface FormFieldProps {
 
   disabled?: boolean;
 
-  children: React.ReactElement;
+  children?: React.ReactElement;
 
   valuePropName?: string;
 
@@ -119,6 +121,8 @@ export interface FormFieldProps {
 
   className?: string;
 
+  tooltip?: React.ReactNode;
+
   normalize?: (value: any) => any;
 }
 
diff --git a/frontend/src/types/services.ts b/frontend/src/types/services.ts
index f9a9ffdfa7..eaff4d146f 100644
--- a/frontend/src/types/services.ts
+++ b/frontend/src/types/services.ts
@@ -4,7 +4,7 @@ export interface ClusterAuth {
 export interface ClusterVersion {
   date: string;
   dirty: boolean;
-  error: any;
+  error: unknown;
   'full-revisionid': string;
   version: string;
 }
@@ -33,6 +33,16 @@ interface PromptsItem {
 export type ModelPrompts = Record<string, PromptsItem>;
 export type ModelFamily = Record<string, string[]>;
 
+export interface VirtualEnv {
+  model_name?: string;
+  model_engine?: string;
+  python_version?: string;
+  worker_ip?: string;
+  env_path?: string;
+  path?: string;
+  real_path?: string;
+  [key: string]: unknown;
+}
 export interface ModelCachedItem {
   model_name: string;
   model_size_in_billions: number;
@@ -57,6 +67,40 @@ export type ModelEngineItem = {
   model_format: string;
   model_name: string;
   model_size_in_billions: string | number;
-  quantizations: string[];
+  multimodal_projectors?: string[];
+  quantization?: string;
+  quantizations?: string[];
 };
 export type ModelEngine = Record<string, string | ModelEngineItem[]>;
+
+export interface ReplicaItem {
+  created_ts: number;
+  error_message: string;
+  replica_id: number;
+  replica_model_uid: string;
+  status: string;
+  worker_address: string;
+}
+
+export interface RunningModelItem {
+  id: string;
+  object: string;
+  created: number;
+  owned_by: string;
+  model_type: string;
+  address: string;
+  accelerators: string[];
+  model_name: string;
+  model_lang: string[];
+  model_ability: string[];
+  model_description: string;
+  model_format: string;
+  model_size_in_billions: number;
+  model_family: string;
+  quantization: string;
+  multimodal_projector: null;
+  model_hub: string;
+  revision: string | null;
+  context_length: number;
+  replica: number;
+}