feat(gpu-service): restrict non-stopped instance edit, drop recreate

- non-stopped edit: only displayName and SSH public keys editable; type/template/storage sections disabled (stopped edit keeps all editable) - remove recreate feature and the realAction prop it required: entry, delete-then-create submit path, warning banner, locale keys
style(cluster): col width
2026-07-23 10:24:54 +08:00 · 2026-07-22 16:21:12 +08:00 · 2026-07-22 15:52:17 +08:00 · 2026-07-22 15:52:17 +08:00 · 2026-07-22 15:52:17 +08:00 · 2026-07-22 15:52:17 +08:00
119 changed files with 4389 additions and 905 deletions
@@ -97,6 +97,38 @@ const handleBChange = (b) => {
 };
 ```

+## 4. Controlled input with derived fields
+
+When a controlled field's value comes from **both** user input and a programmatic default (e.g. a percentage picked on a slider, and a default seeded on select / mode-switch), funnel both through **one commit function** — don't duplicate "write field + recompute derived" per call site.
+
+- The `Form.Item`-bound input's `onChange(value)` forwards the value to the commit fn (the field is antd-bound, but pass the value explicitly so the default path can reuse the same fn instead of reading the store).
+- Seed defaults by calling the **same** commit fn with the computed value.
+- Separate the **commit action** (write field + recompute dependents) from the **render-derive** (read the field → recompute dependents). Keeping the derive standalone lets it re-run on reload/edit where there's no user event.
+
+```ts
+// commit action — slider onChange AND default both call this
+const commitRatio = (value: number) => {
+  form.setFieldsValue({ spec: { resources: { ratio: value, cores: 100 } } });
+  rescaleDerived(); // reads ratio from the form, sets the disabled cpu/ram
+};
+
+// render-derive — also called from the edit/reload effect
+const rescaleDerived = () => {
+  const ratio = form.getFieldValue(['spec', 'resources', 'ratio']);
+  form.setFieldsValue({
+    spec: {
+      resources: {
+        cpu: floorScale(unit.cpu, ratio),
+        ram: floorScale(unit.ram, ratio)
+      }
+    }
+  });
+};
+
+// default seeding reuses the commit fn — one path, not a second copy
+const applyDefaults = (item) => commitRatio(Math.min(10, item.maxRatio) || 10);
+```
+
 ## Related

 - Module/file structure for forms lives in the **create-crud-page** skill (section 3).
@@ -98,6 +98,10 @@ Compose layout with Ant components, not hand-written `display: flex`.

 Drive spacing with the theme scale (`Flex`/`Space` `gap`, or `var(--ant-*)` spacing tokens), not scattered `px` literals.

+## Tables
+
+- **Horizontally scrollable table**: set `scroll={{ x: 'max-content' }}` **and** add `className="scroll-table"` on the `Table`. The class styles the horizontal scroll to match the design; without it the scroll works but looks off.
+
 # Naming conventions

 A page module lives under `src/pages/{module}` with this sub-structure: `components/`, `config/`, `forms/`, `hooks/`, `services/`, `index.tsx`. File naming:
@@ -124,13 +128,24 @@ Always check `@gpustack/core-ui` first. Frequently reused:
 - **Form fields**: `BaseSelect`, `Input` (labeled).
 - **Text overflow**: `AutoTooltip`.
 - **Icons**: `IconFont`.
- **Status display** (success/failed/processing/warning): `StatusTag`.
+- **Tags & status** (4 variants): see the section below.
 - **Permission-gated visibility**: `Access` / `useAccess`.
 - **Request hooks**: `useRequest` / `useQueryData` / `useQueryDataList`.
 - **Table data fetching**: `useTableFetch`.
 - **Submit guard** (prevent double-submit): `useSubmitLock`.
 - **Tabbed forms**: `ScrollSpyTabs`.

+# Tags & status indicators
+
+Four core-ui components cover tag/status display in tables and lists. Pick by **what the value means**, not by how it looks — don't reach for a generic antd `Tag`:
+
+- **`StatusTag`** — semantic status with a **dynamic message/detail** (tooltip, download, extra content). Use when a row's status carries variable text, e.g. a failed job with an error message. Colors come from `StatusColorMap` (error/warning/transitioning/success/inactive).
+- **`StatusDot`** — colored dot + short label, **no message**. Use for a plain status/type cell where the value is a fixed enum (e.g. an event-type or log column). Same `StatusColorMap` palette; `inactive` dot is quaternary. If the status needs dynamic text, use `StatusTag` instead.
+- **`ThemeTag`** — a **standalone category label** (independent content, e.g. a permission scope or a model name). Default neutral; wraps antd `Tag`.
+- **`TextAttribute`** — a small neutral pill that is a **subordinate annotation following a primary text** (e.g. `key-name [custom]`), not a standalone tag. Manages its own leading margin. Two variants: `filled` (default) and `outlined`. Ref the name column in `src/pages/api-keys/hooks/use-keys-columns.tsx`.
+
+Rule of thumb: semantic + dynamic text → `StatusTag`; semantic + fixed enum → `StatusDot`; independent category → `ThemeTag`; annotation of nearby text → `TextAttribute`.
+
 # Dynamic add-item form fields

 When building a form, select the add-item component from the **shape of the field's data** (its schema). Match the schema, don't hand-roll a list UI:
@@ -211,6 +211,16 @@ const baseRoutes = [
        defaultIcon: 'icon-cloud-outlined',
        component: './gpu-service/instances'
      },
+      {
+        name: 'instanceTypes',
+        path: '/gpu-service/instance-types',
+        key: 'gpuServiceInstanceTypes',
+        icon: 'icon-outline-gpu',
+        access: 'canSeeOrgAdmin',
+        selectedIcon: 'icon-filled-gpu',
+        defaultIcon: 'icon-outline-gpu',
+        component: './gpu-service/instance-types'
+      },
      {
        name: 'templates',
        path: '/gpu-service/templates',
@@ -17,7 +17,7 @@
    "@ant-design/pro-components": "3.1.0-0",
    "@antv/g6": "^5.0.51",
    "@braintree/sanitize-url": "^7.1.1",
-    "@gpustack/core-ui": "^1.0.36",
+    "@gpustack/core-ui": "^1.0.42",
    "@huggingface/gguf": "^0.1.7",
    "@huggingface/hub": "^0.15.1",
    "@huggingface/tasks": "^0.11.6",
@@ -24,8 +24,8 @@ importers:
        specifier: ^7.1.1
        version: 7.1.2
      '@gpustack/core-ui':
-        specifier: ^1.0.36
-        version: 1.0.36(czdvzceysqw7iv6pct2ucnb23e)
+        specifier: ^1.0.42
+        version: 1.0.42(czdvzceysqw7iv6pct2ucnb23e)
      '@huggingface/gguf':
        specifier: ^0.1.7
        version: 0.1.18
@@ -1481,8 +1481,8 @@ packages:
    resolution: {integrity: sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==, tarball: https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz}
    deprecated: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package

-  '@gpustack/core-ui@1.0.36':
-    resolution: {integrity: sha512-gF8ShMZ2SKYo3+skfsI3zo+aBSsXqKGMX+jWaKv81e38bDwJw71C33TR64d+6MyV9iUoFOoSK+ht1GefyvR17g==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.36.tgz}
+  '@gpustack/core-ui@1.0.42':
+    resolution: {integrity: sha512-upMClTHU+xAqd8dlx0w1S9XWHlog5g1hcOCulTk2rmMXqgl66QHfqhEFhJnWIGe1xc8tEj6rW3r5Sirif+qswA==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.42.tgz}
    peerDependencies:
      '@ant-design/icons': ^6.1.0
      '@ant-design/pro-components': 3.1.0-0
@@ -10802,7 +10802,7 @@ snapshots:

  '@formatjs/intl-utils@2.3.0': {}

-  '@gpustack/core-ui@1.0.36(czdvzceysqw7iv6pct2ucnb23e)':
+  '@gpustack/core-ui@1.0.42(czdvzceysqw7iv6pct2ucnb23e)':
    dependencies:
      '@ant-design/icons': 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@ant-design/pro-components': 3.1.0-0(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <!-- 顶面填充（亮面，高透明度） -->
+    <linearGradient id="cube-top-grad" x1="12" y1="2" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f759ab" stop-opacity="0.18"/>
+      <stop offset="100%" stop-color="#c41d7f" stop-opacity="0.1"/>
+    </linearGradient>
+    <!-- 左侧面填充（暗面，低透明度） -->
+    <linearGradient id="cube-left-grad" x1="2" y1="7" x2="12" y2="17" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#c41d7f" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#c41d7f" stop-opacity="0.04"/>
+    </linearGradient>
+    <linearGradient id="cube-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f759ab"/>
+      <stop offset="100%" stop-color="#c41d7f"/>
+    </linearGradient>
+  </defs>
+  <!-- 顶面填充 -->
+  <polygon points="12,2 21.5,6.7 12,11.5 2.5,6.7" fill="url(#cube-top-grad)" />
+  <!-- 左侧面填充 -->
+  <polygon points="2.5,6.7 12,11.5 12,21.3 2.5,16.5" fill="url(#cube-left-grad)" />
+  <!-- 立方体全纯线外骨架（细化为圆角衔接） -->
+  <path d="M12 2L2.5 6.7M12 2l9.5 4.7M21.5 6.7L12 11.5M2.5 6.7L12 11.5M2.5 6.7v9.8l9.5 4.8M21.5 6.7v9.8l-9.5 4.8M12 11.5v9.8" stroke="url(#cube-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <!-- 1. 定义专属微通透渐变填充 -->
+    <linearGradient id="img-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#d46b08" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#d46b08" stop-opacity="0.04"/>
+    </linearGradient>
+    <!-- 2. 定义边框高精度渐变（亮橙到深橙，拉开层次） -->
+    <linearGradient id="img-stroke-grad" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#fa8c16"/>
+      <stop offset="100%" stop-color="#d46b08"/>
+    </linearGradient>
+  </defs>
+  <!-- 3. 精装底色充填层 -->
+  <rect x="3" y="3" width="18" height="18" rx="4" fill="url(#img-fill-grad)" />
+  <!-- 4. 高级柔和微圆角边框层 -->
+  <rect x="3" y="3" width="18" height="18" rx="4" stroke="url(#img-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- 内部几何现代山脉线条 -->
+  <path d="M3 16l4-4a2 2 0 0 1 2.8 0l5.2 5.2M13 15l2.5-2.5a2 2 0 0 1 2.8 0l2.7 2.7" stroke="url(#img-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- 标志性通透小钻石 -->
+  <rect x="14" y="6" width="4" height="4" rx="1.5" transform="rotate(45 16 8)" fill="#fa8c16" fill-opacity="0.3" stroke="url(#img-stroke-grad)" stroke-width="1"/>
+</svg>
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <linearGradient id="chat-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#389e0d" stop-opacity="0.1"/>
+      <stop offset="100%" stop-color="#389e0d" stop-opacity="0.02"/>
+    </linearGradient>
+    <linearGradient id="chat-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#73d13d"/>
+      <stop offset="100%" stop-color="#389e0d"/>
+    </linearGradient>
+  </defs>
+  <!-- 主现代对话框体（全部改为圆润R角，精装填充） -->
+  <path d="M18 4H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h7.5l3.5 3.5a1 1 0 0 0 1.5-.5V17a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3z" fill="url(#chat-fill-grad)" stroke="url(#chat-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- 内部通透对话线条（细化为圆角代码采样块感） -->
+  <rect x="7" y="8" width="8" height="1.5" rx="0.75" fill="#73d13d" fill-opacity="0.3"/>
+  <rect x="7" y="11.5" width="10" height="1.5" rx="0.75" fill="#73d13d" fill-opacity="0.2"/>
+</svg>
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <linearGradient id="rank-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#08979c" stop-opacity="0.1"/>
+      <stop offset="100%" stop-color="#08979c" stop-opacity="0.01"/>
+    </linearGradient>
+    <linearGradient id="rank-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#36cfc9"/>
+      <stop offset="100%" stop-color="#08979c"/>
+    </linearGradient>
+  </defs>
+  <!-- 数据权重条（全部改为高级圆角） -->
+  <rect x="11" y="4" width="10" height="2.5" rx="1.25" fill="#36cfc9" fill-opacity="0.1" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
+  <rect x="11" y="9" width="7.5" height="2.5" rx="1.25" fill="#36cfc9" fill-opacity="0.05" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
+  <rect x="11" y="14" width="5" height="2.5" rx="1.25" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
+  <!-- 基准线与立体双向指引箭头（优化为圆角） -->
+  <path d="M3 17l3 3 3-3M6 4v16" stroke="url(#rank-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5 5.5L6 4l1.5 1.5" stroke="url(#rank-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <linearGradient id="stt-fill-grad" x1="12" y1="3" x2="12" y2="14" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#40a9ff" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="#1677ff" stop-opacity="0.05"/>
+    </linearGradient>
+    <linearGradient id="stt-stroke-grad" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#40a9ff"/>
+      <stop offset="100%" stop-color="#1677ff"/>
+    </linearGradient>
+  </defs>
+  <!-- 麦克风核心体：精装通透填充 -->
+  <rect x="8.5" y="3" width="7" height="11" rx="3.5" fill="url(#stt-fill-grad)" stroke="url(#stt-stroke-grad)" stroke-width="1.8" />
+  <!-- 内部音膜立体结构线（细化为点状） -->
+  <line x1="10" y1="8" x2="14" y2="8" stroke="url(#stt-stroke-grad)" stroke-width="1" stroke-dasharray="1 2"/>
+  <!-- 悬挂外托架与底座（全部改为高级圆角） -->
+  <path d="M5 10a7 7 0 0 0 14 0M12 17v4M8 21h8" stroke="url(#stt-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <!-- 1. 核心高通透深蓝渐变充填 -->
+    <linearGradient id="tts-v2-fill" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#2f54eb" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#1d39c4" stop-opacity="0.03"/>
+    </linearGradient>
+    <!-- 2. 精准调校的专属蓝色渐变边框 -->
+    <linearGradient id="tts-v2-stroke" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#2f54eb"/>
+      <stop offset="100%" stop-color="#1d39c4"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- 左侧：低频辅助声波（大间距，带现代圆角） -->
+  <rect x="4" y="8" width="2.2" height="8" rx="1.1" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round"/>
+  
+  <!-- 中央：核心高频声波主体（拉大宽度，注入通透水晶质感） -->
+  <rect x="10.4" y="2" width="3.2" height="20" rx="1.6" fill="url(#tts-v2-fill)" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  
+  <!-- 右侧：高频衰减声波（保持几何对称与呼吸感） -->
+  <rect x="17.8" y="5" width="2.2" height="14" rx="1.1" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+.ant-alert-with-description .ant-alert-title {
+  line-height: 1;
+}
@@ -1,4 +1,5 @@
@import './table.less';
+@import './alert.less';

 .m-b-20 {
  margin-bottom: 20px;
@@ -9,6 +9,15 @@
  }
 }

+@keyframes tableEmptyFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .scroll-table {
  .ant-table {
    .ant-table-container {
@@ -18,5 +27,27 @@
        scrollbar-color: var(--color-scrollbar-thumb) transparent;
      }
    }
+
+    // Reserve a stable block for the empty/loading state so the first-load
+    // spinner and the empty result occupy the same height as eventual data —
+    // this removes the layout jump when entering the page. Scoped to
+    // `.ant-table-content` so it only targets x-scroll tables (whose empty
+    // row lives here) and leaves fixed-height `scroll.y` tables untouched.
+    // Height must match the `minHeight` passed to <NoResult> in
+    // use-no-resource-result.
+    .ant-table-content {
+      .ant-table-placeholder {
+        > .ant-table-cell {
+          height: calc(100vh - 300px);
+        }
+
+        // NoResult renders nothing while loading and mounts an <Empty> only
+        // once the request settles, so this fires exactly when the empty
+        // state appears — a seamless fade-in instead of a hard pop.
+        .ant-empty {
+          animation: tableEmptyFadeIn 0.3s ease-in-out;
+        }
+      }
+    }
  }
 }
@@ -1,4 +1,3 @@
-import { nsLocalJSONStorage } from '@gpustack/core-ui/utils';
 import { getDefaultStore } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';

@@ -9,7 +8,7 @@ export interface PaginationState {
 export const paginationAtom = atomWithStorage<Record<string, any>>(
  'paginationStatus',
  {},
-  nsLocalJSONStorage,
+  undefined,
  { getOnInit: true }
 );

@@ -1,5 +1,4 @@
 import { COLOR_PRIMARY } from '@/config/theme';
-import { nsLocal, nsLocalJSONStorage } from '@gpustack/core-ui/utils';
 import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';

@@ -24,7 +23,9 @@ export const defaultSettings: UserSettings = {
 export const getStorageUserSettings = () => {
  if (typeof window === 'undefined') return defaultSettings;
  try {
-    const savedSettings = JSON.parse(nsLocal.get('userSettings') || '{}');
+    const savedSettings = JSON.parse(
+      localStorage.getItem('userSettings') || '{}'
+    );
    return {
      ...defaultSettings,
      ...savedSettings
@@ -34,13 +35,9 @@ export const getStorageUserSettings = () => {
  }
 };

-export const userSettingsAtom = atomWithStorage<UserSettings>(
-  'userSettings',
-  {
-    ...getStorageUserSettings()
-  },
-  nsLocalJSONStorage
-);
+export const userSettingsAtom = atomWithStorage<UserSettings>('userSettings', {
+  ...getStorageUserSettings()
+});

 export const userSettingsHelperAtom = atom(
  (get) => get(userSettingsAtom),
@@ -62,6 +59,6 @@ export const hideModalTemporarilyAtom = atom<boolean>(false);
 export const collapsedMenuGroupsAtom = atomWithStorage<string[]>(
  'collapsedMenuGroups',
  [],
-  nsLocalJSONStorage,
+  undefined,
  { getOnInit: true }
 );
@@ -1,11 +1,9 @@
-import { nsLocalJSONStorage } from '@gpustack/core-ui/utils';
 import { getDefaultStore } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';

 export const tabActiveAtom = atomWithStorage<Map<string, any>>(
  'tabActiveStatus',
-  new Map(),
-  nsLocalJSONStorage
+  new Map()
 );

 export const setActiveStatus = (key: string, value: any) => {
@@ -1,12 +1,7 @@
-import { nsLocal, nsLocalJSONStorage } from '@gpustack/core-ui/utils';
 import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';

-export const userAtom = atomWithStorage<any>(
-  'userInfo',
-  null,
-  nsLocalJSONStorage
-);
+export const userAtom = atomWithStorage<any>('userInfo', null);

 // Backs the `currentOrganizationId` localStorage key. Stays null in
 // builds with no Org context (single-tenant), and is shared with any
@@ -14,8 +9,7 @@ export const userAtom = atomWithStorage<any>(
 // without one side having to import from the other.
 export const currentOrganizationIdAtom = atomWithStorage<number | null>(
  'currentOrganizationId',
-  null,
-  nsLocalJSONStorage
+  null
 );

 export const GPUStackVersionAtom = atom<{
@@ -76,7 +70,7 @@ export const getCurrentOrgNamespace = (

 const getStoredCurrentOrgId = (): number | null => {
  try {
-    const raw = nsLocal.get('currentOrganizationId');
+    const raw = localStorage.getItem('currentOrganizationId');
    if (!raw) return null;
    const value = JSON.parse(raw);
    return typeof value === 'number' ? value : null;
@@ -114,7 +108,7 @@ export const getOrgById = (
  const target = String(id);
  for (const key of ORG_CACHE_KEYS) {
    try {
-      const raw = nsLocal.get(key);
+      const raw = localStorage.getItem(key);
      if (!raw) continue;
      const list = JSON.parse(raw) as CachedOrg[];
      if (!Array.isArray(list)) continue;
@@ -1,17 +1,18 @@
 import { defaultSettings } from '@/atoms/settings';
-import { nsLocal } from '@gpustack/core-ui/utils';
 import { getDefaultStore } from 'jotai';

 export const clearStorageUserSettings = () => {
  try {
-    const savedSettings = JSON.parse(nsLocal.get('userSettings') || '{}');
+    const savedSettings = JSON.parse(
+      localStorage.getItem('userSettings') || '{}'
+    );
    // colorPrimary is an enterprise-wide branding setting (set by admins
    // and applied by `onAppInit` from /enterprise/settings), not a per-user
    // preference. Preserve it across login — otherwise the next layout
    // mount triggers `atomWithStorage.onMount`, re-reads localStorage,
    // and falls back to the default color until a full page refresh
    // re-runs `applyEnterpriseSettings`.
-    nsLocal.set(
+    localStorage.setItem(
      'userSettings',
      JSON.stringify({
        ...savedSettings,
@@ -25,7 +26,7 @@ export const clearStorageUserSettings = () => {

 export const resetStorageUserSettings = () => {
  try {
-    nsLocal.set(
+    localStorage.setItem(
      'userSettings',
      JSON.stringify({
        ...defaultSettings,
@@ -43,6 +43,10 @@ export default {
    DatePicker: {
      fontSizeLG: 14
    },
+    Alert: {
+      withDescriptionPadding: '12px 16px',
+      withDescriptionIconSize: 18
+    },
    Menu: {
      iconSize: 16,
      iconMarginInlineEnd: 12,
@@ -26,8 +26,8 @@ export default {
      cellPaddingInline: 16,
      cellPaddingBlock: 6,
      cellFontSize: 14,
-      rowSelectedHoverBg: 'rgb(249 249 249)',
-      rowHoverBg: 'rgb(249 249 249)',
+      rowSelectedHoverBg: 'rgb(247 247 247)',
+      rowHoverBg: 'rgb(247 247 247)',
      rowSelectedBg: 'transparent',
      headerSortActiveBg: 'transparent',
      headerSortHoverBg: 'transparent',
@@ -47,6 +47,13 @@ export default {
    DatePicker: {
      fontSizeLG: 14
    },
+    Alert: {
+      withDescriptionPadding: '12px 16px',
+      withDescriptionIconSize: 18
+    },
+    Card: {
+      headerHeight: 50
+    },
    Menu: {
      iconSize: 16,
      iconMarginInlineEnd: 12,
@@ -116,7 +123,7 @@ export default {
    borderRadiusLG: 6,
    borderRadius: 4,
    borderRadiusSM: 3,
-    colorBgContainer: '#fff',
+    colorBgContainer: '#fdfdfd',
    fontSize: 14,
    motion: true
  }
@@ -21,8 +21,6 @@ html {
  --color-fill-sider: #f4f5f4;
  --color-bg-1: #f4f5f4;
  --color-scroll-bg: #d9d9d9;
-  --color-fill-2: #fff;
-  --color-fill-3: #f3f6fa;
  --color-logs-bg: #1e1e1e;
  --color-logs-text: #d4d4d4;
  --layout-content-blockpadding: 24px;
@@ -76,7 +74,6 @@ html {
  --ant-rate-star-color: #fadb14;
  --color-fill-spin-bg: rgba(255, 255, 255, 15%);
  --width-tooltip-max: 420px;
-  --color-bg-tooltip: '#fff';
  --color-modal-content-bg: rgba(255, 255, 255, 90%);
  --color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
  --color-spotlight-bg: rgba(255, 255, 255, 100%);
@@ -91,6 +88,7 @@ html {
  // ======== container ============
  --color-border-container: #ededed;
  --color-text-table-header: #71717a;
+  --seal-table-row-min-height: 68px;
 }

 html[data-theme='realDark'] {
@@ -100,7 +98,6 @@ html[data-theme='realDark'] {
  --color-editor-dark: #00101f;
  --color-editor-light: #fafafa;
  --color-fill-spin-bg: rgba(55, 55, 55, 50%);
-  --color-bg-tooltip: #424242;
  --color-editor-header-bg: #292929;
  --color-progress-text: rgba(255, 255, 255, 80%);
  --color-modal-content-bg: #1f1f1f;
@@ -115,19 +112,9 @@ html[data-theme='realDark'] {
  .ant-result-image {
    opacity: 0.9;
  }
-
-  .ant-pro-page-container-affix .ant-pro-page-container-warp {
-    background-color: #292929 !important;
-    transition: none !important;
-  }
 }

 html[data-theme='light'] {
-  .ant-pro-page-container-affix .ant-pro-page-container-warp {
-    background-color: #fff !important;
-    transition: none !important;
-  }
-
  background-color: #f4f5f6;
 }

@@ -210,7 +197,7 @@ body {

    tr > td {
      border-bottom: none;
-      height: 68px;
+      height: var(--seal-table-row-min-height);
    }
  }

@@ -40,6 +40,11 @@ export default function useWatchList<T = Record<string, any>>(API: string) {
    }
  });

+  const cancelWatch = useMemoizedFn(() => {
+    chunkRequestRef.current?.current?.cancel?.();
+    listRequestTokenRef.current?.cancel?.();
+  });
+
  const queryAllDataList = async (
    params: Global.SearchParams,
    options?: any
@@ -78,14 +83,15 @@ export default function useWatchList<T = Record<string, any>>(API: string) {
  useEffect(() => {
    createWatchChunkRequest();
    return () => {
-      chunkRequestRef.current?.cancel?.();
-      listRequestTokenRef.current?.cancel?.();
+      cancelWatch();
    };
  }, []);

  return {
    watchDataList,
    setWatchDataList,
+    startWatch: createWatchChunkRequest,
+    cancelWatch,
    deleteItemFromCache: handleDeleteItemFromCache
  };
 }
@@ -1,6 +1,5 @@
 import externalLinks from '@/constants/external-links';
 import { GithubFilled } from '@ant-design/icons';
-import { nsLocal } from '@gpustack/core-ui/utils';
 import { useIntl } from '@umijs/max';
 import { Tooltip } from 'antd';
 import { useEffect, useState } from 'react';
@@ -67,7 +66,7 @@ type CacheEntry = { value: number; time: number };

 const readCache = (): CacheEntry | null => {
  try {
-    const raw = nsLocal.get(CACHE_KEY);
+    const raw = localStorage.getItem(CACHE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (typeof parsed?.value !== 'number' || typeof parsed?.time !== 'number') {
@@ -81,7 +80,10 @@ const readCache = (): CacheEntry | null => {

 const writeCache = (value: number) => {
  try {
-    nsLocal.set(CACHE_KEY, JSON.stringify({ value, time: Date.now() }));
+    localStorage.setItem(
+      CACHE_KEY,
+      JSON.stringify({ value, time: Date.now() })
+    );
  } catch {
    // ignore quota errors
  }
@@ -222,6 +222,12 @@ export default {
  'common.title.delete.confirm': 'Confirm deletion',
  'common.title.stop.confirm': 'Confirm stop',
  'common.title.start.confirm': 'Confirm start',
+  'common.title.activate.confirm': 'Confirm activate',
+  'common.title.deactivate.confirm': 'Confirm deactivate',
+  'common.activate.single.confirm':
+    'Are you sure you want to activate? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
+  'common.deactivate.single.confirm':
+    'Are you sure you want to deactivate? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'common.title.recreate.confirm': 'Confirm recreate',
  'common.button.addLabel': 'Add Label',
  'common.button.addSelector': 'Add Selector',
@@ -119,12 +119,44 @@ export default {
    'No available GPU resources, please choose another instance type.',
  'gpuservice.instance.gpuCount.zero':
    'CPU-only setup for environment preparation.',
+  'gpuservice.instance.mode.whole': 'Full GPU',
+  'gpuservice.instance.mode.sliced': 'By Ratio',
+  'gpuservice.instance.slice.memoryPercentage': 'VRAM Percentage (%)',
+  'gpuservice.instance.slice.percentage': 'Percentage (%)',
+  'gpuservice.instance.slice.coresPercentage': 'Compute Percentage (%)',
+  'gpuservice.instance.slice.cores.min':
+    'The compute ratio must be no less than the VRAM ratio ({count}%)',
+  'gpuservice.instance.slice.fullCores': '100% Compute',
+  'gpuservice.instance.slice.percentage.required':
+    'Please select or enter a percentage',
+  'gpuservice.instance.slice.percentage.max':
+    'The ratio must be between 1% and {count}%',
  'gpuservice.instance.stock': 'Stock',
  'gpuservice.instance.sliced': 'Sliced',
+  'gpuservice.instance.sliceable': 'Sliceable',
  'gpuservice.instance.memory': 'VRAM',
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'OS',
  'gpuservice.instance.arch': 'Arch',
+  'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
  'gpuservice.instance.disk': 'Disk',
  'gpuservice.table.count': 'Count',
  'gpuservice.instance.disk.system': 'System Disk',
@@ -146,9 +178,6 @@ export default {
    'Only events from the last hour are shown',
  'gpuservice.instance.event.tab.instance': 'Instance Events',
  'gpuservice.instance.event.tab.volume': 'Volume Events',
-  'gpuservice.instance.recreate.confirm.title': 'Confirm recreation',
-  'gpuservice.instance.recreate.confirm.content':
-    'The current instance will be deleted first, then recreated with the current configuration.\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'Storage',
  'gpuservice.storage.add': 'Add Storage',
  'gpuservice.storage.edit': 'Edit Storage',
@@ -47,6 +47,7 @@ export default {
  'menu.models.backendsList': 'Inference Backends',
  'menu.gpuService': 'GPU Service',
  'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
  'menu.gpuService.templates': 'Instance Templates',
  'menu.gpuService.storage': 'Storage',
  'menu.gpuService.storageTypes': 'Storage Types',
@@ -68,6 +68,10 @@ export default {
  'noresult.gpuservice.storage.title': 'No Storage',
  'noresult.gpuservice.storage.subTitle': 'No storage has been added yet.',
  'noresult.gpuservice.storage.nofound': 'No matching storage found.',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
  'noresult.gpuservice.storageType.title': 'No Storage Types',
  'noresult.gpuservice.storageType.subTitle':
    'No storage types have been added yet.',
@@ -221,6 +221,12 @@ export default {
  'common.title.delete.confirm': '削除を確認',
  'common.title.stop.confirm': '停止を確認',
  'common.title.start.confirm': '開始を確認',
+  'common.title.activate.confirm': '有効化を確認',
+  'common.title.deactivate.confirm': '無効化を確認',
+  'common.activate.single.confirm':
+    '<span style="font-size: 13px;font-weight: 700">{name}</span> を有効化してもよろしいですか？',
+  'common.deactivate.single.confirm':
+    '<span style="font-size: 13px;font-weight: 700">{name}</span> を無効化してもよろしいですか？',
  'common.title.recreate.confirm': '再作成を確認',
  'common.button.addLabel': 'ラベルを追加',
  'common.button.addSelector': 'セレクターを追加',
@@ -118,12 +118,44 @@ export default {
  'gpuservice.instance.gpuCount.noAvailable':
    '利用可能な GPU リソースがありません。別のインスタンスタイプを選択してください。',
  'gpuservice.instance.gpuCount.zero': 'CPU のみを使用し、環境準備用です。',
+  'gpuservice.instance.mode.whole': 'GPU 全体',
+  'gpuservice.instance.mode.sliced': '比率で',
+  'gpuservice.instance.slice.memoryPercentage': 'VRAM の割合（%）',
+  'gpuservice.instance.slice.percentage': '割合（%）',
+  'gpuservice.instance.slice.coresPercentage': '演算能力の割合（%）',
+  'gpuservice.instance.slice.cores.min':
+    '演算能力の割合は VRAM の割合（{count}%）以上である必要があります',
+  'gpuservice.instance.slice.fullCores': '100% コンピュート',
+  'gpuservice.instance.slice.percentage.required':
+    'パーセンテージを選択または入力してください',
+  'gpuservice.instance.slice.percentage.max':
+    '比率は 1% から {count}% の間で指定してください',
  'gpuservice.instance.stock': '在庫',
  'gpuservice.instance.sliced': '分割',
+  'gpuservice.instance.sliceable': '分割可能',
  'gpuservice.instance.memory': 'VRAM',
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'OS',
  'gpuservice.instance.arch': 'アーキテクチャ',
+  'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
  'gpuservice.instance.disk': 'ディスク',
  'gpuservice.table.count': '数量',
  'gpuservice.instance.disk.system': 'システムディスク',
@@ -145,9 +177,6 @@ export default {
    '直近 1 時間のイベントのみ表示されます',
  'gpuservice.instance.event.tab.instance': 'インスタンスイベント',
  'gpuservice.instance.event.tab.volume': 'ボリュームイベント',
-  'gpuservice.instance.recreate.confirm.title': '再作成を確認しますか',
-  'gpuservice.instance.recreate.confirm.content':
-    '現在のインスタンスを削除した後、現在の構成で再作成します。\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'ストレージ',
  'gpuservice.storage.add': 'ストレージを追加',
  'gpuservice.storage.edit': 'ストレージを編集',
@@ -47,6 +47,7 @@ export default {
  'menu.models.backendsList': 'Inference Backends',
  'menu.gpuService': 'GPU Service',
  'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
  'menu.gpuService.templates': 'Instance Templates',
  'menu.gpuService.storage': 'Storage',
  'menu.gpuService.storageTypes': 'ストレージタイプ',
@@ -70,6 +70,10 @@ export default {
  'noresult.gpuservice.storage.subTitle':
    'ストレージはまだ追加されていません。',
  'noresult.gpuservice.storage.nofound': '一致するストレージが見つかりません。',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
  'noresult.gpuservice.storageType.title': 'ストレージタイプなし',
  'noresult.gpuservice.storageType.subTitle':
    'ストレージタイプはまだ追加されていません。',
@@ -219,6 +219,12 @@ export default {
  'common.title.delete.confirm': 'Подтверждение удаления',
  'common.title.stop.confirm': 'Подтверждение остановки',
  'common.title.start.confirm': 'Подтверждение запуска',
+  'common.title.activate.confirm': 'Подтверждение активации',
+  'common.title.deactivate.confirm': 'Подтверждение деактивации',
+  'common.activate.single.confirm':
+    'Вы уверены, что хотите активировать <span style="font-size: 13px;font-weight: 700">{name}</span>?',
+  'common.deactivate.single.confirm':
+    'Вы уверены, что хотите деактивировать <span style="font-size: 13px;font-weight: 700">{name}</span>?',
  'common.title.recreate.confirm': 'Подтверждение пересоздания',
  'common.button.addLabel': 'Добавить метку',
  'common.button.addSelector': 'Добавить селектор',
@@ -117,12 +117,44 @@ export default {
  'gpuservice.instance.gpuCount.noAvailable':
    'Нет доступных ресурсов GPU, выберите другой тип экземпляра.',
  'gpuservice.instance.gpuCount.zero': 'Только CPU, для подготовки окружения.',
+  'gpuservice.instance.mode.whole': 'Весь GPU',
+  'gpuservice.instance.mode.sliced': 'По доле',
+  'gpuservice.instance.slice.memoryPercentage': 'Доля VRAM (%)',
+  'gpuservice.instance.slice.percentage': 'Доля (%)',
+  'gpuservice.instance.slice.coresPercentage': 'Доля вычислений (%)',
+  'gpuservice.instance.slice.cores.min':
+    'Доля вычислений должна быть не меньше доли VRAM ({count}%)',
+  'gpuservice.instance.slice.fullCores': '100% вычислений',
+  'gpuservice.instance.slice.percentage.required':
+    'Выберите или введите процент',
+  'gpuservice.instance.slice.percentage.max':
+    'Доля должна быть от 1% до {count}%',
  'gpuservice.instance.stock': 'Остаток',
  'gpuservice.instance.sliced': 'Разделено',
+  'gpuservice.instance.sliceable': 'Делимый',
  'gpuservice.instance.memory': 'VRAM',
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'ОС',
  'gpuservice.instance.arch': 'Архитектура',
+  'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
  'gpuservice.instance.disk': 'Диск',
  'gpuservice.table.count': 'Количество',
  'gpuservice.instance.disk.system': 'Системный диск',
@@ -144,9 +176,6 @@ export default {
    'Отображаются только события за последний час',
  'gpuservice.instance.event.tab.instance': 'События экземпляра',
  'gpuservice.instance.event.tab.volume': 'События тома',
-  'gpuservice.instance.recreate.confirm.title': 'Подтвердить пересоздание',
-  'gpuservice.instance.recreate.confirm.content':
-    'Текущий экземпляр будет сначала удалён, а затем пересоздан с текущей конфигурацией.\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'Хранилище',
  'gpuservice.storage.add': 'Добавить хранилище',
  'gpuservice.storage.edit': 'Редактировать хранилище',
@@ -47,6 +47,7 @@ export default {
  'menu.settings': 'Settings',
  'menu.gpuService': 'GPU Service',
  'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
  'menu.gpuService.templates': 'Instance Templates',
  'menu.gpuService.storage': 'Storage',
  'menu.gpuService.storageTypes': 'Типы хранилищ',
@@ -69,6 +69,10 @@ export default {
  'noresult.gpuservice.storage.title': 'Нет хранилищ',
  'noresult.gpuservice.storage.subTitle': 'Хранилища ещё не добавлены.',
  'noresult.gpuservice.storage.nofound': 'Подходящие хранилища не найдены.',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
  'noresult.gpuservice.storageType.title': 'Нет типов хранилищ',
  'noresult.gpuservice.storageType.subTitle': 'Типы хранилищ ещё не добавлены.',
  'noresult.gpuservice.storageType.nofound':
@@ -224,6 +224,12 @@ export default {
  'common.title.delete.confirm': 'Silme onayı',
  'common.title.stop.confirm': 'Durdurma onayı',
  'common.title.start.confirm': 'Başlatma onayı',
+  'common.title.activate.confirm': 'Etkinleştirme onayı',
+  'common.title.deactivate.confirm': 'Devre dışı bırakma onayı',
+  'common.activate.single.confirm':
+    'Etkinleştirmek istediğinizden emin misiniz? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
+  'common.deactivate.single.confirm':
+    'Devre dışı bırakmak istediğinizden emin misiniz? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'common.title.recreate.confirm': 'Yeniden oluşturma onayı',
  'common.button.addLabel': 'Etiket Ekle',
  'common.button.addSelector': 'Seçici Ekle',
@@ -113,12 +113,44 @@ export default {
  'gpuservice.instance.gpuCount.noAvailable':
    'Kullanılabilir GPU kaynağı yok, lütfen başka bir örnek türü seçin.',
  'gpuservice.instance.gpuCount.zero': 'Yalnızca CPU, ortam hazırlığı için.',
+  'gpuservice.instance.mode.whole': 'Tam GPU',
+  'gpuservice.instance.mode.sliced': 'Orana Göre',
+  'gpuservice.instance.slice.memoryPercentage': 'VRAM Yüzdesi (%)',
+  'gpuservice.instance.slice.percentage': 'Yüzde (%)',
+  'gpuservice.instance.slice.coresPercentage': 'İşlem Gücü Yüzdesi (%)',
+  'gpuservice.instance.slice.cores.min':
+    'İşlem gücü oranı VRAM oranından ({count}%) küçük olamaz',
+  'gpuservice.instance.slice.fullCores': '%100 İşlem Gücü',
+  'gpuservice.instance.slice.percentage.required':
+    'Lütfen bir yüzde seçin veya girin',
+  'gpuservice.instance.slice.percentage.max':
+    'Oran %1 ile %{count} arasında olmalıdır',
  'gpuservice.instance.stock': 'Stok',
  'gpuservice.instance.sliced': 'Bölünmüş',
+  'gpuservice.instance.sliceable': 'Bölünebilir',
  'gpuservice.instance.memory': 'VRAM',
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'OS',
  'gpuservice.instance.arch': 'Mimari',
+  'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
  'gpuservice.instance.disk': 'Disk',
  'gpuservice.table.count': 'Sayı',
  'gpuservice.instance.disk.system': 'Sistem Diski',
@@ -140,10 +172,6 @@ export default {
    'Yalnızca son bir saatteki olaylar gösterilir',
  'gpuservice.instance.event.tab.instance': 'Örnek Olayları',
  'gpuservice.instance.event.tab.volume': 'Birim Olayları',
-  'gpuservice.instance.recreate.confirm.title':
-    'Yeniden oluşturma onaylansın mı',
-  'gpuservice.instance.recreate.confirm.content':
-    'Mevcut örnek önce silinecek, ardından mevcut yapılandırmayla yeniden oluşturulacaktır.\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'Depolama',
  'gpuservice.storage.add': 'Depolama Ekle',
  'gpuservice.storage.edit': 'Depolamayı Düzenle',
@@ -47,6 +47,7 @@ export default {
  'menu.settings': 'Settings',
  'menu.gpuService': 'GPU Service',
  'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
  'menu.gpuService.templates': 'Instance Templates',
  'menu.gpuService.storage': 'Storage',
  'menu.gpuService.storageTypes': 'Depolama Türleri',
@@ -67,6 +67,10 @@ export default {
  'noresult.gpuservice.storage.title': 'Depolama Yok',
  'noresult.gpuservice.storage.subTitle': 'Henüz depolama eklenmedi.',
  'noresult.gpuservice.storage.nofound': 'Eşleşen depolama bulunamadı.',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
  'noresult.gpuservice.storageType.title': 'Depolama Türü Yok',
  'noresult.gpuservice.storageType.subTitle': 'Henüz depolama türü eklenmedi.',
  'noresult.gpuservice.storageType.nofound':
@@ -212,6 +212,12 @@ export default {
  'common.title.delete.confirm': '确认删除',
  'common.title.stop.confirm': '确认停止',
  'common.title.start.confirm': '确认启动',
+  'common.title.activate.confirm': '确认启用',
+  'common.title.deactivate.confirm': '确认停用',
+  'common.activate.single.confirm':
+    '确定启用 <span style="font-size: 13px;font-weight: 700">{name}？</span>',
+  'common.deactivate.single.confirm':
+    '确定停用 <span style="font-size: 13px;font-weight: 700">{name}？</span>',
  'common.title.recreate.confirm': '确认重新创建',
  'common.button.addLabel': '添加标签',
  'common.button.addSelector': '添加选择器',
@@ -108,12 +108,40 @@ export default {
  'gpuservice.instance.gpuCount.noAvailable':
    '没有可用的 GPU 资源，请选择其他实例类型。',
  'gpuservice.instance.gpuCount.zero': '仅使用 CPU，用于环境准备。',
+  'gpuservice.instance.mode.whole': '整卡',
+  'gpuservice.instance.mode.sliced': '按比例',
+  'gpuservice.instance.slice.memoryPercentage': '显存占比（%）',
+  'gpuservice.instance.slice.percentage': '占比（%）',
+  'gpuservice.instance.slice.coresPercentage': '算力占比（%）',
+  'gpuservice.instance.slice.cores.min': '算力占比需不小于显存占比 {count}%',
+  'gpuservice.instance.slice.fullCores': '100% 算力',
+  'gpuservice.instance.slice.percentage.required': '请选择或输入百分比',
+  'gpuservice.instance.slice.percentage.max': '比例需在 1% 到 {count}% 之间',
  'gpuservice.instance.stock': '库存',
  'gpuservice.instance.sliced': '切分',
+  'gpuservice.instance.sliceable': '可切分',
  'gpuservice.instance.memory': '显存',
  'gpuservice.instance.ram': '内存',
  'gpuservice.instance.os': '系统',
  'gpuservice.instance.arch': '架构',
+  'gpuservice.instanceType': 'GPU 实例类型',
+  'gpuservice.instanceType.add': '添加实例类型',
+  'gpuservice.instanceType.flavor': '规格',
+  'gpuservice.instanceType.flavor.required': '请选择实例类型规格',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU 算力',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU 算力',
+  'gpuservice.instanceType.activate': '启用',
+  'gpuservice.instanceType.deactivate': '停用',
+  'gpuservice.instanceType.platform': '平台',
+  'gpuservice.instanceType.product': '商品',
+  'gpuservice.instanceType.unitCpu': '单位 CPU',
+  'gpuservice.instanceType.unitCpu.tip': '每 GPU 对应多少 CPU',
+  'gpuservice.instanceType.unitRam': '单位内存',
+  'gpuservice.instanceType.unitRam.tip': '每 GPU 对应多少内存',
+  'gpuservice.instanceType.localStorage': '存储',
+  'gpuservice.instanceType.localStorage.tip': '最大可用磁盘',
+  'gpuservice.instanceType.notSliceable': '不可切分',
+  'gpuservice.instanceType.filter.name': '按名称搜索',
  'gpuservice.instance.disk': '磁盘',
  'gpuservice.table.count': '数量',
  'gpuservice.instance.disk.system': '系统盘',
@@ -134,9 +162,6 @@ export default {
  'gpuservice.instance.event.recentHourTip': '仅显示最近一小时的事件。',
  'gpuservice.instance.event.tab.instance': '实例事件',
  'gpuservice.instance.event.tab.volume': '存储卷事件',
-  'gpuservice.instance.recreate.confirm.title': '确认重新创建',
-  'gpuservice.instance.recreate.confirm.content':
-    '系统将先删除当前实例，然后使用当前配置重新创建。\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': '存储',
  'gpuservice.storage.add': '添加存储',
  'gpuservice.storage.edit': '编辑存储',
@@ -47,6 +47,7 @@ export default {
  'menu.models.backendsList': '推理后端',
  'menu.gpuService': 'GPU 服务',
  'menu.gpuService.instances': 'GPU 实例',
+  'menu.gpuService.instanceTypes': '实例类型',
  'menu.gpuService.templates': '实例模板',
  'menu.gpuService.storage': '存储',
  'menu.gpuService.storageTypes': '存储类型',
@@ -63,6 +63,9 @@ export default {
  'noresult.gpuservice.storage.title': '暂无存储',
  'noresult.gpuservice.storage.subTitle': '尚未添加任何存储。',
  'noresult.gpuservice.storage.nofound': '未找到匹配的存储',
+  'noresult.gpuservice.instanceType.title': '暂无实例类型',
+  'noresult.gpuservice.instanceType.subTitle': '创建一个实例类型以开始使用',
+  'noresult.gpuservice.instanceType.nofound': '未找到实例类型',
  'noresult.gpuservice.storageType.title': '暂无存储类型',
  'noresult.gpuservice.storageType.subTitle': '尚未添加任何存储类型。',
  'noresult.gpuservice.storageType.nofound': '未找到匹配的存储类型',
@@ -0,0 +1,208 @@
+import { convertFileSize } from '@/utils';
+import { useIntl } from '@umijs/max';
+import { Flex, Popover, theme } from 'antd';
+import { createStyles } from 'antd-style';
+import type { GlobalToken } from 'antd/es/theme';
+import React from 'react';
+
+export interface DualArcGaugeItem {
+  index: number;
+  label?: string;
+  memory: {
+    total: number; // bytes
+    used: number; // bytes — outer arc (semantic color)
+    allocated: number; // bytes — inner arc (blue)
+  };
+}
+
+interface DualArcGaugeProps {
+  data: DualArcGaugeItem[];
+}
+
+// guage external radius: 20, internal radius: 16, stroke width: 2
+const CX = 25;
+const CY = 24;
+const R_OUT = 20;
+const R_IN = 16;
+const SW = 2.5;
+const L_OUT = Math.PI * R_OUT;
+const L_IN = Math.PI * R_IN;
+const arcPath = (r: number) =>
+  `M ${CX - r} ${CY} A ${r} ${r} 0 0 1 ${CX + r} ${CY}`;
+const P_OUT = arcPath(R_OUT);
+const P_IN = arcPath(R_IN);
+
+const clamp01 = (n: number) => Math.min(Math.max(n, 0), 1);
+
+// Used color: green < 75%, yellow < 90%, red >= 90%
+const usedColor = (ratio: number, token: GlobalToken) => {
+  if (ratio >= 0.9) return token.colorError;
+  if (ratio >= 0.75) return token.colorWarning;
+  return token.colorSuccess;
+};
+
+const useStyles = createStyles(({ css, token }) => ({
+  row: css`
+    width: fit-content;
+    padding: 3px 6px;
+    border-radius: ${token.borderRadius}px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `,
+  index: css`
+    font-size: 12px;
+    font-weight: 500;
+    color: ${token.colorTextSecondary};
+    border-bottom: 1px dashed var(--ant-blue-6);
+    padding-bottom: 3px;
+    line-height: 1.2;
+  `,
+  popTitle: css`
+    font-size: 12px;
+    font-weight: 500;
+    color: ${token.colorText};
+    margin-bottom: 6px;
+  `,
+  popList: css`
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  `,
+  metric: css`
+    white-space: nowrap;
+  `,
+  dot: css`
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  `,
+  value: css`
+    min-width: 64px;
+    text-align: right;
+    font-weight: 500;
+    color: ${token.colorText};
+  `,
+  label: css`
+    color: ${token.colorTextTertiary};
+  `
+}));
+
+const DualArcGauge: React.FC<DualArcGaugeProps> = ({ data }) => {
+  const intl = useIntl();
+  const { styles } = useStyles();
+  const { token } = theme.useToken();
+
+  const trackColor = token.colorFillSecondary;
+  const allocColor = 'var(--ant-blue-6)';
+
+  return (
+    <Flex vertical gap={2} style={{ width: 'fit-content' }}>
+      {data.map((item) => {
+        const { total = 0, used = 0, allocated = 0 } = item.memory || {};
+        const usedR = total > 0 ? clamp01(used / total) : 0;
+        const allocR = total > 0 ? clamp01(allocated / total) : 0;
+        const pct = Math.round(usedR * 100);
+        const uc = usedColor(usedR, token);
+        // set dim color for allocated if used is 0, otherwise use the same color as used
+        const allocDotColor =
+          allocated > 0 ? allocColor : token.colorTextQuaternary;
+
+        const content = (
+          <div>
+            <div className={styles.popTitle}>
+              [{item.index}]{item.label ? ` ${item.label}` : ''} ·{' '}
+              {convertFileSize(total)}
+            </div>
+            <Flex vertical gap={4} className={styles.popList}>
+              <Flex align="center" gap={6} className={styles.metric}>
+                <span className={styles.dot} style={{ background: uc }} />
+                <span className={styles.value}>{convertFileSize(used)}</span>
+                <span className={styles.label}>
+                  {intl.formatMessage({ id: 'resources.table.used' })}
+                </span>
+              </Flex>
+              <Flex align="center" gap={6} className={styles.metric}>
+                <span
+                  className={styles.dot}
+                  style={{ background: allocDotColor }}
+                />
+                <span className={styles.value}>
+                  {convertFileSize(allocated)}
+                </span>
+                <span className={styles.label}>
+                  {intl.formatMessage({ id: 'resources.table.allocated' })}
+                </span>
+              </Flex>
+            </Flex>
+          </div>
+        );
+
+        return (
+          <Popover
+            key={item.index}
+            content={content}
+            placement="right"
+            trigger={['hover', 'click']}
+          >
+            <Flex align="center" gap={6} className={styles.row}>
+              <svg
+                viewBox="0 0 50 28"
+                width={54}
+                height={30}
+                style={{ overflow: 'visible', flexShrink: 0 }}
+              >
+                <path
+                  d={P_OUT}
+                  fill="none"
+                  strokeWidth={SW}
+                  stroke={trackColor}
+                />
+                <path
+                  d={P_IN}
+                  fill="none"
+                  strokeWidth={SW}
+                  stroke={trackColor}
+                />
+                {usedR > 0 && (
+                  <path
+                    d={P_OUT}
+                    fill="none"
+                    strokeWidth={SW}
+                    stroke={uc}
+                    strokeDasharray={`${(usedR * L_OUT).toFixed(1)} ${L_OUT.toFixed(1)}`}
+                  />
+                )}
+                {allocR > 0 && (
+                  <path
+                    d={P_IN}
+                    fill="none"
+                    strokeWidth={SW}
+                    style={{ stroke: allocColor }}
+                    strokeDasharray={`${(allocR * L_IN).toFixed(1)} ${L_IN.toFixed(1)}`}
+                  />
+                )}
+                <text
+                  x={CX}
+                  y={CY - 0.5}
+                  textAnchor="middle"
+                  fontSize={9.5}
+                  fontWeight={500}
+                  fill={uc}
+                  style={{ fontVariantNumeric: 'tabular-nums' }}
+                >
+                  {pct}%
+                </text>
+              </svg>
+              {<span className={styles.index}>[{item.index}]</span>}
+            </Flex>
+          </Popover>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default DualArcGauge;
@@ -60,7 +60,8 @@ const ModelTag: React.FC<ModelTagProps> = ({ categoryKey, size }) => {
        opacity: 1,
        paddingInline: 8,
        borderRadius: 12,
-        transform: 'scale(0.9)'
+        transform: 'scale(0.9)',
+        backgroundColor: 'transparent'
      }}
      color={config.color}
    >
@@ -23,6 +23,11 @@ interface NumberSelectionProps {
  labelExtra?: React.ReactNode;
  maxCount?: number;
  tips?: string;
+  // Explicit preset tick values (e.g. [10,20,...,100] for percentage slicing).
+  // Overrides the default 1..maxCount sequence.
+  presetValues?: number[];
+  // Force the free-input box to show regardless of max/maxCount.
+  alwaysShowInput?: boolean;
  onChange?: (value: number) => void;
 }

@@ -39,17 +44,18 @@ const NumberSelection: React.FC<NumberSelectionProps> = ({
  className,
  maxCount = 8,
  tips,
+  presetValues,
+  alwaysShowInput,
  style,
  onChange
 }) => {
  const intl = useIntl();

-  const showCustomInput = max > maxCount;
-  const presetItems = Array.from(
-    { length: Math.max(0, maxCount) },
-    (_, i) => i + 1
-  );
-  if (min <= 0) {
+  const showCustomInput = alwaysShowInput || max > maxCount;
+  const presetItems =
+    presetValues ??
+    Array.from({ length: Math.max(0, maxCount) }, (_, i) => i + 1);
+  if (!presetValues && min <= 0) {
    presetItems.unshift(0);
  }
  const items = presetItems;
@@ -39,9 +39,20 @@
    display: flex;
    align-items: center;
    padding: 0 12px;
+    padding-right: 2px;
    color: var(--ant-color-text-tertiary);
    white-space: nowrap;
    padding-block: 6px;
+    width: 100%;
+
+    // Spread the label and its labelExtra (e.g. the whole/sliced Segmented)
+    // to opposite ends of the row.
+    :global(.label-text) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
  }
  .contentWrapper {
    width: 100%;
@@ -6,10 +6,12 @@ import {
  AutoTooltip,
  DropdownButtons,
  IconFont,
-  icons
+  icons,
+  TextAttribute,
+  ThemeTag
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { MenuProps, Tag, Tooltip } from 'antd';
+import { MenuProps, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -139,23 +141,14 @@ const useModelsColumns = ({
        key: 'name',
        sorter: tableSorter(1),
        render: (text: string, record: ListItem) => (
-          <span className="flex items-center">
+          <span className="flex items-center gap-8">
            <AutoTooltip ghost style={{ maxWidth: 400 }} title={text}>
              <span className="text-primary">{text}</span>
            </AutoTooltip>
            {record.is_custom && (
-              <Tag
-                style={{
-                  marginLeft: 8,
-                  borderRadius: 12,
-                  color: 'var(--ant-color-text-tertiary)',
-                  borderColor: 'var(--ant-color-split)',
-                  backgroundColor: 'transparent'
-                }}
-                variant="outlined"
-              >
+              <TextAttribute>
                {intl.formatMessage({ id: 'playground.params.custom' })}
-              </Tag>
+              </TextAttribute>
            )}
          </span>
        )
@@ -203,26 +196,13 @@ const useModelsColumns = ({
            )}
            {(record.scope?.includes('inference') ||
              record.scope?.includes('*')) && (
-              <div
-                style={{
-                  border: '1px solid var(--ant-color-split)',
-                  color: 'var(--ant-color-text-tertiary)',
-                  backgroundColor: 'var(--ant-color-fill-quaternary)',
-                  borderRadius: 4,
-                  fontSize: 13,
-                  paddingInline: 8,
-                  flexGrow: 0,
-                  maxWidth: '100%',
-                  width: 'max-content',
-                  display: 'flex'
-                }}
-              >
+              <ThemeTag>
                <AutoTooltip ghost>
                  {record.allowed_model_names?.length
                    ? record.allowed_model_names.join(', ')
                    : intl.formatMessage({ id: 'apikeys.models.all' })}
                </AutoTooltip>
-              </div>
+              </ThemeTag>
            )}
          </div>
        )
@@ -232,6 +232,7 @@ const APIKeys: React.FC = () => {
        ></FilterBar>
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -120,13 +120,19 @@ const CommunityBackends: React.FC<{

  const renderItem = (item: ListItem) => {
    return (
-      <BackendCard
-        active={currentData?.id === item.id}
-        data={item}
-        layout="community"
-        onClick={handleOnClickItem}
-        actionsRenderer={actionsRenderer}
-      />
+      <div
+        style={{
+          backgroundColor: 'var(--ant-color-bg-container)'
+        }}
+      >
+        <BackendCard
+          active={currentData?.id === item.id}
+          data={item}
+          layout="community"
+          onClick={handleOnClickItem}
+          actionsRenderer={actionsRenderer}
+        />
+      </div>
    );
  };

@@ -45,7 +45,7 @@ const Title = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
-  background-color: var(--ant-color-bg-container);
+  background-color: var(--ant-color-bg-elevated);
  font-weight: 600;
  padding-top: 8px;
  padding-bottom: 8px;
@@ -358,6 +358,9 @@ const Clusters: React.FC = () => {
        dataList={list}
        provider={options.parent?.provider}
        clusterId={options.parent?.id}
+        gridTemplate={options.gridTemplate}
+        prefixWidth={options.prefixWidth}
+        columns={options.columns}
      />
    );
  };
@@ -395,6 +398,7 @@ const Clusters: React.FC = () => {
        >
          <SealTable
            rowKey="id"
+            emptyMinHeight="calc(100vh - 300px)"
            loadChildren={getWorkerPoolList}
            sortDirections={TABLE_SORT_DIRECTIONS}
            expandedRowKeys={expandedRowKeys}
@@ -2,13 +2,14 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import {
  CellContent,
+  type ChildGridOptions,
  DeleteModal,
-  RowChildren,
+  ExpandedRowGrid,
  TableRowProvider
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Col, message, Row } from 'antd';
+import { message } from 'antd';
 import _ from 'lodash';
 import React, { useRef, useState } from 'react';
 import { deleteWorkerPool, updateWorkerPool } from '../apis';
@@ -16,7 +17,10 @@ import { ProviderType } from '../config';
 import { NodePoolFormData, NodePoolListItem } from '../config/types';
 import usePoolsColumns from '../hooks/use-pools-columns';
 import AddPool from './add-pool';
-interface PoolRowsProps {
+interface PoolRowsProps extends Pick<
+  ChildGridOptions,
+  'gridTemplate' | 'prefixWidth' | 'columns'
+> {
  dataList: NodePoolListItem[];
  provider: ProviderType;
  clusterId: number | string;
@@ -25,9 +29,35 @@ interface PoolRowsProps {
 const PoolRows: React.FC<PoolRowsProps> = ({
  dataList,
  provider,
-  clusterId
+  clusterId,
+  gridTemplate,
+  prefixWidth = 0,
+  columns: parentColumns
 }) => {
  const intl = useIntl();
+
+  // The child row shares the parent's column grid; cells flow left-to-right and
+  // only declare a span, keyed on the pool column's OWN dataIndex — never on a
+  // parent cluster column key. Parent layout: name (1) | provider…state middle
+  // region | created_at (1) | operations (1). The three middle pool columns
+  // cover that region: `replicas`→state (last, 1 track), `image_name`→
+  // models+workers (2 tracks), `instance_type` absorbs the rest (plugins +
+  // provider + gpus).
+  const columnCount = parentColumns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 3, 1);
+  const spanFor = (dataIndex: string): number => {
+    switch (dataIndex) {
+      case 'instance_type':
+        return Math.max(middleSpan - 3, 1);
+      case 'image_name':
+        return 2;
+      case 'replicas':
+        return 1;
+      default:
+        // name / created_at / operations align 1:1 with their parent column.
+        return 1;
+    }
+  };
  const modalRef = useRef<any>(null);
  const [addPoolStatus, setAddPoolStatus] = useState<{
    open: boolean;
@@ -62,8 +92,10 @@ const PoolRows: React.FC<PoolRowsProps> = ({
    }
  };

-  const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
-    console.log('handleOncell===', row, dataIndex);
+  const handleOnCell = async (
+    row: NodePoolListItem,
+    _data: { dataIndex: string; newValue: any; oldValue: any }
+  ) => {
    try {
      await updateWorkerPool({
        data: row,
@@ -118,31 +150,29 @@ const PoolRows: React.FC<PoolRowsProps> = ({
    <>
      {dataList?.map((data: NodePoolListItem) => {
        return (
-          <div
+          <TableRowProvider
            key={data.id}
-            style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
+            value={{ row: data, onCell: handleOnCell }}
          >
-            <TableRowProvider value={{ row: data, onCell: handleOnCell }}>
-              <RowChildren>
-                <Row style={{ width: '100%' }} align="middle">
-                  {columns.map((col: Record<string, any>) => {
-                    return (
-                      <Col
-                        key={col.dataIndex || col.key}
-                        span={col.span}
-                        style={{
-                          paddingInline: 0,
-                          ...(col.style || {})
-                        }}
-                      >
-                        <CellContent {..._.omit(col, ['key'])}></CellContent>
-                      </Col>
-                    );
-                  })}
-                </Row>
-              </RowChildren>
-            </TableRowProvider>
-          </div>
+            <ExpandedRowGrid
+              gridTemplate={gridTemplate}
+              prefixWidth={prefixWidth}
+            >
+              {columns.map((col: Record<string, any>) => (
+                <ExpandedRowGrid.Cell
+                  key={col.dataIndex || col.key}
+                  span={spanFor(col.dataIndex)}
+                  style={{
+                    color: 'var(--ant-color-text-secondary)'
+                  }}
+                >
+                  <CellContent
+                    {..._.omit(col, ['key', 'style', 'span'])}
+                  ></CellContent>
+                </ExpandedRowGrid.Cell>
+              ))}
+            </ExpandedRowGrid>
+          </TableRowProvider>
        );
      })}
      <AddPool
@@ -200,6 +200,7 @@ const Credentials: React.FC = () => {

        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            tableLayout="fixed"
            columns={columns}
            dataSource={dataSource.dataList}
@@ -153,7 +153,7 @@ const useClusterColumns = (
        span: 3,
        render: (text: string, record: ClusterListItem) => (
          <>
-            <AutoTooltip ghost title={text}>
+            <AutoTooltip ghost title={text} minWidth={20}>
              <span className="text-primary">{record.name}</span>
            </AutoTooltip>
            {record.is_default && (
@@ -176,6 +176,7 @@ const useClusterColumns = (
        dataIndex: 'provider',
        sorter: tableSorter(2),
        span: spans.provider,
+        minWidth: 110,
        render: (value: string) => (
          <AutoTooltip ghost minWidth={20}>
            {ProviderLabelMap[value]}
@@ -185,7 +186,7 @@ const useClusterColumns = (
      {
        title: intl.formatMessage({ id: 'dashboard.totalgpus' }),
        dataIndex: 'gpus',
-        span: 2,
+        width: 100,
        sorter: tableSorter(3),
        render: (value: number) => <span>{value}</span>
      },
@@ -194,13 +195,15 @@ const useClusterColumns = (
        dataIndex: 'models',
        sorter: tableSorter(4),
        span: spans.deployments,
+        maxWidth: 150,
        render: (value: number) => <span>{value}</span>
      },
      {
        title: intl.formatMessage({ id: 'resources.nodes' }),
        dataIndex: 'workers',
+        minWidth: 100,
+        maxWidth: 120,
        sorter: tableSorter(5),
-        span: spans.workers,
        render: (value: number, record: ClusterListItem) => (
          <span>
            {record.ready_workers} / {record.workers}
@@ -211,6 +214,8 @@ const useClusterColumns = (
        title: intl.formatMessage({ id: 'common.table.status' }),
        dataIndex: 'state',
        span: spans.status,
+        minWidth: 80,
+        align: 'center',
        render: (value: number, record: ClusterListItem) => (
          <StatusTag
            statusValue={{
@@ -225,7 +230,7 @@ const useClusterColumns = (
        title: intl.formatMessage({ id: 'common.table.createTime' }),
        dataIndex: 'created_at',
        sorter: tableSorter(6),
-        span: spans.createTime,
+        width: 180,
        render: (value: string) => (
          <AutoTooltip ghost minWidth={20}>
            {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
@@ -43,12 +43,9 @@ const usePoolsColumns = (
          showTitle: false
        },
        span: 3,
-        style: {
-          paddingInline: 'var(--ant-table-cell-padding-inline)'
-        },
        render: (text: string) => (
          <AutoTooltip title={text} ghost minWidth={20}>
-            {text}
+            <span className="text-primary">{text}</span>
          </AutoTooltip>
        )
      },
@@ -60,9 +57,6 @@ const usePoolsColumns = (
          showTitle: false
        },
        span: 4,
-        style: {
-          paddingLeft: 62
-        },
        render: (text: string, record: ListItem) => (
          <AutoTooltip
            title={
@@ -98,9 +92,6 @@ const usePoolsColumns = (
        ellipsis: {
          showTitle: false
        },
-        style: {
-          paddingLeft: 56
-        },
        render: (text: string) => (
          <AutoTooltip
            title={
@@ -125,9 +116,6 @@ const usePoolsColumns = (
        dataIndex: 'replicas',
        span: 6,
        key: 'replicas',
-        style: {
-          paddingLeft: 50
-        },
        editable: {
          valueType: 'number',
          title: intl.formatMessage({ id: 'models.table.replicas.edit' })
@@ -165,9 +153,6 @@ const usePoolsColumns = (
        ellipsis: {
          showTitle: false
        },
-        style: {
-          paddingLeft: 42
-        },
        render: (text: string) => (
          <AutoTooltip ghost minWidth={20}>
            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -179,9 +164,6 @@ const usePoolsColumns = (
        key: 'operations',
        dataIndex: 'operations',
        span: 3,
-        style: {
-          paddingLeft: 36
-        },
        render: (text: string, record: ListItem) => (
          <DropdownButtons
            items={actionItems}
@@ -0,0 +1,76 @@
+import { request } from '@umijs/max';
+import { FlavorItem, FormData, ListItem } from '../config/types';
+
+export const GPU_INSTANCE_TYPES_API = '/gpu-instance-types';
+
+export const GPU_INSTANCE_TYPE_FLAVORS_API = '/gpu-instance-type-flavors';
+
+// GET /gpu-instance-types?cluster_id — instance types defined on a cluster.
+export async function queryGPUInstanceTypes(
+  params: { cluster_id: number },
+  options?: any
+) {
+  return request<{ items: ListItem[] }>(GPU_INSTANCE_TYPES_API, {
+    method: 'GET',
+    params,
+    cancelToken: options?.token
+  });
+}
+
+// GET /gpu-instance-type-flavors?cluster_id — the hardware flavors a new
+// instance type can be based on.
+export async function queryGPUInstanceTypeFlavors(
+  params: { cluster_id: number },
+  options?: any
+) {
+  return request<{ items: FlavorItem[] }>(GPU_INSTANCE_TYPE_FLAVORS_API, {
+    method: 'GET',
+    params,
+    cancelToken: options?.token
+  });
+}
+
+// POST /gpu-instance-types?cluster_id (GPUInstanceTypeCreate).
+export async function createGPUInstanceType(params: {
+  cluster_id: number;
+  data: FormData;
+}) {
+  return request<ListItem>(GPU_INSTANCE_TYPES_API, {
+    method: 'POST',
+    params: { cluster_id: params.cluster_id },
+    data: params.data
+  });
+}
+
+// DELETE /gpu-instance-types/{name}?cluster_id.
+export async function deleteGPUInstanceType(params: {
+  name: string;
+  cluster_id: number;
+}) {
+  return request(`${GPU_INSTANCE_TYPES_API}/${params.name}`, {
+    method: 'DELETE',
+    params: { cluster_id: params.cluster_id }
+  });
+}
+
+// PUT /gpu-instance-types/{name}/activate?cluster_id — activate an instance type.
+export async function activateGPUInstanceType(params: {
+  name: string;
+  cluster_id: number;
+}) {
+  return request(`${GPU_INSTANCE_TYPES_API}/${params.name}/activate`, {
+    method: 'PUT',
+    params: { cluster_id: params.cluster_id }
+  });
+}
+
+// PUT /gpu-instance-types/{name}/deactivate?cluster_id — deactivate an instance type.
+export async function deactivateGPUInstanceType(params: {
+  name: string;
+  cluster_id: number;
+}) {
+  return request(`${GPU_INSTANCE_TYPES_API}/${params.name}/deactivate`, {
+    method: 'PUT',
+    params: { cluster_id: params.cluster_id }
+  });
+}
@@ -0,0 +1,114 @@
+import useSubmitLock from '@/hooks/use-submit-lock';
+import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { message } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { FlavorItem, FormData } from '../config/types';
+import GPUServiceInstanceTypeForm from '../forms';
+import useQueryFlavors from '../services/use-query-flavors';
+
+type AddInstanceTypeModalProps = {
+  title: string;
+  open: boolean;
+  clusterId?: number;
+  onOk: (values: FormData) => void;
+  onCancel: () => void;
+};
+
+const AddInstanceTypeModal: React.FC<AddInstanceTypeModalProps> = ({
+  title,
+  open,
+  clusterId,
+  onOk,
+  onCancel
+}) => {
+  const intl = useIntl();
+  const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
+  const [selectedFlavor, setSelectedFlavor] = useState<FlavorItem | null>(null);
+  const {
+    dataList: flavorList,
+    loading: flavorLoading,
+    fetchFlavors
+  } = useQueryFlavors();
+
+  // Fetch flavors when the drawer opens and auto-select the first one, so the
+  // form's flavor-derived fields (group / acceleratable) are always set.
+  useEffect(() => {
+    if (!open) {
+      setSelectedFlavor(null);
+      return;
+    }
+    if (!clusterId) return;
+    const load = async () => {
+      const list = await fetchFlavors(clusterId);
+      setSelectedFlavor(list?.[0] ?? null);
+    };
+    load();
+  }, [open, clusterId]);
+
+  const handleSubmit = () => {
+    if (!selectedFlavor) {
+      message.warning(
+        intl.formatMessage({ id: 'gpuservice.instanceType.flavor.required' })
+      );
+      return;
+    }
+    guard(() => form.current?.submit());
+  };
+
+  const handleCancel = () => {
+    form.current?.resetFields();
+    onCancel();
+  };
+
+  const onFinish = async (values: FormData) => {
+    await run(() => onOk({ ...values }));
+  };
+
+  return (
+    <GSDrawer
+      title={title}
+      open={open}
+      onClose={handleCancel}
+      destroyOnHidden
+      closeIcon={false}
+      mask={{ closable: false }}
+      keyboard={false}
+      styles={{
+        wrapper: { width: 'min(600px, calc(100vw - 220px))' },
+        body: { overflowY: 'hidden' }
+      }}
+      footer={false}
+    >
+      <ColumnWrapper
+        styles={{ container: { paddingBlock: 0 } }}
+        footer={
+          <ModalFooter
+            onOk={handleSubmit}
+            onCancel={handleCancel}
+            loading={loading}
+            style={{
+              padding: '16px 24px 8px',
+              display: 'flex',
+              justifyContent: 'flex-end'
+            }}
+          />
+        }
+      >
+        <GPUServiceInstanceTypeForm
+          ref={form}
+          open={open}
+          selectedFlavor={selectedFlavor}
+          flavorList={flavorList}
+          flavorLoading={flavorLoading}
+          onFlavorChange={setSelectedFlavor}
+          onFinish={onFinish}
+          onFinishFailed={release}
+        />
+      </ColumnWrapper>
+    </GSDrawer>
+  );
+};
+
+export default AddInstanceTypeModal;
@@ -0,0 +1,118 @@
+import { AutoTooltip, ThemeTag } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Flex } from 'antd';
+import { formatMemoryDisplay } from '../../instances/config';
+import { manufactureColorMap } from '../../templates/config';
+import { formatManufacturer } from '../../utils';
+
+// The subset of a flavor / instance-type display shape the flavor renderers
+// read. Flavor specs satisfy it directly (minus sliceable, which the API
+// removed from flavors); the management list builds it from spec.acceleratable
+// + status.detail, deriving sliceable from slicedDetail.
+interface FlavorSpecLike {
+  manufacturer?: string | null;
+  product?: string | null;
+  memory?: string | null;
+  sliceable?: boolean;
+  acceleratable?: boolean;
+}
+
+// A flavor's title mirrors the flavor card: a generic (no product, no/`generic`
+// manufacturer, non-acceleratable) flavor reads as "CPU-only".
+export const getFlavorTitle = (
+  spec: FlavorSpecLike = {},
+  fallbackName?: string | null
+) => {
+  const manufacturer = spec.manufacturer || '';
+  const isCpuOnly =
+    !spec.acceleratable &&
+    !spec.product &&
+    (!manufacturer || manufacturer.toLowerCase() === 'generic');
+  return isCpuOnly ? 'CPU-only' : spec.product || fallbackName || '-';
+};
+
+// Secondary line, dot-separated: manufacturer · memory · sliceable. memory and
+// sliceable apply to accelerator (GPU) flavors only; sliceable stays a tag.
+// Returns null when a (generic) flavor has nothing to show.
+export const FlavorMeta: React.FC<{ spec?: FlavorSpecLike }> = ({
+  spec = {}
+}) => {
+  const intl = useIntl();
+  const manufacturer = spec.manufacturer || '';
+  const color = manufactureColorMap[manufacturer] ?? 'purple';
+  const memory = spec.acceleratable
+    ? formatMemoryDisplay(spec.memory ?? undefined)
+    : '';
+
+  const pieces: React.ReactNode[] = [];
+  if (manufacturer) {
+    pieces.push(
+      <ThemeTag
+        key="vendor"
+        color={color}
+        style={{ fontWeight: 400, marginInlineEnd: 0 }}
+      >
+        {formatManufacturer(manufacturer)}
+      </ThemeTag>
+    );
+  }
+  if (memory) {
+    pieces.push(<span key="memory">{memory}</span>);
+  }
+  if (!pieces.length) return null;
+
+  return (
+    <Flex
+      align="center"
+      gap={8}
+      style={{
+        minWidth: 0,
+        color: 'var(--ant-color-text-tertiary)',
+        fontSize: 12
+      }}
+    >
+      {pieces.flatMap((piece, index) =>
+        index === 0
+          ? [piece]
+          : [
+              <span
+                key={`dot-${index}`}
+                style={{ color: 'var(--ant-color-text-quaternary)' }}
+              >
+                ·
+              </span>,
+              piece
+            ]
+      )}
+    </Flex>
+  );
+};
+
+// Two-line flavor display: title on top, meta row below. Shared by the create
+// drawer's dropdown option and the management list's flavor cell.
+export const FlavorOption: React.FC<{
+  spec?: FlavorSpecLike;
+  fallbackName?: string | null;
+  maxWidth?: number | string;
+}> = ({ spec = {}, fallbackName, maxWidth = '100%' }) => (
+  <Flex vertical gap={4} style={{ minWidth: 0, padding: '2px 0' }}>
+    <AutoTooltip ghost minWidth={20} maxWidth={maxWidth}>
+      {getFlavorTitle(spec, fallbackName)}
+    </AutoTooltip>
+    <FlavorMeta spec={spec} />
+  </Flex>
+);
+
+// Single-line flavor display: title then meta inline. Used for the collapsed
+// selected value in the create drawer's Select.
+export const FlavorSelected: React.FC<{
+  spec?: FlavorSpecLike;
+  fallbackName?: string | null;
+}> = ({ spec = {}, fallbackName }) => (
+  <Flex align="center" gap={8} style={{ minWidth: 0 }}>
+    <AutoTooltip ghost minWidth={20} maxWidth={200}>
+      {getFlavorTitle(spec, fallbackName)}
+    </AutoTooltip>
+    <FlavorMeta spec={spec} />
+  </Flex>
+);
@@ -0,0 +1,120 @@
+import { FileSkeletonRows } from '@/pages/llmodels/components/model-source/file-skeleton';
+import {
+  AutoTooltip,
+  IconFont,
+  TemplateCard,
+  ThemeTag
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Empty, Flex, Spin, Typography } from 'antd';
+import _ from 'lodash';
+import { formatMemoryDisplay } from '../../instances/config';
+import { manufactureColorMap } from '../../templates/config';
+import { FlavorItem } from '../config/types';
+import styles from '../styles/instance-types.module.less';
+
+const { Text } = Typography;
+
+interface FlavorListProps {
+  value?: string;
+  dataList: FlavorItem[];
+  loading?: boolean;
+  onChange?: (item: FlavorItem) => void;
+}
+
+const MetaItem: React.FC<{
+  icon: string;
+  label: string;
+  value?: React.ReactNode;
+}> = ({ icon, label, value }) => {
+  return (
+    <span className={styles.metaLabel}>
+      <IconFont className="icon" type={icon} />
+      {label}: <span className={styles.metaValue}>{value ?? '-'}</span>
+    </span>
+  );
+};
+
+const FlavorList: React.FC<FlavorListProps> = ({
+  value,
+  dataList,
+  loading,
+  onChange
+}) => {
+  const intl = useIntl();
+
+  if (!dataList.length) {
+    if (loading) {
+      return (
+        <Spin spinning size="middle">
+          <Flex vertical gap={16} style={{ minHeight: 200 }}>
+            {_.times(6, (index: number) => (
+              <FileSkeletonRows key={index} counts={2} itemHeight={96} />
+            ))}
+          </Flex>
+        </Spin>
+      );
+    }
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+  }
+
+  return (
+    <Flex vertical gap={16}>
+      {dataList.map((item) => {
+        const spec = item.spec || {};
+        const manufacturer = spec.manufacturer || '';
+        const color = manufactureColorMap[manufacturer] ?? 'purple';
+        // A generic (no product, no/`generic` manufacturer) flavor is shown as
+        // "CPU-only" instead of falling back to the raw flavor name.
+        const isCpuOnly =
+          !spec.acceleratable &&
+          !spec.product &&
+          (!manufacturer || manufacturer.toLowerCase() === 'generic');
+        const title = isCpuOnly ? 'CPU-only' : spec.product || item.name || '-';
+        return (
+          <TemplateCard
+            key={item.name}
+            className={styles.flavorCard}
+            clickable
+            ghost
+            hoverable
+            active={value === item.name}
+            onClick={() => onChange?.(item)}
+          >
+            <Flex vertical gap={12} style={{ width: '100%' }}>
+              <Flex align="center" justify="space-between" gap={8}>
+                <div style={{ minWidth: 0, fontWeight: 500 }}>
+                  <AutoTooltip ghost minWidth={20}>
+                    <Text>{title}</Text>
+                  </AutoTooltip>
+                </div>
+                {manufacturer && (
+                  <ThemeTag color={color} style={{ fontWeight: 400 }}>
+                    {manufacturer.toUpperCase()}
+                  </ThemeTag>
+                )}
+              </Flex>
+              {/* Memory only applies to accelerator (GPU) flavors; a
+                  non-acceleratable (generic) flavor has none. (Sliceable is no
+                  longer a flavor field — it is observed per instance type on
+                  status.detail.slicedDetail.) */}
+              {spec.acceleratable && (
+                <Flex wrap gap={16}>
+                  <MetaItem
+                    icon="icon-ram-02"
+                    label={intl.formatMessage({
+                      id: 'gpuservice.instance.memory'
+                    })}
+                    value={formatMemoryDisplay(spec.memory ?? undefined) ?? '-'}
+                  />
+                </Flex>
+              )}
+            </Flex>
+          </TemplateCard>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default FlavorList;
@@ -0,0 +1,151 @@
+import {
+  AutoTooltip,
+  DropdownActions,
+  IconFont,
+  StatusTag,
+  TemplateCard,
+  ThemeTag
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import _ from 'lodash';
+import { formatMemoryDisplay, isSliceableDetail } from '../../instances/config';
+import { manufactureColorMap } from '../../templates/config';
+import { ceilMilliToCore, parseQuantityToGi } from '../../utils';
+import {
+  InstanceTypePhaseLabelMap,
+  status as phaseStatusMap,
+  rowActionList
+} from '../config';
+import { ListItem } from '../config/types';
+import styles from '../styles/instance-types.module.less';
+
+interface InstanceTypeCardProps {
+  data: ListItem;
+  onDelete?: (record: ListItem) => void;
+}
+
+const InstanceTypeCard: React.FC<InstanceTypeCardProps> = ({
+  data,
+  onDelete
+}) => {
+  const intl = useIntl();
+  const spec = data.spec || {};
+  // Observed hardware (manufacturer / memory / sliced capability, …) comes
+  // from status.detail and may be absent until the operator backfills status.
+  const detail = data.status?.detail || {};
+  const unit = spec.unitResources || {};
+  const phase = data.status?.phase || '';
+  const manufacturer = detail.manufacturer || '';
+  const manufacturerColor = manufactureColorMap[manufacturer] ?? 'purple';
+  const sliceable = isSliceableDetail(detail.slicedDetail);
+
+  const memoryText = formatMemoryDisplay(detail.memory ?? undefined);
+
+  // Base resources, formatted into a single "·"-separated line. Falsy parts
+  // (e.g. a CPU-only type without VRAM) drop out rather than showing "-".
+  const cpuCores = ceilMilliToCore(unit.cpu ?? null)?.cores;
+  const ramGi = parseQuantityToGi(unit.ram ?? null)?.value;
+  const storageGi = parseQuantityToGi(spec.localStorage ?? null)?.value;
+  const osLabel = _.capitalize(spec.os || '');
+  const archLabel = _.toUpper(spec.arch || '');
+  const storageWord = intl.formatMessage({
+    id: 'gpuservice.instanceType.localStorage'
+  });
+  const footerParts = [
+    cpuCores != null ? `${cpuCores} vCPU` : null,
+    ramGi != null ? `${ramGi} GiB RAM` : null,
+    storageGi != null ? `${storageGi} GiB ${storageWord}` : null,
+    osLabel ? `${osLabel}${archLabel ? ` (${archLabel})` : ''}` : null
+  ].filter(Boolean) as string[];
+
+  const handleAction = (item: any) => {
+    if (item.key === 'delete') {
+      onDelete?.(data);
+    }
+  };
+
+  return (
+    <TemplateCard
+      className={styles.listCard}
+      clickable={false}
+      hoverable
+      ghost
+      header={
+        <div className={styles.header}>
+          <span className={styles.product}>
+            <AutoTooltip ghost minWidth={20}>
+              {detail.product || data.name || '-'}
+            </AutoTooltip>
+          </span>
+          <span className={styles.headerRight}>
+            <span onClick={(e) => e.stopPropagation()}>
+              <DropdownActions
+                menu={{ items: rowActionList, onClick: handleAction }}
+              >
+                <Button
+                  icon={<IconFont type="icon-more" />}
+                  size="small"
+                  type="text"
+                />
+              </DropdownActions>
+            </span>
+          </span>
+        </div>
+      }
+    >
+      <div className={styles.card}>
+        <div className={styles.hero}>
+          <span className={styles.name}>
+            <AutoTooltip ghost minWidth={20}>
+              {data.name || '-'}
+            </AutoTooltip>
+          </span>
+          <span className={styles.memory}>{memoryText || '—'}</span>
+        </div>
+
+        <div className={styles.subline}>
+          {manufacturer && (
+            <ThemeTag color={manufacturerColor} style={{ fontWeight: 400 }}>
+              {manufacturer.toUpperCase()}
+            </ThemeTag>
+          )}
+          {phase ? (
+            <StatusTag
+              statusValue={{
+                status: phaseStatusMap[phase],
+                text: InstanceTypePhaseLabelMap[phase] || phase,
+                message: data.status?.phaseMessage || ''
+              }}
+            />
+          ) : null}
+          {detail.clockSpeed ? <span>{detail.clockSpeed}</span> : null}
+          <span
+            className={`${styles.tag} ${
+              sliceable ? styles.tagSliceable : styles.tagPlain
+            }`}
+          >
+            {sliceable
+              ? intl.formatMessage({ id: 'gpuservice.instance.sliceable' })
+              : intl.formatMessage({
+                  id: 'gpuservice.instanceType.notSliceable'
+                })}
+          </span>
+        </div>
+
+        <div className={styles.divider} />
+
+        <div className={styles.footer}>
+          {footerParts.map((part, index) => (
+            <span key={part}>
+              {index > 0 && <span className={styles.dotSep}>·</span>}
+              {part}
+            </span>
+          ))}
+        </div>
+      </div>
+    </TemplateCard>
+  );
+};
+
+export default InstanceTypeCard;
@@ -0,0 +1,31 @@
+import { ResizeContainer } from '@gpustack/core-ui';
+import { Spin } from 'antd';
+import { ListItem } from '../config/types';
+import InstanceTypeCard from './instance-type-card';
+
+interface InstanceTypeListProps {
+  dataList: ListItem[];
+  loading: boolean;
+  onDelete?: (record: ListItem) => void;
+}
+
+const InstanceTypeList: React.FC<InstanceTypeListProps> = ({
+  dataList,
+  loading,
+  onDelete
+}) => {
+  return (
+    <Spin spinning={loading} size="middle">
+      <ResizeContainer
+        defaultSpan={8}
+        resizable
+        dataList={dataList}
+        renderItem={(item: ListItem) => (
+          <InstanceTypeCard data={item} onDelete={onDelete} />
+        )}
+      />
+    </Spin>
+  );
+};
+
+export default InstanceTypeList;
@@ -0,0 +1,47 @@
+import { StatusMaps } from '@/config';
+import { StatusType } from '@/config/types';
+import { icons } from '@gpustack/core-ui';
+
+// os is fixed to lowercase "linux" on the wire; the form only ever shows Linux.
+export const GPU_INSTANCE_TYPE_OS = 'linux';
+
+export const InstanceTypePhaseValueMap = {
+  Active: 'Active',
+  Inactive: 'Inactive',
+  Draining: 'Draining'
+};
+
+export const InstanceTypePhaseLabelMap: Record<string, string> = {
+  [InstanceTypePhaseValueMap.Active]: 'Active',
+  [InstanceTypePhaseValueMap.Inactive]: 'Inactive',
+  [InstanceTypePhaseValueMap.Draining]: 'Draining'
+};
+
+export const status: Record<string, StatusType> = {
+  [InstanceTypePhaseValueMap.Active]: StatusMaps.success,
+  [InstanceTypePhaseValueMap.Inactive]: StatusMaps.inactive,
+  [InstanceTypePhaseValueMap.Draining]: StatusMaps.transitioning
+};
+
+export const ArchOptions = [
+  { label: 'AMD64', value: 'amd64' },
+  { label: 'ARM64', value: 'arm64' }
+];
+
+// ``icon`` is narrowed to ``any`` so the inferred type doesn't reach into
+// the antd icon component's internal path.
+export const rowActionList: Array<{
+  label: string;
+  key: string;
+  locale: boolean;
+  icon: any;
+  danger?: boolean;
+}> = [
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    locale: true,
+    icon: icons.DeleteOutlined,
+    danger: true
+  }
+];
@@ -0,0 +1,73 @@
+import {
+  InstanceTypeDetail,
+  InstanceTypeResource
+} from '../../instances/config/types';
+
+export interface UnitResources {
+  cpu?: string | null;
+  ram?: string | null;
+}
+
+// spec carries user-defined fields only; observed hardware (manufacturer,
+// memory, sliced capability, …) lives on status.detail.
+export interface InstanceTypeSpec {
+  displayName?: string | null;
+  os?: string | null;
+  arch?: string | null;
+  acceleratable?: boolean;
+  acceleratorGroup?: string | null;
+  generalGroup?: string | null;
+  unitResources?: UnitResources | null;
+  localStorage?: string | null;
+}
+
+export interface InstanceTypeStatus {
+  // Observed hardware descriptor; absent until the operator backfills status.
+  detail?: InstanceTypeDetail | null;
+  phase?: string | null;
+  phaseMessage?: string | null;
+  // Per-mode resource accounting ({onceMaxRequest, remaining, capacity}).
+  accelerator?: InstanceTypeResource | null;
+  acceleratorShared?: InstanceTypeResource | null;
+  acceleratorSliced?: InstanceTypeResource | null;
+  cpu?: InstanceTypeResource | null;
+}
+
+// Row shape for the management list (GET /gpu-instance-types).
+export interface ListItem {
+  name: string;
+  spec: InstanceTypeSpec;
+  status?: InstanceTypeStatus;
+}
+
+// Selectable flavor shown in the create drawer's first column
+// (GET /gpu-instance-type-flavors). Its acceleratorGroup / generalGroup /
+// acceleratable are copied into the created instance type.
+export interface FlavorItem {
+  name: string;
+  spec: {
+    manufacturer?: string | null;
+    product?: string | null;
+    family?: string | null;
+    memory?: string | null;
+    cores?: string | null;
+    acceleratable?: boolean;
+    acceleratorGroup?: string | null;
+    generalGroup?: string | null;
+  };
+}
+
+// Body for POST /gpu-instance-types (GPUInstanceTypeCreate).
+export interface FormData {
+  name: string;
+  spec: {
+    displayName?: string | null;
+    acceleratorGroup?: string | null;
+    generalGroup?: string | null;
+    acceleratable?: boolean;
+    os: string;
+    arch?: string | null;
+    unitResources?: UnitResources;
+    localStorage?: string | null;
+  };
+}
@@ -0,0 +1,327 @@
+import { validateLabelNameRegxFor63 } from '@/config';
+import {
+  Input as CInput,
+  InputNumber,
+  Select as SealSelect,
+  useAppUtils
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import {
+  FlavorOption,
+  FlavorSelected,
+  getFlavorTitle
+} from '../components/flavor-display';
+import { ArchOptions, GPU_INSTANCE_TYPE_OS } from '../config';
+import { FlavorItem, FormData } from '../config/types';
+import styles from '../styles/instance-types.module.less';
+
+// RAM / storage are entered as a plain number in GB but stored/submitted as a
+// "Gi" quantity string. These drive the FormItem's submit (`normalize`) and
+// display (`getValueProps`) conversions.
+const giNormalize = (value?: number | string | null) =>
+  value ? `${value}Gi` : undefined;
+const giValueProps = (value?: string | null) => ({
+  value: value ? String(value).replace(/Gi$/i, '') : ''
+});
+
+interface InstanceTypeFormProps {
+  ref?: any;
+  open: boolean;
+  // The flavor picked from the flavor Select. Its acceleratorGroup /
+  // generalGroup / acceleratable are copied into the created instance type.
+  selectedFlavor?: FlavorItem | null;
+  flavorList: FlavorItem[];
+  flavorLoading?: boolean;
+  onFlavorChange: (flavor: FlavorItem | null) => void;
+  onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
+}
+
+const GPUServiceInstanceTypeForm: React.FC<InstanceTypeFormProps> = forwardRef(
+  (props, ref) => {
+    const {
+      open,
+      selectedFlavor,
+      flavorList,
+      flavorLoading,
+      onFlavorChange,
+      onFinish,
+      onFinishFailed
+    } = props;
+    const intl = useIntl();
+    const { getRuleMessage } = useAppUtils();
+    const [form] = Form.useForm<FormData>();
+
+    // A non-acceleratable (generic) flavor has no per-GPU concept, so unit CPU
+    // is fixed to 1 and the field is disabled.
+    const acceleratable = !!selectedFlavor?.spec?.acceleratable;
+
+    useEffect(() => {
+      if (!open) {
+        form.resetFields();
+        return;
+      }
+      form.setFieldsValue({
+        spec: {
+          arch: ArchOptions[0].value
+        }
+      } as any);
+    }, [open, form]);
+
+    // Force unit CPU to 1 whenever the picked flavor is not acceleratable.
+    useEffect(() => {
+      if (!open || acceleratable) return;
+      form.setFieldValue(['spec', 'unitResources', 'cpu'], 1);
+    }, [open, acceleratable, form]);
+
+    useImperativeHandle(ref, () => ({
+      submit: () => {
+        form.submit();
+      },
+      resetFields: () => {
+        form.resetFields();
+      }
+    }));
+
+    // Split flavors into two groups: CPU compute (generic) and GPU compute
+    // (accelerator). Groups render as labeled sections in the dropdown.
+    const toFlavorOption = (flavor: FlavorItem) => ({
+      value: flavor.name,
+      label: getFlavorTitle(flavor.spec, flavor.name),
+      flavor
+    });
+    const cpuFlavors = flavorList.filter(
+      (flavor) => !flavor.spec?.acceleratable
+    );
+    const gpuFlavors = flavorList.filter(
+      (flavor) => flavor.spec?.acceleratable
+    );
+    const flavorOptions = [
+      cpuFlavors.length && {
+        label: intl.formatMessage({
+          id: 'gpuservice.instanceType.flavor.cpuGroup'
+        }),
+        title: 'cpu',
+        options: cpuFlavors.map(toFlavorOption)
+      },
+      gpuFlavors.length && {
+        label: intl.formatMessage({
+          id: 'gpuservice.instanceType.flavor.gpuGroup'
+        }),
+        title: 'gpu',
+        options: gpuFlavors.map(toFlavorOption)
+      }
+    ].filter(Boolean) as any;
+
+    const handleFinish = async (values: FormData) => {
+      // The hardware group / acceleratable flags are not user-editable; they
+      // come from the chosen flavor. os is fixed to lowercase "linux". ram /
+      // localStorage already carry the "Gi" suffix from the FormItem normalize.
+      const cpu = values.spec?.unitResources?.cpu;
+      await onFinish({
+        name: values.name,
+        spec: {
+          displayName: values.spec?.displayName?.trim() || null,
+          acceleratorGroup: selectedFlavor?.spec?.acceleratorGroup ?? null,
+          generalGroup: selectedFlavor?.spec?.generalGroup ?? null,
+          acceleratable: selectedFlavor?.spec?.acceleratable ?? false,
+          os: GPU_INSTANCE_TYPE_OS,
+          arch: values.spec?.arch ?? null,
+          unitResources: {
+            cpu: cpu != null && cpu !== '' ? String(cpu) : null,
+            ram: values.spec?.unitResources?.ram ?? null
+          },
+          localStorage: values.spec?.localStorage ?? null
+        }
+      });
+    };
+
+    return (
+      <Form
+        name="gpuServiceInstanceTypeForm"
+        form={form}
+        onFinish={handleFinish}
+        onFinishFailed={onFinishFailed}
+        preserve={false}
+      >
+        <Form.Item<FormData>
+          name="name"
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage('input', 'common.table.name')
+            },
+            {
+              pattern: validateLabelNameRegxFor63,
+              message: intl.formatMessage({ id: 'gpuservice.form.rule.name' })
+            }
+          ]}
+        >
+          <CInput.Input
+            label={intl.formatMessage({ id: 'common.table.name' })}
+            required
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'displayName']}
+          rules={[
+            {
+              max: 63,
+              message: intl.formatMessage({
+                id: 'gpuservice.template.displayName.max'
+              })
+            }
+          ]}
+        >
+          <CInput.Input
+            trim={false}
+            label={intl.formatMessage({
+              id: 'gpuservice.template.displayName'
+            })}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <SealSelect
+            label={intl.formatMessage({ id: 'gpuservice.instanceType.flavor' })}
+            required
+            showSearch
+            optionFilterProp="label"
+            classNames={{ popup: { root: styles.flavorDropdown } }}
+            loading={flavorLoading}
+            value={selectedFlavor?.name}
+            options={flavorOptions}
+            onChange={(val: string) =>
+              onFlavorChange(
+                flavorList.find((flavor) => flavor.name === val) ?? null
+              )
+            }
+            optionRender={(option: any) => {
+              const flavor: FlavorItem = option.data.flavor;
+              return (
+                <FlavorOption spec={flavor.spec} fallbackName={flavor.name} />
+              );
+            }}
+            labelRender={({ value }) => {
+              const flavor = flavorList.find((item) => item.name === value);
+              return flavor ? (
+                <FlavorSelected spec={flavor.spec} fallbackName={flavor.name} />
+              ) : (
+                ((value ?? '') as React.ReactNode)
+              );
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <CInput.Input
+            disabled
+            value="Linux"
+            label={intl.formatMessage({ id: 'gpuservice.instance.os' })}
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'arch']}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage('select', 'gpuservice.instance.arch')
+            }
+          ]}
+        >
+          <SealSelect
+            label={intl.formatMessage({ id: 'gpuservice.instance.arch' })}
+            required
+            options={ArchOptions}
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'unitResources', 'cpu']}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage(
+                'input',
+                'gpuservice.instanceType.unitCpu'
+              )
+            }
+          ]}
+        >
+          <InputNumber
+            min={0}
+            disabled={!acceleratable}
+            style={{ width: '100%' }}
+            label={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu'
+            })}
+            description={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu.tip'
+            })}
+            required
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'unitResources', 'ram']}
+          normalize={giNormalize}
+          getValueProps={giValueProps}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage(
+                'input',
+                'gpuservice.instanceType.unitRam'
+              )
+            }
+          ]}
+        >
+          <InputNumber
+            min={0}
+            style={{ width: '100%' }}
+            label={`${intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam'
+            })} (GB)`}
+            description={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam.tip'
+            })}
+            required
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'localStorage']}
+          normalize={giNormalize}
+          getValueProps={giValueProps}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage(
+                'input',
+                'gpuservice.instanceType.localStorage'
+              )
+            }
+          ]}
+        >
+          <InputNumber
+            min={0}
+            style={{ width: '100%' }}
+            label={`${intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage'
+            })} (GB)`}
+            description={intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage.tip'
+            })}
+            required
+          />
+        </Form.Item>
+      </Form>
+    );
+  }
+);
+
+export default GPUServiceInstanceTypeForm;
@@ -0,0 +1,37 @@
+import useBodyScroll from '@/hooks/use-body-scroll';
+import { useState } from 'react';
+
+const useCreateInstanceTypeModal = () => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    title: string;
+  }>({
+    open: false,
+    title: ''
+  });
+
+  const openModal = (title: string) => {
+    setOpenModalStatus({
+      open: true,
+      title
+    });
+    saveScrollHeight();
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({
+      open: false,
+      title: ''
+    });
+    restoreScrollHeight();
+  };
+
+  return {
+    openInstanceTypeModalStatus: openModalStatus,
+    openInstanceTypeModal: openModal,
+    closeInstanceTypeModal: closeModal
+  };
+};
+
+export default useCreateInstanceTypeModal;
@@ -0,0 +1,232 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import {
+  AutoTooltip,
+  DropdownButtons,
+  icons,
+  StatusTag
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Space, Tooltip } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
+import _ from 'lodash';
+import { useMemo } from 'react';
+import { isSliceableDetail } from '../../instances/config';
+import { ceilMilliToCore, parseQuantityToGi } from '../../utils';
+import { FlavorOption } from '../components/flavor-display';
+import {
+  InstanceTypePhaseLabelMap,
+  InstanceTypePhaseValueMap,
+  status as phaseStatusMap
+} from '../config';
+import { ListItem } from '../config/types';
+
+interface ColumnsHookProps {
+  handleSelect: (val: string, record: ListItem) => void;
+}
+
+// DropdownButtons reads `locale` / `props` at runtime; its `items` prop is
+// typed as antd's MenuProps['items'], so cast the config to satisfy it. The
+// activate / deactivate action is chosen from the row's current phase: Active
+// types can be deactivated, Inactive ones activated (none while Preparing).
+const buildRowActions = (record: ListItem) => {
+  const phase = record.status?.phase;
+  const actions: any[] = [];
+  if (phase === InstanceTypePhaseValueMap.Active) {
+    actions.push({
+      label: 'gpuservice.instanceType.deactivate',
+      key: 'deactivate',
+      locale: true,
+      icon: icons.Disabled
+    });
+  } else if (phase === InstanceTypePhaseValueMap.Inactive) {
+    actions.push({
+      label: 'gpuservice.instanceType.activate',
+      key: 'activate',
+      locale: true,
+      icon: icons.Charger
+    });
+  }
+  actions.push({
+    label: 'common.button.delete',
+    key: 'delete',
+    locale: true,
+    icon: icons.DeleteOutlined,
+    props: { danger: true }
+  });
+  return actions;
+};
+
+// Column header with an info tooltip (used for the per-GPU resource columns).
+const TitleWithTip: React.FC<{ title: string; tip: string }> = ({
+  title,
+  tip
+}) => (
+  <Space size={4}>
+    <span>{title}</span>
+    <Tooltip title={tip}>
+      <QuestionCircleOutlined
+        style={{ color: 'var(--ant-color-text-tertiary)' }}
+      />
+    </Tooltip>
+  </Space>
+);
+
+const useInstanceTypeColumns = ({
+  handleSelect
+}: ColumnsHookProps): ColumnsType<ListItem> => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: { showTitle: false },
+        // Prefer the friendly display name, fall back to the resource name.
+        render: (text: string, record: ListItem) => {
+          const label = record.spec?.displayName || text;
+          return (
+            <AutoTooltip ghost minWidth={20} maxWidth={200} title={label}>
+              <span className="text-primary">{label || '-'}</span>
+            </AutoTooltip>
+          );
+        }
+      },
+      {
+        // Flavor cell mirrors the create drawer's dropdown: product name on
+        // top, manufacturer · memory · sliceable on the meta line below.
+        // Observed hardware comes from status.detail (absent until the
+        // operator backfills status); sliceable is derived from slicedDetail.
+        title: intl.formatMessage({ id: 'gpuservice.instanceType.flavor' }),
+        dataIndex: ['status', 'detail', 'product'],
+        key: 'product',
+        ellipsis: { showTitle: false },
+        render: (_text: string, record: ListItem) => {
+          const detail = record.status?.detail;
+          return (
+            <FlavorOption
+              spec={{
+                acceleratable: record.spec?.acceleratable,
+                manufacturer: detail?.manufacturer,
+                product: detail?.product,
+                memory: detail?.memory,
+                sliceable: isSliceableDetail(detail?.slicedDetail)
+              }}
+              fallbackName={record.name}
+              maxWidth={200}
+            />
+          );
+        }
+      },
+      {
+        title: (
+          <TitleWithTip
+            title={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu'
+            })}
+            tip={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu.tip'
+            })}
+          />
+        ),
+        dataIndex: ['spec', 'unitResources', 'cpu'],
+        key: 'cpu',
+        ellipsis: { showTitle: false },
+        render: (value: string) => {
+          const cores = ceilMilliToCore(value ?? null)?.cores;
+          return cores != null ? `${cores} vCPU` : '-';
+        }
+      },
+      {
+        title: (
+          <TitleWithTip
+            title={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam'
+            })}
+            tip={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam.tip'
+            })}
+          />
+        ),
+        dataIndex: ['spec', 'unitResources', 'ram'],
+        key: 'ram',
+        ellipsis: { showTitle: false },
+        render: (value: string) => {
+          const gi = parseQuantityToGi(value ?? null)?.value;
+          return gi != null ? `${gi} GB` : '-';
+        }
+      },
+      {
+        title: (
+          <TitleWithTip
+            title={intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage'
+            })}
+            tip={intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage.tip'
+            })}
+          />
+        ),
+        dataIndex: ['spec', 'localStorage'],
+        key: 'localStorage',
+        ellipsis: { showTitle: false },
+        render: (value: string) => {
+          const gi = parseQuantityToGi(value ?? null)?.value;
+          return gi != null ? `${gi} GB` : '-';
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'gpuservice.instanceType.platform' }),
+        key: 'os',
+        ellipsis: { showTitle: false },
+        render: (_text, record: ListItem) => {
+          const os = _.capitalize(record.spec?.os || '');
+          const arch = _.toUpper(record.spec?.arch || '');
+          if (!os) return '-';
+          return (
+            <AutoTooltip
+              ghost
+              maxWidth={240}
+              title={arch ? `${os}/${arch}` : os}
+            >
+              {arch ? `${os}/${arch}` : os}
+            </AutoTooltip>
+          );
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.status' }),
+        dataIndex: ['status', 'phase'],
+        key: 'status',
+        ellipsis: { showTitle: false },
+        render: (value: string, record: ListItem) =>
+          value ? (
+            <StatusTag
+              statusValue={{
+                status: phaseStatusMap[value],
+                text: InstanceTypePhaseLabelMap[value] || value,
+                message: record.status?.phaseMessage || ''
+              }}
+            />
+          ) : (
+            '-'
+          )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        key: 'operation',
+        dataIndex: 'operation',
+        ellipsis: { showTitle: false },
+        render: (_text, record: ListItem) => (
+          <DropdownButtons
+            items={buildRowActions(record)}
+            onSelect={(val: string) => handleSelect(val, record)}
+          />
+        )
+      }
+    ];
+  }, [handleSelect, intl]);
+};
+
+export default useInstanceTypeColumns;
@@ -0,0 +1,271 @@
+import { ProviderValueMap } from '@/pages/cluster-management/config';
+import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
+import {
+  BaseSelect,
+  DeleteModal,
+  FilterBar,
+  IconFont,
+  NoResult
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { ConfigProvider, Divider, Flex, Table, message } from 'antd';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import PageBox, { HeaderLeft } from '../../_components/page-box';
+import {
+  activateGPUInstanceType,
+  deactivateGPUInstanceType,
+  deleteGPUInstanceType
+} from './apis';
+import AddInstanceTypeModal from './components/add-instance-type-modal';
+import { FormData, ListItem } from './config/types';
+import useCreateInstanceTypeModal from './hooks/use-create-instance-type-modal';
+import useInstanceTypeColumns from './hooks/use-instance-type-columns';
+import useCreateInstanceType from './services/use-create-instance-type';
+import useQueryInstanceTypes from './services/use-query-instance-types';
+
+const GPUServiceInstanceTypes: React.FC = () => {
+  const intl = useIntl();
+  const deleteModalRef = useRef<any>(null);
+  const [clusterId, setClusterId] = useState<number | undefined>();
+  const [keyword, setKeyword] = useState('');
+  const [loaded, setLoaded] = useState(false);
+
+  const {
+    clusterList,
+    fetchClusterList,
+    loading: clusterLoading
+  } = useQueryClusterList();
+  const {
+    dataList,
+    loading: instanceTypesLoading,
+    fetchInstanceTypes,
+    startWatch
+  } = useQueryInstanceTypes();
+  const { fetchData: createInstanceType } = useCreateInstanceType();
+  const {
+    openInstanceTypeModalStatus,
+    openInstanceTypeModal,
+    closeInstanceTypeModal
+  } = useCreateInstanceTypeModal();
+
+  // Only Kubernetes clusters own GPU instance types.
+  const k8sClusters = useMemo(
+    () => clusterList.filter((c) => c.provider === ProviderValueMap.Kubernetes),
+    [clusterList]
+  );
+
+  // Fetch the visible clusters, default to the first Kubernetes one, then load
+  // its instance types. Action-driven: subsequent loads fire from the cluster
+  // picker / refresh, never from an effect dependency.
+  useEffect(() => {
+    const init = async () => {
+      const items = await fetchClusterList({ page: -1 });
+      const firstK8s = (items || []).find(
+        (c: any) => c.provider === ProviderValueMap.Kubernetes
+      );
+      if (firstK8s?.id != null) {
+        setClusterId(firstK8s.id);
+        await fetchInstanceTypes(firstK8s.id);
+        startWatch(firstK8s.id);
+      }
+      setLoaded(true);
+    };
+    init();
+  }, []);
+
+  const handleClusterChange = useMemoizedFn(async (value: number) => {
+    setClusterId(value);
+    setKeyword('');
+    await fetchInstanceTypes(value);
+    startWatch(value);
+  });
+
+  const handleRefresh = useMemoizedFn(() => {
+    if (clusterId != null) {
+      fetchInstanceTypes(clusterId);
+    }
+  });
+
+  const handleNameChange = useMemoizedFn(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setKeyword(e.target.value);
+    }
+  );
+
+  const handleAdd = useMemoizedFn(() => {
+    openInstanceTypeModal(
+      intl.formatMessage({ id: 'gpuservice.instanceType.add' })
+    );
+  });
+
+  const handleModalOk = useMemoizedFn(async (data: FormData) => {
+    if (clusterId == null) return;
+    try {
+      await createInstanceType({ cluster_id: clusterId, data });
+      closeInstanceTypeModal();
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+      fetchInstanceTypes(clusterId);
+    } catch (error) {
+      // handled by the request interceptor
+    }
+  });
+
+  const handleDelete = useMemoizedFn((record: ListItem) => {
+    if (clusterId == null) return;
+    deleteModalRef.current?.show({
+      content: intl.formatMessage({ id: 'gpuservice.instanceType' }),
+      operation: 'common.delete.single.confirm',
+      name: record.name,
+      async onOk() {
+        await deleteGPUInstanceType({
+          name: record.name,
+          cluster_id: clusterId
+        });
+        fetchInstanceTypes(clusterId);
+      }
+    });
+  });
+
+  const handleToggleActive = useMemoizedFn(
+    (record: ListItem, activate: boolean) => {
+      if (clusterId == null) return;
+      const action = activate
+        ? activateGPUInstanceType
+        : deactivateGPUInstanceType;
+      deleteModalRef.current?.show({
+        content: intl.formatMessage({ id: 'gpuservice.instanceType' }),
+        title: activate
+          ? 'common.title.activate.confirm'
+          : 'common.title.deactivate.confirm',
+        okText: activate
+          ? 'gpuservice.instanceType.activate'
+          : 'gpuservice.instanceType.deactivate',
+        operation: activate
+          ? 'common.activate.single.confirm'
+          : 'common.deactivate.single.confirm',
+        name: record.spec?.displayName || record.name,
+        async onOk() {
+          await action({ name: record.name, cluster_id: clusterId });
+          message.success(intl.formatMessage({ id: 'common.message.success' }));
+          fetchInstanceTypes(clusterId);
+        }
+      });
+    }
+  );
+
+  const handleSelect = useMemoizedFn((val: string, record: ListItem) => {
+    if (val === 'delete') {
+      handleDelete(record);
+    } else if (val === 'activate') {
+      handleToggleActive(record, true);
+    } else if (val === 'deactivate') {
+      handleToggleActive(record, false);
+    }
+  });
+
+  const columns = useInstanceTypeColumns({ handleSelect });
+
+  const filteredList = useMemo(() => {
+    const trimmed = keyword.trim().toLowerCase();
+    if (!trimmed) return dataList;
+    return dataList.filter((item) => item.name.toLowerCase().includes(trimmed));
+  }, [dataList, keyword]);
+
+  const hasK8sCluster = k8sClusters.length > 0;
+
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    return (
+      <NoResult
+        loading={instanceTypesLoading || clusterLoading}
+        loadend={loaded}
+        dataSource={filteredList}
+        image={<IconFont type="icon-gpu1" />}
+        filters={keyword ? { search: keyword } : undefined}
+        noFoundText={intl.formatMessage({
+          id: 'noresult.gpuservice.instanceType.nofound'
+        })}
+        title={intl.formatMessage({
+          id: 'noresult.gpuservice.instanceType.title'
+        })}
+        subTitle={
+          hasK8sCluster
+            ? intl.formatMessage({
+                id: 'noresult.gpuservice.instanceType.subTitle'
+              })
+            : intl.formatMessage({ id: 'noresult.resources.k8sCluster' })
+        }
+        {...(hasK8sCluster
+          ? {
+              onClick: handleAdd,
+              buttonText: intl.formatMessage({ id: 'noresult.button.add' })
+            }
+          : {})}
+      />
+    );
+  };
+
+  return (
+    <>
+      <HeaderLeft>
+        <Flex align="center">
+          <span className="font-600">
+            {intl.formatMessage({ id: 'gpuservice.instance.types' })}
+          </span>
+          <Divider orientation="vertical" style={{ margin: '0 16px' }} />
+          <BaseSelect
+            size="small"
+            variant="borderless"
+            style={{ minWidth: 160 }}
+            popupMatchSelectWidth={false}
+            options={k8sClusters}
+            value={clusterId}
+            onChange={handleClusterChange}
+          />
+        </Flex>
+      </HeaderLeft>
+      <PageBox>
+        <FilterBar
+          marginBottom={22}
+          marginTop={30}
+          showSelect={false}
+          inputHolder={intl.formatMessage({
+            id: 'gpuservice.instanceType.filter.name'
+          })}
+          buttonText={intl.formatMessage({
+            id: 'gpuservice.instanceType.add'
+          })}
+          handleSearch={handleRefresh}
+          handleClickPrimary={hasK8sCluster ? handleAdd : undefined}
+          handleInputChange={handleNameChange}
+          widths={{ input: 300 }}
+        />
+        <ConfigProvider renderEmpty={renderEmpty}>
+          <Table
+            columns={columns}
+            dataSource={filteredList}
+            scroll={{ x: 'max-content' }}
+            className={'scroll-table'}
+            loading={{
+              spinning: instanceTypesLoading || clusterLoading,
+              size: 'middle'
+            }}
+            rowKey={(record) => record.name}
+            pagination={false}
+          />
+        </ConfigProvider>
+      </PageBox>
+      <AddInstanceTypeModal
+        open={openInstanceTypeModalStatus.open}
+        title={openInstanceTypeModalStatus.title}
+        clusterId={clusterId}
+        onCancel={closeInstanceTypeModal}
+        onOk={handleModalOk}
+      />
+      <DeleteModal ref={deleteModalRef} />
+    </>
+  );
+};
+
+export default GPUServiceInstanceTypes;
@@ -0,0 +1,35 @@
+import { useQueryData } from '@gpustack/core-ui';
+import { useCallback } from 'react';
+import { createGPUInstanceType } from '../apis';
+import { FormData, ListItem } from '../config/types';
+
+interface CreateInstanceTypeParams {
+  cluster_id: number;
+  data: FormData;
+}
+
+export default function useCreateInstanceType() {
+  const fetchDetail = useCallback(
+    (params: CreateInstanceTypeParams) =>
+      createGPUInstanceType({
+        cluster_id: params.cluster_id,
+        data: params.data
+      }),
+    []
+  );
+
+  const { detailData, loading, cancelRequest, fetchData } = useQueryData<
+    ListItem,
+    CreateInstanceTypeParams
+  >({
+    fetchDetail,
+    key: 'createInstanceType'
+  });
+
+  return {
+    detailData,
+    loading,
+    cancelRequest,
+    fetchData
+  };
+}
@@ -0,0 +1,58 @@
+import { createAxiosToken } from '@/hooks/use-chunk-request';
+import { useRequest } from 'ahooks';
+import { CancelTokenSource } from 'axios';
+import { useEffect, useRef, useState } from 'react';
+import { queryGPUInstanceTypeFlavors } from '../apis';
+import { FlavorItem } from '../config/types';
+
+// Cluster-scoped flavors for the create drawer's first column. Fetched when
+// the drawer opens (and on cluster change), never via an effect dependency.
+export default function useQueryFlavors() {
+  const tokenRef = useRef<CancelTokenSource | null>(null);
+  const [dataList, setDataList] = useState<FlavorItem[]>([]);
+
+  const {
+    runAsync: fetchFlavors,
+    loading,
+    cancel
+  } = useRequest(
+    async (clusterId: number) => {
+      tokenRef.current?.cancel();
+      tokenRef.current = createAxiosToken();
+      const res = await queryGPUInstanceTypeFlavors(
+        { cluster_id: clusterId },
+        { token: tokenRef.current.token }
+      );
+      const list = res?.items || [];
+      setDataList(list);
+      return list;
+    },
+    {
+      manual: true,
+      onError: (error: any) => {
+        if (error?.message === 'CANCEL_PREVIOUS_REQUEST') return;
+        setDataList([]);
+      }
+    }
+  );
+
+  const cancelRequest = () => {
+    cancel();
+    tokenRef.current?.cancel('CANCEL_PREVIOUS_REQUEST');
+  };
+
+  useEffect(() => {
+    return () => {
+      cancel();
+      tokenRef.current?.cancel();
+    };
+  }, []);
+
+  return {
+    dataList,
+    loading,
+    fetchFlavors,
+    cancelRequest,
+    setDataList
+  };
+}
@@ -0,0 +1,113 @@
+import { WatchEventType } from '@/config';
+import useSetChunkRequest, {
+  createAxiosToken
+} from '@/hooks/use-chunk-request';
+import { useRequest } from 'ahooks';
+import { CancelTokenSource } from 'axios';
+import qs from 'query-string';
+import { useEffect, useRef, useState } from 'react';
+import { GPU_INSTANCE_TYPES_API, queryGPUInstanceTypes } from '../apis';
+import { ListItem } from '../config/types';
+
+// Merge a batch of watch events into the current name-keyed list. Instance
+// types have no numeric id, so we upsert / remove by `name` rather than reuse
+// the shared id-based chunked-list helper.
+const mergeWatchEvents = (current: ListItem[], events: any[]) => {
+  let list = [...current];
+  events.forEach((event: any) => {
+    const collection: ListItem[] = event?.collection || [];
+    if (event?.type === WatchEventType.DELETE) {
+      const names = collection.map((item) => item.name);
+      list = list.filter((item) => !names.includes(item.name));
+    } else if (
+      event?.type === WatchEventType.CREATE ||
+      event?.type === WatchEventType.UPDATE
+    ) {
+      collection.forEach((item) => {
+        const index = list.findIndex((it) => it.name === item.name);
+        if (index > -1) {
+          list[index] = item;
+        } else {
+          list = [item, ...list];
+        }
+      });
+    }
+  });
+  return list;
+};
+
+// Cluster-scoped instance types for the management list. Action-driven:
+// call fetchInstanceTypes(clusterId) from the cluster picker / refresh, not
+// via an effect dependency. startWatch(clusterId) opens a chunked watch that
+// keeps the list in sync with live create/update/delete events.
+export default function useQueryInstanceTypes() {
+  const tokenRef = useRef<CancelTokenSource | null>(null);
+  const chunkRequestRef = useRef<any>(null);
+  const { setChunkRequest } = useSetChunkRequest();
+  const [dataList, setDataList] = useState<ListItem[]>([]);
+
+  const {
+    runAsync: fetchInstanceTypes,
+    loading,
+    cancel
+  } = useRequest(
+    async (clusterId: number) => {
+      tokenRef.current?.cancel();
+      tokenRef.current = createAxiosToken();
+      const res = await queryGPUInstanceTypes(
+        { cluster_id: clusterId },
+        { token: tokenRef.current.token }
+      );
+      const list = res?.items || [];
+      setDataList(list);
+      return list;
+    },
+    {
+      manual: true,
+      onError: (error: any) => {
+        // Ignore the synthetic cancel error from switching clusters quickly.
+        if (error?.message === 'CANCEL_PREVIOUS_REQUEST') return;
+        setDataList([]);
+      }
+    }
+  );
+
+  const cancelRequest = () => {
+    cancel();
+    tokenRef.current?.cancel('CANCEL_PREVIOUS_REQUEST');
+  };
+
+  const stopWatch = () => {
+    chunkRequestRef.current?.current?.cancel?.();
+  };
+
+  const startWatch = (clusterId: number) => {
+    stopWatch();
+    chunkRequestRef.current = setChunkRequest({
+      url: `${GPU_INSTANCE_TYPES_API}?${qs.stringify({
+        cluster_id: clusterId
+      })}`,
+      handler: (events: any[]) => {
+        setDataList((pre) => mergeWatchEvents(pre, events));
+      }
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      cancel();
+      tokenRef.current?.cancel();
+      stopWatch();
+    };
+  }, []);
+
+  return {
+    dataList,
+    loading,
+    fetchInstanceTypes,
+    cancelRequest,
+    startWatch,
+    stopWatch,
+    setDataList
+  };
+}
@@ -0,0 +1,168 @@
+// ============ create drawer (two-column: flavors | form) ============
+.container {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+}
+
+.colWrapper {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.formWrapper {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.panelBody {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  min-height: 0;
+}
+
+.stickyHead {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--ant-color-bg-elevated);
+}
+
+.flavorCard {
+  height: auto !important;
+  min-height: 96px;
+}
+
+// ============ flavor select dropdown ============
+.flavorDropdown {
+  :global {
+    // tighten the indent of grouped options
+    .ant-select-item-option-grouped {
+      padding-inline-start: 12px;
+    }
+    // divider between options
+    .ant-select-item-option {
+      border-block-end: 1px solid var(--ant-color-border-secondary);
+
+      &:last-child {
+        border-block-end: none;
+      }
+    }
+  }
+}
+
+// ============ list card (Linear-style, minimal) ============
+.listCard {
+  height: auto !important;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+// --- level 1: identity + status + actions ---
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+}
+
+.name {
+  min-width: 0;
+  font-size: 13px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+// --- level 2: hero (model + memory) ---
+.hero {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.product {
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--ant-color-text);
+}
+
+.memory {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--ant-color-text);
+}
+
+.subline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  min-height: 22px;
+  font-size: 13px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: var(--ant-border-radius-sm);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.tagSliceable {
+  color: var(--ant-color-primary);
+  background-color: var(--ant-color-primary-bg);
+}
+
+.tagPlain {
+  color: var(--ant-color-text-tertiary);
+  background-color: var(--ant-color-fill-tertiary);
+}
+
+// --- level 3: base resources ---
+.divider {
+  height: 1px;
+  margin: 16px 0;
+  background-color: var(--ant-color-border-secondary);
+  opacity: 0.6;
+}
+
+.footer {
+  font-size: 14px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.dotSep {
+  margin: 0 8px;
+  color: var(--ant-color-text-quaternary);
+}
@@ -12,7 +12,7 @@ import {

 export const GPU_SERVICE_INSTANCES_API = '/gpu-instances';

-export const GPU_SERVICE_INSTANCES_TYPE_API = '/gpu-instance-types';
+export const GPU_SERVICE_INSTANCES_TYPE_API = '/gpu-instance-types/aggregated';

 // View logs / events still go through the K8s proxy until the /v2
 // /gpu-instances API exposes equivalents. clusterID and namespace come
@@ -5,23 +5,19 @@ import useUserDirectory from '@/pages/gpu-service/hooks/use-user-directory';
 import Separator from '@/pages/llmodels/components/separator';
 import { getGPUStackPlugin } from '@/plugins';
 import { SearchOutlined } from '@ant-design/icons';
-import {
-  AlertBlockInfo,
-  ColumnWrapper,
-  GSDrawer,
-  ModalFooter
-} from '@gpustack/core-ui';
+import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useIntl, useModel } from '@umijs/max';
 import { Input, Typography } from 'antd';
-import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ListItem as TemplateItem } from '../../templates/config/types';
 import useQueryTemplates from '../../templates/services/use-query-templates';
+import { InstanceStatusValueMap } from '../config';
 import { FormData, InstanceTypeItem, ListItem } from '../config/types';
 import GPUServiceInstanceForm from '../forms';
 import TemplateSelector, { TemplateGroup } from '../forms/template-selector';
 import useQueryInstanceTypes from '../services/use-query-instance-types';
 import styles from '../styles/instances.module.less';
+import { saveInstanceDataInDescription } from '../utils/instance-description';
 import InstanceTypeList from './instance-type-list';

 type AddModalProps = {
@@ -29,7 +25,6 @@ type AddModalProps = {
  action: PageActionType;
  open: boolean;
  width?: number | string;
-  realAction?: string;
  clusterList?: Array<{
    label: string;
    value: number;
@@ -83,8 +78,7 @@ const AddModal: React.FC<AddModalProps> = ({
  data,
  onCancel,
  width,
-  clusterList = [],
-  realAction
+  clusterList = []
 }) => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState') || {};
@@ -103,6 +97,12 @@ const AddModal: React.FC<AddModalProps> = ({
    manufacturer: undefined
  });
  const [templateId, setTemplateId] = useState<number | undefined>();
+  // Re-selected instance type on a stopped-instance edit. Kept separate from
+  // `instanceTypeSelection` (the create card selection) so the two flows don't
+  // couple; starts empty each open (no default highlight).
+  const [editSelectedType, setEditSelectedType] = useState<string | undefined>(
+    undefined
+  );
  const [instanceKeyword, setInstanceKeyword] = useState('');
  const [templateKeyword, setTemplateKeyword] = useState('');
  const { loading, guard, run, release } = useSubmitLock();
@@ -166,9 +166,18 @@ const AddModal: React.FC<AddModalProps> = ({
  );
  // const readonly = action === PageAction.VIEW;
  const readonly = false;
-  const isRecreate = realAction === PageAction.CREATE;
-  const showResourceSelectors = action === PageAction.CREATE || isRecreate;
-  const shouldAutoSelectResource = action === PageAction.CREATE && !isRecreate;
+  const showResourceSelectors = action === PageAction.CREATE;
+  // Only a stopped instance can be re-typed on edit. It shows the instance-type
+  // column (but not the template column) beside the form; the create card
+  // columns render for CREATE.
+  const isStoppedEdit =
+    action === PageAction.EDIT &&
+    data?.status?.phase === InstanceStatusValueMap.Stopped;
+  const showInstanceTypeColumn = showResourceSelectors || isStoppedEdit;
+  // Editing a non-stopped instance is restricted: only displayName and the
+  // SSH public keys stay editable; the type / template / storage sections
+  // render disabled. A stopped instance edits everything.
+  const isRestrictedEdit = action === PageAction.EDIT && !isStoppedEdit;

  const findTemplateByManufacturer = (
    manufacturer: string | undefined,
@@ -179,24 +188,13 @@ const AddModal: React.FC<AddModalProps> = ({
      : undefined;
  };

-  const saveInstanceDataInDescription = (instanceType: InstanceTypeItem) => {
-    return JSON.stringify({
-      name: instanceType.name,
-      spec: {
-        ..._.omit(instanceType.spec, ['cache', 'cpu']),
-        cpu: _.pick(instanceType.spec?.cpu, [
-          'manufacturer',
-          'product',
-          'family'
-        ])
-      }
-    });
-  };
-
-  // GPU types carry their accelerator vendor; non-acceleratable (CPU) types
-  // all map to the single 'cpu' bucket used to match templates.
+  // GPU types carry their accelerator vendor on status.detail (observed — may
+  // be absent until the operator backfills status); non-acceleratable (CPU)
+  // types all map to the single 'cpu' bucket used to match templates.
  const manufacturerOf = (instanceType: InstanceTypeItem) =>
-    instanceType.spec.acceleratable ? instanceType.spec?.manufacturer : 'cpu';
+    instanceType.spec.acceleratable
+      ? (instanceType.status?.detail?.manufacturer ?? undefined)
+      : 'cpu';

  // apply the selection of instance type and template
  const applySelection = (
@@ -263,43 +261,12 @@ const AddModal: React.FC<AddModalProps> = ({
    );
  };

-  const findAggregateOf = (
-    candidateName: string | undefined,
-    clusterId: number | null | undefined,
-    instanceTypes: InstanceTypeItem[]
-  ): InstanceTypeItem | undefined => {
-    if (!candidateName) return undefined;
-    return instanceTypes.find((item) =>
-      (item.status?.tiers ?? []).some((tier) =>
-        (tier.candidates ?? []).some(
-          (c) => c.name === candidateName && Number(c.cluster) === clusterId
-        )
-      )
-    );
-  };
-
  // initial for first
  const applyAutoSelection = (
    instanceTypes: InstanceTypeItem[],
    templates: TemplateItem[],
    orgId?: number | null
  ) => {
-    // On edit / view, surface the persisted selection in the card list.
-    if (!shouldAutoSelectResource) {
-      const aggregate = findAggregateOf(
-        data?.spec?.type,
-        data?.clusterId,
-        instanceTypes
-      );
-      if (aggregate) {
-        setInstanceTypeSelection({
-          instanceType: aggregate.name,
-          manufacturer: manufacturerOf(aggregate)
-        });
-      }
-      return;
-    }
-
    // Scope to clusters the chosen org owns (admin "All" view).
    const owned = filterTypesByOwner(instanceTypes, orgId);

@@ -359,6 +326,7 @@ const AddModal: React.FC<AddModalProps> = ({
        manufacturer: undefined
      });
      setTemplateId(undefined);
+      setEditSelectedType(undefined);
      setInstanceKeyword('');
      setTemplateKeyword('');
      setScopeOrgId(undefined);
@@ -367,8 +335,12 @@ const AddModal: React.FC<AddModalProps> = ({

    if (action === PageAction.CREATE) {
      loadCreateResources();
+    } else if (action === PageAction.EDIT) {
+      // Edit has no card columns, but the change-type overlay still needs the
+      // full instance-type list to re-type a stopped instance.
+      fetchData({ page: -1 });
    }
-  }, [open, shouldAutoSelectResource, action]);
+  }, [open, action]);

  // filter instance types (already scoped to the chosen org's clusters)
  const filteredInstanceTypes = ownedInstanceTypes.filter((item) =>
@@ -506,6 +478,17 @@ const AddModal: React.FC<AddModalProps> = ({
    applySelection(item, template);
  };

+  // Stopped-edit re-type. Decoupled from applySelection (the create flow): it
+  // only snapshots the type into `description` and applies it to the form — no
+  // template selection or filtering.
+  const handleEditInstanceTypeChange = (item: InstanceTypeItem) => {
+    setEditSelectedType(item.name);
+    form.current?.setFieldsValue({
+      description: saveInstanceDataInDescription(item)
+    });
+    form.current?.applyInstanceType?.(item);
+  };
+
  const handleTemplateChange = (id: number, item: TemplateItem) => {
    setTemplateId(id);
    const formValues = form.current?.getFieldsValue();
@@ -543,104 +526,108 @@ const AddModal: React.FC<AddModalProps> = ({
      footer={false}
    >
      <div className={styles.container}>
+        {showInstanceTypeColumn && (
+          <div
+            className={styles.colWrapper}
+            // The 33% cap suits the 3-column create layout; in the 2-column
+            // stopped-edit layout, split the space evenly with the form column.
+            style={isStoppedEdit ? { flex: 1, maxWidth: 'none' } : undefined}
+          >
+            <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+              <div className={styles.panelBody}>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 16,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 10,
+                    backgroundColor: 'var(--ant-color-bg-elevated)'
+                  }}
+                >
+                  <ColTitle style={{ paddingBottom: 0 }}>
+                    {intl.formatMessage({
+                      id: 'gpuservice.instance.types'
+                    })}
+                  </ColTitle>
+                  <Input
+                    allowClear
+                    prefix={<SearchOutlined className="text-tertiary" />}
+                    placeholder={intl.formatMessage({
+                      id: 'gpuservice.instance.search.type.placeholder'
+                    })}
+                    value={instanceKeyword}
+                    onChange={(e) => setInstanceKeyword(e.target.value)}
+                  />
+                </div>
+                <InstanceTypeList
+                  // Edit (stopped) re-selection is decoupled from create's
+                  // card selection: separate highlight state + apply handler.
+                  value={
+                    isStoppedEdit
+                      ? editSelectedType
+                      : instanceTypeSelection.instanceType
+                  }
+                  dataList={filteredInstanceTypes}
+                  loading={instanceTypesLoading}
+                  onChange={
+                    isStoppedEdit
+                      ? handleEditInstanceTypeChange
+                      : handleInstanceTypeChange
+                  }
+                />
+              </div>
+            </ColumnWrapper>
+            <Separator></Separator>
+          </div>
+        )}
        {showResourceSelectors && (
-          <>
-            <div className={styles.colWrapper}>
-              <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
-                <div className={styles.panelBody}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: 16,
-                      position: 'sticky',
-                      top: 0,
-                      zIndex: 10,
-                      backgroundColor: 'var(--ant-color-bg-elevated)'
-                    }}
-                  >
-                    <ColTitle style={{ paddingBottom: 0 }}>
-                      {intl.formatMessage({
-                        id: 'gpuservice.instance.types'
-                      })}
-                    </ColTitle>
-                    <Input
-                      allowClear
-                      prefix={<SearchOutlined className="text-tertiary" />}
-                      placeholder={intl.formatMessage({
-                        id: 'gpuservice.instance.search.type.placeholder'
-                      })}
-                      value={instanceKeyword}
-                      onChange={(e) => setInstanceKeyword(e.target.value)}
-                    />
-                  </div>
-                  <InstanceTypeList
-                    value={instanceTypeSelection.instanceType}
-                    dataList={filteredInstanceTypes}
-                    loading={instanceTypesLoading}
-                    onChange={handleInstanceTypeChange}
+          <div className={styles.colWrapper}>
+            <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+              <div className={styles.panelBody}>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 16,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 10,
+                    backgroundColor: 'var(--ant-color-bg-elevated)'
+                  }}
+                >
+                  <ColTitle style={{ paddingBottom: 0 }}>
+                    {intl.formatMessage({
+                      id: 'gpuservice.instance.templates'
+                    })}
+                  </ColTitle>
+                  <Input
+                    allowClear
+                    prefix={<SearchOutlined className="text-tertiary" />}
+                    placeholder={intl.formatMessage({
+                      id: 'gpuservice.instance.search.template.placeholder'
+                    })}
+                    value={templateKeyword}
+                    onChange={(e) => setTemplateKeyword(e.target.value)}
                  />
                </div>
-              </ColumnWrapper>
-              <Separator></Separator>
-            </div>
-            <div className={styles.colWrapper}>
-              <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
-                <div className={styles.panelBody}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: 16,
-                      position: 'sticky',
-                      top: 0,
-                      zIndex: 10,
-                      backgroundColor: 'var(--ant-color-bg-elevated)'
-                    }}
-                  >
-                    <ColTitle style={{ paddingBottom: 0 }}>
-                      {intl.formatMessage({
-                        id: 'gpuservice.instance.templates'
-                      })}
-                    </ColTitle>
-                    <Input
-                      allowClear
-                      prefix={<SearchOutlined className="text-tertiary" />}
-                      placeholder={intl.formatMessage({
-                        id: 'gpuservice.instance.search.template.placeholder'
-                      })}
-                      value={templateKeyword}
-                      onChange={(e) => setTemplateKeyword(e.target.value)}
-                    />
-                  </div>
-                  <TemplateSelector
-                    value={templateId}
-                    loading={templateLoading || !initialized}
-                    groups={templateGroups}
-                    onChange={handleTemplateChange}
-                  />
-                </div>
-              </ColumnWrapper>
-              <Separator></Separator>
-            </div>
-          </>
+                <TemplateSelector
+                  value={templateId}
+                  loading={templateLoading || !initialized}
+                  groups={templateGroups}
+                  onChange={handleTemplateChange}
+                />
+              </div>
+            </ColumnWrapper>
+            <Separator></Separator>
+          </div>
        )}
        <div className={styles.formWrapper}>
          <ColumnWrapper
            styles={{ container: { paddingBlock: 0 } }}
            footer={
              <>
-                {isRecreate && open && (
-                  <div style={{ marginInline: 24, paddingTop: 8 }}>
-                    <AlertBlockInfo
-                      type="warning"
-                      contentStyle={{ paddingInline: 0 }}
-                      message={intl.formatMessage({
-                        id: 'gpuservice.instance.recreate.confirm.content'
-                      })}
-                    />
-                  </div>
-                )}
                <ModalFooter
                  onOk={handleSubmit}
                  onCancel={handleCancel}
@@ -664,9 +651,9 @@ const AddModal: React.FC<AddModalProps> = ({
              <GPUServiceInstanceForm
                ref={form}
                action={action}
-                realAction={realAction}
                currentData={data}
                disabled={readonly}
+                restrictedEdit={isRestrictedEdit}
                onFinish={onFinish}
                onFinishFailed={release}
                onScopeChange={handleScopeChange}
@@ -1,13 +1,17 @@
+import PluginExtraFields from '@/components/plugin-extra-fields';
 import { AutoTooltip, IconFont, ThemeTag } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Flex, Tag } from 'antd';
 import _ from 'lodash';
 import styled from 'styled-components';
 import { manufactureColorMap } from '../../templates/config';
+import { formatManufacturer } from '../../utils';
 import { formatMemoryDisplay } from '../config';
-import { InstanceTypeItem as InstanceTypeItemModel } from '../config/types';
-
-const Vendors = ['intel'] as const;
+import {
+  InstanceTypeItem as InstanceTypeItemModel,
+  InstanceTypeSnapshotSpec
+} from '../config/types';
+import { buildInstanceTypeSnapshotSpec } from '../utils/instance-description';

 const Title = styled.div`
  display: flex;
@@ -54,10 +58,17 @@ const Meta = styled.div<{ $columns?: number }>`

 interface InstanceTypeItemProps {
  item: InstanceTypeItemModel;
+  action?: React.ReactNode;
 }

 interface MetadataSectionProps {
-  spec: InstanceTypeItemModel['spec'];
+  // The flat snapshot / display model — built from a live item with
+  // buildInstanceTypeSnapshotSpec, or parsed back from a persisted
+  // `description` snapshot (readonly edit card).
+  spec: InstanceTypeSnapshotSpec;
+  // status.onceMaxRequest.acceleratorSliced (max sliceable percentage). Shown
+  // next to Max for sliceable types.
+  slicedMaxPercentage?: number;
 }

 const MetaItem: React.FC<{
@@ -100,8 +111,14 @@ const CPUManufacturerTag: React.FC<{ manufacturer?: string }> = ({
  );
 };

-function getInstanceDerived(item: InstanceTypeItemModel) {
-  const spec = item.spec || {};
+// Derives the display fields from the flat snapshot spec (the UI document
+// format — built from a live item with buildInstanceTypeSnapshotSpec, or
+// parsed back from a persisted `description` snapshot). Observed hardware
+// (manufacturer / product / memory / cpu) originates from status.detail.
+function getInstanceDerived(
+  spec: InstanceTypeSnapshotSpec = {},
+  fallbackName?: string
+) {
  const acceleratable = spec.acceleratable;

  const cpuManufacturer = acceleratable
@@ -112,122 +129,113 @@ function getInstanceDerived(item: InstanceTypeItemModel) {
    acceleratable,
    isGPU: acceleratable,
    manufacturer: acceleratable ? spec.manufacturer || '' : 'cpu', // GPU manufacturer or 'cpu' for non-acceleratable types
-    displayName: acceleratable ? spec.product || item.name : 'CPU Only',
+    displayName: acceleratable
+      ? spec.displayName || spec.product || fallbackName
+      : spec.displayName || 'CPU-only',
    ramUnit: spec.unitResourcesParsed?.ram?.value,
    os: _.capitalize(spec.os) || '',
    arch: spec.arch,
-    cpuManufacturer: Vendors.includes(cpuManufacturer as any)
-      ? _.capitalize(cpuManufacturer)
-      : _.toUpper(cpuManufacturer),
+    cpuManufacturer: formatManufacturer(cpuManufacturer),
    cpuUnitCores: spec.unitResourcesParsed?.cpu?.cores
  };
 }

+type MetaEntry = { icon: string; label?: string; value: React.ReactNode };
+
+// All rows share a single grid so columns — and therefore icons — line up
+// vertically. Each item is 3 cells (icon/label/value); every item past the
+// first adds a leading dot cell, so a row of k items spans 4k-1 cells. A short
+// row is padded with a spanning spacer so the next row restarts at column 1.
+const renderMetaRow = (items: MetaEntry[], columns: number, rowKey: string) => {
+  const cells = items.map((item, index) => (
+    <MetaItem
+      key={`${rowKey}-${item.icon}`}
+      showDot={index > 0}
+      icon={item.icon}
+      label={item.label}
+      value={item.value}
+    />
+  ));
+  const remaining = columns - (4 * items.length - 1);
+  if (remaining > 0) {
+    cells.push(
+      <span
+        key={`${rowKey}-spacer`}
+        style={{ gridColumn: `span ${remaining}` }}
+      />
+    );
+  }
+  return cells;
+};
+
 export const InstanceMetadataSection: React.FC<MetadataSectionProps> = ({
-  spec
+  spec,
+  slicedMaxPercentage
 }) => {
  const intl = useIntl();

-  const { ramUnit, cpuUnitCores, isGPU, os, arch } = getInstanceDerived({
-    spec
-  } as InstanceTypeItemModel);
+  const { ramUnit, cpuUnitCores, isGPU, arch } = getInstanceDerived(spec);
+
+  // Sliceable types append a "Sliceable {n}%" cell to the second row.
+  const showSliceable = !!spec.sliceable && (slicedMaxPercentage ?? 0) > 0;
+
+  const cpuItem: MetaEntry = {
+    icon: 'icon-cpu',
+    label: 'CPU',
+    value: cpuUnitCores || '-'
+  };
+  const ramItem: MetaEntry = {
+    icon: 'icon-ram-02',
+    label: intl.formatMessage({ id: 'gpuservice.instance.ram' }),
+    value: ramUnit ? `${ramUnit} GB` : '-'
+  };
+  const memoryItem: MetaEntry = {
+    icon: 'icon-gpu1',
+    label: intl.formatMessage({ id: 'gpuservice.instance.memory' }),
+    value: formatMemoryDisplay(spec?.memory ?? undefined) ?? '-'
+  };
+  const archItem: MetaEntry = {
+    icon: 'icon-cube',
+    label: intl.formatMessage({ id: 'gpuservice.instance.arch' }),
+    value: _.toUpper(arch) || '-'
+  };
+  const maxItem: MetaEntry = {
+    icon: 'icon-database',
+    label: intl.formatMessage({ id: 'common.max' }, { count: '' }),
+    value: `${spec.maxComputeUnitCount || 0}`
+  };
+  const slicedItem: MetaEntry = {
+    icon: 'icon-sliced',
+    label: intl.formatMessage({ id: 'gpuservice.instance.sliceable' }),
+    value: `${slicedMaxPercentage}%`
+  };
+
+  // GPU: 3 items/row → 11 cols. CPU: 2 items/row → 7 cols.
+  const columns = isGPU ? 11 : 7;
+  const rows: MetaEntry[][] = isGPU
+    ? [
+        [ramItem, memoryItem, cpuItem],
+        showSliceable ? [archItem, maxItem, slicedItem] : [archItem, maxItem]
+      ]
+    : [[ramItem], [archItem, maxItem]];

  return (
-    <Meta $columns={isGPU ? 11 : 7}>
-      {isGPU && (
-        <>
-          {/* row 1: Memory | Max | RAM */}
-          <MetaItem
-            show={isGPU}
-            showDot={false}
-            icon="icon-gpu1"
-            label={intl.formatMessage({ id: 'gpuservice.instance.memory' })}
-            value={formatMemoryDisplay(spec?.memory ?? undefined) ?? '-'}
-          />
-          <MetaItem
-            showDot={true}
-            icon="icon-ram-02"
-            label={intl.formatMessage({ id: 'gpuservice.instance.ram' })}
-            value={ramUnit ? `${ramUnit} GB` : '-'}
-          />
-          <MetaItem
-            icon="icon-database"
-            label={intl.formatMessage(
-              {
-                id: 'common.max'
-              },
-              { count: '' }
-            )}
-            value={`${spec.maxComputeUnitCount || 0}`}
-          />
-          {/* row 2: OS | Arch | CPU */}
-          <MetaItem
-            showDot={false}
-            icon="icon-server02"
-            label={intl.formatMessage({ id: 'gpuservice.instance.os' })}
-            value={os || '-'}
-          />
-          <MetaItem
-            icon="icon-cube"
-            label={intl.formatMessage({ id: 'gpuservice.instance.arch' })}
-            value={_.toUpper(arch) || '-'}
-          />
-          <MetaItem
-            show={isGPU}
-            showDot={true}
-            icon="icon-cpu"
-            label="CPU"
-            value={
-              <Flex gap={4} align="center">
-                <span>{cpuUnitCores || '-'}</span>
-              </Flex>
-            }
-          />
-        </>
-      )}
-
-      {!isGPU && (
-        <>
-          {/* row 1: RAM | Max */}
-          <MetaItem
-            showDot={false}
-            icon="icon-ram-02"
-            label={intl.formatMessage({ id: 'gpuservice.instance.ram' })}
-            value={ramUnit ? `${ramUnit} GB` : '-'}
-          />
-          <MetaItem
-            icon="icon-database"
-            label={intl.formatMessage(
-              {
-                id: 'common.max'
-              },
-              { count: '' }
-            )}
-            value={`${spec.maxComputeUnitCount || 0}`}
-          />
-          {/* row 2: OS | Arch */}
-          <MetaItem
-            showDot={false}
-            icon="icon-server02"
-            label={intl.formatMessage({ id: 'gpuservice.instance.os' })}
-            value={os || '-'}
-          />
-          <MetaItem
-            icon="icon-cube"
-            label={intl.formatMessage({ id: 'gpuservice.instance.arch' })}
-            value={_.toUpper(arch) || '-'}
-          />
-        </>
-      )}
+    <Meta $columns={columns}>
+      {rows.map((row, index) => renderMetaRow(row, columns, `row-${index}`))}
    </Meta>
  );
 };

-const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
-  const specData = item.spec || {};
+const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({
+  item,
+  action
+}) => {
+  // Fold the live (API-shaped) item into the flat display model: definition
+  // fields from spec, observed hardware from status.detail.
+  const specData = buildInstanceTypeSnapshotSpec(item);

  const { acceleratable, manufacturer, displayName, cpuManufacturer } =
-    getInstanceDerived(item);
+    getInstanceDerived(specData, item.name);

  const manufacturerColor = manufactureColorMap[manufacturer] ?? 'purple';
  const showManufacturerTag = acceleratable && !!manufacturer;
@@ -259,7 +267,7 @@ const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
              disabled={false}
              style={{ fontWeight: 400 }}
            >
-              {manufacturer?.toUpperCase()}
+              {formatManufacturer(manufacturer)}
            </ThemeTag>
          )}
          {showCpuManufacturerTag && (
@@ -271,9 +279,19 @@ const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
              {cpuManufacturer}
            </ThemeTag>
          )}
+          <PluginExtraFields
+            name="InstanceTypeBillingBadge"
+            context={{ instanceType: item }}
+          />
+          {action && <div style={{ marginLeft: 8 }}>{action}</div>}
        </Flex>
      </Title>
-      <InstanceMetadataSection spec={specData}></InstanceMetadataSection>
+      <InstanceMetadataSection
+        spec={specData}
+        slicedMaxPercentage={
+          Number(item.status?.onceMaxRequest?.acceleratorSliced) || 0
+        }
+      ></InstanceMetadataSection>
    </Flex>
  );
 };
@@ -1,8 +1,10 @@
+import PluginExtraFields from '@/components/plugin-extra-fields';
 import { FileSkeletonRows } from '@/pages/llmodels/components/model-source/file-skeleton';
 import { TemplateCard } from '@gpustack/core-ui';
 import { Empty, Flex, Spin } from 'antd';
 import _ from 'lodash';
 import { InstanceTypeItem as InstanceTypeItemModel } from '../config/types';
+import styles from '../styles/instances.module.less';
 import InstanceTypeItem from './instance-type-item';

 interface InstanceTypeListProps {
@@ -40,15 +42,19 @@ const InstanceTypeList: React.FC<InstanceTypeListProps> = ({

  return (
    <Flex orientation="vertical" gap={16}>
+      <PluginExtraFields
+        name="InstanceTypeBillingProvider"
+        context={{ instanceTypes: dataList }}
+      />
      {dataList.map((item) => {
        const name = item.name;
        return (
          <TemplateCard
            key={name}
+            className={styles.instanceTypeCard}
            clickable
            ghost
            hoverable
-            height={106}
            active={value === name}
            disabled={item.disabled}
            onClick={() => handleSelect(item)}
@@ -3,7 +3,15 @@ import { StatusType } from '@/config/types';
 import { IconFont, icons } from '@gpustack/core-ui';
 import _ from 'lodash';
 import React from 'react';
-import { ListItem } from '../config/types';
+import { AcceleratorSlicedDetail, ListItem } from '../config/types';
+
+// Whether a type can be sliced, per the API contract (replaces the removed
+// `spec.sliceable` boolean): logical (soft) slicing reports per-card capacity
+// or physical (e.g. MIG) profiles exist. Every level of slicedDetail may be
+// absent (exclude_none responses).
+export const isSliceableDetail = (detail?: AcceleratorSlicedDetail | null) =>
+  (detail?.logical?.count ?? 0) > 0 ||
+  (detail?.physical?.profiles?.length ?? 0) > 0;

 export const InstanceStatusValueMap = {
  Scheduling: 'Scheduling',
@@ -251,7 +259,7 @@ const parseQuantity = (value?: string | null): number => {
 // Returns the slider max for the accelerator count: the largest
 // tier.onceMaxRequest.accelerator across all tiers (not from candidates).
 export const getAcceleratorMax = (
-  tiers?: { onceMaxRequest: { accelerator?: string } }[] | null
+  tiers?: { onceMaxRequest: { accelerator?: string | null } }[] | null
 ) => {
  if (!tiers?.length) return 0;
  return tiers.reduce((acc, tier) => {
@@ -262,32 +270,46 @@ export const getAcceleratorMax = (

 // Picks the candidate (cluster + type name) that should fulfill a requested
 // accelerator count: the first candidate of the smallest tier whose
-// onceMaxRequest.accelerator is >= the requested count and whose cpu/ram/localStorage
-// remaining are all > 0.
+// onceMaxRequest.accelerator is >= the requested count. Only Active candidates
+// are eligible. Accelerated types are not gated on CPU remaining (only CPU-only
+// types are); in sliced mode the candidate's acceleratorSliced remaining must
+// also be > 0.
 export const pickCandidateForAccelerator = <
  C extends {
    cluster: string;
    name: string;
+    phase?: string | null;
    cpu?: { remaining?: string | null } | null;
-    ram?: { remaining?: string | null } | null;
-    localStorage?: { remaining?: string | null } | null;
+    acceleratorSliced?: { remaining?: string | null } | null;
  }
 >(
  tiers:
    | {
-        onceMaxRequest: { accelerator?: string };
+        onceMaxRequest: {
+          accelerator?: string | null;
+          acceleratorSliced?: string | null;
+        };
        candidates?: C[] | null;
      }[]
    | undefined
    | null,
-  { count, acceleratable }: { count: number; acceleratable?: boolean }
+  {
+    count,
+    acceleratable,
+    sliced
+  }: { count: number; acceleratable?: boolean; sliced?: boolean }
 ): C | null => {
  if (!tiers?.length) return null;

-  const hasResources = (c: C) =>
-    parseQuantity(c.cpu?.remaining) > 0 &&
-    parseQuantity(c.ram?.remaining) > 0 &&
-    parseQuantity(c.localStorage?.remaining) > 0;
+  const hasResources = (c: C) => {
+    // Only Active candidates can serve new instances.
+    if (c.phase !== InstanceTypePhaseValueMap.Active) return false;
+    // Accelerated types are not gated on CPU remaining; CPU-only types are.
+    if (!acceleratable && parseQuantity(c.cpu?.remaining) <= 0) return false;
+    if (sliced && parseQuantity(c.acceleratorSliced?.remaining) <= 0)
+      return false;
+    return true;
+  };

  const sorted = [...tiers].sort(
    (a, b) =>
@@ -298,9 +320,14 @@ export const pickCandidateForAccelerator = <
  // count === 0 ? parseQuantity(tier.onceMaxRequest.accelerator) > count; this is CPU-only case.
  for (const tier of sorted) {
    const acceleratorCount = parseQuantity(tier.onceMaxRequest?.accelerator);
-    const fits = acceleratable
-      ? acceleratorCount >= count
-      : acceleratorCount === 0;
+    // Sliced mode requests a fraction of a single card, so the tier's
+    // whole-card accelerator count (0 for a slice-only type) can't gate it;
+    // fit on the tier's sliced capacity instead.
+    const fits = sliced
+      ? parseQuantity(tier.onceMaxRequest?.acceleratorSliced) > 0
+      : acceleratable
+        ? acceleratorCount >= count
+        : acceleratorCount === 0;
    if (!fits) continue;
    const candidate = tier.candidates?.find(hasResources);
    if (candidate) return candidate;
@@ -45,6 +45,11 @@ export interface FormData {
      ram: string | null | number;
      localStorage: string | null | number;
      accelerator: number | string | null;
+      // Sliced (percentage) mode only. Memory (VRAM) percentage bound to the
+      // 10-100 selector + free input; cores (compute) percentage bound to the
+      // "100% compute" checkbox (100 when checked, mirrors memory otherwise).
+      acceleratorSlicedMemoryPercentage?: number;
+      acceleratorSlicedCoresPercentage?: number;
    };
    volume: {
      ephemeral?: {
@@ -126,70 +131,129 @@ export interface InstanceTypeResource {
 export interface InstanceTypeCandidate {
  cluster: string;
  name: string;
-  accelerator: InstanceTypeResource;
-  cpu: InstanceTypeResource;
-  ram: InstanceTypeResource;
-  localStorage: InstanceTypeResource;
+  accelerator?: InstanceTypeResource | null;
+  cpu?: InstanceTypeResource | null;
+  // Shared-mode available resource (not shown in the GPU Instance form).
+  acceleratorShared?: InstanceTypeResource | null;
+  // Sliced-mode available resource.
+  acceleratorSliced?: InstanceTypeResource | null;
+  // This candidate's sliced (partitioning) capability.
+  acceleratorSlicedDetail?: AcceleratorSlicedDetail | null;
+  phase?: 'Active' | 'Inactive' | 'Draining' | null;
 }

-export interface InstanceTypeTierOnceMaxRequestResource {
-  accelerator?: string;
-  cpu: QuanityCPU;
-  ram: QuanityMemory;
-  localStorage: QuanityLocalStorage;
+// Per-mode maxima as plain number strings — the shape of the aggregated
+// status.onceMaxRequest / status.remaining AND of tier onceMaxRequest /
+// remaining (they are identical in the API). accelerator counts whole cards,
+// acceleratorShared / acceleratorSliced are percentages, cpu is cores. The
+// API carries no ram / localStorage here — RAM caps derive from
+// spec.unitResources, disk from spec.localStorage.
+export interface InstanceTypeOverviewResource {
+  accelerator?: `${number}` | null;
+  acceleratorShared?: `${number}` | null;
+  acceleratorSliced?: `${number}` | null;
+  cpu?: QuanityCPU | null;
 }

 export interface InstanceTypeTier {
-  onceMaxRequest: InstanceTypeTierOnceMaxRequestResource;
+  onceMaxRequest: InstanceTypeOverviewResource;
+  remaining?: InstanceTypeOverviewResource | null;
+  // The tier's aggregated sliced (partitioning) capability.
+  acceleratorSlicedDetail?: AcceleratorSlicedDetail | null;
  candidates?: InstanceTypeCandidate[] | null;
 }

-export interface InstanceTypeOnceMaxRequestResource {
-  accelerator?: `${number}` | null;
-  cpu: QuanityCPU;
-  ram: QuanityMemory;
-  localStorage: QuanityLocalStorage;
-}
-
 export interface CPUCache {
-  l1i: string;
-  l1d: string;
-  l2: string;
-  l3: string;
+  l1i?: string | null;
+  l1d?: string | null;
+  l2?: string | null;
+  l3?: string | null;
 }

 export interface CPUInfo {
-  physicalCores: string;
-  threadsPerPhysicalCore: string;
-  logicalCores: string;
-  stepping: string | null;
-  clockSpeed: string | null;
-  maxClockSpeed: string | null;
-  cacheLine: string;
-  cache: CPUCache;
-  manufacturer: string;
-  product: string;
-  family: string;
+  physicalCores?: string | null;
+  threadsPerPhysicalCore?: string | null;
+  logicalCores?: string | null;
+  stepping?: string | null;
+  clockSpeed?: string | null;
+  maxClockSpeed?: string | null;
+  cacheLine?: string | null;
+  cache?: CPUCache | null;
+  manufacturer?: string | null;
+  product?: string | null;
+  family?: string | null;
 }

-export interface InstanceTypeSpec {
-  group: string;
-  acceleratable: boolean;
-  manufacturer: string;
+// Sliced (partitioning) capability descriptor. Replaces the removed
+// `spec.sliceable` boolean: a type is sliceable when logical (soft) slicing
+// reports capacity or physical (e.g. MIG) profiles exist — see
+// isSliceableDetail in ./index. Appears as status.detail.slicedDetail and as
+// tier / candidate `acceleratorSlicedDetail` in the aggregated view.
+export interface AcceleratorSlicedLogicalDetail {
+  coresPercentageOvercommit?: boolean;
+  // Max soft slices per card; 0 → soft slicing unsupported.
+  count?: number | null;
+}
+
+export interface AcceleratorSlicedPhysicalDetailProfile {
+  name?: string | null;
+  count?: number | null;
+}
+
+export interface AcceleratorSlicedPhysicalDetail {
+  profiles?: AcceleratorSlicedPhysicalDetailProfile[] | null;
+  count?: number | null;
+}
+
+export interface AcceleratorSlicedDetail {
+  logical?: AcceleratorSlicedLogicalDetail | null;
+  physical?: AcceleratorSlicedPhysicalDetail | null;
+}
+
+// status.detail — the observed hardware descriptor. The API moved these off
+// spec (spec keeps user-defined fields only). The whole object is absent until
+// the operator backfills status, and every response is exclude_none — treat
+// every key as possibly missing.
+export interface InstanceTypeDetail {
+  // Device identity.
+  manufacturer?: string | null;
  product?: string | null;
-  memory?: string | null;
  family?: string | null;
+  // Host node CPU (flat fields, as opposed to the nested `cpu` below).
+  physicalCores?: string | null;
+  threadsPerPhysicalCore?: string | null;
+  logicalCores?: string | null;
+  stepping?: string | null;
+  clockSpeed?: string | null;
+  maxClockSpeed?: string | null;
+  cacheLine?: string | null;
+  cache?: CPUCache | null;
+  // Accelerator hardware.
+  memory?: string | null;
+  cores?: string | null;
  computeCapability?: string | null;
-  sliced?: string | null;
-  maxComputeUnitCount?: number;
+  slicedDetail?: AcceleratorSlicedDetail | null;
+  // The accelerator's own CPU (distinct from the flat host CPU fields above).
+  cpu?: CPUInfo | null;
+}
+
+// Mirrors the API spec object exactly (user-defined fields only — observed
+// hardware lives on status.detail), plus two UI-computed enrichments filled by
+// use-query-instance-types whose names exist nowhere in the API.
+export interface InstanceTypeSpec {
+  displayName?: string | null;
+  acceleratorGroup?: string | null;
+  generalGroup?: string | null;
+  acceleratable?: boolean;
+  os?: string;
+  arch?: string;
+  localStorage?: QuanityLocalStorage;
  unitResources?: {
    cpu: QuanityCPU;
    ram: QuanityMemory;
  };
-  os?: string;
-  arch?: string;
-  cpu?: CPUInfo;
-  cache?: Record<string, string>;
+  // ---- UI-computed (not part of the API contract) ----
+  // spec.unitResources parsed to numbers.
  unitResourcesParsed?: {
    cpu: {
      cores?: number;
@@ -202,10 +266,31 @@ export interface InstanceTypeSpec {
      num: number;
    } | null;
  };
+  // Max requestable unit (card / core) count, derived from status.
+  maxComputeUnitCount?: number;
+}
+
+// Flat spec snapshot persisted in a GPU instance's `description` field at
+// create time (see utils/instance-description.ts) and reused as the display
+// model of the type card / metadata section. It merges the definition spec
+// with the observed hardware from status.detail and the derived `sliceable`.
+// The flat shape is a UI document format — do NOT confuse it with the API
+// InstanceTypeSpec; it stays flat for compatibility with snapshots persisted
+// by older instances.
+export interface InstanceTypeSnapshotSpec extends InstanceTypeSpec {
+  manufacturer?: string | null;
+  product?: string | null;
+  family?: string | null;
+  memory?: string | null;
+  sliceable?: boolean;
+  // Accelerator CPU identity only (from status.detail.cpu).
+  cpu?: Pick<CPUInfo, 'manufacturer' | 'product' | 'family'> | null;
 }

 export interface InstanceTypeStatus {
-  onceMaxRequest: InstanceTypeOnceMaxRequestResource;
+  detail?: InstanceTypeDetail | null;
+  onceMaxRequest: InstanceTypeOverviewResource;
+  remaining?: InstanceTypeOverviewResource | null;
  tiers?: InstanceTypeTier[] | null;
 }

@@ -35,7 +35,11 @@ import { DefaultImagePullPolicy } from '../../templates/config';
 import TemplateBasicForm, {
  BasicResourceMax
 } from '../../templates/forms/basic';
-import { pickCandidateForAccelerator, StorageModeValueMap } from '../config';
+import {
+  isSliceableDetail,
+  pickCandidateForAccelerator,
+  StorageModeValueMap
+} from '../config';
 import { FormContext } from '../config/form-context';
 import { FormData, InstanceTypeItem, ListItem } from '../config/types';
 import instanceStyles from '../styles/instances.module.less';
@@ -55,7 +59,7 @@ interface InstanceFormProps {
  ref?: any;
  open: boolean;
  action: PageActionType;
-  realAction?: PageActionType | string;
+  // Present on edit / view.
  currentData?: ListItem | null;
  namespace?: string;
  instanceTypeList?: InstanceTypeItem[];
@@ -63,6 +67,9 @@ interface InstanceFormProps {
  // surfaces a "no available instance type" message in the scheduling tab.
  noAvailableInstanceTypes?: boolean;
  disabled?: boolean;
+  // Editing a non-stopped instance: only displayName and the SSH public keys
+  // stay editable; the type / template / storage sections render disabled.
+  restrictedEdit?: boolean;
  // Fired when the create-scope picker retargets the form to another
  // org (or Global). Only emitted on genuine changes — never on the
  // initial mount, and never in builds where the picker isn't mounted
@@ -107,9 +114,9 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
  (props, ref) => {
    const {
      action,
-      realAction,
      currentData,
      disabled,
+      restrictedEdit,
      open,
      instanceTypeList = [],
      noAvailableInstanceTypes,
@@ -121,8 +128,9 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
    const { getRuleMessage } = useAppUtils();
    const [form] = Form.useForm<InstanceFormValues>();
    const scrollTabsRef = useRef<any>(null);
-    const formAction =
-      realAction === PageAction.CREATE ? PageAction.CREATE : action;
+    // Restricted (non-stopped) edit disables the type / template / storage
+    // sections; displayName and the SSH public keys keep following `disabled`.
+    const sectionDisabled = disabled || restrictedEdit;
    const sshEnabled = Form.useWatch('enable_ssh', form);
    const description = Form.useWatch(['description'], form);
    // `organization_id` is owned by the create-scope picker slot; it only
@@ -273,33 +281,132 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(

    const buildResourcesDataForSubmit = (values: FormData) => {
      const unitResourcesParsed = getUnitResources();
-      const accelerator = _.toNumber(values.spec?.resources?.accelerator) || 0;
-      const cpuCount = _.toNumber(values.spec?.resources?.cpu) || 0;
+      const resources = values.spec?.resources ?? ({} as any);
+      const accelerator = _.toNumber(resources.accelerator) || 0;
+      const cpuCount = _.toNumber(resources.cpu) || 0;

      const cpuNum = unitResourcesParsed?.cpu?.num;
      const ramNum = unitResourcesParsed?.ram?.num;

-      const fallbackCpu = values.spec?.resources?.cpu;
+      const fallbackCpu = resources.cpu;

-      const factor = isGPUType ? accelerator : cpuCount;
+      const percentage = _.toNumber(
+        resources.acceleratorSlicedMemoryPercentage
+      );
+      const sliced = isGPUType && percentage > 0;
+      const wholeFactor = isGPUType ? accelerator : cpuCount;

+      // Sliced mode: scale a single card's unit resources by the chosen
+      // percentage, submitted as whole cores / whole Gi (floored, min 1) so
+      // the payload matches what the disabled CPU / RAM inputs display —
+      // e.g. 10% of a 4-core / 16Gi card → "1" / "1Gi".
+      if (sliced && unitResourcesParsed) {
+        const cpuCores = unitResourcesParsed.cpu?.cores ?? 0;
+        const ramValue = unitResourcesParsed.ram?.value ?? 0;
+        return {
+          cpu: `${Math.max(1, _.floor((cpuCores * percentage) / 100))}`,
+          ram: `${Math.max(1, _.floor((ramValue * percentage) / 100))}Gi`
+        };
+      }
+
+      // Whole / CPU mode: multiply the unit by the count.
      return {
        cpu: cpuNum
-          ? `${factor * cpuNum}${unitResourcesParsed?.cpu?.unit || ''}`
+          ? `${wholeFactor * cpuNum}${unitResourcesParsed?.cpu?.unit || ''}`
          : // Don't stringify an unset value — `${undefined}` becomes the
            // literal "undefined", which fails k8s quantity validation.
            fallbackCpu
            ? `${fallbackCpu}`
            : undefined,
        ram: ramNum
-          ? `${factor * ramNum}${unitResourcesParsed?.ram?.unit || ''}`
-          : values.spec?.resources?.ram
+          ? `${wholeFactor * ramNum}${unitResourcesParsed?.ram?.unit || ''}`
+          : resources.ram
      };
    };

+    // Sliced display: set the (disabled) CPU / RAM inputs to a single card's
+    // unit resources scaled by the chosen percentage, floored. Reads the
+    // percentage straight from the form so it can be re-run after any slider
+    // change without threading values through.
+    const applySlicedResourceScaling = () => {
+      const unitResourcesParsed = getUnitResources();
+      const cpuCores = unitResourcesParsed?.cpu?.cores;
+      const ramValue = unitResourcesParsed?.ram?.value;
+      const percentage = _.toNumber(
+        form.getFieldValue([
+          'spec',
+          'resources',
+          'acceleratorSlicedMemoryPercentage'
+        ])
+      );
+
+      form.setFieldsValue({
+        spec: {
+          resources: {
+            // Floor the scaled unit resources to whole units, never below 1 —
+            // a small slice (e.g. 8 GB × 10%) still shows a usable 1 vCPU /
+            // 1 GB instead of 0. Display-only: the submit path recomputes
+            // both precisely in millicores / Mi.
+            cpu:
+              cpuCores != null && percentage > 0
+                ? Math.max(1, _.floor((cpuCores * percentage) / 100))
+                : null,
+            ram:
+              ramValue != null && percentage > 0
+                ? Math.max(1, _.floor((ramValue * percentage) / 100))
+                : null
+          }
+        }
+      } as any);
+    };
+
+    // Whether the selected type allows the compute (cores) ratio to exceed
+    // the memory ratio. Without overcommit there is no cores selector and the
+    // cores ratio is locked to (mirrors) the memory ratio.
+    const coresOvercommit =
+      !!selectedInstanceType?.status?.detail?.slicedDetail?.logical
+        ?.coresPercentageOvercommit;
+
+    // Single entry point for the sliced memory ratio: write the ratio and
+    // rescale CPU / RAM off it. With cores overcommit the compute ratio must
+    // stay >= memory (bump it up when memory overtakes it); without it the
+    // compute ratio always mirrors memory. Reused by the slider onChange.
+    const applySliceMemoryPercentage = (value: number) => {
+      const currentCores = _.toNumber(
+        form.getFieldValue([
+          'spec',
+          'resources',
+          'acceleratorSlicedCoresPercentage'
+        ])
+      );
+      const coresPercentage = coresOvercommit
+        ? Math.max(currentCores, value)
+        : value;
+      form.setFieldsValue({
+        spec: {
+          resources: {
+            acceleratorSlicedMemoryPercentage: value,
+            acceleratorSlicedCoresPercentage: coresPercentage
+          }
+        }
+      } as any);
+      applySlicedResourceScaling();
+    };
+
+    // Compute (cores) ratio — a GPU-slice-only parameter that rides along on
+    // submit. It does not scale CPU / RAM (those track the memory ratio), so
+    // just write the field.
+    const applySliceCoresPercentage = (value: number) => {
+      form.setFieldValue(
+        ['spec', 'resources', 'acceleratorSlicedCoresPercentage'],
+        value
+      );
+    };
+
    const resolveAndApply = (
      instanceType: InstanceTypeItem | undefined,
-      count: number
+      count: number,
+      sliced?: boolean
    ) => {
      if (!instanceType) {
        setSelectedInstanceType(undefined);
@@ -328,17 +435,23 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
        instanceType.status?.tiers,
        {
          count,
-          acceleratable: instanceType.spec?.acceleratable
+          acceleratable: instanceType.spec?.acceleratable,
+          sliced
        }
      );

      console.log('picked candidate', candidate, instanceType, count);

+      // The API carries no RAM max on onceMaxRequest — derive it from the
+      // per-unit RAM × the max requestable unit count (RAM always scales with
+      // the unit count). Disk max comes from spec.localStorage (UI-only cap).
+      const unitRamGi = instanceType.spec?.unitResourcesParsed?.ram?.value;
+      const maxUnits = instanceType.spec?.maxComputeUnitCount || 0;
      setOnceMaxRequest({
        cpu: ceilMilliToCore(candidate?.cpu?.onceMaxRequest)?.cores,
-        memory: parseQuantityToGi(candidate?.ram?.onceMaxRequest)?.value,
-        localStorage: parseQuantityToGi(candidate?.localStorage?.onceMaxRequest)
-          ?.value
+        memory: unitRamGi && maxUnits ? unitRamGi * maxUnits : null,
+        localStorage:
+          parseQuantityToGi(instanceType.spec?.localStorage)?.value ?? null
      });

      form.setFieldsValue({
@@ -354,8 +467,89 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
      });
    };

+    // Whole-card (exclusive) vs sliced (percentage) mode. Only meaningful for
+    // sliceable accelerator types; derived (no persisted field) — on edit it
+    // is inferred from acceleratorSlicedMemoryPercentage > 0.
+    const [sliceMode, setSliceMode] = useState<'whole' | 'sliced'>('whole');
+
    const handleAcceleratorChange = (count: number) => {
-      resolveAndApply(selectedInstanceType, count);
+      resolveAndApply(selectedInstanceType, count, false);
+    };
+
+    // Seed the sliced-mode defaults for an instance type: memory ratio at 10%
+    // (never above the type's max sliceable ratio, status.onceMaxRequest
+    // .acceleratorSliced), and the cores ratio defaulting to the same value
+    // (cores >= memory). Set both together so a fresh selection doesn't carry a
+    // stale cores value from a previous type.
+    const applySlicedDefaults = (instanceType?: InstanceTypeItem) => {
+      const slicedMax =
+        _.toNumber(instanceType?.status?.onceMaxRequest?.acceleratorSliced) ||
+        0;
+      const memoryPercentage = slicedMax ? Math.min(10, slicedMax) : 10;
+      form.setFieldsValue({
+        spec: {
+          resources: {
+            acceleratorSlicedMemoryPercentage: memoryPercentage,
+            acceleratorSlicedCoresPercentage: memoryPercentage
+          }
+        }
+      } as any);
+      applySlicedResourceScaling();
+    };
+
+    // Toggle between whole-card and sliced mode. Sliced fixes the accelerator
+    // count to 1 (a single card is partitioned by percentage) and clears the
+    // slice-percentage fields when leaving sliced mode.
+    const handleSliceModeChange = (mode: 'whole' | 'sliced') => {
+      setSliceMode(mode);
+      if (mode === 'sliced') {
+        resolveAndApply(selectedInstanceType, 1, true);
+        applySlicedDefaults(selectedInstanceType);
+      } else {
+        form.setFieldsValue({
+          spec: {
+            resources: {
+              acceleratorSlicedMemoryPercentage: undefined,
+              acceleratorSlicedCoresPercentage: undefined
+            }
+          }
+        } as any);
+        resolveAndApply(selectedInstanceType, 1, false);
+      }
+    };
+
+    // Apply a chosen instance type to the form: default to sliced mode for a
+    // sliceable type with no whole-card capacity, otherwise whole-card with a
+    // count of 1. Shared by the create card selection (imperative handle) and
+    // the edit change-type overlay.
+    const applyInstanceType = (instanceType?: InstanceTypeItem) => {
+      if (!instanceType) {
+        setSliceMode('whole');
+        resolveAndApply(undefined, 0);
+        return;
+      }
+
+      // A sliceable type with no whole-card capacity (Max < 1) defaults to
+      // sliced mode — whole mode would have nothing selectable.
+      const wholeMax = instanceType.spec?.maxComputeUnitCount ?? 0;
+      const slicedMax =
+        _.toNumber(instanceType.status?.onceMaxRequest?.acceleratorSliced) || 0;
+      const defaultSliced =
+        isSliceableDetail(instanceType.status?.detail?.slicedDetail) &&
+        wholeMax < 1 &&
+        slicedMax > 0;
+
+      if (defaultSliced) {
+        setSliceMode('sliced');
+        resolveAndApply(instanceType, 1, true);
+        applySlicedDefaults(instanceType);
+        return;
+      }
+
+      // Otherwise default to whole-card mode (a new type may not be
+      // sliceable); set count to 1 for all instance types: GPU or non-GPU.
+      setSliceMode('whole');
+      resolveAndApply(instanceType, 1);
    };

    const onTargetChange = (key: string) => {
@@ -392,11 +586,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
        return;
      }

-      if (
-        action === PageAction.EDIT ||
-        action === PageAction.VIEW ||
-        realAction === PageAction.CREATE
-      ) {
+      // Prefill from the source row on edit / view.
+      if (currentData) {
        console.log('currentData', currentData);
        const currentSpec = parseJsonSafe(
          currentData?.description || '{}',
@@ -407,6 +598,14 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
          ? _.toNumber(currentData?.spec?.resources?.accelerator)
          : _.toNumber(currentData?.spec?.resources?.cpu) || 0;

+        // Infer the mode from the persisted slice percentage (edit/view
+        // render a readonly card).
+        const persistedSliced =
+          _.toNumber(
+            currentData?.spec?.resources?.acceleratorSlicedMemoryPercentage
+          ) > 0;
+        setSliceMode(persistedSliced ? 'sliced' : 'whole');
+
        form.setFieldsValue({
          ...currentData,
          spec: {
@@ -424,8 +623,14 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
          enable_ssh: !!currentData?.spec?.sshPublicKeys?.length,
          storageMode: detectMode(currentData?.spec?.volume)
        });
+
+        // buildResourcesData above filled CPU / RAM for the whole card; rescale
+        // them off the persisted percentages for a sliced instance.
+        if (persistedSliced) {
+          applySlicedResourceScaling();
+        }
      }
-    }, [action, currentData, form, open, realAction, instanceTypeList]);
+    }, [action, currentData, form, open, instanceTypeList]);

    const getUnitResources = () => {
      if (selectedInstanceType?.spec?.unitResourcesParsed) {
@@ -490,15 +695,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
        form.setFieldsValue(values as any);
      },
      getFieldsValue: () => form.getFieldsValue(),
-      applyInstanceType: (instanceType?: InstanceTypeItem) => {
-        if (!instanceType) {
-          resolveAndApply(undefined, 0);
-          return;
-        }
-
-        // set default  to 1, for all instance types: GPU or non-GPU
-        resolveAndApply(instanceType, 1);
-      }
+      applyInstanceType
    }));

    const handleAddSSHKey = () => {
@@ -540,7 +737,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
      >
        <FormContext.Provider
          value={{
-            action: formAction,
+            action: action,
            currentData: currentData,
            isGPUType: isGPUType
          }}
@@ -584,7 +781,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
              storageMode: StorageModeValueMap.Temporary
            }}
          >
-            <Basic action={formAction} disabled={disabled} />
+            <Basic action={action} disabled={disabled} />
            <Form.Item name="clusterId" hidden>
              <CInput.Input />
            </Form.Item>
@@ -601,12 +798,16 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                  forceRender: true,
                  children: (
                    <InstanceTypeFormItem
-                      action={formAction}
-                      disabled={disabled}
+                      action={action}
+                      disabled={sectionDisabled}
                      selectedInstanceType={selectedInstanceType}
                      currentData={currentData as any}
                      onceMaxRequest={onceMaxRequest}
                      noAvailableTypes={noAvailableInstanceTypes}
+                      sliceMode={sliceMode}
+                      onSliceModeChange={handleSliceModeChange}
+                      onSliceMemoryPercentageChange={applySliceMemoryPercentage}
+                      onSliceCoresPercentageChange={applySliceCoresPercentage}
                      onGPUCountChange={handleAcceleratorChange}
                    />
                  )
@@ -620,7 +821,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                  children: (
                    <TemplateBasicForm
                      page="instance"
-                      disabled={disabled || formAction === PageAction.EDIT}
+                      disabled={sectionDisabled}
                      onceMaxRequest={onceMaxRequest}
                    />
                  )
@@ -632,10 +833,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                  }),
                  forceRender: true,
                  children: (
-                    <StorageVolume
-                      disabled={disabled || formAction === PageAction.EDIT}
-                      action={formAction}
-                    />
+                    <StorageVolume disabled={sectionDisabled} action={action} />
                  )
                }
              ]}
@@ -3,7 +3,7 @@ import { PageActionType } from '@/config/types';
 import NumberSelection from '@/pages/_components/number-selection';
 import { InputNumber } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { Flex, Form } from 'antd';
+import { Flex, Form, Segmented } from 'antd';
 import _ from 'lodash';
 import { useContext, useMemo } from 'react';
 import styled from 'styled-components';
@@ -12,6 +12,7 @@ import { parseJsonSafe } from '../../utils';
 import InstanceTypeItem, {
  InstanceMetadataSection
 } from '../components/instance-type-item';
+import { isSliceableDetail } from '../config';
 import { FormContext } from '../config/form-context';
 import {
  FormData,
@@ -57,6 +58,24 @@ const InstanceTypePicker: React.FC<InstanceTypePickerProps> = ({
  );
 };

+// Fixed 10-tick percentage scale (10..100) for the sliced (percentage) mode.
+const SLICE_PERCENT_TICKS = [10, 20, 30, 50];
+
+// The paired VRAM + Compute selectors (cores overcommit) are grouped in a
+// bordered card; a lone "Percentage" selector (no overcommit) renders bare so
+// it matches the whole-card GPU Count block's styling.
+const SliceFieldWrapper: React.FC<{
+  withCard: boolean;
+  children: React.ReactNode;
+}> = ({ withCard, children }) =>
+  withCard ? (
+    <FieldBlock>
+      <SelectedCard style={{ padding: 0 }}>{children}</SelectedCard>
+    </FieldBlock>
+  ) : (
+    <>{children}</>
+  );
+
 interface InstanceTypeFormItemProps {
  action: PageActionType;
  disabled?: boolean;
@@ -67,6 +86,14 @@ interface InstanceTypeFormItemProps {
  // org owns no clusters. Surface a "no available" message instead of the
  // "please select" placeholder + empty CPU / memory inputs.
  noAvailableTypes?: boolean;
+  // Whole-card (exclusive) vs sliced (percentage) mode. Owned by the parent
+  // form (it drives candidate picking + the fixed accelerator=1 for sliced).
+  sliceMode?: 'whole' | 'sliced';
+  onSliceModeChange?: (mode: 'whole' | 'sliced') => void;
+  // Commit a new sliced memory ratio (writes the field + rescales CPU / RAM).
+  onSliceMemoryPercentageChange?: (value: number) => void;
+  // Commit a new sliced compute (cores) ratio (writes the field only).
+  onSliceCoresPercentageChange?: (value: number) => void;
  onGPUCountChange?: (value: number) => void;
 }

@@ -77,13 +104,24 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
  selectedInstanceType,
  onceMaxRequest,
  noAvailableTypes,
+  sliceMode = 'whole',
+  onSliceModeChange,
+  onSliceMemoryPercentageChange,
+  onSliceCoresPercentageChange,
  onGPUCountChange
 }) => {
  const intl = useIntl();
+  const form = Form.useFormInstance();
  const { isGPUType } = useContext(FormContext);

+  // In edit mode the type card is read-only until a type is re-picked from the
+  // instance-type column (stopped instances only); once selected the section
+  // behaves like create (editable count / slice controls, live capacity
+  // labels).
+  const readonlyType = action === PageAction.EDIT && !selectedInstanceType;
+
  const maxComputeUnitCount = useMemo(() => {
-    if (action === PageAction.EDIT) {
+    if (readonlyType) {
      const description = parseJsonSafe(
        currentData?.description || '{}',
        {} as any
@@ -91,19 +129,91 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
      return description.spec?.maxComputeUnitCount || 0;
    }
    return selectedInstanceType?.spec?.maxComputeUnitCount || 0;
-  }, [action, currentData, selectedInstanceType]);
-
-  const isGPU = useMemo(() => {
-    if (action === PageAction.EDIT) {
-      return _.toNumber(currentData?.spec?.resources?.accelerator) > 0;
-    }
-    return selectedInstanceType?.spec?.acceleratable;
-  }, [selectedInstanceType, action]);
+  }, [readonlyType, currentData, selectedInstanceType]);

  const handleOnGPUCountChange = (value: number) => {
    onGPUCountChange?.(value);
  };

+  // Sliced mode is only offered for sliceable accelerator types, and only when
+  // the section is editable (create, or edit after re-picking a type; a
+  // not-yet-re-typed edit renders a readonly card).
+  const showModeSwitch =
+    !readonlyType &&
+    isGPUType &&
+    isSliceableDetail(selectedInstanceType?.status?.detail?.slicedDetail);
+
+  const handleModeChange = (value: string) => {
+    onSliceModeChange?.(value as 'whole' | 'sliced');
+  };
+
+  // Memory (VRAM) percentage changed via the slider/input — forward the new
+  // value so the parent writes the field and rescales CPU / RAM.
+  const handleMemoryPercentageChange = (value: number) => {
+    onSliceMemoryPercentageChange?.(value);
+  };
+
+  // Compute (cores) percentage changed — forward the new value.
+  const handleCoresPercentageChange = (value: number) => {
+    onSliceCoresPercentageChange?.(value);
+  };
+
+  // The cores ratio must be >= the memory ratio, so ticks below the current
+  // memory percentage are disabled (min). Cores range is a fixed 10..100.
+  const slicedMemoryPercentage =
+    _.toNumber(
+      Form.useWatch(
+        ['spec', 'resources', 'acceleratorSlicedMemoryPercentage'],
+        form
+      )
+    ) || 1;
+
+  // Max selectable ratio in sliced mode: status.onceMaxRequest.acceleratorSliced
+  // (a percentage). Ticks above it stay visible but disabled.
+  const slicedMaxPercentage =
+    _.toNumber(
+      selectedInstanceType?.status?.onceMaxRequest?.acceleratorSliced
+    ) || 0;
+
+  // Whether the compute (cores) ratio may exceed the memory ratio. When the
+  // type doesn't support overcommit, cores are locked to the memory ratio —
+  // no cores selector, and the memory selector reads as a plain "Percentage".
+  const coresOvercommit =
+    !!selectedInstanceType?.status?.detail?.slicedDetail?.logical
+      ?.coresPercentageOvercommit;
+
+  const modeSegmented = showModeSwitch ? (
+    <Segmented
+      size="middle"
+      type="rounded"
+      style={{ fontSize: 12 }}
+      value={sliceMode}
+      disabled={disabled}
+      onChange={handleModeChange}
+      options={[
+        {
+          label: intl.formatMessage({ id: 'gpuservice.instance.mode.whole' }),
+          value: 'whole'
+        },
+        {
+          label: intl.formatMessage({ id: 'gpuservice.instance.mode.sliced' }),
+          value: 'sliced',
+          // No sliced capacity → keep the option visible but unselectable.
+          disabled: slicedMaxPercentage <= 0
+        }
+      ]}
+    />
+  ) : null;
+
+  const isSliced = showModeSwitch && sliceMode === 'sliced';
+
+  // When the max ratio is below 10%, switch the ticks to a finer 1..10 scale
+  // so small slices are still selectable; otherwise use the 10..100 scale.
+  const sliceTicks: number[] =
+    slicedMaxPercentage < 10
+      ? [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+      : SLICE_PERCENT_TICKS;
+
  const renderMaxLabel = (
    label: React.ReactNode,
    max?: number | null
@@ -122,7 +232,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
  };

  const renderMemoryLabel = (): React.ReactNode => {
-    if (isGPUType || action === PageAction.EDIT || !onceMaxRequest?.memory) {
+    if (isGPUType || readonlyType || !onceMaxRequest?.memory) {
      return intl.formatMessage({ id: 'gpuservice.template.memory' });
    }

@@ -154,8 +264,8 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
            }}
          >
            {description.acceleratable
-              ? `${description.product} x ${currentData?.spec?.resources?.accelerator}`
-              : 'CPU'}
+              ? `${description.displayName || description.product} x ${currentData?.spec?.resources?.accelerator}`
+              : description.displayName || 'CPU'}
          </span>
          <InstanceMetadataSection spec={description}></InstanceMetadataSection>
        </Flex>
@@ -188,15 +298,21 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
            }
          ]}
        >
-          {action === PageAction.CREATE && (
+          {readonlyType ? (
+            renderInstanceType()
+          ) : (
            <InstanceTypePicker
              selectedInstanceType={selectedInstanceType}
              noAvailable={noAvailableTypes}
            />
          )}
-          {action === PageAction.EDIT && renderInstanceType()}
        </Form.Item>
      </FieldBlock>
+      {showModeSwitch && (
+        <div>
+          <div style={{ marginBlock: 8 }}>{modeSegmented}</div>
+        </div>
+      )}
      {!noAvailableTypes && (
        <Form.Item<FormData>
          key={isGPUType ? 'accelerator' : 'cpu'}
@@ -206,7 +322,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
              : ['spec', 'resources', 'cpu']
          }
          preserve
-          hidden={action === PageAction.EDIT}
+          hidden={readonlyType || isSliced}
          normalize={(value) => (value != null ? _.toString(value) : undefined)}
          getValueProps={(value) => ({
            value: value != null ? _.toNumber(value) : undefined
@@ -247,7 +363,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
            max={maxComputeUnitCount}
            step={1}
            required
-            disabled={disabled || action === PageAction.EDIT}
+            disabled={disabled || readonlyType}
            label={`${intl.formatMessage({ id: 'common.max.count' }, { label: numberSelectionLabel.label })} (${intl.formatMessage(
              {
                id: 'common.max'
@@ -257,6 +373,158 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
          />
        </Form.Item>
      )}
+      {!noAvailableTypes && isSliced && (
+        <SliceFieldWrapper withCard={coresOvercommit}>
+          <>
+            <Form.Item<FormData>
+              name={['spec', 'resources', 'acceleratorSlicedMemoryPercentage']}
+              // Grouped with the compute selector inside one card — tighten
+              // the default 24px gap between the pair.
+              style={coresOvercommit ? { marginBottom: 0 } : undefined}
+              getValueProps={(value) => ({
+                value: value != null ? _.toNumber(value) : undefined
+              })}
+              rules={[
+                {
+                  required: true,
+                  validator: (_, value) => {
+                    const num = Number(value);
+                    if (value == null || value === '' || Number.isNaN(num)) {
+                      return Promise.reject(
+                        new Error(
+                          intl.formatMessage({
+                            id: 'gpuservice.instance.slice.percentage.required'
+                          })
+                        )
+                      );
+                    }
+                    if (num > slicedMaxPercentage || num <= 0) {
+                      return Promise.reject(
+                        new Error(
+                          intl.formatMessage(
+                            {
+                              id: 'gpuservice.instance.slice.percentage.max'
+                            },
+                            { count: slicedMaxPercentage }
+                          )
+                        )
+                      );
+                    }
+                    return Promise.resolve();
+                  }
+                }
+              ]}
+            >
+              <NumberSelection
+                min={1}
+                max={slicedMaxPercentage}
+                step={1}
+                maxCount={sliceTicks.length}
+                presetValues={sliceTicks}
+                alwaysShowInput
+                required
+                disabled={disabled}
+                // Inside the card the selector drops its own border; the bare
+                // (no-overcommit) variant keeps it, like the GPU Count block.
+                style={coresOvercommit ? { border: 'none' } : undefined}
+                onChange={handleMemoryPercentageChange}
+                label={intl.formatMessage({
+                  // Without cores overcommit this single ratio drives both
+                  // VRAM and compute, so drop the "VRAM" qualifier.
+                  id: coresOvercommit
+                    ? 'gpuservice.instance.slice.memoryPercentage'
+                    : 'gpuservice.instance.slice.percentage'
+                })}
+              />
+            </Form.Item>
+            {/* Compute (cores) percentage. Fixed 10..100 ticks; ticks below the
+              chosen memory ratio are disabled (cores must be >= memory). Only
+              types with cores overcommit get the selector — without it the
+              ratio is locked to the memory percentage (the parent mirrors it),
+              carried by a hidden field so it still rides the submit. */}
+            {coresOvercommit ? (
+              <Form.Item<FormData>
+                name={['spec', 'resources', 'acceleratorSlicedCoresPercentage']}
+                style={{ marginBottom: 0 }}
+                getValueProps={(value) => ({
+                  value: value != null ? _.toNumber(value) : undefined
+                })}
+                rules={[
+                  {
+                    required: true,
+                    validator: (_, value) => {
+                      const num = Number(value);
+                      if (value == null || value === '' || Number.isNaN(num)) {
+                        return Promise.reject(
+                          new Error(
+                            intl.formatMessage({
+                              id: 'gpuservice.instance.slice.percentage.required'
+                            })
+                          )
+                        );
+                      }
+                      if (num < slicedMemoryPercentage || num > 100) {
+                        return Promise.reject(
+                          new Error(
+                            intl.formatMessage(
+                              { id: 'gpuservice.instance.slice.cores.min' },
+                              { count: slicedMemoryPercentage }
+                            )
+                          )
+                        );
+                      }
+                      return Promise.resolve();
+                    }
+                  }
+                ]}
+              >
+                <NumberSelection
+                  min={slicedMemoryPercentage}
+                  max={100}
+                  step={10}
+                  maxCount={SLICE_PERCENT_TICKS.length}
+                  presetValues={SLICE_PERCENT_TICKS}
+                  alwaysShowInput
+                  required
+                  disabled={disabled}
+                  onChange={handleCoresPercentageChange}
+                  style={{ border: 'none' }}
+                  label={intl.formatMessage({
+                    id: 'gpuservice.instance.slice.coresPercentage'
+                  })}
+                />
+              </Form.Item>
+            ) : (
+              <Form.Item<FormData>
+                name={['spec', 'resources', 'acceleratorSlicedCoresPercentage']}
+                style={{ marginBottom: 0 }}
+                hidden
+              >
+                <InputNumber />
+              </Form.Item>
+            )}
+          </>
+        </SliceFieldWrapper>
+      )}
+      {/* A not-yet-re-typed edit renders a readonly card (no sliced UI), so
+          register the slice percentages as hidden fields — otherwise their
+          persisted values are dropped from the submit payload. */}
+      {readonlyType && (
+        <>
+          <Form.Item<FormData>
+            name={['spec', 'resources', 'acceleratorSlicedMemoryPercentage']}
+            hidden
+          >
+            <InputNumber />
+          </Form.Item>
+          <Form.Item<FormData>
+            name={['spec', 'resources', 'acceleratorSlicedCoresPercentage']}
+            hidden
+          >
+            <InputNumber />
+          </Form.Item>
+        </>
+      )}
      {!noAvailableTypes && (
        <Flex gap={12}>
          <div style={{ flex: 1 }}>
@@ -281,11 +549,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
                key="cpu_input"
                preserve
              >
-                <InputNumber
-                  label={'CPU'}
-                  max={onceMaxRequest?.cpu ?? undefined}
-                  disabled={true}
-                />
+                <InputNumber label={'CPU'} disabled={true} />
              </Form.Item>
            </div>
          )}
@@ -3,6 +3,7 @@ import type { PageActionType } from '@/config/types';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import { useIntl } from '@umijs/max';
 import { useState } from 'react';
+import { InstanceStatusValueMap } from '../config';
 import type { ListItem } from '../config/types';

 const useCreateInstance = () => {
@@ -14,30 +15,26 @@ const useCreateInstance = () => {
    title: string;
    currentData?: ListItem | null;
    width?: number | string;
-    realAction?: string;
  }>({
    action: PageAction.CREATE,
    title: '',
    open: false,
    width: undefined,
-    currentData: null,
-    realAction: undefined
+    currentData: null
  });

  const openModal = (
    action: PageActionType,
    title: string,
    currentData?: ListItem | null,
-    width?: number | string,
-    realAction?: string
+    width?: number | string
  ) => {
    setOpenModalStatus({
      action,
      title,
      open: true,
      currentData,
-      width,
-      realAction
+      width
    });
    saveScrollHeight();
  };
@@ -52,11 +49,14 @@ const useCreateInstance = () => {
  };

  const openEditInstanceModal = (row: ListItem) => {
+    // A stopped instance can be re-typed, so it needs the two-column layout
+    // (instance-type list + form); other statuses edit in a single column.
+    const isStopped = row.status?.phase === InstanceStatusValueMap.Stopped;
    openModal(
      PageAction.EDIT,
      intl.formatMessage({ id: 'gpuservice.instance.edit' }),
      row,
-      600
+      isStopped ? 'min(1040px, calc(100vw - 220px))' : 600
    );
  };

@@ -69,23 +69,12 @@ const useCreateInstance = () => {
    );
  };

-  const openRecreateInstanceModal = (row: ListItem) => {
-    openModal(
-      PageAction.EDIT,
-      intl.formatMessage({ id: 'common.button.recreate' }),
-      row,
-      'calc(100vw - 220px)',
-      PageAction.CREATE
-    );
-  };
-
  const closeModal = () => {
    setOpenModalStatus({
      ...openModalStatus,
      title: '',
      open: false,
-      currentData: null,
-      realAction: undefined
+      currentData: null
    });
    restoreScrollHeight();
  };
@@ -97,7 +86,6 @@ const useCreateInstance = () => {
    openCreateInstanceModal,
    openEditInstanceModal,
    openViewInstanceModal,
-    openRecreateInstanceModal,
    closeInstanceModal: closeModal
  };
 };
@@ -86,7 +86,6 @@ const GPUService: React.FC = () => {
    openCreateInstanceModal,
    openEditInstanceModal,
    openViewInstanceModal,
-    openRecreateInstanceModal,
    closeInstanceModal
  } = useCreateInstance();
  const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } =
@@ -136,13 +135,7 @@ const GPUService: React.FC = () => {

  const handleModalOk = async (data: FormData) => {
    try {
-      if (openInstanceModalStatus.realAction === PageAction.CREATE) {
-        await deleteGPUServiceInstance(openInstanceModalStatus.currentData!.id);
-        await new Promise((resolve) => {
-          setTimeout(resolve, 300);
-        });
-        await createInstance({ data });
-      } else if (openInstanceModalStatus.action === PageAction.EDIT) {
+      if (openInstanceModalStatus.action === PageAction.EDIT) {
        await updateInstance({
          id: openInstanceModalStatus.currentData!.id,
          data
@@ -243,8 +236,6 @@ const GPUService: React.FC = () => {
      openEditInstanceModal(row);
    } else if (val === 'delete') {
      handleDelete({ ...row });
-    } else if (val === 'recreate') {
-      openRecreateInstanceModal(row);
    } else if (val === 'viewlog') {
      openViewLogsModal(row);
    } else if (val === 'viewevent') {
@@ -362,6 +353,7 @@ const GPUService: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -390,7 +382,6 @@ const GPUService: React.FC = () => {
        title={openInstanceModalStatus.title}
        data={openInstanceModalStatus.currentData}
        width={openInstanceModalStatus.width}
-        realAction={openInstanceModalStatus.realAction}
        clusterList={clusterList}
        onCancel={closeInstanceModal}
        onOk={handleModalOk}
@@ -2,7 +2,7 @@ import { useQueryData } from '@gpustack/core-ui';
 import React from 'react';
 import { ceilMilliToCore, parseQuantityToGi } from '../../utils';
 import { queryGPUServiceInstanceTypes } from '../apis';
-import { getAcceleratorMax } from '../config';
+import { getAcceleratorMax, isSliceableDetail } from '../config';
 import { InstanceTypeItem } from '../config/types';

 type InstanceType = InstanceTypeItem & {
@@ -36,6 +36,20 @@ export default function useQueryInstanceTypes() {
    }

    const max = getAcceleratorMax(item.status?.tiers);
+
+    // Sliceable types stay selectable as long as either whole-card or sliced
+    // capacity remains; unavailable only when both status.onceMaxRequest
+    // .accelerator and .acceleratorSliced are 0.
+    if (isSliceableDetail(item.status?.detail?.slicedDetail)) {
+      const wholeMax = Number(item.status?.onceMaxRequest?.accelerator) || 0;
+      const slicedMax =
+        Number(item.status?.onceMaxRequest?.acceleratorSliced) || 0;
+      return {
+        maxComputeUnitCount: max || 0,
+        available: wholeMax > 0 || slicedMax > 0
+      };
+    }
+
    return {
      maxComputeUnitCount: max || 0,
      available: (max || 0) > 0
@@ -63,17 +77,11 @@ export default function useQueryInstanceTypes() {
        },
        status: {
          ...item.status,
+          // Normalize cpu (possibly millicores) to a whole-core count string;
+          // the other onceMaxRequest fields are plain number strings already.
          onceMaxRequest: {
            ...rawMax,
-            cpu: rawMax?.cpu
-              ? `${ceilMilliToCore(rawMax.cpu)?.cores || 0}`
-              : '',
-            ram: rawMax?.ram
-              ? `${parseQuantityToGi(rawMax.ram)?.value || 0}`
-              : '',
-            localStorage: rawMax?.localStorage
-              ? `${parseQuantityToGi(rawMax.localStorage)?.value || 0}`
-              : ''
+            cpu: rawMax?.cpu ? `${ceilMilliToCore(rawMax.cpu)?.cores || 0}` : ''
          }
        },

@@ -45,3 +45,10 @@
  font-weight: 400;
  font-size: 12px;
 }
+
+// TemplateCard applies a fixed inline height; override to let sliceable cards
+// (with the extra Sliceable row) grow while keeping a 106px floor.
+.instanceTypeCard {
+  height: auto !important;
+  min-height: 106px;
+}
@@ -0,0 +1,35 @@
+import _ from 'lodash';
+import { isSliceableDetail } from '../config';
+import { InstanceTypeItem, InstanceTypeSnapshotSpec } from '../config/types';
+
+// Build the flat snapshot spec from a live (API-shaped) instance type:
+// definition fields from spec, observed hardware from status.detail, plus the
+// derived `sliceable`. This flat shape is the UI document format persisted in
+// the instance's `description` (older instances already carry it flat) and
+// doubles as the display model of the type card / metadata section.
+export const buildInstanceTypeSnapshotSpec = (
+  instanceType: InstanceTypeItem
+): InstanceTypeSnapshotSpec => {
+  const detail = instanceType.status?.detail;
+  return {
+    ...instanceType.spec,
+    ..._.pick(detail, ['manufacturer', 'product', 'family', 'memory']),
+    sliceable: isSliceableDetail(detail?.slicedDetail),
+    // Accelerator CPU identity only — the full CPU descriptor is too bulky to
+    // persist and the UI only shows who made it.
+    cpu: _.pick(detail?.cpu, ['manufacturer', 'product', 'family'])
+  };
+};
+
+// Serialize the chosen instance type into the instance's `description` field —
+// a persisted spec snapshot the form reads back to render the type card and
+// derive unit resources. Shared by the create flow (card selection) and the
+// edit flow (change-type overlay).
+export const saveInstanceDataInDescription = (
+  instanceType: InstanceTypeItem
+): string => {
+  return JSON.stringify({
+    name: instanceType.name,
+    spec: buildInstanceTypeSnapshotSpec(instanceType)
+  });
+};
@@ -11,10 +11,10 @@
 * with ``buildInstanceTypeRecordFromMiB`` and feed it here.
 */
 import _ from 'lodash';
-import { parseJsonSafe } from '../../utils';
+import { ceilMilliToCore, parseJsonSafe, parseQuantityToGi } from '../../utils';
 import InstanceTypeCell from '../components/instance-type-cell';
 import { formatMemoryDisplay } from '../config';
-import { InstanceTypeSpec, ListItem } from '../config/types';
+import { InstanceTypeSnapshotSpec, ListItem } from '../config/types';

 // Minimal shape of the ``useIntl()`` result we depend on — keeps this module
 // free of an intl package import.
@@ -25,7 +25,7 @@ const toGB = (v?: string | number) =>

 const buildResourcesData = (
  instanceType: {
-    spec: InstanceTypeSpec;
+    spec: InstanceTypeSnapshotSpec;
  },
  options: {
    count: number;
@@ -49,8 +49,12 @@ const buildResourcesData = (
  return {};
 };

+// Memory (VRAM) percentage for a sliced instance; 0 when not sliced.
+const getSliceMemoryPercentage = (record: ListItem) =>
+  _.toNumber(record.spec?.resources?.acceleratorSlicedMemoryPercentage) || 0;
+
 const formatResources = (
-  instanceTypeSpec: { spec: InstanceTypeSpec },
+  instanceTypeSpec: { spec: InstanceTypeSnapshotSpec },
  record: ListItem
 ) => {
  const resources = buildResourcesData(instanceTypeSpec, {
@@ -71,9 +75,40 @@ const formatResources = (
    };
  }

+  const sliceMemoryPercentage = getSliceMemoryPercentage(record);
+
+  // Sliced: CPU / RAM carry the already-scaled values on spec.resources —
+  // whole cores / whole Gi for instances created by the current form; parse
+  // (instead of echoing the raw quantity) so legacy instances persisted as
+  // millicores / Mi (e.g. "400m" / "1638Mi") render as whole units too. VRAM
+  // is the per-card memory scaled by the memory percentage (floored, min 1) —
+  // not the whole card's size.
+  if (sliceMemoryPercentage > 0) {
+    const vramGi = parseQuantityToGi(instanceTypeSpec.spec?.memory)?.value;
+    const vram =
+      vramGi != null
+        ? `${Math.max(1, _.floor((vramGi * sliceMemoryPercentage) / 100))} GB`
+        : undefined;
+    const cpuCores = ceilMilliToCore(
+      _.toString(record.spec?.resources?.cpu) || null
+    )?.cores;
+    const ramGi = parseQuantityToGi(
+      _.toString(record.spec?.resources?.ram) || null
+    )?.value;
+
+    return {
+      cpu: cpuCores != null ? `${Math.max(1, cpuCores)} vCPU` : '-',
+      ram: ramGi != null ? `${Math.max(1, ramGi)} GB` : '-',
+      vram,
+      localStorage: record.spec?.resources?.localStorage
+        ? toGB(record.spec?.resources?.localStorage)
+        : undefined
+    };
+  }
+
  // VRAM = per-card GPU memory (a single card's size; not aggregated across
  // cards — the model's marquee spec).
-  const vram = formatMemoryDisplay((instanceTypeSpec.spec as any)?.memory);
+  const vram = formatMemoryDisplay(instanceTypeSpec.spec?.memory ?? undefined);

  return {
    cpu: resources.cpu ? `${resources.cpu} vCPU` : '-',
@@ -99,7 +134,7 @@ export const renderInstanceType = (
    // Types breakdown only wants CPU + RAM, for example.
    categories?: SpecCategory[];
    // Override the primary label (default: derived "<product> x <count>" /
-    // "CPU Only"). The Instance Types breakdown keeps its plain product name.
+    // "CPU-only"). The Instance Types breakdown keeps its plain product name.
    title?: string;
  }
 ) => {
@@ -108,11 +143,19 @@ export const renderInstanceType = (
    parseJsonSafe<any>(record?.description || '{}', {}).spec || {};
  const resources = formatResources({ spec: description }, record);
  const accelerator = record.spec?.resources?.accelerator;
+  const sliceMemoryPercentage = getSliceMemoryPercentage(record);
+  const isSliced = description.acceleratable && sliceMemoryPercentage > 0;
+  // Type label (primary cell label and the popover's "Type" row) prefers the
+  // user-defined displayName persisted in the description snapshot, falling
+  // back to the hardware product.
+  const typeLabel = description.displayName || description.product;
  const title =
    options.title ??
    (description.acceleratable
-      ? `${description.product} x ${accelerator}`
-      : 'CPU Only');
+      ? isSliced
+        ? `${typeLabel} (${sliceMemoryPercentage}%)`
+        : `${typeLabel} x ${accelerator}`
+      : description.displayName || 'CPU-only');

  const volume = (record.spec as any)?.volume;
  // Spec popover grouped by category (GPU / CPU / Memory / Disk), mirroring
@@ -131,13 +174,19 @@ export const renderInstanceType = (
      icon: 'icon-gpu',
      name: 'GPU',
      rows: [
-        [
-          intl.formatMessage({ id: 'gpuservice.table.count' }),
-          accelerator ? `${accelerator}` : undefined
-        ],
+        // Sliced instances show the ratio instead of a card count (always 1).
+        isSliced
+          ? [
+              intl.formatMessage({ id: 'gpuservice.instance.sliced' }),
+              `${sliceMemoryPercentage}%`
+            ]
+          : [
+              intl.formatMessage({ id: 'gpuservice.table.count' }),
+              accelerator ? `${accelerator}` : undefined
+            ],
        [
          intl.formatMessage({ id: 'gpuservice.instance.section.type' }),
-          description.product
+          typeLabel
        ],
        [
          intl.formatMessage({ id: 'gpuservice.instance.memory' }),
@@ -209,7 +258,7 @@ const mibToGiQuantity = (mib?: number): string | undefined =>
 export interface InstanceTypeMiB {
  name?: string;
  product?: string;
-  // accelerator (GPU card) count; 0/undefined → CPU-only ("CPU Only").
+  // accelerator (GPU card) count; 0/undefined → CPU-only.
  gpuCount?: number;
  // Per-card values.
  unitCpuMilli?: number;
@@ -154,6 +154,7 @@ const GPUServicePublicKeys: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -28,21 +28,13 @@ interface ColumnsHookProps {
 const getKindLabel = (record: ListItem) => {
  if (record.spec?.nfs)
    return (
-      <ThemeTag
-        style={{ width: 'fit-content' }}
-        color="cyan"
-        icon={<FolderOutlined />}
-      >
+      <ThemeTag color="cyan" icon={<FolderOutlined />}>
        {StorageTypeKindLabelMap.nfs}
      </ThemeTag>
    );
  if (record.spec?.s3)
    return (
-      <ThemeTag
-        style={{ width: 'fit-content' }}
-        color="green"
-        icon={<IconFont type="icon-database" />}
-      >
+      <ThemeTag color="green" icon={<IconFont type="icon-database" />}>
        {StorageTypeKindLabelMap.s3}
      </ThemeTag>
    );
@@ -150,6 +150,7 @@ const GPUServiceStorageTypes: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -151,6 +151,7 @@ const GPUServiceStorage: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -56,7 +56,7 @@ const matchImageLogo = (
  isDark: boolean
 ): { logo: string; type: string } | null => {
  if (!image) return null;
-  const logoMap = imageLogoLightMap;
+  const logoMap = isDark ? imageLogoDarkMap : imageLogoLightMap;
  const lower = image.toLowerCase();
  let matched: keyof typeof logoMap | null = null;
  let earliest = Infinity;
@@ -1,5 +1,17 @@
 import _ from 'lodash';

+// Manufacturer display: most vendors read best all-caps (NVIDIA, AMD), but a
+// few read better capitalized (Intel). Shared by the instance-type list and the
+// create-instance drawer so both render the vendor identically.
+const CapitalizedVendors = ['intel'];
+
+export const formatManufacturer = (manufacturer?: string | null): string => {
+  if (!manufacturer) return '';
+  return CapitalizedVendors.includes(manufacturer.toLowerCase())
+    ? _.capitalize(manufacturer)
+    : _.toUpper(manufacturer);
+};
+
 export const omitPathParams = <T extends Record<string, any>>(
  params: T
 ): Omit<T, 'namespace' | 'clusterID'> => {
@@ -6,7 +6,7 @@ import { getGPUStackPlugin } from '@/plugins';
 import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import {
  AlertBlockInfo,
-  TooltipList,
+  CardRadioGroup,
  Transfer as TransferInner
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
@@ -15,9 +15,8 @@ import {
  Dropdown,
  DropdownProps,
  Empty,
+  Flex,
  Form,
-  Radio,
-  RadioChangeEvent,
  Tooltip
 } from 'antd';
 import {
@@ -80,9 +79,9 @@ const Label = styled.div`
  align-items: center;
  gap: 4px;
  font-weight: 500;
-  margin-block: 8px 12px;
-  font-size: 14px;
-  color: var(--ant-color-text-tertiary);
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
 `;

 interface AccessControlFormProps {
@@ -107,6 +106,14 @@ type AllowedUsersOverride = {
    routeId?: number;
    action: PageActionType;
  }>;
+  // Optional trigger (e.g. an "Add" button) rendered by the host in its
+  // own layout slot while `Field` renders the body. Same props as Field
+  // so the plugin can gate visibility on action/routeId.
+  Action?: React.ComponentType<{
+    form: any;
+    routeId?: number;
+    action: PageActionType;
+  }>;
 };

 // Extra policy entries prepended to the radio list (rendered before
@@ -223,9 +230,7 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
    }
  };

-  const handleOnPolicyChange = async (e: RadioChangeEvent) => {
-    console.log('policy changed:', e.target.value);
-    const policy = e.target.value;
+  const handleOnPolicyChange = async (policy: string) => {
    if (policy === ALLOWED_PRINCIPALS_POLICY) {
      form.setFieldsValue({ users: formDataCacheRef.current?.users || [] });
    } else {
@@ -391,33 +396,29 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
            : undefined
      }}
    >
-      <Label>
-        {intl.formatMessage({ id: 'models.table.accessScope' })}
-        <Tooltip
-          title={
-            <TooltipList
-              list={buildAccessScopeTips(
-                allowedUsersOverride,
-                prependedPolicies
-              )}
-            ></TooltipList>
-          }
-        >
-          <QuestionCircleOutlined />
-        </Tooltip>
-      </Label>
+      <Label>{intl.formatMessage({ id: 'models.table.accessScope' })}</Label>

-      <Form.Item<AccessControlFormData> name="access_policy" noStyle>
-        <Radio.Group
+      <Form.Item<AccessControlFormData>
+        name="access_policy"
+        style={{
+          marginBottom: 16
+        }}
+      >
+        <CardRadioGroup
          onChange={handleOnPolicyChange}
-          style={{ marginBottom: 12 }}
          options={[
            ...prependedPolicies.map((p) => ({
              label: intl.formatMessage({ id: p.labelId }),
+              description: intl.formatMessage({ id: p.tipsId ?? p.labelId }),
              value: p.policyValue
            })),
            {
-              label: intl.formatMessage({ id: 'models.accessSettings.authed' }),
+              label: intl.formatMessage({
+                id: 'models.accessSettings.authed'
+              }),
+              description: intl.formatMessage({
+                id: 'models.accessSettings.authed.tips'
+              }),
              value: 'authed'
            },
            allowedUsersOverride
@@ -425,23 +426,52 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
                  label: intl.formatMessage({
                    id: allowedUsersOverride.labelId
                  }),
+                  description: intl.formatMessage({
+                    id:
+                      allowedUsersOverride.tipsId ??
+                      'models.accessSettings.allowedUsers.tips'
+                  }),
                  value: allowedUsersOverride.policyValue
                }
              : {
                  label: intl.formatMessage({
                    id: 'models.accessSettings.allowedUsers'
                  }),
+                  description: intl.formatMessage({
+                    id: 'models.accessSettings.allowedUsers.tips'
+                  }),
                  value: ALLOWED_PRINCIPALS_POLICY
                },
            {
              label: intl.formatMessage({
                id: 'models.accessSettings.public'
              }),
+              description: intl.formatMessage({
+                id: 'models.accessSettings.public.desc'
+              }),
              value: 'public'
            }
          ]}
-        ></Radio.Group>
+        />
      </Form.Item>
+      {allowedUsersOverride?.Action && accessPolicy === overridePolicyValue && (
+        <Flex
+          justify="space-between"
+          align="center"
+          style={{ marginBottom: 8 }}
+        >
+          <Label style={{ marginBottom: 0 }}>
+            {intl.formatMessage({
+              id: 'models.accessSettings.grantedPrincipals'
+            })}
+          </Label>
+          <allowedUsersOverride.Action
+            form={form}
+            routeId={currentData?.id}
+            action={action}
+          />
+        </Flex>
+      )}
      {accessPolicy === 'public' && (
        <div style={{ marginBlock: '16px 12px' }}>
          <AlertBlockInfo
@@ -449,6 +479,13 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
            message={intl.formatMessage({
              id: 'models.accessSettings.public.tips'
            })}
+            overlayScrollerProps={{
+              styles: {
+                wrapper: {
+                  paddingLeft: 0
+                }
+              }
+            }}
          ></AlertBlockInfo>
        </div>
      )}
@@ -130,7 +130,9 @@ const AccessControlModal: React.FC<
            <AlertBlockInfo
              type="warning"
              style={{ marginBottom: 16 }}
-              contentStyle={{ paddingInline: 0 }}
+              contentStyle={{
+                paddingInline: 0
+              }}
              message={intl.formatMessage({
                id: 'models.button.accessSettings.tips'
              })}
@@ -1,6 +1,5 @@
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
-import { AutoTooltip, RowChildren } from '@gpustack/core-ui';
-import { Col, Row } from 'antd';
+import { AutoTooltip, ExpandedRowGrid } from '@gpustack/core-ui';
 import dayjs from 'dayjs';
 import React from 'react';
 import { ModelInstanceListItem } from '../../config/types';
@@ -11,11 +10,17 @@ import DistributeInfoCell from '../instance-cells/distribute-info-cell';
 import DownloadingStatusCell from '../instance-cells/downloading-status-cell';
 import InstanceStatusCell from '../instance-cells/instance-status-cell';
 import NameCell from '../instance-cells/name-cell';
+
 interface InstanceItemProps {
  instanceData: ModelInstanceListItem;
  workerList: WorkerListItem[];
  modelData?: any;
  defaultOpenId: string;
+  // Column grid shared from the parent SealTable so this child row aligns
+  // its cells to the parent columns instead of guessing paddings.
+  gridTemplate?: string;
+  prefixWidth?: number;
+  columns?: any[];
  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }

@@ -24,79 +29,67 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
  workerList,
  modelData,
  defaultOpenId,
+  gridTemplate,
+  prefixWidth = 0,
+  columns,
  handleChildSelect
 }) => {
+  // The child row shares the parent's column grid; cells flow left-to-right and
+  // only declare a span, so there is no dependency on parent column keys.
+  // Parent layout: name (1) | middle plugin/source region | replicas,
+  // created_at, operation (last 3). The middle absorbs whatever columns sit
+  // between name and replicas (cluster_id, source, any plugin column).
+  const columnCount = columns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 4, 1);
+
  return (
-    <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
-      <RowChildren>
-        <Row
-          style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
-          align="middle"
-        >
-          <Col
-            span={6}
-            style={{
-              paddingInline: 'var(--ant-table-cell-padding-inline)'
-            }}
-          >
-            <NameCell
-              record={instanceData}
-              modelData={modelData}
-              defaultOpenId={defaultOpenId}
-            ></NameCell>
-          </Col>
-          <Col span={7}>
-            <span
-              style={{
-                paddingLeft: '58px',
-                flexWrap: 'wrap',
-                gap: '8px'
-              }}
-              className="flex align-center"
-            >
-              <CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
-              <DistributeInfoCell
-                record={instanceData}
-                workerList={workerList}
-              ></DistributeInfoCell>
-            </span>
-          </Col>
-          <Col span={4}>
-            <span
-              style={{ paddingLeft: '40px', gap: 4 }}
-              className="flex-center"
-            >
-              <InstanceStatusCell
-                record={instanceData}
-                onSelect={handleChildSelect}
-              />
-              <DownloadingStatusCell
-                backend={modelData?.backend}
-                distributed_servers={instanceData.distributed_servers}
-                workerList={workerList}
-                record={instanceData}
-              ></DownloadingStatusCell>
-            </span>
-          </Col>
-          <Col span={4}>
-            <span style={{ paddingLeft: 43 }} className="flex">
-              <AutoTooltip ghost>
-                {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
-              </AutoTooltip>
-            </span>
-          </Col>
-          <Col span={3}>
-            <div style={{ paddingLeft: 36 }}>
-              <ActionsCell
-                record={instanceData}
-                modelData={modelData}
-                onSelect={handleChildSelect}
-              ></ActionsCell>
-            </div>
-          </Col>
-        </Row>
-      </RowChildren>
-    </div>
+    <ExpandedRowGrid
+      gridTemplate={gridTemplate}
+      prefixWidth={prefixWidth}
+      style={{ color: 'var(--ant-color-text-secondary)' }}
+    >
+      <ExpandedRowGrid.Cell span={1}>
+        <NameCell
+          record={instanceData}
+          modelData={modelData}
+          defaultOpenId={defaultOpenId}
+        ></NameCell>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell
+        span={middleSpan}
+        style={{ flexWrap: 'wrap', gap: 8 }}
+      >
+        <CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
+        <DistributeInfoCell
+          record={instanceData}
+          workerList={workerList}
+        ></DistributeInfoCell>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell span={1} style={{ gap: 4 }}>
+        <InstanceStatusCell
+          record={instanceData}
+          onSelect={handleChildSelect}
+        />
+        <DownloadingStatusCell
+          backend={modelData?.backend}
+          distributed_servers={instanceData.distributed_servers}
+          workerList={workerList}
+          record={instanceData}
+        ></DownloadingStatusCell>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell span={1}>
+        <AutoTooltip ghost>
+          {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
+        </AutoTooltip>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell span={1}>
+        <ActionsCell
+          record={instanceData}
+          modelData={modelData}
+          onSelect={handleChildSelect}
+        ></ActionsCell>
+      </ExpandedRowGrid.Cell>
+    </ExpandedRowGrid>
  );
 };
 export default InstanceItem;
@@ -17,6 +17,9 @@ interface InstanceItemProps {
  workerList: WorkerListItem[];
  modelData?: any;
  currentExpanded?: string;
+  gridTemplate?: string;
+  prefixWidth?: number;
+  columns?: any[];
  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }

@@ -25,6 +28,9 @@ const Instances: React.FC<InstanceItemProps> = ({
  workerList,
  modelData,
  currentExpanded,
+  gridTemplate,
+  prefixWidth,
+  columns,
  handleChildSelect
 }) => {
  const [firstLoad, setFirstLoad] = React.useState(true);
@@ -55,6 +61,9 @@ const Instances: React.FC<InstanceItemProps> = ({
            instanceData={item}
            defaultOpenId={firstLoad ? defaultOpenId : ''}
            handleChildSelect={handleChildSelect}
+            gridTemplate={gridTemplate}
+            prefixWidth={prefixWidth}
+            columns={columns}
          ></InstanceItem>
        );
      })}
@@ -1,12 +1,13 @@
+import PluginExtraFields from '@/components/plugin-extra-fields';
 import {
  IconFont,
-  StatusTag,
+  StatusDot,
  TagsWrapper,
  TemplateCard,
  ThemeTag
 } from '@gpustack/core-ui';
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -20,7 +21,11 @@ import {
  MyModelsStatusValueMap
 } from '../config';
 import { categoryToPathMap } from '../config/button-actions';
-import { getModelLogo } from '../utils/model-logo';
+import {
+  defaultModelLogo,
+  getCategoryLogo,
+  getModelLogo
+} from '../utils/model-logo';

 const CardWrapper = styled.div`
  &:hover {
@@ -165,6 +170,11 @@ const ModelItem: React.FC<{
    navigate(`/playground/chat?model=${modelName}`);
  };

+  // Logo priority: brand logo matched from the name → tinted category
+  // icon (from model_icons) → generic default image.
+  const brandLogo = getModelLogo(model.name);
+  const categoryLogo = brandLogo ? null : getCategoryLogo(model.categories);
+
  // context length
  const maxToken = useMemo(() => {
    const meta = model.meta || {};
@@ -183,6 +193,23 @@ const ModelItem: React.FC<{
    return _.round(max_tokens / 1024);
  }, [model]);

+  // Ready is the normal state — show just the dot (no label); other states
+  // (Not Ready / Stopped) keep their label so the problem is legible.
+  const statusNode = (
+    <StatusDot
+      statusValue={{
+        status: MyModelsStatusMap[model.status],
+        text:
+          model.status === MyModelsStatusValueMap.Ready ||
+          !MyModelsStatusLabelMap[model.status]
+            ? ''
+            : intl.formatMessage({
+                id: MyModelsStatusLabelMap[model.status]
+              })
+      }}
+    />
+  );
+
  return (
    <CardWrapper>
      <TemplateCard
@@ -194,19 +221,39 @@ const ModelItem: React.FC<{
        header={
          <Header>
            <span className="text gap-16">
-              <ModelLogo src={getModelLogo(model.name)} alt="" />
-              <span>{model.name}</span>
+              {brandLogo ? (
+                <ModelLogo src={brandLogo} alt="" />
+              ) : categoryLogo ? (
+                <ModelLogo src={categoryLogo} alt="" />
+              ) : (
+                <ModelLogo src={defaultModelLogo} alt="" />
+              )}
+              <span className="flex-center" style={{ gap: 8, minWidth: 0 }}>
+                <span>{model.name}</span>
+                {/* Status moved to a compact dot right after the name, freeing
+                    the header's right side for the price summary. The dot keeps
+                    the state message on hover (StatusDot has no built-in one). */}
+                <span
+                  style={{
+                    fontWeight: 400,
+                    fontSize: 'var(--font-size-small)'
+                  }}
+                >
+                  {model.state_message ? (
+                    <Tooltip title={model.state_message}>
+                      <span style={{ display: 'inline-flex' }}>
+                        {statusNode}
+                      </span>
+                    </Tooltip>
+                  ) : (
+                    statusNode
+                  )}
+                </span>
+              </span>
+            </span>
+            <span className="flex-center gap-8">
+              <PluginExtraFields name="ModelPriceSummary" context={{ model }} />
            </span>
-            <StatusTag
-              maxTooltipWidth={400}
-              statusValue={{
-                status: MyModelsStatusMap[model.status],
-                text: intl.formatMessage({
-                  id: MyModelsStatusLabelMap[model.status] || ''
-                }),
-                message: model.state_message
-              }}
-            ></StatusTag>
          </Header>
        }
      >
@@ -5,9 +5,7 @@ import { PageActionType } from '@/config/types';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useWatchList from '@/hooks/use-watch-list';
 import useNoResourceResult from '@/pages/llmodels/hooks/use-no-resource-result';
-import { MODEL_ROUTE_TARGETS } from '@/pages/model-routes/apis';
 import { TargetStatusValueMap } from '@/pages/model-routes/config';
 import useOpenPlayground from '@/pages/model-routes/hooks/use-open-playground';
 import useGranfanaLink from '@/pages/resources/hooks/use-grafana-link';
@@ -92,6 +90,7 @@ interface ModelsProps {
  loadend: boolean;
  total: number;
  filterValues?: Record<string, any>;
+  targetList?: any[];
 }

 const getFormattedData = (record: any, extraData = {}) => ({
@@ -129,7 +128,8 @@ const Models: React.FC<ModelsProps> = ({
  queryParams,
  loading,
  loadend,
-  total
+  total,
+  targetList = []
 }) => {
  const { generateFormValues, clusterList, workerList } =
    useDeploymentsContext();
@@ -155,7 +155,6 @@ const Models: React.FC<ModelsProps> = ({
    expandedRowKeys
  } = useExpandedRowKeys(expandAtom);
  const { handleOpenPlayGround } = useOpenPlayground();
-  const { watchDataList: targetList } = useWatchList(MODEL_ROUTE_TARGETS);
  const { openViewLogsModal, openViewLogsModalStatus, closeViewLogsModal } =
    useViewInstanceLogs();

@@ -442,6 +441,9 @@ const Models: React.FC<ModelsProps> = ({
          modelData={options.parent}
          workerList={workerList}
          handleChildSelect={handleChildSelect}
+          gridTemplate={options.gridTemplate}
+          prefixWidth={options.prefixWidth}
+          columns={options.columns}
        ></Instances>
      );
    },
@@ -614,6 +616,7 @@ const Models: React.FC<ModelsProps> = ({
        ></PageTools>
        <SealTable
          columns={columns}
+          emptyMinHeight="calc(100vh - 300px)"
          sortDirections={TABLE_SORT_DIRECTIONS}
          dataSource={dataSource}
          rowSelection={rowSelection}
@@ -3,6 +3,8 @@ import useSetChunkRequest from '@/hooks/use-chunk-request';
 import { usePaginationStatus } from '@/hooks/use-pagination-status';
 import { useTableMultiSort } from '@/hooks/use-table-sort';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
+import useWatchList from '@/hooks/use-watch-list';
+import { MODEL_ROUTE_TARGETS } from '@/pages/model-routes/apis';
 import { TableOrder, TableProvider } from '@gpustack/core-ui';
 import { useMemoizedFn } from 'ahooks';
 import _ from 'lodash';
@@ -31,6 +33,11 @@ const Models = forwardRef((props, ref) => {
  const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
  const { setChunkRequest: setModelInstanceChunkRequest } =
    useSetChunkRequest();
+  const {
+    watchDataList: targetList,
+    startWatch: startTargetsWatch,
+    cancelWatch: cancelTargetsWatch
+  } = useWatchList(MODEL_ROUTE_TARGETS);
  const [modelInstances, setModelInstances] = useState<any[]>([]);
  const [dataSource, setDataSource] = useState<{
    dataList: ListItem[];
@@ -255,6 +262,7 @@ const Models = forwardRef((props, ref) => {
    cacheInsDataListRef.current = [];
    chunkInstanceRequedtRef.current?.current?.cancel?.();
    instancesToken.current?.cancel?.();
+    cancelTargetsWatch();
  });

  const resumeRequestsOnPageActive = useMemoizedFn(async () => {
@@ -265,6 +273,7 @@ const Models = forwardRef((props, ref) => {
    await getAllModelInstances();
    await createModelsInstanceChunkRequest();
    await createModelsChunkRequest();
+    await startTargetsWatch();
  });

  const handleOnCancelViewLogs = useMemoizedFn(async () => {
@@ -483,6 +492,7 @@ const Models = forwardRef((props, ref) => {
        total={dataSource.total}
        deleteIds={dataSource.deletedIds}
        filterValues={filterValues}
+        targetList={targetList}
      ></TableList>
    </TableProvider>
  );
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
jialin	e919b22d98	feat(gpu-service): restrict non-stopped instance edit, drop recreate - non-stopped edit: only displayName and SSH public keys editable; type/template/storage sections disabled (stopped edit keeps all editable) - remove recreate feature and the realAction prop it required: entry, delete-then-create submit path, warning banner, locale keys	2026-07-23 10:24:54 +08:00
jialin	89a74ed26a	style(cluster): col width	2026-07-22 16:21:12 +08:00
jialin	fe4dbf087f	feat(gpu-service): align instance-type/flavor contract with status.detail API - spec keeps definition fields only; observed hardware read from status.detail - sliceable derived from slicedDetail (logical count / physical profiles) - flat snapshot format isolated in instance-description for back-compat - drop flavor.spec.sliceable; onceMaxRequest realigned (no ram/localStorage) - lock compute ratio to memory ratio when coresPercentageOvercommit is false - sliced mode submits whole cores / Gi; displayName-first type labels	2026-07-22 15:52:17 +08:00
jialin	cbd9fc4946	fix: preset 10,20,30,50 for ratios	2026-07-22 15:52:17 +08:00
jialin	74f1399e3c	feat(gpu-service): add sliced compute ratio, confirm activate/deactivate, watch instance types - add configurable compute (cores) percentage in sliced mode (cores >= memory) - confirm instance-type activate/deactivate via DeleteModal - live-sync instance types list via chunked watch	2026-07-22 15:52:17 +08:00
jialin	96d194a4f4	feat(gpu-service): allow re-typing stopped instances on edit - Add instance-type column to edit drawer for stopped instances - Extract saveInstanceDataInDescription into shared util - Floor sliced unit resources; keep CPU >= 1 core - Expose applyInstanceType for both create and edit flows	2026-07-22 15:52:17 +08:00
jialin	e9d585cc90	fix(gpu-service): only pick Active candidates for accelerator Gate pickCandidateForAccelerator on phase === Active using InstanceTypePhaseValueMap so a phase-value change stays in sync.	2026-07-22 15:52:17 +08:00
jialin	3fff1c10f2	feat(gpu-service): instance-type activate/deactivate, displayName, unified flavor display - add activate/deactivate row actions (phase-driven) with new PUT APIs - add displayName field; list shows displayName \|\| name - rename list OS column title to Platform - share a two-line flavor renderer between the create dropdown and the list - normalize 'CPU Only' label to 'CPU-only'	2026-07-22 15:52:17 +08:00
jialin	2763594ae3	feat(gpu-service): use grouped flavor select in instance type create drawer	2026-07-22 15:52:17 +08:00
jialin	1655549f31	feat(gpu-service): add sliceable tag and horizontal scroll to instance types table	2026-07-22 15:52:17 +08:00
jialin	35d5681008	feat(gpu-service): add GPU Instance Types management page - Card/table list of instance types per Kubernetes cluster with delete - Create drawer with flavor picker and per-GPU resource form (CPU/RAM/storage) - Fix unit CPU to 1 for non-acceleratable flavors; N/A memory for generic types - Add routes and i18n across all locales	2026-07-22 15:52:17 +08:00
jialin	15f457a0e1	feat(gpu-service): refine instance type card layout in create-instance drawer - Regroup meta into aligned rows (CPU/RAM/Memory, Arch/Max/Sliced) and drop the OS row - Use aggregated endpoint for instance types - Share formatManufacturer helper for consistent vendor casing	2026-07-22 15:52:17 +08:00
jialin	9386f0872b	fix(gpu-service): pick sliced candidate for slice-only instance types	2026-07-22 15:52:17 +08:00
jialin	fe0bab041b	fix(style): instance type card height	2026-07-22 15:52:16 +08:00
jialin	fe24f9b53d	fix(gpu-service): address PR review on sliced scaling and theme logo - Scale sliced CPU in millicores and RAM in MiB for precise, k8s-valid fractional allocations; show rounded decimals in the disabled inputs - Disable the by-ratio option when the type has no sliced capacity - Use the dark logo map under the dark theme in template cards	2026-07-22 15:52:16 +08:00
jialin	63ed6e777b	feat(gpu-service): support sliced (by-ratio) GPU instances and PV status - Add whole/by-ratio segmented toggle to the GPU Instance form; sliced mode picks a VRAM ratio (10-100 or finer 1-10 when max<10), scales CPU/RAM by the ratio (floored, min 1), pins compute at 100% - Availability, card Max, and Instance Type cell reflect sliceable types - Add ready/deleting status columns for storage and storage types	2026-07-22 15:52:16 +08:00
jialinandjialin	730cbc9b64	style(cluster): cell width	2026-07-22 15:50:32 +08:00
hibigandjialin	2a69ba65cb	chore: bump @gpustack/core-ui to v1.0.42	2026-07-22 15:41:25 +08:00
jialinandjialin	aefb8eadce	chore(theme): add Card headerHeight token	2026-07-22 10:56:06 +08:00
jialinandjialin	49c80b2ccb	feat(llmodels): use CardRadioGroup for access scope selection	2026-07-22 10:56:06 +08:00
hibigandjialin	654eca7544	chore: bump @gpustack/core-ui to v1.0.41	2026-07-22 10:39:55 +08:00
Yuxing Dengandjialin	5ee62f267c	feat(billing): on-card charge/pay badge slots for models & instance types Add the plugin-fed billing price-badge slots to the model cards and the gpu-instance-type / storage cards so the enterprise plugin can surface charge / pay indicators inline.	2026-07-22 09:46:11 +08:00
jialinandjialin	ba0b2bb2c3	feat(maas-provider): allow clearing the model AutoComplete	2026-07-20 20:24:28 +08:00
jialinandjialin	c3bdbc200e	style(backends): elevate community card and version title backgrounds	2026-07-20 20:24:28 +08:00
jialinandjialin	63b06e595e	feat(access-control): render principals Add button in host holder slot	2026-07-20 20:24:28 +08:00
jialinandjialin	27210da13a	style(alert): tighten with-description padding, icon size, and title line-height	2026-07-20 20:24:28 +08:00
jialinandjialin	831a760246	style: adjust table row bg/height, container color, auto table layout	2026-07-20 15:55:39 +08:00
jialinandjialin	ae06ad7aae	feat(workers): add tooltip hint on VRAM index, merge index+bar trigger Blue dashed underline on the VRAM GPU index; index and ProgressBar share one Tooltip trigger showing the memory detail.	2026-07-20 15:55:39 +08:00
jialinandjialin	b3b819a080	refactor: rename gpu-usage-cell to dual-arc-gauge, refine colors Fixed blue for allocated (var(--ant-blue-6), theme-independent), gray dot when allocated is 0, dashed underline interaction hint.	2026-07-20 15:55:39 +08:00
jialinandjialin	aa47c626ba	feat: add GpuUsageCell component Semicircle dual-arc gauge (used/allocated) with hover Popover for GPU memory usage in table cells.	2026-07-20 15:55:39 +08:00
hibigandjialin	79e4a60d52	chore: bump @gpustack/core-ui to v1.0.40	2026-07-20 14:39:18 +08:00
jialinandjialin	d9a467f9f9	chore(llmodels): fix createTime column width, tidy imports CI / deps (push) Has been cancelled Details CI / build (push) Has been cancelled Details CI / build-publish (push) Has been cancelled Details CI / trigger-backend (push) Has been cancelled Details	2026-07-17 17:04:57 +08:00
jialinandjialin	c6b89f688e	refactor(tags): use TextAttribute/ThemeTag, drop redundant fit-content	2026-07-17 17:04:57 +08:00
jialinandjialin	2164a8198b	feat(usage): use StatusDot for event type column Replace antd Tag with core-ui StatusDot (dot + text), mapping event types to StatusType semantic colors.	2026-07-17 17:04:57 +08:00
hibigandjialin	0f0e92379b	chore: bump @gpustack/core-ui to v1.0.39	2026-07-17 16:56:51 +08:00
jialinandjialin	d8cb5261b9	feat(user-models): fall back to category icon when no brand logo matches	2026-07-16 18:00:27 +08:00
jialinandjialin	e30dd10fe4	style(cluster-management): child-row text color and created_at width	2026-07-16 18:00:27 +08:00
jialinandjialin	67e2d914f4	refactor(tables): share parent column grid in expandable child rows - llmodels/model-routes/cluster child rows use ExpandedRowGrid + Cell (auto-flow spans, no parent-key/grid-line math) - define --seal-table-row-min-height token in global.less - routes created_at column: span -> fixed width 180	2026-07-16 13:09:18 +08:00
hibigandjialin	938aef6c26	chore: bump @gpustack/core-ui to v1.0.38	2026-07-16 13:05:16 +08:00
jialinandjialin	eb029a3e2a	fix(table): smooth list empty/loading transitions, no layout jump on entry Reserve a stable block for the empty/loading state (matching the NoResult height) and fade the empty state in, so entering a list page no longer jumps between spinner, empty result, and rows. Apply scroll-table to the antd main lists and pass emptyMinHeight to the SealTable-based lists.	2026-07-15 14:05:19 +08:00
hibigandjialin	2dd287bbc1	chore: bump @gpustack/core-ui to v1.0.37	2026-07-15 13:43:46 +08:00
jialinandjialin	3c00317aeb	fix(models): cancel model-route-targets watch on inactive tab	2026-07-14 20:26:47 +08:00