diff --git a/packages/web/package.json b/packages/web/package.json
index d8b57a8a..e20371b8 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -46,6 +46,7 @@
     "vue": "^3.2.13",
     "vue-clipboard3": "2.0.0",
     "vue-count-to": "1.0.13",
+    "vue-echarts": "^6.7.3",
     "vue-i18n": "9",
     "vue-native-websocket-vue3": "^3.1.7",
     "vue-router": "^4.0.3",
diff --git a/packages/web/projects/vgpu/components/Detail.vue b/packages/web/projects/vgpu/components/Detail.vue
deleted file mode 100644
index 92df5225..00000000
--- a/packages/web/projects/vgpu/components/Detail.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-  <div>
-    <back-header> {{ title }}管理 > {{ props.name }} </back-header>
-    <block-box class="node-block">
-      <div class="node-detail">
-        <div class="node-detail-left">
-          <div class="title">详细信息</div>
-          <ul class="node-detail-info">
-            <li v-for="{ label, value, render } in detailColumns" :key="label">
-              <span class="label">{{ label }}</span>
-              <component v-if="render" :is="render(detail)" />
-              <span v-else class="value">{{ detail[value] }}</span>
-            </li>
-
-            <li class="cp" v-if="!hideCp">
-              <span v-for="{ label, count } in cp" :key="label">
-                <span class="label">{{ label }}</span>
-
-                <span class="value">{{ count }} 倍</span>
-              </span>
-            </li>
-          </ul>
-        </div>
-
-        <ul class="gauges">
-          <li v-for="item in gaugeConfig" :key="item.title">
-            <Gauge v-bind="item" />
-          </li>
-        </ul>
-      </div>
-    </block-box>
-
-    <div class="line-box">
-      <block-box
-        :title="title.replace('率', '趋势（%）')"
-        v-for="{ title, data } in gaugeConfig"
-        :key="title"
-      >
-        <template #extra>
-          <TimeSelect v-model="time" />
-        </template>
-        <div style="height: 200px">
-          <echarts-plus :options="getLineOptions({ data })" />
-        </div>
-      </block-box>
-    </div>
-
-    <block-box title="显卡列表" v-if="type !== 'device_uuid'">
-      <CardList :hideTitle="true" :filters="filters" />
-    </block-box>
-
-    <block-box title="任务列表">
-      <TaskList :hideTitle="true" :filters="filters" />
-    </block-box>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import BackHeader from '@/components/BackHeader.vue';
-import BlockBox from '@/components/BlockBox.vue';
-import { ref } from 'vue';
-import CardList from '~/vgpu/views/card/admin/index.vue';
-import TaskList from '~/vgpu/views/task/admin/index.vue';
-import Gauge from '~/vgpu/components/gauge.vue';
-import useInstantVector from '~/vgpu/hooks/useInstantVector';
-import EchartsPlus from '@/components/Echarts-plus.vue';
-import { getLineOptions } from '~/vgpu/components/config';
-import TimeSelect from '~/vgpu/components/timeSelect.vue';
-
-const props = defineProps([
-  'title',
-  'detailColumns',
-  'type',
-  'detail',
-  'name',
-  'filters',
-  'hideCp',
-]);
-
-const time = ref(1 / 24);
-
-const cp = useInstantVector(
-  [
-    {
-      label: 'vGPU 超配',
-      count: '0',
-      query: `avg(hami_vgpu_count{node=~"$node"})`,
-    },
-    {
-      label: '算力超配',
-      count: '0',
-      query: `avg(hami_vcore_scaling{node=~"$node"})`,
-    },
-    {
-      label: '显存超配',
-      count: '1.5',
-      query: `avg(hami_vmemory_scaling{node=~"$node"})`,
-    },
-  ],
-  (query) => query.replaceAll('$node', props.detail.name),
-);
-
-const gaugeConfig = useInstantVector(
-  [
-    {
-      title: '算力分配率',
-      percent: 0,
-      query: `sum(hami_container_vcore_allocated{${props.type}=~"$${props.type}"})`,
-      totalQuery: `sum(hami_core_size{${props.type}=~"$${props.type}"})`,
-      percentQuery: `sum(hami_container_vcore_allocated{${props.type}=~"$${props.type}"}) / sum(hami_core_size{${props.type}=~"$${props.type}"}) *100`,
-      total: 0,
-      used: 0,
-      unit: ' ',
-    },
-    {
-      title: '显存分配率',
-      percent: 0,
-      query: `sum(hami_container_vmemory_allocated{${props.type}=~"$${props.type}"}) / 1024`,
-      totalQuery: `sum(hami_memory_size{${props.type}=~"$${props.type}"}) / 1024`,
-      percentQuery: `(sum(hami_container_vmemory_allocated{${props.type}=~"$${props.type}"}) / 1024) /(sum(hami_memory_size{${props.type}=~"$${props.type}"}) / 1024) *100`,
-      total: 0,
-      used: 0,
-      unit: 'GiB',
-    },
-    {
-      title: '算力使用率',
-      percent: 0,
-      query: `avg(hami_core_util{${props.type}=~"$${props.type}"})`,
-      percentQuery: `avg(hami_core_util_avg{${props.type}=~"$${props.type}"})`,
-      totalQuery: `sum(hami_core_size{${props.type}=~"$${props.type}"})`,
-      total: 100,
-      used: 0,
-      unit: ' ',
-    },
-    {
-      title: '显存使用率',
-      percent: 0,
-      query: `sum(hami_memory_used{${props.type}=~"$${props.type}"}) / 1024`,
-      totalQuery: `sum(hami_memory_size{${props.type}=~"$${props.type}"})/1024`,
-      percentQuery: `(sum(hami_memory_used{${props.type}=~"$${props.type}"}) / 1024)/(sum(hami_memory_size{${props.type}=~"$${props.type}"})/1024)*100`,
-      total: 0,
-      used: 0,
-      unit: 'GiB',
-    },
-  ],
-  (query) => query.replaceAll(`$${props.type}`, props.name),
-  time,
-);
-
-</script>
-
-<style scoped lang="scss">
-.node-detail {
-  display: flex;
-  height: 100%;
-  gap: 50px;
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .title {
-    color: #1d2b3a;
-    font-family: 'PingFang SC';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    margin-bottom: 20px;
-  }
-  .node-detail-left {
-    min-width: 500px;
-  }
-  .node-detail-info {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    font-size: 12px;
-
-    .label {
-      display: inline-block;
-      width: 80px;
-      color: #939ea9;
-    }
-
-    .cp {
-      display: flex;
-      gap: 25px;
-      margin-top: 10px;
-    }
-  }
-
-  .gauges {
-    flex: 1;
-    display: flex;
-    li {
-      flex: 1;
-    }
-  }
-}
-
-.line-box {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  column-gap: 20px;
-}
-
-.node-block {
-  display: flex;
-  flex-direction: column;
-  .home-block-content {
-    flex: 1;
-  }
-}
-</style>
diff --git a/packages/web/projects/vgpu/components/TabTop.vue b/packages/web/projects/vgpu/components/TabTop.vue
index 8ec8980f..1eed5b72 100644
--- a/packages/web/projects/vgpu/components/TabTop.vue
+++ b/packages/web/projects/vgpu/components/TabTop.vue
@@ -192,7 +192,8 @@ watch(
   transition: background-color 0.15s ease;
 
   &:hover {
-    background-color: #f3f4f6;
+    background-color: transparent;
+    box-shadow: none;
   }
 }
 
diff --git a/packages/web/projects/vgpu/components/config.js b/packages/web/projects/vgpu/components/config.js
index 18ed5050..e3f257d5 100644
--- a/packages/web/projects/vgpu/components/config.js
+++ b/packages/web/projects/vgpu/components/config.js
@@ -219,28 +219,51 @@ export const getTopOptions = ({ core, memory }) => {
   };
 };
 
-export const getLineOptions = ({ data = [], unit = '%' }) => {
+export const getLineOptions = ({ data = [], unit = '%', seriesName, animation = true }) => {
   return {
+    animation,
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed',
+          color: '#8A8A8A',
+        },
       },
       formatter: function (params) {
-        var res = params[0].name + '<br/>';
-        for (var i = 0; i < params.length; i++) {
-          res +=
-            params[i].marker + (+params[i].value).toFixed(0) + ` ${unit}<br/>`;
+        if (!Array.isArray(params) || params.length === 0) return '';
+
+        let result = `<div style="margin-bottom:5px;">${params[0]?.name ?? ''}</div>`;
+        for (let i = 0; i < params.length; i++) {
+          const item = params[i];
+          const raw = Array.isArray(item?.value) ? item.value[item.value.length - 1] : item?.value;
+          const num = Number(raw);
+          const value = Number.isFinite(num) ? `${num.toFixed(1)} ${unit}` : '-';
+          result += `
+            <div style="display:flex;align-items:center;font-size:14px;line-height:22px;">
+              <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${item?.color || '#5B8FF9'};margin-right:5px;"></span>
+              <span>${item?.seriesName || '-'}:&nbsp;</span>
+              <span style="font-weight:bold;">${value}</span>
+            </div>
+          `;
         }
-        return res;
+        return result;
       },
     },
     grid: {
-      top: 7, // 上边距
-      bottom: 20, // 下边距
-      left: '7%', // 左边距
-      right: 10, // 右边距
+      top: 20, // 上边距
+      bottom: 30, // 下边距
+      left: 30, // 左边距
+      right: 30, // 右边距
     },
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        filterMode: 'none',
+      },
+    ],
     xAxis: {
       type: 'category',
       data: data.map((item) => timeParse(+item.timestamp)),
@@ -255,10 +278,19 @@ export const getLineOptions = ({ data = [], unit = '%' }) => {
     },
     series: [
       {
+        name: seriesName || '',
         data: data.map((item) => {
           return item.value.toFixed(1);
         }),
         type: 'line',
+        lineStyle: {
+          width: 3,
+          color: '#5B8FF9',
+        },
+        itemStyle: {
+          color: '#5B8FF9',
+          borderColor: '#5B8FF9',
+        },
       },
     ],
   };
diff --git a/packages/web/projects/vgpu/components/gauge.vue b/packages/web/projects/vgpu/components/gauge.vue
index a0ebc818..984990b6 100644
--- a/packages/web/projects/vgpu/components/gauge.vue
+++ b/packages/web/projects/vgpu/components/gauge.vue
@@ -18,7 +18,7 @@
       <span>{{ title.includes('使用') || title.includes('Usage') ? $t('dashboard.usage') : $t('dashboard.allocation') }}</span>
       <span v-if="unit && !title.includes('算力') && !title.includes('Compute')"> ({{ unit }})</span>
       <span> : </span>
-      <b>{{ used.toFixed(1) }} / {{ total.toFixed() }}</b>
+      <b>{{ displayUsed.toFixed(1) }} / {{ displayTotal.toFixed() }}</b>
     </div>
   </div>
 </template>
@@ -38,6 +38,10 @@ const props = defineProps([
 ]);
 
 const showProgress = computed(() => props.showProgress !== false);
+const isComputeTitle = computed(() => props.title?.includes('算力') || props.title?.includes('Compute'));
+const displayDivisor = computed(() => (isComputeTitle.value ? 100 : 1));
+const displayUsed = computed(() => Number(props.used || 0) / displayDivisor.value);
+const displayTotal = computed(() => Number(props.total || 0) / displayDivisor.value);
 
 const progressColor = computed(() => {
   const value = Number(props.percent);
diff --git a/packages/web/projects/vgpu/components/previewBar.vue b/packages/web/projects/vgpu/components/previewBar.vue
index 83e213ea..2e56b9ac 100644
--- a/packages/web/projects/vgpu/components/previewBar.vue
+++ b/packages/web/projects/vgpu/components/previewBar.vue
@@ -197,7 +197,7 @@ onMounted(async () => {
     query: thisPieConfig.query,
   });
 
-  const colors = ['#5470c6', '#91cc75', '#2563EB', '#16A34A', '#7dd3fc', '#86efac'];
+  const colors = ['#76B900', '#9FCB98', '#F59E0B', '#4F8F87', '#14B8A6', '#6B7280'];
   pieData.value = data.map((item, index) => {
     return {
       name: item.metric[thisPieConfig.key],
diff --git a/packages/web/projects/vgpu/views/card/admin/Detail.vue b/packages/web/projects/vgpu/views/card/admin/Detail.vue
index 6f63cccd..eab99860 100644
--- a/packages/web/projects/vgpu/views/card/admin/Detail.vue
+++ b/packages/web/projects/vgpu/views/card/admin/Detail.vue
@@ -1,25 +1,67 @@
 <template>
   <div>
-    <back-header> {{ $t('card.detail.title') }} : {{ detail.uuid }} </back-header>
+    <page-header
+      :title="$t('card.detail.title')"
+      :name="detail.uuid"
+      :status="headerStatusDisplay.text"
+      :status-icon="headerStatusDisplay.icon"
+    />
     <block-box class="node-block">
-      <div class="card-detail" :class="{ 'is-en': locale.startsWith('en') }">
+      <div class="card-detail">
         <div class="card-detail-left">
           <div class="title">{{ $t('card.detail.detailInfo') }}</div>
-          <ul class="card-detail-info">
-            <li v-for="{ label, value, render } in columns" :key="label">
-              <span class="label">{{ label }}：</span>
-              <span v-if="render" class="value">
-                <component :is="render(detail)" />
-              </span>
-              <span v-else class="value">{{ detail[value] }}</span>
-            </li>
-          </ul>
+          <div class="basic-info-row">
+            <div class="basic-info-card">
+              <div class="basic-info-title" @click="handleToNodeDetail">
+                <span class="text">{{ detail.nodeName || '--' }}</span>
+                <span class="basic-info-share">
+                  <svg-icon icon="jump" />
+                </span>
+              </div>
+              <div class="basic-info-subtitle">{{ $t('card.node') }}</div>
+            </div>
+            <div class="basic-info-card">
+              <div class="basic-info-title">
+                <svg-icon v-if="gpuTypeIcon && detail.type" :icon="gpuTypeIcon" class="gpu-type-icon" />
+                {{ detail.type || '--' }}
+              </div>
+              <div class="basic-info-subtitle">{{ $t('card.model') }}</div>
+            </div>
+            <div class="basic-info-card">
+              <div class="basic-info-title">
+                {{ basicTemperatureText }}
+              </div>
+              <div class="basic-info-subtitle">{{ $t('card.detail.gpuTemperature') }}</div>
+            </div>
+            <div class="basic-info-card">
+              <div class="basic-info-title">
+                {{ basicPowerText }}
+              </div>
+              <div class="basic-info-subtitle">{{ $t('card.detail.gpuPower') }}</div>
+            </div>
+          </div>
         </div>
       </div>
     </block-box>
 
-    <block-box :title="$t('card.detail.resourceOverview')">
+    <block-box class="resource-overview-block" :title="$t('card.detail.resourceOverview')">
       <ul class="resource-overview-cards">
+        <li class="resource-overview-card">
+          <div class="progress-wrapper">
+            <workload-semi-progress :percent="workloadCountPercentProgress" />
+            <div class="workload-progress-summary">
+              <div class="workload-progress-value">
+                <b>{{ workloadCountUsedText }}</b> / {{ workloadCountTotalText }}
+              </div>
+              <div class="workload-progress-subtitle">
+                <span>{{ $t('card.detail.workloadCount') }}</span>
+                <t-tooltip :content="$t('card.detail.workloadCountTip')">
+                  <help-circle-icon class="resource-card-help-icon" />
+                </t-tooltip>
+              </div>
+            </div>
+          </div>
+        </li>
         <li class="resource-overview-card">
           <div class="resource-card">
             <div class="resource-card-header">
@@ -81,7 +123,6 @@
             </div>
           </div>
         </li>
-
         <li class="resource-overview-card">
           <div class="resource-card">
             <div class="resource-card-header">
@@ -148,94 +189,102 @@
     <div class="line-box">
       <block-box :title="$t('dashboard.gpuComputeAllocUsageTrend')">
         <div class="trend-chart">
-          <echarts-plus
-            :options="
-              getRangeOptions([
-                {
-                  name: t('dashboard.allocRateLegend'),
-                  data: gaugeConfig[0]?.data,
-                  itemStyle: {
-                    borderColor: 'rgb(84, 112, 198)',
-                  },
-                  lineStyle: {
-                    color: 'rgb(84, 112, 198)',
-                  },
-                },
-                {
-                  name: t('dashboard.usageRateLegend'),
-                  data: gaugeConfig[2]?.data,
-                  itemStyle: {
-                    borderColor: 'rgb(145, 204, 117)',
+          <VChart
+            :option="
+              {
+                ...getRangeOptions([
+                  {
+                    name: t('dashboard.allocRateLegend'),
+                    data: gaugeConfig[0]?.data,
+                    itemStyle: {
+                      color: '#5B8FF9',
+                      borderColor: '#5B8FF9',
+                    },
+                    lineStyle: {
+                      width: 3,
+                      color: '#5B8FF9',
+                    },
                   },
-                  lineStyle: {
-                    color: 'rgb(145, 204, 117)',
+                  {
+                    name: t('dashboard.usageRateLegend'),
+                    data: gaugeConfig[2]?.data,
+                    itemStyle: {
+                      color: '#42C090',
+                      borderColor: '#42C090',
+                    },
+                    lineStyle: {
+                      width: 3,
+                      color: '#42C090',
+                    },
                   },
-                },
-              ])
+                ]),
+                animation: false,
+              }
             "
+            :autoresize="true"
           />
         </div>
       </block-box>
       <block-box :title="$t('dashboard.gpuMemAllocUsageTrend')">
         <div class="trend-chart">
-          <echarts-plus
-            :options="
-              getRangeOptions([
-                {
-                  name: t('dashboard.allocRateLegend'),
-                  data: gaugeConfig[1]?.data,
-                  itemStyle: {
-                    borderColor: 'rgb(84, 112, 198)',
-                  },
-                  lineStyle: {
-                    color: 'rgb(84, 112, 198)',
-                  },
-                },
-                {
-                  name: t('dashboard.usageRateLegend'),
-                  data: gaugeConfig[3]?.data,
-                  itemStyle: {
-                    borderColor: 'rgb(145, 204, 117)',
+          <VChart
+            :option="
+              {
+                ...getRangeOptions([
+                  {
+                    name: t('dashboard.allocRateLegend'),
+                    data: gaugeConfig[1]?.data,
+                    itemStyle: {
+                      color: '#5B8FF9',
+                      borderColor: '#5B8FF9',
+                    },
+                    lineStyle: {
+                      width: 3,
+                      color: '#5B8FF9',
+                    },
                   },
-                  lineStyle: {
-                    color: 'rgb(145, 204, 117)',
+                  {
+                    name: t('dashboard.usageRateLegend'),
+                    data: gaugeConfig[3]?.data,
+                    itemStyle: {
+                      color: '#42C090',
+                      borderColor: '#42C090',
+                    },
+                    lineStyle: {
+                      width: 3,
+                      color: '#42C090',
+                    },
                   },
-                },
-              ])
+                ]),
+                animation: false,
+              }
             "
+            :autoresize="true"
           />
         </div>
       </block-box>
 
-      <block-box :title="title" v-for="{ title, data, unit } in lineToolsView" :key="title">
+      <block-box :title="title" v-for="{ title, data, unit, seriesNameKey } in lineToolsView" :key="title">
         <div class="trend-chart">
-          <echarts-plus :options="getLineOptions2({ data, unit })" />
+          <VChart :option="getLineOptions2({ data, unit, seriesName: t(seriesNameKey), animation: false })" :autoresize="true" />
         </div>
       </block-box>
     </div>
 
-    <block-box :title="$t('card.detail.taskList')">
-      <template v-if="detail.isExternal">
-        <el-alert :title="$t('card.detail.unmanagedNoTask')" show-icon type="warning" :closable="false" />
-        <el-empty :description="$t('card.detail.noTaskData')" :image-size="100" />
-      </template>
-      <template v-else>
-        <TaskList :hideTitle="true" :filters="{ deviceId: detail.uuid }" />
-      </template>
-    </block-box>
   </div>
 </template>
 
 <script setup lang="jsx">
-import BackHeader from '@/components/BackHeader.vue';
+import PageHeader from '@/components/PageHeader.vue';
 import { useRoute, useRouter } from 'vue-router';
 import BlockBox from '@/components/BlockBox.vue';
 import { onMounted, ref, watch, computed } from 'vue';
-import TaskList from '~/vgpu/views/task/admin/index.vue';
+import { HelpCircleIcon } from 'tdesign-icons-vue-next';
 import useInstantVector from '~/vgpu/hooks/useInstantVector';
-import EchartsPlus from '@/components/Echarts-plus.vue';
+import VChart from 'vue-echarts';
 import cardApi from '~/vgpu/api/card';
 import nodeApi from '~/vgpu/api/node';
+import WorkloadSemiProgress from './components/WorkloadSemiProgress.vue';
 import { timeParse, calculatePrometheusStep, roundToDecimal, getResourceColor } from '@/utils';
 import { getLineOptions as getLineOptions2 } from '~/vgpu/components/config';
 import { getRangeOptions } from '../../monitor/overview/getOptions';
@@ -243,10 +292,41 @@ import { useI18n } from 'vue-i18n';
 
 const route = useRoute();
 const router = useRouter();
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
 const detail = ref({});
 const nodeUid = ref('');
+const CARD_TYPE_ICON_MAP = {
+  NVIDIA: 'gpu-nvidia',
+  MXC: 'gpu-nvidia',
+  ASCEND: 'gpu-ascend',
+  METAX: 'gpu-metax',
+  AWS: 'gpu-aws',
+  AWSNEURON: 'gpu-aws',
+};
+
+const extractLetters = (value) => {
+  if (typeof value === 'string') {
+    return value.match(/[a-z]+/gi) || [];
+  }
+  return [];
+};
+
+const gpuTypeIcon = computed(() => {
+  const vendor = extractLetters(detail.value?.type)?.[0]?.toUpperCase();
+  if (!vendor) return '';
+  return CARD_TYPE_ICON_MAP[vendor] || 'GPU';
+});
+const getCardStatusDisplay = ({ health, isExternal }) => {
+  if (isExternal || health === undefined || health === null) {
+    return { icon: 'status-unmanaged', text: t('card.unknown') };
+  }
+  if (health) {
+    return { icon: 'status-schedulable', text: t('card.normal') };
+  }
+  return { icon: 'status-unschedulable', text: t('card.abnormal') };
+};
+const headerStatusDisplay = computed(() => getCardStatusDisplay(detail.value || {}));
 
 const end = new Date();
 const start = new Date();
@@ -254,111 +334,18 @@ start.setTime(start.getTime() - 3600 * 1000);
 
 const times = ref([start, end]);
 
-const columns = computed(() => [
-  {
-    label: t('card.status'),
-    value: 'health',
-    render: ({ health, isExternal }) => {
-      if (detail.value && detail.value.health !== undefined) {
-        const icon = isExternal
-          ? 'status-unmanaged'
-          : (health ? 'status-schedulable' : 'status-unschedulable');
-        const text = isExternal
-          ? t('card.unknown')
-          : (health ? t('card.normal') : t('card.abnormal'));
-        return (
-          <span
-            style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '6px',
-            }}
-          >
-            <svg-icon icon={icon} style={{ fontSize: '16px' }} />
-            <span>{text}</span>
-          </span>
-        );
-      } else {
-        return <el-tag disable-transitions size="small" type="info">{t('card.detail.loading')}</el-tag>;
-      }
-    },
-  },
-  {
-    label: t('card.uuid'),
-    value: 'uuid',
-    render: ({ uuid }) => (
-      <ellipsis-text text={uuid || '--'} mode="middle" tooltip="always" />
-    ),
-  },
-  {
-    label: t('card.node'),
-    value: 'nodeName',
-    render: ({ nodeName }) => (
-      <div class="node-jump-cell">
-        <ellipsis-text text={nodeName || '--'} mode="middle" tooltip="always" />
-        <span
-          class={['node-jump-icon', !nodeUid.value ? 'is-disabled' : ''].join(' ')}
-          onClick={() => {
-            if (!nodeUid.value) return;
-            router.push(`/admin/vgpu/node/admin/${nodeUid.value}?nodeName=${nodeName || ''}`);
-          }}
-        >
-          <svg-icon icon="jump" />
-        </span>
-      </div>
-    ),
-  },
-  {
-    label: t('card.model'),
-    value: 'type',
-  },
-  {
-    label: t('card.detail.deviceNo'),
-    value: 'device_no',
-  },
-  {
-    label: t('card.detail.driverVersion'),
-    value: 'driver_version',
-  },
-  {
-    label: t('card.mode'),
-    value: 'mode',
-    render: ({ mode, type }) => (
-        <t-tag theme="default" variant="light">
-          {type?.split('-')[0] === "NVIDIA" ? mode : 'default'}
-        </t-tag>
-    )
-  },
-  {
-    label: t('card.detail.gpuPower'),
-    value: 'gpuPowerTrend',
-    render: () => {
-      const v = lineTools.value[0]?.percent;
-      const unit = lineTools.value[0]?.gaugeUnit || 'W';
-      if (v === undefined || v === null) return <span class="detail-trend-value">--</span>;
-      return (
-        <span class="detail-trend-value">
-          {Number(v).toFixed(1)} {unit}
-        </span>
-      );
-    },
-  },
-  {
-    label: t('card.detail.gpuTemperature'),
-    value: 'gpuTemperatureTrend',
-    render: () => {
-      const v = lineTools.value[1]?.percent;
-      const unit = lineTools.value[1]?.gaugeUnit || '℃';
-      if (v === undefined || v === null) return <span class="detail-trend-value">--</span>;
-      return (
-        <span class="detail-trend-value">
-          {Number(v).toFixed(1)} {unit}
-        </span>
-      );
-    },
-  },
-]);
+const basicPowerText = computed(() => {
+  const v = lineTools.value[1]?.percent;
+  const unit = lineTools.value[1]?.gaugeUnit || 'W';
+  if (v === undefined || v === null) return '--';
+  return `${Number(v)} ${unit}`;
+});
+const basicTemperatureText = computed(() => {
+  const v = lineTools.value[0]?.percent;
+  const unit = lineTools.value[0]?.gaugeUnit || '℃';
+  if (v === undefined || v === null) return '--';
+  return `${Number(v)} ${unit}`;
+});
 
 const _gaugeConfigBase = [
   {
@@ -417,7 +404,7 @@ const gaugeConfig = computed(() =>
 
 const computeTotalText = computed(() => {
   const total = Number(gaugeConfig.value?.[0]?.total);
-  return Number.isFinite(total) ? `${roundToDecimal(total, 1)}` : '--';
+  return Number.isFinite(total) ? `${roundToDecimal(total / 100, 1)}` : '--';
 });
 
 const memoryTotalText = computed(() => {
@@ -425,15 +412,16 @@ const memoryTotalText = computed(() => {
   return Number.isFinite(total) ? `${roundToDecimal(total, 1)} GiB` : '--';
 });
 
-const formatUsedValue = (v, unit) => {
+const formatUsedValue = (v, unit, divisor = 1) => {
   const n = Number(v);
   if (!Number.isFinite(n)) return '--';
-  const text = `${roundToDecimal(n, 1)}`;
+  const normalizedDivisor = Number(divisor) > 0 ? Number(divisor) : 1;
+  const text = `${roundToDecimal(n / normalizedDivisor, 1)}`;
   return unit && String(unit).trim() ? `${text} ${unit}` : text;
 };
 
-const computeAllocUsedText = computed(() => (detail.value?.isExternal ? '--' : formatUsedValue(gaugeConfig.value?.[0]?.used, gaugeConfig.value?.[0]?.unit)));
-const computeUsageUsedText = computed(() => formatUsedValue(gaugeConfig.value?.[2]?.used, gaugeConfig.value?.[2]?.unit));
+const computeAllocUsedText = computed(() => (detail.value?.isExternal ? '--' : formatUsedValue(gaugeConfig.value?.[0]?.used, gaugeConfig.value?.[0]?.unit, 100)));
+const computeUsageUsedText = computed(() => formatUsedValue(gaugeConfig.value?.[2]?.used, gaugeConfig.value?.[2]?.unit, 100));
 const memoryAllocUsedText = computed(() => (detail.value?.isExternal ? '--' : formatUsedValue(gaugeConfig.value?.[1]?.used, gaugeConfig.value?.[1]?.unit)));
 const memoryUsageUsedText = computed(() => formatUsedValue(gaugeConfig.value?.[3]?.used, gaugeConfig.value?.[3]?.unit));
 
@@ -473,25 +461,38 @@ const computeAllocPercentText = computed(() => (computeAllocPercentRaw.value ===
 const computeUsagePercentText = computed(() => (computeUsagePercentRaw.value === undefined ? '--' : `${roundToDecimal(computeUsagePercentRaw.value, 2)}%`));
 const memoryAllocPercentText = computed(() => (memoryAllocPercentRaw.value === undefined ? '--' : `${roundToDecimal(memoryAllocPercentRaw.value, 2)}%`));
 const memoryUsagePercentText = computed(() => (memoryUsagePercentRaw.value === undefined ? '--' : `${roundToDecimal(memoryUsagePercentRaw.value, 2)}%`));
+const workloadCountUsed = computed(() => Number(detail.value?.vgpuUsed));
+const workloadCountTotal = computed(() => Number(detail.value?.vgpuTotal));
+const workloadCountUsedText = computed(() => (Number.isFinite(workloadCountUsed.value) ? `${workloadCountUsed.value}` : '--'));
+const workloadCountTotalText = computed(() => (Number.isFinite(workloadCountTotal.value) ? `${workloadCountTotal.value}` : '--'));
+const workloadCountPercentRaw = computed(() => {
+  if (!Number.isFinite(workloadCountUsed.value) || !Number.isFinite(workloadCountTotal.value) || workloadCountTotal.value <= 0) {
+    return 0;
+  }
+  return (workloadCountUsed.value / workloadCountTotal.value) * 100;
+});
+const workloadCountPercentProgress = computed(() => clampPercent(workloadCountPercentRaw.value));
 
 const lineTools = ref([
   {
-    titleKey: 'card.detail.gpuPowerTrend',
-    query: `avg by (device_no,driver_version) (hami_device_power{device_uuid=~"$device_uuid"})`,
+    titleKey: 'card.detail.gpuTemperatureTrend',
+    seriesNameKey: 'card.detail.gpuTemperature',
+    query: `avg by (device_no,driver_version) (hami_device_temperature{device_uuid=~"$device_uuid"})`,
     data: [],
-    unit: 'W',
-    gaugeUnit: 'W',
+    unit: '℃',
+    gaugeUnit: '℃',
     percent: undefined,
     total: 0,
     hideInfo: true,
     showProgress: false,
   },
   {
-    titleKey: 'card.detail.gpuTemperatureTrend',
-    query: `avg by (device_no,driver_version) (hami_device_temperature{device_uuid=~"$device_uuid"})`,
+    titleKey: 'card.detail.gpuPowerTrend',
+    seriesNameKey: 'card.detail.gpuPower',
+    query: `avg by (device_no,driver_version) (hami_device_power{device_uuid=~"$device_uuid"})`,
     data: [],
-    unit: '℃',
-    gaugeUnit: '℃',
+    unit: 'W',
+    gaugeUnit: 'W',
     percent: undefined,
     total: 0,
     hideInfo: true,
@@ -539,6 +540,11 @@ const fetchLineData = async () => {
   });
 };
 
+const handleToNodeDetail = () => {
+  if (!nodeUid.value) return;
+  router.push(`/admin/vgpu/node/admin/${nodeUid.value}?nodeName=${detail.value?.nodeName || ''}`);
+};
+
 onMounted(async () => {
   const res = await cardApi.getCardDetail({ uid: route.params.uuid });
   detail.value = { ...detail.value, ...res };
@@ -588,75 +594,102 @@ watch(
     width: 100%;
   }
 
-  .card-detail-info {
-    width: 100%;
-    column-gap: 15px;
-    row-gap: 15px;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-
-    li {
-      display: flex;
-      align-items: center;
-      min-width: 0;
-    }
+  .basic-info-row {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+  }
 
-    .label {
-      display: inline-block;
-      width: 80px;
-      height: 20px;
-      color: #939ea9;
-      font-size: 12px;
-      line-height: 20px;
-      flex-shrink: 0;
-    }
+  .basic-info-card {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
+    gap: 2px;
+    padding: 15px 20px;
+    border-radius: 8px;
+    background: #f5f7fa;
+    border: 0;
+    overflow-x: hidden;
+  }
 
-    .value {
-      color: #324558;
-      font-size: 14px;
-      line-height: 22px;
-      display: inline-flex;
-      align-items: center;
-      min-width: 0;
+  .basic-info-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #324558;
+    line-height: 28px;
+    cursor: default;
+
+    .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+  }
 
+  .basic-info-share {
+    display: inline-flex;
+    align-items: center;
   }
 
-  &.is-en {
-    .card-detail-info {
-      .label {
-        width: 110px;
-      }
-    }
+  .basic-info-subtitle {
+    color: #939ea9;
+    font-size: 12px;
+    line-height: 20px;
   }
+
+.gpu-type-icon {
+  width: 16px;
+  height: 16px;
+  color: #64748b;
+}
 }
 
 .resource-overview-cards {
-  margin: 15px 0 0;
+  margin: 12px 0 0;
   padding: 0;
   list-style: none;
   display: flex;
-  gap: 15px;
+  gap: 8px;
 }
 
 .resource-overview-card {
   flex: 1;
+  display: flex;
+}
+
+.progress-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .resource-card {
   display: flex;
   flex-direction: column;
+  align-items: center;
   height: 100%;
   min-height: 0;
+  width: 100%;
   padding: 15px 20px;
   background: #f5f7fa;
   border-radius: 8px;
+  border: 0;
+  overflow-x: hidden;
 }
 
 .resource-card-header {
   display: flex;
   align-items: center;
   gap: 20px;
+  width: 100%;
 }
 
 .resource-card-icon {
@@ -693,29 +726,66 @@ watch(
   line-height: 20px;
 }
 
+.workload-progress-summary {
+  margin-top: -76px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #939ea9;
+}
+
+.workload-progress-value {
+  line-height: 28px;
+
+  b {
+    font-size: 20px;
+    color: #324558;
+  }
+}
+
+.workload-progress-subtitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.resource-card-help-icon {
+  color: #939ea9;
+  font-size: 14px;
+  cursor: pointer;
+}
+
 .resource-card-footer {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-top: 16px;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
+  width: 100%;
 }
 
 .resource-card-rate-wrap {
   width: 100%;
   background: #ffffff;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 10px 12px;
   box-sizing: border-box;
+  box-shadow: 0 4px 10px rgba(2, 5, 8, 0.06);
 }
 
 .resource-card-footer-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
 }
 
 .resource-card-footer-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   font-size: 12px;
   color: #939ea9;
   line-height: 20px;
@@ -751,8 +821,8 @@ watch(
 }
 
 .trend-chart {
-  height: 200px;
-  margin-top: 15px;
+  height: 100%;
+  margin-top: 0;
 }
 
 .line-box {
@@ -763,47 +833,29 @@ watch(
   > .home-block {
     flex: 1 1 calc(50% - 10px);
     min-width: 0;
+    height: 320px;
+    padding: 16px 20px;
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  > .home-block :deep(.home-block-content) {
+    flex: 1;
+    min-height: 0;
   }
 }
 
 .node-block {
   display: flex;
   flex-direction: column;
+  box-shadow: none;
   .home-block-content {
     flex: 1;
   }
 }
 
-.node-jump-cell {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  width: 100%;
-  min-width: 0;
-
-  .node-jump-icon {
-    flex: none;
-    width: 28px;
-    height: 28px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 4px;
-    user-select: none;
-  }
-
-  .node-jump-icon.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-}
-
-.detail-trend-value {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
+.resource-overview-block {
+  box-shadow: none;
 }
 </style>
diff --git a/packages/web/projects/vgpu/views/card/admin/Detail2.vue b/packages/web/projects/vgpu/views/card/admin/Detail2.vue
deleted file mode 100644
index 956499c7..00000000
--- a/packages/web/projects/vgpu/views/card/admin/Detail2.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <Detail
-    title="显卡"
-    :detailColumns="columns"
-    type="device_uuid"
-    :detail="detail"
-    :name="detail.uuid"
-    :filters="{ deviceId: detail.uuid }"
-    hideCp="true"
-  />
-</template>
-
-<script setup lang="jsx">
-import Detail from '~/vgpu/components/Detail.vue';
-import { onMounted, ref } from 'vue';
-import nodeApi from '~/vgpu/api/node';
-import { useRoute } from 'vue-router';
-import cardApi from '~/vgpu/api/card';
-
-const detail = ref({});
-
-const route = useRoute();
-
-const columns = [
-  // {
-  //   label: '显卡厂商',
-  //   value: 'uuid',
-  //   render: ({ type }) => <span>{type?.split('-')[0]}</span>,
-  // },
-  {
-    label: '显卡 ID',
-    value: 'uuid',
-  },
-  {
-    label: '所属节点',
-    value: 'nodeName',
-  },
-  {
-    label: '显卡型号',
-    value: 'type',
-  },
-  // {
-  //   label: 'vGPU(已分配/总量)',
-  //   value: 'vgpu',
-  //   render: ({ vgpuTotal, vgpuUsed }) => (
-  //     <span>
-  //       {vgpuUsed}/{vgpuTotal}
-  //     </span>
-  //   ),
-  // },
-  // {
-  //   label: '算力(已分配/总量)',
-  //   value: 'allocatedCores',
-  //   render: ({ coreTotal, coreUsed }) => (
-  //     <span>
-  //       {coreUsed}/{coreTotal}
-  //     </span>
-  //   ),
-  // },
-  // {
-  //   label: '显存(已分配/总量)',
-  //   value: 'allocatedDevices',
-  //   render: ({ memoryTotal, memoryUsed }) => (
-  //     <span>
-  //       {memoryUsed}/{memoryTotal} M
-  //     </span>
-  //   ),
-  // },
-  // {
-  //   label: '显卡版本',
-  //   value: 'DCGM_FI_DRIVER_VERSION',
-  // },
-  // {
-  //   label: '设备号',
-  //   value: 'device',
-  // },
-];
-
-onMounted(async () => {
-  detail.value = await cardApi.getCardDetail({ uid: route.params.uuid });
-});
-</script>
diff --git a/packages/web/projects/vgpu/views/card/admin/components/WorkloadSemiProgress.vue b/packages/web/projects/vgpu/views/card/admin/components/WorkloadSemiProgress.vue
new file mode 100644
index 00000000..cb1151af
--- /dev/null
+++ b/packages/web/projects/vgpu/views/card/admin/components/WorkloadSemiProgress.vue
@@ -0,0 +1,43 @@
+<template>
+  <svg viewBox="-3 0 160 144" class="workload-progress-ring">
+    <path :d="backgroundPath" fill="none" stroke="#E4EBF1" stroke-width="18" />
+    <path :d="progressPath" fill="none" stroke="#007BFF" stroke-width="18" />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  percent: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const rx = 65;
+const cx = 78;
+const cy = 112;
+
+const normalizedPercent = computed(() => {
+  const val = Number(props.percent);
+  if (!Number.isFinite(val)) return 0;
+  return Math.max(0, Math.min(100, val));
+});
+
+const backgroundPath = computed(() => `M ${cx - rx},${cy} A ${rx},${rx} 0 0 1 ${cx + rx},${cy}`);
+
+const progressPath = computed(() => {
+  const angle = (normalizedPercent.value / 100) * 180;
+  const rad = (angle * Math.PI) / 180;
+  const x = cx + rx * Math.cos(Math.PI - rad);
+  const y = cy - rx * Math.sin(Math.PI - rad);
+  return `M ${cx - rx},${cy} A ${rx},${rx} 0 0 1 ${x},${y}`;
+});
+</script>
+
+<style scoped>
+.workload-progress-ring {
+  width: 168px;
+}
+</style>
diff --git a/packages/web/projects/vgpu/views/card/admin/index.vue b/packages/web/projects/vgpu/views/card/admin/index.vue
index 315bb16e..a8bc6a44 100644
--- a/packages/web/projects/vgpu/views/card/admin/index.vue
+++ b/packages/web/projects/vgpu/views/card/admin/index.vue
@@ -88,8 +88,7 @@ const props = defineProps(['hideTitle', 'filters']);
 
 const router = useRouter();
 const route = useRoute();
-const { t, locale } = useI18n();
-const isEnglish = computed(() => String(locale.value || '').startsWith('en'));
+const { t } = useI18n();
 const parseTypeFromQuery = (value) => {
   if (typeof value === 'string') return value || undefined;
   if (Array.isArray(value) && typeof value[0] === 'string') return value[0] || undefined;
@@ -150,15 +149,16 @@ const getCardStatusDisplay = ({ health, isExternal }) => {
   return { icon: 'status-unschedulable', text: t('card.abnormal') };
 };
 
-const getRemainingTotalText = ({ total, used, unit = '' }) => {
+const getRemainingTotalText = ({ total, used, unit = '', divisor = 1 }) => {
   const totalNum = Number(total || 0);
   if (!totalNum) return null;
   const usedNum = Number(used || 0);
+  const normalizedDivisor = Number(divisor) > 0 ? Number(divisor) : 1;
   const remaining = Math.max(0, totalNum - usedNum);
   const unitText = unit ? ` ${unit}` : '';
   return {
-    remaining: roundToDecimal(remaining, 1),
-    total: roundToDecimal(totalNum, 1),
+    remaining: roundToDecimal(remaining / normalizedDivisor, 1),
+    total: roundToDecimal(totalNum / normalizedDivisor, 1),
     unitText,
   };
 };
@@ -190,7 +190,7 @@ const baseColumns = computed(() => [
   {
     title: t('task.status'),
     dataIndex: 'health',
-    width: 100,
+    width: 150,
     render: ({ health, isExternal }) => {
       const { icon, text } = getCardStatusDisplay({ health, isExternal });
       return (
@@ -201,44 +201,23 @@ const baseColumns = computed(() => [
       );
     },
   },
-  {
-    title: t('card.mode'),
-    dataIndex: 'mode',
-    width: 120,
-    render: ({ mode, type }) => (
-        <t-tag theme="default" variant="light">
-          {type?.split('-')[0] === "NVIDIA" ? mode : 'default'}
-        </t-tag>
-    )
-  },
   {
     title: t('card.node'),
     dataIndex: 'nodeName',
-    width: 170,
+    width: 200,
     hideTooltip: true,
     render: ({ nodeName }) => (
       <ellipsis-text text={nodeName || '--'} mode="middle" tooltip="always" />
     ),
   },
-  {
-    title: t('card.vgpu'),
-    key: 'card-vgpu',
-    dataIndex: 'used',
-    width: 100,
-    render: ({ vgpuTotal, vgpuUsed, isExternal }) => (
-        <span>
-      {isExternal ? '--' : vgpuUsed}/{isExternal ? '--' : vgpuTotal}
-    </span>
-    ),
-  },
   {
     title: t('card.computeRemainingTotal'),
     key: 'card-compute-remaining-total',
     dataIndex: 'used',
-    width: isEnglish.value ? 220 : 180,
+    width: 220,
     render: ({ coreTotal, coreUsed, isExternal }) => {
       if (isExternal || !coreTotal) return <span>--</span>;
-      const stats = getRemainingTotalText({ total: coreTotal, used: coreUsed });
+      const stats = getRemainingTotalText({ total: coreTotal, used: coreUsed, divisor: 100 });
       if (!stats) return <span>--</span>;
       return (
         <div class="card-remaining-statistics">
@@ -254,7 +233,7 @@ const baseColumns = computed(() => [
     title: t('card.computeAllocTotal'),
     key: 'card-compute-allocation',
     dataIndex: 'used',
-    width: isEnglish.value ? 170 : 140,
+    width: 180,
     render: ({ coreTotal, coreUsed, isExternal }) => {
       if (isExternal || !coreTotal) return <span>--</span>;
       const percent = Math.max(
@@ -281,7 +260,7 @@ const baseColumns = computed(() => [
     title: t('card.memoryRemainingTotal'),
     key: 'card-memory-remaining-total',
     dataIndex: 'used',
-    width: isEnglish.value ? 210 : 180,
+    width: 220,
     render: ({ memoryTotal, memoryUsed, isExternal }) => {
       if (isExternal || !memoryTotal) return <span>--</span>;
       const stats = getRemainingTotalText({
@@ -304,7 +283,7 @@ const baseColumns = computed(() => [
     title: t('card.memoryAllocTotal'),
     key: 'card-memory-allocation',
     dataIndex: 'w',
-    width: isEnglish.value ? 160 : 140,
+    width: 180,
     render: ({ memoryTotal, memoryUsed, isExternal }) => {
       if (isExternal || !memoryTotal) return <span>--</span>;
       const percent = Math.max(
diff --git a/packages/web/projects/vgpu/views/monitor/overview/Block.vue b/packages/web/projects/vgpu/views/monitor/overview/Block.vue
index 8f237f54..6c2f88e2 100644
--- a/packages/web/projects/vgpu/views/monitor/overview/Block.vue
+++ b/packages/web/projects/vgpu/views/monitor/overview/Block.vue
@@ -16,9 +16,9 @@ defineProps(['title']);
 
 <style scoped lang="scss">
 .home-block {
-  border-radius: 8px;
+  border-radius: 12px;
   background: #fff;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #e4ebf1;
   padding: 20px;
   &-header {
     display: flex;
diff --git a/packages/web/projects/vgpu/views/monitor/overview/getOptions.js b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
index 6debf5c6..fb6d2073 100644
--- a/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
+++ b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
@@ -285,7 +285,7 @@ export const handleChartClick = async (params, router) => {
   }
 };
 
-const CARD_PIE_COLORS = ['#5470c6', '#91cc75', '#2563EB', '#16A34A', '#7dd3fc', '#86efac'];
+const CARD_PIE_COLORS = ['#76B900', '#9FCB98', '#F59E0B', '#4F8F87', '#14B8A6', '#6B7280'];
 
 export const getCardOptions = (list, chartWidth) => {
   const data = list.reduce((all, current) => {
@@ -520,11 +520,13 @@ export const getLineOptions = ({
 export const getRangeOptions = (data) => {
   if (!data || !data[0] || !data[0].data) {
     return {
+      animation: true,
       series: [],
     };
   }
 
   return {
+    animation: true,
     legend: {
       // data: [],
       bottom: 10,
@@ -533,21 +535,26 @@ export const getRangeOptions = (data) => {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross',
+        type: 'line',
       },
       formatter: function (params) {
-        if (!params || params.length === 0) return '';
-        var res = params[0].name + '<br/>';
-        for (var i = 0; i < params.length; i++) {
-          res +=
-            params[i].marker +
-            params[i].seriesName +
-            ' : ' +
-            (+params[i].value).toFixed(0) +
-            '<br/>';
-        }
+        if (!Array.isArray(params) || params.length === 0) return '';
 
-        return res;
+        let result = `<div style="margin-bottom:5px;">${params[0]?.name ?? ''}</div>`;
+        for (let i = 0; i < params.length; i++) {
+          const item = params[i];
+          const raw = Array.isArray(item?.value) ? item.value[item.value.length - 1] : item?.value;
+          const num = Number(raw);
+          const value = Number.isFinite(num) ? `${num.toFixed(3)}%` : '-';
+          result += `
+            <div style="display:flex;align-items:center;font-size:14px;line-height:22px;">
+              <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${item?.color || '#5B8FF9'};margin-right:5px;"></span>
+              <span>${item?.seriesName || '-'}:&nbsp;</span>
+              <span style="font-weight:bold;">${value}</span>
+            </div>
+          `;
+        }
+        return result;
       },
     },
     grid: {
@@ -556,6 +563,13 @@ export const getRangeOptions = (data) => {
       left: '7%', // 左边距
       right: 10, // 右边距
     },
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        filterMode: 'none',
+      },
+    ],
     xAxis: {
       type: 'category',
       data: data[0].data.map((item) => timeParse(+item.timestamp)),
diff --git a/packages/web/projects/vgpu/views/monitor/overview/index.vue b/packages/web/projects/vgpu/views/monitor/overview/index.vue
index 168e9b2f..a1311ac3 100644
--- a/packages/web/projects/vgpu/views/monitor/overview/index.vue
+++ b/packages/web/projects/vgpu/views/monitor/overview/index.vue
@@ -18,16 +18,12 @@
         </Block>
 
         <Block :title="$t('dashboard.resourceOverview')">
-          <template #extra>
-            <div class="all-btn" @click="router.push('/admin/vgpu/card/admin')">
-              {{ $t('dashboard.viewAll') }}<svg-icon icon="more" style="margin-left: 4px" />
-            </div>
-          </template>
           <ul class="resourceOverview">
             <li
               v-for="{ title, count, icon, to, unit } in resourceOverview"
               :key="title"
-              @click="router.push(to)"
+              :class="{ 'is-clickable': !!to }"
+              @click="to && router.push(to)"
             >
               <div class="avatar">
                 <svg-icon :icon="icon" />
@@ -73,9 +69,10 @@
             </div>
           </template>
           <div class="card-type-chart">
-            <echarts-plus
-              :options="getCardOptions(cardData, chartWidth)"
-              :onClick="handlePieClick"
+            <VChart
+              :option="getCardOptions(cardData, chartWidth)"
+              :autoresize="true"
+              @click="handlePieClick"
             />
           </div>
         </Block>
@@ -89,16 +86,18 @@
       <div class="home-bottom-row" v-if="rangeConfig[0] || rangeConfig[1]">
         <div class="home-bottom-col" v-if="rangeConfig[0]">
           <Block :title="rangeConfig[0].title">
-            <echarts-plus
-              :options="getRangeOptions(rangeConfig[0].dataSource)"
+            <VChart
+              :option="getRangeOptions(rangeConfig[0].dataSource)"
+              :autoresize="true"
               style="height: 250px"
             />
           </Block>
         </div>
         <div class="home-bottom-col" v-if="rangeConfig[1]">
           <Block :title="rangeConfig[1].title">
-            <echarts-plus
-              :options="getRangeOptions(rangeConfig[1].dataSource)"
+            <VChart
+              :option="getRangeOptions(rangeConfig[1].dataSource)"
+              :autoresize="true"
               style="height: 250px"
             />
           </Block>
@@ -118,14 +117,47 @@
             :onClick="(params) => handleChartClick(params, router)"
           />
         </div>
+        <div class="home-bottom-col">
+          <Block :title="t('dashboard.nodeWorkloadTop5')">
+            <t-table
+              :columns="nodeWorkloadColumns"
+              :data="nodeWorkloadTop5TableData"
+              row-key="name"
+              row-class-name="top5-item-list-table-row"
+              class="top5-item-list-table"
+              :bordered="false"
+            />
+          </Block>
+        </div>
+        <div class="home-bottom-col">
+          <Block :title="t('dashboard.nodeWorkloadDistribution')" class="workload-distribution-block">
+            <template #extra>
+              <t-tooltip>
+                <template #content>
+                  <div class="workload-distribution-tooltip">
+                    <div>{{ t('dashboard.nodeWorkloadDistributionDesc1') }}</div>
+                    <div>{{ t('dashboard.nodeWorkloadDistributionDesc2') }}</div>
+                  </div>
+                </template>
+                <svg-icon icon="help-circle" class="workload-distribution-tip-icon" />
+              </t-tooltip>
+            </template>
+            <VChart
+              :option="nodeWorkloadDistributionOptions"
+              :autoresize="true"
+              style="height: 250px"
+            />
+          </Block>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, reactive, watch, watchEffect } from 'vue';
+import { ref, computed, reactive, watch, watchEffect, onMounted, h, resolveComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
+import VChart from 'vue-echarts';
 import {
   getCardOptions,
   handleChartClick,
@@ -137,9 +169,9 @@ import { timeParse, calculatePrometheusStep } from '@/utils';
 import { useRouter } from 'vue-router';
 import nodeApi from '~/vgpu/api/node';
 import cardApi from '~/vgpu/api/card';
+import taskApi from '~/vgpu/api/task';
 import useInstantVector from '~/vgpu/hooks/useInstantVector';
 import useFetchList from '@/hooks/useFetchList';
-import EchartsPlus from '@/components/Echarts-plus.vue';
 import TabTop from '~/vgpu/components/TabTop.vue';
 import Gauge from '~/vgpu/components/gauge.vue';
 import { getRangeConfigInit } from './config';
@@ -162,6 +194,167 @@ const handlePieClick = (params) => {
 
 const chartWidth = ref(200);
 
+const nodeWorkloadTop5Rows = ref([]);
+const nodeWorkloadDistributionRows = ref([]);
+const nodeWorkloadColumns = computed(() => [
+  {
+    colKey: 'index',
+    title: '',
+    width: 56,
+    cell: (_h, { row }) => {
+      const Tag = resolveComponent('t-tag');
+      return h(Tag, { class: 'row-tag' }, () => row.index);
+    },
+  },
+  {
+    colKey: 'name',
+    title: t('dashboard.node'),
+    ellipsis: {
+      props: { theme: 'default' },
+      content: (_h, cellParams) => cellParams.row.name,
+    },
+    cell: (_h, { row }) =>
+      h(
+        'span',
+        {
+          class: 'node-workload-name-link',
+          onClick: (e) => {
+            e.stopPropagation();
+            handleChartClick({ data: row }, router);
+          },
+        },
+        row.name,
+      ),
+  },
+  {
+    colKey: 'value',
+    title: t('dashboard.workloadCount'),
+  },
+]);
+const nodeWorkloadTop5TableData = computed(() =>
+  nodeWorkloadTop5Rows.value.map((item, idx) => ({
+    ...item,
+    index: idx + 1,
+  })),
+);
+
+const nodeWorkloadDistributionOptions = computed(() => {
+  const rows = nodeWorkloadDistributionRows.value || [];
+  const bucketSize = 10;
+  const maxValue = rows.length ? Math.max(...rows.map((item) => Number(item.value) || 0)) : 0;
+  const bucketCount = Math.max(1, Math.floor(maxValue / bucketSize) + 1);
+
+  const xData = Array.from({ length: bucketCount }, (_, idx) => {
+    const start = idx * bucketSize;
+    const end = start + bucketSize - 1;
+    return `${start}-${end}`;
+  });
+  const yData = new Array(bucketCount).fill(0);
+
+  rows.forEach((item) => {
+    const value = Number(item.value) || 0;
+    const bucketIdx = Math.min(Math.floor(value / bucketSize), bucketCount - 1);
+    yData[bucketIdx] += 1;
+  });
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: (item) => {
+        if (!item) return '';
+        const unit = t('common.unitCount');
+        return `${t('dashboard.workloadRange')}: ${item.name}<br/>${t('dashboard.nodeTotal')}: ${Number(item.value || 0)}${unit}`;
+      },
+    },
+    grid: {
+      left: 25,
+      right: 25,
+      top: 20,
+      bottom: 8,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisTick: {
+        alignWithLabel: true,
+      },
+      axisLabel: {
+        color: '#697886',
+      },
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        filterMode: 'none',
+      },
+    ],
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      max: 5,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#697886',
+      },
+    },
+    series: [
+      {
+        data: yData,
+        type: 'bar',
+        barWidth: 24,
+        barCategoryGap: '75',
+        itemStyle: {
+          color: '#5B8FF9',
+        },
+      },
+    ],
+  };
+});
+
+const fetchNodeWorkloadTop5 = () => {
+  cardApi
+    .getInstantVector({
+      query:
+        'topk(5, count(count by (node, container_pod_uuid) (hami_container_vgpu_allocated{})) by (node))',
+    })
+    .then((res) => {
+      nodeWorkloadTop5Rows.value = (res?.data || [])
+        .map((item) => ({
+          name: item?.metric?.node || '-',
+          value: Number(item?.value || 0),
+        }))
+        .sort((a, b) => b.value - a.value)
+        .slice(0, 5);
+    })
+    .catch(() => {
+      nodeWorkloadTop5Rows.value = [];
+    });
+};
+
+const fetchNodeWorkloadDistribution = () => {
+  cardApi
+    .getInstantVector({
+      query: 'count(count by (node, container_pod_uuid) (hami_container_vgpu_allocated{})) by (node)',
+    })
+    .then((res) => {
+      nodeWorkloadDistributionRows.value = (res?.data || [])
+        .map((item) => ({
+          name: item?.metric?.node || '-',
+          value: Number(item?.value || 0),
+        }))
+        .sort((a, b) => b.value - a.value);
+    })
+    .catch(() => {
+      nodeWorkloadDistributionRows.value = [];
+    });
+};
+
 // Use a base config object for non-reactive parts or keep useInstantVector
 // But useInstantVector likely returns a ref. We need to update titles.
 // Since useInstantVector is a custom hook, let's see if we can wrap the titles in computed or update them.
@@ -224,6 +417,19 @@ const _cardGaugeConfig = useInstantVector([
   },
 ]);
 
+const clusterResourceConfig = useInstantVector([
+  {
+    query: 'sum(kube_node_status_allocatable{resource="cpu"})',
+    total: 0,
+    used: 0,
+  },
+  {
+    query: 'sum(kube_node_status_allocatable{resource="memory"})',
+    total: 0,
+    used: 0,
+  },
+]);
+
 const cardGaugeConfig = computed(() => {
   return _cardGaugeConfig.value.map(item => ({
     ...item,
@@ -236,9 +442,10 @@ const cardGaugeConfig = computed(() => {
 const resourceCounts = reactive({
   node: 0,
   card: 0,
-  vgpu: 0,
-  compute: 12,
-  memory: 31
+  workload: 0,
+  cpuTotal: 0,
+  memoryTotal: 0,
+  memory: 0,
 });
 
 const resourceOverview = computed(() => [
@@ -247,24 +454,27 @@ const resourceOverview = computed(() => [
     count: resourceCounts.node,
     icon: 'vgpu-node',
     unit: '',
+    to: '/admin/vgpu/node/admin',
   },
   {
     title: t('dashboard.gpuCardCount'),
     count: resourceCounts.card,
     icon: 'vgpu-gpu-d',
     unit: '',
+    to: '/admin/vgpu/card/admin',
   },
   {
-    title: t('dashboard.vgpu'),
-    count: resourceCounts.vgpu,
+    title: t('dashboard.cpuTotalCores'),
+    count: resourceCounts.cpuTotal,
     icon: 'vgpu-card',
-    unit: '',
+    unit: t('dashboard.cpuCoreUnit'),
   },
   {
-    title: t('dashboard.compute'),
-    count: resourceCounts.compute,
-    icon: 'vgpu-core',
-    unit: ' ',
+    title: t('dashboard.workloadCount'),
+    count: resourceCounts.workload,
+    icon: 'vgpu-workload',
+    unit: '',
+    to: '/admin/vgpu/task/admin',
   },
   {
     title: t('dashboard.memoryTotal'),
@@ -272,6 +482,12 @@ const resourceOverview = computed(() => [
     icon: 'vgpu-mem',
     unit: 'GiB',
   },
+  {
+    title: t('dashboard.systemMemoryTotal'),
+    count: resourceCounts.memoryTotal,
+    icon: 'vgpu-core',
+    unit: 'GiB',
+  },
 ]);
 
 // Node Config
@@ -296,6 +512,8 @@ const nodeData = useFetchList(nodeApi.getNodeListReq({ filters: {} }));
 
 const cardData = useFetchList(cardApi.getCardListReq({ filters: {} }));
 
+const taskData = useFetchList(taskApi.getTaskListReq({ filters: {} }), 'items');
+
 const nodes = computed(() => [
 
   {
@@ -360,6 +578,7 @@ const nodeMemoryTop5 = computed(() => ({
   ],
 }));
 
+
 const rangeConfig = ref(getRangeConfigInit(t));
 
 const fetchRangeData = () => {
@@ -392,8 +611,9 @@ const fetchRangeData = () => {
 watchEffect(() => {
   resourceCounts.node = nodeData.value.length;
   resourceCounts.card = cardData.value.length;
-  resourceCounts.vgpu = _cardGaugeConfig.value[0].total;
-  resourceCounts.compute = _cardGaugeConfig.value[1].total;
+  resourceCounts.workload = taskData.value.length;
+  resourceCounts.cpuTotal = Number(clusterResourceConfig.value[0]?.used || 0).toFixed(0);
+  resourceCounts.memoryTotal = (Number(clusterResourceConfig.value[1]?.used || 0) / 1024 / 1024 / 1024).toFixed(0);
   resourceCounts.memory = _cardGaugeConfig.value[2].total.toFixed(0);
 });
 
@@ -421,6 +641,12 @@ watch(
     rangeConfig.value = next;
   },
 );
+
+onMounted(() => {
+  fetchNodeWorkloadTop5();
+  fetchNodeWorkloadDistribution();
+});
+
 </script>
 
 <style>
diff --git a/packages/web/projects/vgpu/views/monitor/overview/style.scss b/packages/web/projects/vgpu/views/monitor/overview/style.scss
index 098cb178..7670c437 100644
--- a/packages/web/projects/vgpu/views/monitor/overview/style.scss
+++ b/packages/web/projects/vgpu/views/monitor/overview/style.scss
@@ -82,6 +82,19 @@
   &-bottom-top5-row {
     border-top: 1px dashed #d1d9e0;
     padding-top: 16px;
+    flex-wrap: wrap;
+
+    .home-bottom-col {
+      flex: 1 0 48%;
+      width: 48%;
+      min-width: 0;
+      display: flex;
+
+      > .home-block {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   &-bottom-col {
@@ -115,7 +128,7 @@
 
   .resourceOverview {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px;
 
     li {
@@ -132,6 +145,10 @@
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
       }
 
+      &.is-clickable {
+        cursor: pointer;
+      }
+
       .avatar {
         display: flex;
         width: 40px;
@@ -147,6 +164,11 @@
         box-shadow: 0 2px 8px #0205080a, 0 6px 20px #02050814;
         margin-right: 14px;
         color: #64748b;
+
+        .svg-icon {
+          width: 14px;
+          height: 14px;
+        }
       }
 
       .main {
@@ -211,4 +233,84 @@
     }
   }
 
+  .workload-distribution-tip-icon {
+    width: 16px;
+    height: 16px;
+    color: #939ea9;
+    cursor: pointer;
+  }
+
+  .workload-distribution-block .home-block-header {
+    justify-content: flex-start;
+    gap: 6px;
+  }
+
+  .workload-trend-radio.t-radio-group__outline .t-radio-button {
+    padding: 12px;
+    height: 32px;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+
+  .top5-item-list-table .t-table {
+    border: none;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-top: 8px;
+  }
+
+  .top5-item-list-table .t-table__header th {
+    padding: 10px 16px;
+    background: #f5f7fa;
+    color: #697886;
+    border-bottom: none;
+  }
+
+  .top5-item-list-table-row td {
+    padding: 12px 16px;
+    border-bottom: none;
+    background: transparent;
+  }
+
+  .top5-item-list-table .t-table__body tr:nth-child(even) td {
+    background: #f5f7fa;
+  }
+
+  .top5-item-list-table .t-table__body tr:nth-child(odd) td {
+    background: #fff;
+  }
+
+  .top5-item-list-table .t-table__header th:first-child,
+  .top5-item-list-table .t-table__body td:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+
+  .top5-item-list-table .t-table__header th:last-child,
+  .top5-item-list-table .t-table__body td:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
+  .top5-item-list-table-row .row-tag.t-tag {
+    font-size: 12px;
+    border-radius: 999px;
+    min-width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    padding: 0 8px;
+  }
+
+  .node-workload-name-link {
+    color: #324558;
+    cursor: pointer;
+
+    &:hover {
+      color: #2563eb;
+      text-decoration: underline;
+      text-decoration-skip-ink: none;
+      text-underline-offset: 4px;
+    }
+  }
 }
diff --git a/packages/web/projects/vgpu/views/node/admin/Detail.vue b/packages/web/projects/vgpu/views/node/admin/Detail.vue
index 1bd88bb0..cfb985cc 100644
--- a/packages/web/projects/vgpu/views/node/admin/Detail.vue
+++ b/packages/web/projects/vgpu/views/node/admin/Detail.vue
@@ -1,200 +1,194 @@
 <template>
   <div>
-    <back-header>
-      {{ $t('node.detail.title') }} : {{ detail.name }}
-    </back-header>
-
-    <block-box class="node-block">
-      <div class="node-detail" :class="{ 'is-en': locale.startsWith('en') }">
-        <div class="node-detail-left">
-          <div class="title">{{ $t('node.detail.detailInfo') }}</div>
-          <ul class="node-detail-info">
-            <li v-for="{ label, value, render } in detailColumns" :key="label">
-              <span class="label">{{ label }}：</span>
-              <span v-if="render" class="value">
-                <component :is="render(detail)" />
-              </span>
-              <span v-else class="value">{{ detail[value] }}</span>
-            </li>
-          </ul>
+    <page-header
+      :title="$t('node.detail.title')"
+      :name="detail.name"
+      :status="headerStatusDisplay.text"
+      :status-icon="headerStatusDisplay.icon"
+    />
+
+    <section class="node-overview-wrap">
+      <div class="node-overview-panel">
+        <div class="node-detail" :class="{ 'is-en': locale.startsWith('en') }">
+          <div class="node-detail-left">
+            <div class="title">{{ $t('node.detail.nodeOverview') }}</div>
+            <div class="node-detail-info-summary node-detail-info-summary-cols">
+              <div
+                v-for="(group, groupIndex) in detailColumnGroups"
+                :key="groupIndex"
+                class="summary-col"
+              >
+                <div
+                  v-for="{ label, value, render } in group"
+                  :key="label"
+                  class="summary-item"
+                >
+                  <div class="summary-item-label">{{ label }}</div>
+                  <div v-if="render" class="summary-item-value">
+                    <component :is="render(detail)" />
+                  </div>
+                  <div v-else class="summary-item-value">{{ detail[value] }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </block-box>
-
-    <block-box :title="$t('node.detail.resourceOverview')">
-      <ul class="resource-overview-cards">
-        <li class="resource-overview-card">
-          <div class="resource-card">
-            <div class="resource-card-header">
-              <div class="resource-card-icon">
-                <svg-icon icon="vgpu-core" />
-              </div>
-              <div class="resource-card-header-info">
-                <div class="resource-card-value resource-card-value--compute">
-                  {{ computePowerTotalText }}
+
+      <div class="node-overview-panel node-workload-panel">
+        <div class="title">{{ $t('node.detail.resourceOverview') }}</div>
+        <ul class="node-system-resource-cards">
+          <li class="resource-overview-card">
+            <div class="resource-card">
+              <div class="resource-card-header">
+                <div class="resource-card-icon">
+                  <svg-icon icon="vgpu-core" />
                 </div>
-                <div class="resource-card-sub-title">
-                  {{ $t('dashboard.computePowerTotal') }}
+                <div class="resource-card-header-info">
+                  <div class="resource-card-value resource-card-value--compute">
+                    {{ computePowerTotalText }}
+                  </div>
+                  <div class="resource-card-sub-title">
+                    {{ $t('dashboard.computePowerTotal') }}
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div class="resource-card-footer">
-              <div class="resource-card-rate-wrap">
-                <div class="resource-card-footer-item">
-                  <div class="resource-card-footer-title">{{ $t('dashboard.allocRateLegend') }}</div>
-                  <div class="resource-card-footer-value">
-                    <span class="resource-card-footer-percent">{{ computeAllocPercentText }}</span>
-                    <t-progress
-                      v-if="computeAllocPercentProgress !== undefined"
-                      theme="circle"
-                      :percentage="computeAllocPercentProgressRounded"
-                      size="24"
-                      :color="getResourceColor(computeAllocPercentProgress)"
-                      :label="false"
-                    />
+              <div class="resource-card-footer">
+                <div class="resource-card-rate-wrap">
+                  <div class="resource-card-footer-item">
+                    <div class="resource-card-footer-title">{{ $t('dashboard.allocRateLegend') }}</div>
+                    <div class="resource-card-footer-value">
+                      <span class="resource-card-footer-percent">{{ computeAllocPercentText }}</span>
+                      <t-progress
+                        v-if="computeAllocPercentProgress !== undefined"
+                        theme="circle"
+                        :percentage="computeAllocPercentProgressRounded"
+                        size="24"
+                        :color="getResourceColor(computeAllocPercentProgress)"
+                        :label="false"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div class="resource-card-rate-wrap">
-                <div class="resource-card-footer-item">
-                  <div class="resource-card-footer-title">{{ $t('dashboard.usageRateLegend') }}</div>
-                  <div class="resource-card-footer-value">
-                    <span class="resource-card-footer-percent">{{ computeUsagePercentText }}</span>
-                    <t-progress
-                      v-if="computeUsagePercentProgress !== undefined"
-                      theme="circle"
-                      :percentage="computeUsagePercentProgressRounded"
-                      size="24"
-                      :color="getResourceColor(computeUsagePercentProgress)"
-                      :label="false"
-                    />
+                <div class="resource-card-rate-wrap">
+                  <div class="resource-card-footer-item">
+                    <div class="resource-card-footer-title">{{ $t('dashboard.usageRateLegend') }}</div>
+                    <div class="resource-card-footer-value">
+                      <span class="resource-card-footer-percent">{{ computeUsagePercentText }}</span>
+                      <t-progress
+                        v-if="computeUsagePercentProgress !== undefined"
+                        theme="circle"
+                        :percentage="computeUsagePercentProgressRounded"
+                        size="24"
+                        :color="getResourceColor(computeUsagePercentProgress)"
+                        :label="false"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </li>
+          </li>
 
-        <li class="resource-overview-card">
-          <div class="resource-card">
-            <div class="resource-card-header">
-              <div class="resource-card-icon">
-                <svg-icon icon="vgpu-mem" />
-              </div>
-              <div class="resource-card-header-info">
-                <div class="resource-card-value resource-card-value--compute">{{ gpuMemoryTotalText }}</div>
-                <div class="resource-card-sub-title">
-                  {{ $t('dashboard.memoryTotal') }}
+          <li class="resource-overview-card">
+            <div class="resource-card">
+              <div class="resource-card-header">
+                <div class="resource-card-icon">
+                  <svg-icon icon="vgpu-mem" />
+                </div>
+                <div class="resource-card-header-info">
+                  <div class="resource-card-value resource-card-value--compute">
+                    {{ gpuMemoryTotalText }}
+                  </div>
+                  <div class="resource-card-sub-title">
+                    {{ $t('dashboard.memoryTotal') }}
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div class="resource-card-footer">
-              <div class="resource-card-rate-wrap">
-                <div class="resource-card-footer-item">
-                  <div class="resource-card-footer-title">{{ $t('dashboard.allocRateLegend') }}</div>
-                  <div class="resource-card-footer-value">
-                    <span class="resource-card-footer-percent">{{ memoryAllocPercentText }}</span>
-                    <t-progress
-                      v-if="memoryAllocPercentProgress !== undefined"
-                      theme="circle"
-                      :percentage="memoryAllocPercentProgressRounded"
-                      size="24"
-                      :color="getResourceColor(memoryAllocPercentProgress)"
-                      :label="false"
-                    />
+              <div class="resource-card-footer">
+                <div class="resource-card-rate-wrap">
+                  <div class="resource-card-footer-item">
+                    <div class="resource-card-footer-title">{{ $t('dashboard.allocRateLegend') }}</div>
+                    <div class="resource-card-footer-value">
+                      <span class="resource-card-footer-percent">{{ memoryAllocPercentText }}</span>
+                      <t-progress
+                        v-if="memoryAllocPercentProgress !== undefined"
+                        theme="circle"
+                        :percentage="memoryAllocPercentProgressRounded"
+                        size="24"
+                        :color="getResourceColor(memoryAllocPercentProgress)"
+                        :label="false"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div class="resource-card-rate-wrap">
-                <div class="resource-card-footer-item">
-                  <div class="resource-card-footer-title">{{ $t('dashboard.usageRateLegend') }}</div>
-                  <div class="resource-card-footer-value">
-                    <span class="resource-card-footer-percent">{{ memoryUsagePercentText }}</span>
-                    <t-progress
-                      v-if="memoryUsagePercentProgress !== undefined"
-                      theme="circle"
-                      :percentage="memoryUsagePercentProgressRounded"
-                      size="24"
-                      :color="getResourceColor(memoryUsagePercentProgress)"
-                      :label="false"
-                    />
+                <div class="resource-card-rate-wrap">
+                  <div class="resource-card-footer-item">
+                    <div class="resource-card-footer-title">{{ $t('dashboard.usageRateLegend') }}</div>
+                    <div class="resource-card-footer-value">
+                      <span class="resource-card-footer-percent">{{ memoryUsagePercentText }}</span>
+                      <t-progress
+                        v-if="memoryUsagePercentProgress !== undefined"
+                        theme="circle"
+                        :percentage="memoryUsagePercentProgressRounded"
+                        size="24"
+                        :color="getResourceColor(memoryUsagePercentProgress)"
+                        :label="false"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </li>
-      </ul>
-    </block-box>
+          </li>
+        </ul>
+      </div>
+    </section>
 
     <trend-time-filter v-model="times" />
 
     <div class="line-box">
       <block-box :title="$t('dashboard.gpuComputeAllocUsageTrend')">
         <div class="trend-chart">
-          <echarts-plus
-              :options="
+          <VChart
+              :option="
               getRangeOptions({
                 allocation: gaugeConfig[0].data,
                 usage: gaugeConfig[2].data,
               }, t)
             "
+            :autoresize="true"
           />
         </div>
       </block-box>
       <block-box :title="$t('dashboard.gpuMemAllocUsageTrend')">
         <div class="trend-chart">
-          <echarts-plus
-            :options="
+          <VChart
+            :option="
               getRangeOptions({
                 allocation: gaugeConfig[1].data,
                 usage: gaugeConfig[3].data,
               }, t)
             "
+            :autoresize="true"
           />
         </div>
       </block-box>
     </div>
-
-    <block-box :title="$t('routes.cards')">
-      <CardList
-        v-if="detail.uid && detail.name"
-        :key="`${locale}-${detail.uid}`"
-        :hideTitle="true"
-        :filters="{ nodeName: detail.name }"
-      />
-    </block-box>
-
-    <block-box :title="$t('routes.tasks')">
-      <template v-if="detail.isExternal">
-        <el-alert :title="$t('node.detail.unmanagedNoTask')" show-icon type="warning" :closable="false" />
-        <el-empty :description="$t('node.detail.noTaskData')" :image-size="100" />
-      </template>
-      <template v-else>
-        <TaskList
-          v-if="detail.uid"
-          :key="`${locale}-${detail.uid}`"
-          :hideTitle="true"
-          :filters="{ nodeUid: detail.uid, nodeName: detail.name }"
-        />
-      </template>
-    </block-box>
   </div>
 </template>
 
 <script setup lang="jsx">
-import BackHeader from '@/components/BackHeader.vue';
+import PageHeader from '@/components/PageHeader.vue';
 import { useRoute } from 'vue-router';
 import BlockBox from '@/components/BlockBox.vue';
 import { computed, onMounted, ref } from 'vue';
-import CardList from '~/vgpu/views/card/admin/index.vue';
-import TaskList from '~/vgpu/views/task/admin/index.vue';
 import useInstantVector from '~/vgpu/hooks/useInstantVector';
-import EchartsPlus from '@/components/Echarts-plus.vue';
+import VChart from 'vue-echarts';
 import nodeApi from '~/vgpu/api/node';
 import { getRangeOptions } from './getOptions';
 import { useI18n } from 'vue-i18n';
@@ -301,84 +295,71 @@ const memoryUsagePercentRaw = computed(() => {
 
 const clampPercent = (v) => Math.max(0, Math.min(100, v));
 const roundPercentForProgress = (p) => (p === undefined ? undefined : roundToDecimal(p, 2));
+const buildPercentViews = (rawComputed) => {
+  const progress = computed(() => {
+    const p = rawComputed.value;
+    return p === undefined ? undefined : clampPercent(p);
+  });
+  const progressRounded = computed(() => roundPercentForProgress(progress.value));
+  const text = computed(() => {
+    const p = rawComputed.value;
+    return p === undefined ? '--' : `${Number(p).toFixed(2)}%`;
+  });
+  return { progress, progressRounded, text };
+};
 
-const computeAllocPercentProgress = computed(() => {
-  const p = computeAllocPercentRaw.value;
-  return p === undefined ? undefined : clampPercent(p);
-});
-
-const computeUsagePercentProgress = computed(() => {
-  const p = computeUsagePercentRaw.value;
-  return p === undefined ? undefined : clampPercent(p);
-});
-
-const memoryAllocPercentProgress = computed(() => {
-  const p = memoryAllocPercentRaw.value;
-  return p === undefined ? undefined : clampPercent(p);
-});
-
-const memoryUsagePercentProgress = computed(() => {
-  const p = memoryUsagePercentRaw.value;
-  return p === undefined ? undefined : clampPercent(p);
-});
-
-const computeAllocPercentProgressRounded = computed(() => roundPercentForProgress(computeAllocPercentProgress.value));
-const computeUsagePercentProgressRounded = computed(() => roundPercentForProgress(computeUsagePercentProgress.value));
-const memoryAllocPercentProgressRounded = computed(() => roundPercentForProgress(memoryAllocPercentProgress.value));
-const memoryUsagePercentProgressRounded = computed(() => roundPercentForProgress(memoryUsagePercentProgress.value));
+const {
+  progress: computeAllocPercentProgress,
+  progressRounded: computeAllocPercentProgressRounded,
+  text: computeAllocPercentText,
+} = buildPercentViews(computeAllocPercentRaw);
+const {
+  progress: computeUsagePercentProgress,
+  progressRounded: computeUsagePercentProgressRounded,
+  text: computeUsagePercentText,
+} = buildPercentViews(computeUsagePercentRaw);
+const {
+  progress: memoryAllocPercentProgress,
+  progressRounded: memoryAllocPercentProgressRounded,
+  text: memoryAllocPercentText,
+} = buildPercentViews(memoryAllocPercentRaw);
+const {
+  progress: memoryUsagePercentProgress,
+  progressRounded: memoryUsagePercentProgressRounded,
+  text: memoryUsagePercentText,
+} = buildPercentViews(memoryUsagePercentRaw);
 
 const computePowerTotalText = computed(() => {
   const v = computePowerTotal.value;
-  return v === undefined ? '--' : `${v}`;
+  return v === undefined ? '--' : `${roundToDecimal(v / 100, 1)}`;
 });
 
 const gpuMemoryTotalText = computed(() => {
   const v = gpuMemoryTotal.value;
-  return v === undefined ? '--' : `${v} GiB`;
+  return v === undefined ? '--' : `${Number(v).toFixed(2)} GiB`;
 });
 
-const computeAllocPercentText = computed(() => {
-  const p = computeAllocPercentRaw.value;
-  return p === undefined ? '--' : `${roundToDecimal(p, 2)}%`;
-});
+const headerStatusDisplay = computed(() =>
+  getNodeStatusDisplay({
+    isSchedulable: detail.value?.isSchedulable,
+    isExternal: detail.value?.isExternal,
+  }),
+);
 
-const computeUsagePercentText = computed(() => {
-  const p = computeUsagePercentRaw.value;
-  return p === undefined ? '--' : `${roundToDecimal(p, 2)}%`;
-});
+const getNodeStatusDisplay = ({ isSchedulable, isExternal }) => {
+  if (isExternal || isSchedulable === undefined || isSchedulable === null) {
+    return { icon: 'status-unmanaged', text: t('node.unknown') };
+  }
+  if (isSchedulable) {
+    return { icon: 'status-schedulable', text: t('node.normal') };
+  }
+  return { icon: 'status-unschedulable', text: t('node.abnormal') };
+};
 
-const memoryAllocPercentText = computed(() => {
-  const p = memoryAllocPercentRaw.value;
-  return p === undefined ? '--' : `${roundToDecimal(p, 2)}%`;
-});
 
-const memoryUsagePercentText = computed(() => {
-  const p = memoryUsagePercentRaw.value;
-  return p === undefined ? '--' : `${roundToDecimal(p, 2)}%`;
-});
+const toDisplayText = (value) => (value === '' || value === undefined || value === null ? '--' : value);
 
 const detailColumns = computed(() => [
-  {
-    label: t('node.status'),
-    value: 'status',
-    render: ({ isSchedulable, isExternal }) => {
-      if (!detail.value) {
-        return <el-tag disable-transitions size="small" type="info">{t('node.detail.loading')}</el-tag>;
-      }
-      const icon = isExternal || isSchedulable === undefined || isSchedulable === null
-        ? 'status-unmanaged'
-        : (isSchedulable ? 'status-schedulable' : 'status-unschedulable');
-      const text = isExternal || isSchedulable === undefined || isSchedulable === null
-        ? t('node.unknown')
-        : (isSchedulable ? t('node.normal') : t('node.abnormal'));
-      return (
-        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
-          <svg-icon icon={icon} style={{ fontSize: '16px' }} />
-          <span>{text}</span>
-        </span>
-      );
-    },
-  },
   {
     label: t('node.detail.nodeIpAddress'),
     value: 'ip',
@@ -391,89 +372,56 @@ const detailColumns = computed(() => [
       <ellipsis-text text={uid || '--'} mode="middle" tooltip="always" />
     ),
   },
-  {
-    label: t('node.detail.osType'),
-    value: 'operatingSystem',
-    render: ({ operatingSystem }) => (
-        <span>
-          {operatingSystem==='' ? '--' : operatingSystem}
-        </span>
-    ),
-  },
-  {
-    label: t('node.detail.architecture'),
-    value: 'architecture',
-    render: ({ architecture }) => (
-        <span>
-          {architecture==='' ? '--' : architecture}
-        </span>
-    ),
-  },
-  {
-    label: t('node.detail.kubeletVersion'),
-    value: 'kubeletVersion',
-    render: ({ kubeletVersion }) => (
-        <span>
-          {kubeletVersion==='' ? '--' : kubeletVersion}
-        </span>
-    ),
-  },
   {
     label: t('node.detail.osVersion'),
     value: 'osImage',
     render: ({ osImage }) => (
-        <span>
-          {osImage==='' ? '--' : osImage}
-        </span>
+      <span>{toDisplayText(osImage)}</span>
     ),
   },
   {
-    label: t('node.detail.kernelVersion'),
-    value: 'kernelVersion',
-    render: ({ kernelVersion }) => (
-        <span>
-          {kernelVersion==='' ? '--' : kernelVersion}
-        </span>
-    ),
-  },
-  {
-    label: t('node.detail.kubeProxyVersion'),
-    value: 'kubeProxyVersion',
-    render: ({ kubeProxyVersion }) => (
-        <span>
-          {kubeProxyVersion==='' ? '--' : kubeProxyVersion}
-        </span>
+    label: t('node.detail.kubeletVersion'),
+    value: 'kubeletVersion',
+    render: ({ kubeletVersion }) => (
+      <span>{toDisplayText(kubeletVersion)}</span>
     ),
   },
   {
     label: t('node.detail.containerRuntime'),
     value: 'containerRuntimeVersion',
     render: ({ containerRuntimeVersion }) => (
-        <span>
-          {containerRuntimeVersion==='' ? '--' : containerRuntimeVersion}
-        </span>
+      <span>{toDisplayText(containerRuntimeVersion)}</span>
+    ),
+  },
+  {
+    label: t('node.detail.architecture'),
+    value: 'architecture',
+    render: ({ architecture }) => (
+      <span>{toDisplayText(architecture)}</span>
     ),
   },
   {
-    label: t('node.cardCount'),
-    value: 'cardCnt',
-    render: ({ cardCnt }) => (
-        <span>
-          {cardCnt==='' ? '--' : cardCnt}
-        </span>
+    label: t('node.detail.kernelVersion'),
+    value: 'kernelVersion',
+    render: ({ kernelVersion }) => (
+      <span>{toDisplayText(kernelVersion)}</span>
     ),
   },
   {
     label: t('node.detail.creationTime'),
     value: 'creationTimestamp',
     render: ({ creationTimestamp }) => (
-        <span>
-          {creationTimestamp==='' ? '--' : creationTimestamp}
-        </span>
+      <span>{toDisplayText(creationTimestamp)}</span>
     ),
   },
 ]);
 
+const detailColumnGroups = computed(() => {
+  const columns = detailColumns.value || [];
+  const mid = Math.ceil(columns.length / 2);
+  return [columns.slice(0, mid), columns.slice(mid)];
+});
+
 const refresh = async () => {
   detail.value = await nodeApi.getNodeDetail({ uid: route.params.uid });
 };
@@ -484,77 +432,116 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
+.node-overview-wrap {
+  display: flex;
+  margin-top: 16px;
+  margin-bottom: 15px;
+  gap: 16px;
+}
+
+.node-overview-panel {
+  flex: 1 1 48%;
+  min-width: 0;
+  padding: 12px 16px 16px;
+  border: 1px solid #e4ebf1;
+  border-radius: 12px;
+  background: #fff;
+}
+
+.title {
+  color: #1d2b3a;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
 .node-detail {
   display: flex;
   width: 100%;
   height: 100%;
 
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .title {
-    color: #1d2b3a;
-    font-family: 'PingFang SC';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    margin-bottom: 15px;
-  }
   .node-detail-left {
     width: 100%;
   }
 
-  .node-detail-info {
+  .node-detail-info-summary {
     width: 100%;
-    column-gap: 15px;
-    row-gap: 15px;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    margin-top: 8px;
 
-    li {
+    &-cols {
       display: flex;
-      align-items: center;
-      min-width: 0;
+      flex-flow: row nowrap;
+      gap: 12px;
     }
+  }
+
+  .summary-col {
+    flex: 1;
+    min-width: 0;
+    padding: 8px 12px;
+    border-radius: 8px;
+    background: rgb(0 0 0 / 2%);
+  }
+
+  .summary-item {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+    margin-bottom: 6px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .summary-item-label {
+    color: #939ea9;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
 
-    .label {
-      display: inline-block;
-      width: 110px;
-      height: 20px;
-      color: #939ea9;
-      font-size: 12px;
-      line-height: 20px;
-      flex-shrink: 0;
+    &::after {
+      content: ': ';
     }
+  }
+
+  .summary-item-value {
+    color: #1d2b3a;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    min-width: 0;
 
-    .value {
-      color: #324558;
-      font-size: 14px;
-      line-height: 22px;
-      display: inline-flex;
-      align-items: center;
-      min-width: 0;
+    :deep(.ellipsis-text) {
+      margin-right: 8px;
     }
   }
 
   &.is-en {
-    .node-detail-info {
-      .label {
-        width: 145px;
-      }
+    .summary-item-label {
+      word-break: break-word;
     }
   }
 }
 
-.resource-overview-cards {
-  margin: 15px 0 0;
+.node-workload-panel {
+  min-width: 0;
+}
+
+.node-system-resource-cards {
+  margin: 10px 0 0;
   padding: 0;
   list-style: none;
   display: flex;
-  gap: 15px;
+  flex-direction: row;
+  gap: 12px;
+
+  .resource-overview-card {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 .resource-overview-card {
@@ -614,23 +601,26 @@ onMounted(async () => {
 .resource-card-footer {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-top: 16px;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
+  width: 100%;
 }
 
 .resource-card-rate-wrap {
   width: 100%;
   background: #ffffff;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 10px 12px;
   box-sizing: border-box;
+  box-shadow: 0 4px 10px rgba(2, 5, 8, 0.06);
 }
 
 .resource-card-footer-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
 }
 
 .resource-card-footer-title {
@@ -653,8 +643,8 @@ onMounted(async () => {
 }
 
 .trend-chart {
-  height: 200px;
-  margin-top: 15px;
+  height: 100%;
+  margin-top: 0;
   min-width: 0;
 }
 
@@ -662,18 +652,46 @@ onMounted(async () => {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 16px;
+  row-gap: 16px;
 
   > .home-block {
     min-width: 0;
+    height: 320px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  > .home-block :deep(.home-block-content) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  > .home-block :deep(.home-block-content) > .trend-chart {
+    height: 100%;
   }
 }
 
 .node-block {
   display: flex;
   flex-direction: column;
+  box-shadow: none;
   margin-bottom: 15px;
   .home-block-content {
     flex: 1;
   }
 }
+
+@media (max-width: 1200px) {
+  .node-overview-wrap {
+    flex-direction: column;
+  }
+
+  .node-detail .node-detail-info-summary-cols {
+    flex-direction: column;
+  }
+
+  .node-system-resource-cards {
+    flex-direction: column;
+  }
+}
 </style>
diff --git a/packages/web/projects/vgpu/views/node/admin/getOptions.js b/packages/web/projects/vgpu/views/node/admin/getOptions.js
index 22b04c8b..b55587d9 100644
--- a/packages/web/projects/vgpu/views/node/admin/getOptions.js
+++ b/packages/web/projects/vgpu/views/node/admin/getOptions.js
@@ -1,8 +1,43 @@
 import { timeParse } from '@/utils';
 
+const normalizePoints = (points = []) => {
+  return points
+    .map((point) => {
+      if (Array.isArray(point)) {
+        return { timestamp: Number(point[0]), value: Number(point[1]) };
+      }
+      return {
+        timestamp: Number(point?.timestamp),
+        value: Number(point?.value),
+      };
+    })
+    .filter((item) => Number.isFinite(item.timestamp) && Number.isFinite(item.value));
+};
+
+const buildPercentTooltipFormatter = () => {
+  return (params) => {
+    if (!Array.isArray(params) || params.length === 0) return '';
+    let result = `<div style="margin-bottom:5px;">${params[0]?.axisValueLabel || params[0]?.name || ''}</div>`;
+    for (let i = 0; i < params.length; i++) {
+      const item = params[i];
+      const num = Number(item?.value);
+      const value = Number.isFinite(num) ? `${num.toFixed(3)}%` : '-';
+      result += `<div style="display:flex;align-items:center;font-size:14px;line-height:22px;">
+          <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${item?.color || '#5B8FF9'};margin-right:5px;"></span>
+          <span>${item?.seriesName || '-'}:&nbsp;</span>
+          <span style="font-weight:bold;">${value}</span>
+        </div>`;
+    }
+    return result;
+  };
+};
+
 export const getRangeOptions = ({ allocation = [], usage = [] }, t = (v) => v) => {
-  const xDataSource = allocation?.length ? allocation : usage;
+  const normalizedAllocation = normalizePoints(allocation);
+  const normalizedUsage = normalizePoints(usage);
+  const xDataSource = normalizedAllocation.length ? normalizedAllocation : normalizedUsage;
   return {
+    animation: false,
     legend: {
       bottom: 10,
       left: 'center',
@@ -12,20 +47,7 @@ export const getRangeOptions = ({ allocation = [], usage = [] }, t = (v) => v) =
       axisPointer: {
         type: 'cross',
       },
-      formatter: function (params) {
-        if (!params || params.length === 0) return '';
-        var res = params[0].name + '<br/>';
-        for (var i = 0; i < params.length; i++) {
-          res +=
-            params[i].marker +
-            params[i].seriesName +
-            ' : ' +
-            (+params[i].value).toFixed(0) +
-            '<br/>';
-        }
-
-        return res;
-      },
+      formatter: buildPercentTooltipFormatter(),
     },
     grid: {
       top: 20, // 上边距
@@ -33,9 +55,16 @@ export const getRangeOptions = ({ allocation = [], usage = [] }, t = (v) => v) =
       left: '7%', // 左边距
       right: 10, // 右边距
     },
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        filterMode: 'none',
+      },
+    ],
     xAxis: {
       type: 'category',
-      data: xDataSource.map((item) => timeParse(+item.timestamp)),
+      data: xDataSource.map((item) => timeParse(item.timestamp)),
       axisLabel: {
         formatter: function (value) {
           return timeParse(value, 'HH:mm');
@@ -53,24 +82,26 @@ export const getRangeOptions = ({ allocation = [], usage = [] }, t = (v) => v) =
     series: [
       {
         name: t('dashboard.allocRateLegend'),
-        data: allocation,
+        data: normalizedAllocation.map((item) => item.value),
         type: 'line',
         itemStyle: {
-          color: 'rgb(84, 112, 198)',
+          color: '#5B8FF9',
         },
         lineStyle: {
-          color: 'rgb(84, 112, 198)',
+          width: 3,
+          color: '#5B8FF9',
         },
       },
       {
         name: t('dashboard.usageRateLegend'),
-        data: usage,
+        data: normalizedUsage.map((item) => item.value),
         type: 'line',
         itemStyle: {
-          color: 'rgb(145, 204, 117)',
+          color: '#42C090',
         },
         lineStyle: {
-          color: 'rgb(145, 204, 117)',
+          width: 3,
+          color: '#42C090',
         },
       },
     ],
diff --git a/packages/web/projects/vgpu/views/node/admin/index.vue b/packages/web/projects/vgpu/views/node/admin/index.vue
index 48691a57..ed5615af 100644
--- a/packages/web/projects/vgpu/views/node/admin/index.vue
+++ b/packages/web/projects/vgpu/views/node/admin/index.vue
@@ -140,6 +140,7 @@ const getNodeStatusDisplay = ({ isSchedulable, isExternal }) => {
 const baseColumns = computed(() => [
   {
     title: t('node.name'),
+    minWidth: 200,
     dataIndex: 'name',
     render: ({ uid, name }) => {
       const to = `/admin/vgpu/node/admin/${uid}?nodeName=${name}`;
@@ -157,6 +158,7 @@ const baseColumns = computed(() => [
   },
   {
     title: t('task.status'),
+    minWidth: 150,
     dataIndex: 'isSchedulable',
     render: ({ isSchedulable, isExternal }) => {
       const { icon, text } = getNodeStatusDisplay({ isSchedulable, isExternal });
@@ -170,29 +172,13 @@ const baseColumns = computed(() => [
   },
   {
     title: t('node.ip'),
+    minWidth: 100,
     dataIndex: 'ip',
   },
-  {
-    title: t('node.cardModel'),
-    dataIndex: 'type',
-  },
-  {
-    title: t('node.cardCount'),
-    dataIndex: 'cardCnt',
-  },
-  {
-    title: t('node.vgpu'),
-    key: 'node-vgpu',
-    dataIndex: 'used',
-    render: ({ vgpuTotal, vgpuUsed, isExternal }) => (
-        <span>
-      {isExternal ? '--' : vgpuUsed}/{isExternal ? '--' : vgpuTotal}
-    </span>
-    ),
-  },
   {
     title: t('node.computeAllocTotal'),
     key: 'node-compute-allocation',
+    minWidth: 280,
     dataIndex: 'used',
     render: ({ coreTotal, coreUsed, isExternal }) => {
       if (isExternal || !coreTotal) return <span>--</span>;
@@ -218,6 +204,7 @@ const baseColumns = computed(() => [
   {
     title: t('node.memoryAllocTotal'),
     key: 'node-memory-allocation',
+    minWidth: 280,
     dataIndex: 'used',
     render: ({ memoryTotal, memoryUsed, isExternal }) => {
       if (isExternal || !memoryTotal) return <span>--</span>;
diff --git a/packages/web/projects/vgpu/views/task/admin/Detail.vue b/packages/web/projects/vgpu/views/task/admin/Detail.vue
index f062fadb..4d43f8a9 100644
--- a/packages/web/projects/vgpu/views/task/admin/Detail.vue
+++ b/packages/web/projects/vgpu/views/task/admin/Detail.vue
@@ -1,41 +1,153 @@
 <template>
-  <back-header>
-    {{ $t('task.detail.title') }} : {{ detail.name }}
-  </back-header>
+  <page-header
+    :title="$t('task.workload')"
+    :name="detail.appName || detail.name"
+    :status="headerStatusDisplay.text"
+    :status-icon="headerStatusDisplay.icon"
+  >
+    <template #titleSuffix>
+      <ElPopover
+        v-if="detail.status === 'unknown' || detail.status === 'failed'"
+        placement="top"
+        trigger="hover"
+        popper-style="width: 180px"
+      >
+        <template #reference>
+          <el-icon color="#939EA9" size="14">
+            <QuestionFilled />
+          </el-icon>
+        </template>
+        <span style="margin-left: 5px">{{ $t('task.checkCloudPlatform') }}</span>
+      </ElPopover>
+    </template>
+  </page-header>
 
   <div class="task-top">
-    <block-box>
+    <block-box :title="$t('task.detail.detailInfo')" class="basic-info-block">
       <div class="task-detail" :class="{ 'is-en': locale.startsWith('en') }">
         <div class="left">
-          <div class="title">{{ $t('task.detail.detailInfo') }}</div>
-          <ul class="node-detail-info">
-            <li v-for="{ label, value, render } in columns" :key="label">
-              <span class="label">{{ label }}：</span>
-              <span v-if="render" class="value">
-                <component :is="render(detail)" />
-              </span>
-              <span v-else class="value">{{ detail[value] }}</span>
-            </li>
-
-            <li class="cp">
-              <span v-for="{ label, count } in cp" :key="label">
-                <span class="label">{{ label }}</span>
-                <span class="value">{{ count }} {{ $t('task.times') }}</span>
+          <div class="basic-info-cards">
+            <div class="basic-info-card">
+              <div class="basic-info-card-title">{{ detail.namespace || '--' }}</div>
+              <div class="basic-info-card-sub-title">{{ $t('task.namespace') }}</div>
+            </div>
+            <div class="basic-info-card">
+              <div class="basic-info-card-title node-link" @click="handleNodeJump">
+                <ellipsis-text :text="detail.nodeName || '--'" mode="middle" tooltip="always" />
+                <svg-icon icon="jump" />
+              </div>
+              <div class="basic-info-card-sub-title">{{ $t('task.node') }}</div>
+            </div>
+            <div class="basic-info-card">
+              <div class="basic-info-card-title">
+                <div v-if="gpuModelList.length === 0">--</div>
+                <div v-else class="gpu-model-container">
+                  <template v-for="(item, index) in gpuModelList" :key="`${item.model}-${index}`">
+                    <div class="gpu-model-item">
+                      <t-tag theme="default" size="medium" variant="light">{{ item.model }}</t-tag>
+                      <span class="gpu-count">× {{ item.count }}</span>
+                    </div>
+                    <span v-if="index < gpuModelList.length - 1" class="gpu-separator"></span>
+                  </template>
+                </div>
+              </div>
+              <div class="basic-info-card-sub-title">{{ $t('task.gpuModel') }}</div>
+            </div>
+            <div class="basic-info-card">
+              <div class="basic-info-card-title">
+                <span class="related-gpu-count-text">{{ relatedGpuCountText }}</span>
+                <t-popup
+                  v-if="safeDeviceIds.length > 0"
+                  destroy-on-close
+                  theme="light"
+                  trigger="click"
+                  placement="bottom"
+                  show-arrow
+                  overlay-class-name="relative-gpu-tooltip"
+                >
+                  <template #default>
+                    <svg-icon icon="related-gpu-eye" class="gpu-eye-icon" />
+                  </template>
+                  <template #content>
+                    <div class="relative-gpu-tooltip-content">
+                      <div class="popup-title">{{ $t('task.relatedGpu') }}：</div>
+                      <t-table row-key="uuid" :data="relatedGpuTableData" :columns="relatedGpuTableColumns" />
+                    </div>
+                  </template>
+                </t-popup>
+              </div>
+              <div class="basic-info-card-sub-title">{{ $t('task.relatedGpu') }}</div>
+            </div>
+          </div>
+          <div class="basic-info-summary">
+            <div class="summary-item">
+              <span class="summary-item-label">{{ $t('task.image') }}</span>
+              <span class="summary-item-value">
+                <TTooltip v-if="basicImageTooltip" :content="basicImageTooltip">
+                  <span>{{ basicImage }}</span>
+                </TTooltip>
+                <span v-else>{{ basicImage }}</span>
               </span>
-            </li>
-          </ul>
+            </div>
+            <div class="summary-item">
+              <span class="summary-item-label">{{ $t('task.createTime') }}</span>
+              <span class="summary-item-value">{{ basicCreateTime }}</span>
+            </div>
+          </div>
         </div>
       </div>
     </block-box>
+  </div>
 
-    <block-box :title="$t('task.detail.resourceOverview')">
-      <div class="task-gauges">
-        <div v-for="item in gaugeConfig" :key="item.title">
-          <Gauge v-bind="item" />
+  <block-box :title="$t('task.detail.resourceOverview')" class="workload-overview">
+    <div class="row">
+      <div class="row-card">
+        <div class="row-card-content">
+          <div class="row-card-content-icon"><svg-icon icon="node-memory-total" /></div>
+          <div class="row-card-content-info">
+            <div class="row-card-title">{{ resourceOverviewTexts.gpuCards }}</div>
+            <div class="row-card-sub-title">{{ $t('task.gpuCardCount') }}</div>
+          </div>
         </div>
       </div>
-    </block-box>
-  </div>
+      <div class="row-card">
+        <div class="row-card-content">
+          <div class="row-card-content-icon"><svg-icon icon="node-cpu-total" /></div>
+          <div class="row-card-content-info">
+            <div class="row-card-title">{{ resourceOverviewTexts.computeLimit }}</div>
+            <div class="row-card-sub-title">{{ $t('task.computePowerLimit') }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="row-card">
+        <div class="row-card-content">
+          <div class="row-card-content-icon"><svg-icon icon="vgpu-mem" /></div>
+          <div class="row-card-content-info">
+            <div class="row-card-title">{{ resourceOverviewTexts.singleCardMemory }}</div>
+            <div class="row-card-sub-title">{{ $t('task.singleCardMemory') }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="row-card">
+        <div class="row-card-content">
+          <div class="row-card-content-icon"><svg-icon icon="cpu-limit" /></div>
+          <div class="row-card-content-info">
+            <div class="row-card-title">{{ resourceOverviewTexts.cpuLimit }}</div>
+            <div class="row-card-sub-title">{{ $t('task.cpuLimit') }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="row-card">
+        <div class="row-card-content">
+          <div class="row-card-content-icon"><svg-icon icon="card-id" /></div>
+          <div class="row-card-content-info">
+            <div class="row-card-title">{{ resourceOverviewTexts.memoryLimit }}</div>
+            <div class="row-card-sub-title">{{ $t('task.memoryLimit') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </block-box>
 
   <trend-time-filter
     v-if="detail.type && (detail.type.startsWith('NVIDIA') || detail.type.startsWith('MXC'))"
@@ -49,7 +161,11 @@
           <el-empty :description="$t('task.noMonitorSupport')" :image-size="60" />
         </template>
         <template v-else>
-          <echarts-plus :options="getLineOptions({ data })" />
+          <VChart
+            :option="getLineOptions({ data, seriesName: $t('dashboard.usageRateLegend'), animation: false })"
+            :autoresize="true"
+            class="trend-vchart"
+          />
         </template>
       </div>
     </block-box>
@@ -57,21 +173,21 @@
 </template>
 
 <script setup lang="jsx">
-import BackHeader from '@/components/BackHeader.vue';
+import PageHeader from '@/components/PageHeader.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { onMounted, ref, watch, computed } from 'vue';
-
+import { Tooltip as TTooltip } from 'tdesign-vue-next';
 import useInstantVector from '~/vgpu/hooks/useInstantVector';
+
 import cardApi from '~/vgpu/api/card';
 import nodeApi from '~/vgpu/api/node';
 import { QuestionFilled } from '@element-plus/icons-vue';
 import { ElPopover } from 'element-plus';
-import { roundToDecimal, timeParse, calculatePrometheusStep } from '@/utils';
+import { timeParse, calculatePrometheusStep, roundToDecimal } from '@/utils';
 import taskApi from '~/vgpu/api/task';
 import BlockBox from '@/components/BlockBox.vue';
-import Gauge from '~/vgpu/components/gauge.vue';
 import { getLineOptions } from '~/vgpu/components/config';
-import EchartsPlus from '@/components/Echarts-plus.vue';
+import VChart from 'vue-echarts';
 import { useI18n } from 'vue-i18n';
 
 const route = useRoute();
@@ -80,6 +196,7 @@ const { t, locale } = useI18n();
 
 const detail = ref({});
 const nodeUid = ref('');
+const cardTypeById = ref({});
 
 const end = new Date();
 const start = new Date();
@@ -87,168 +204,151 @@ start.setTime(start.getTime() - 3600 * 1000);
 
 const times = ref([start, end]);
 
-const columns = computed(() => [
-  {
-    label: t('task.status'),
-    value: 'status',
-    render: ({ status }) => {
-      const enums = {
-        closed: {
-          text: t('task.statusCompleted'),
-          icon: 'status-schedulable',
-        },
-        success: {
-          text: t('task.statusRunning'),
-          icon: 'status-schedulable',
-        },
-        unknown: {
-          text: t('task.statusUnknown'),
-          icon: 'status-unmanaged',
-        },
-        failed: {
-          text: t('task.statusFailed'),
-          icon: 'status-unschedulable',
-        },
-      };
-      const { text, icon } = enums[status] || enums.unknown;
-      return (
-        <span
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '6px',
-          }}
-        >
-          <svg-icon icon={icon} style={{ fontSize: '16px' }} />
-          <span>{text}</span>
-          {(status === 'unknown' || status === 'failed') && (
-              <ElPopover placement="top" trigger="hover" popper-style={{ width: '180px' }}>
-                {{
-                  reference: () => (
-                    <el-icon color="#939EA9" size="14">
-                      <QuestionFilled />
-                    </el-icon>
-                  ),
-                  default: () => (
-                      <span style={{ marginLeft: '5px', }}>
-                      {t('task.checkCloudPlatform')}
-                    </span>
-                  ),
-                }}
-              </ElPopover>
-          )}
-        </span>
-      );
+const getStatusDisplay = (status) => {
+  const enums = {
+    closed: {
+      text: t('task.statusCompleted'),
+      icon: 'status-schedulable',
     },
-  },
-  {
-    label: t('task.card'),
-    value: 'deviceIds',
-    render: ({ deviceIds }) => {
-      if (!deviceIds || !Array.isArray(deviceIds) || deviceIds.length === 0) {
-        return <span>--</span>;
-      }
-      return (
-        <ellipsis-text
-          text={deviceIds.join(', ')}
-          mode="middle"
-          tooltip="always"
-        />
-      );
+    success: {
+      text: t('task.statusRunning'),
+      icon: 'status-schedulable',
     },
-  },
-  {
-    label: t('task.node'),
-    value: 'nodeName',
-    render: ({ nodeName }) => {
-      return (
-        <div class="node-jump-cell">
-          <ellipsis-text text={nodeName || '--'} mode="middle" tooltip="always" />
-          <span
-            class={['node-jump-icon', !nodeUid.value ? 'is-disabled' : ''].join(' ')}
-            onClick={() => {
-              if (!nodeUid.value) return;
-              router.push(`/admin/vgpu/node/admin/${nodeUid.value}?nodeName=${nodeName || ''}`);
-            }}
-          >
-            <svg-icon icon="jump" />
-          </span>
-        </div>
-      );
+    unknown: {
+      text: t('task.statusUnknown'),
+      icon: 'status-unmanaged',
     },
-  },
-  {
-    label: t('task.cardType'),
-    value: 'type',
-  },
-  {
-    label: t('task.allocatedCompute'),
-    value: 'allocatedCores',
-  },
+    failed: {
+      text: t('task.statusFailed'),
+      icon: 'status-unschedulable',
+    },
+  };
+  return enums[status] || enums.unknown;
+};
+
+const safeDeviceIds = computed(() => (
+  Array.isArray(detail.value?.deviceIds) ? detail.value.deviceIds : []
+));
+const gpuModelList = computed(() => {
+  if (!safeDeviceIds.value.length) return [];
+  const grouped = new Map();
+  safeDeviceIds.value.forEach((id) => {
+    const model = cardTypeById.value?.[id] || detail.value?.type || '--';
+    grouped.set(model, (grouped.get(model) || 0) + 1);
+  });
+  return Array.from(grouped.entries()).map(([model, count]) => ({ model, count }));
+});
+const relatedGpuCountText = computed(() => t('task.relatedGpuCards', { count: safeDeviceIds.value.length }));
+const relatedGpuTableData = computed(() => safeDeviceIds.value.map((uuid) => ({
+  model: cardTypeById.value?.[uuid] || detail.value?.type || '--',
+  uuid,
+})));
+const relatedGpuTableColumns = computed(() => [
   {
-    label: t('task.allocatedMemory'),
-    value: 'allocatedMem',
-    render: ({ allocatedMem }) =>
-      allocatedMem ? (
-        <span>{roundToDecimal(allocatedMem / 1024, 1)} GiB</span>
-      ) : (
-        <span>--</span>
-      ),
+    colKey: 'model',
+    title: t('task.gpuModel'),
+    width: 104,
+    ellipsis: true,
   },
   {
-    label: t('task.appName'),
-    value: 'appName',
-    render: ({ appName }) => (
-      <ellipsis-text text={appName || '--'} mode="middle" tooltip="always" />
+    colKey: 'uuid',
+    title: 'GPU',
+    width: 236,
+    ellipsis: true,
+    cell: (_h, { row }) => (
+      <TTooltip content={row.uuid}>
+        <div class="node-link-container" onClick={() => handleGpuJump(row.uuid)}>
+          <div class="text">{row.uuid || '--'}</div>
+          <svg-icon icon="jump" class="related-gpu-link-icon" />
+        </div>
+      </TTooltip>
     ),
   },
-  {
-    label: t('task.createTime'),
-    value: 'createTime',
-    render: ({ createTime }) => <span>{timeParse(createTime)}</span>,
-  },
 ]);
-const _gaugeConfigBase = [
-  {
-    titleKey: 'dashboard.computeUsageRate',
-    percent: 0,
-    query: `avg(sum(hami_container_core_used{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) by (instance))`,
-    totalQuery: `avg(sum(hami_container_vcore_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) by (instance))`,
-    percentQuery: `avg(sum(hami_container_core_used{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) by (instance)) / avg(sum(hami_container_vcore_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) by (instance)) *100`,
-    total: 0,
-    used: 0,
-    unit: '%',
-    data: [],
-  },
-  {
-    titleKey: 'dashboard.memUsageRate',
-    percent: 0,
-    query: `avg(sum(hami_container_memory_used{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) by (instance))/ 1024`,
-    totalQuery: `avg(sum(hami_container_vmemory_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) by (instance))/1024`,
-    percentQuery: `(avg(sum(hami_container_memory_used{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"})/ 1024)/(avg(sum(hami_container_vmemory_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) by (instance))/1024) *100)`,
-    total: 0,
-    used: 0,
-    unit: 'GiB',
-    data: [],
-  },
-];
+const extractImageList = (payload) => {
+  const all = (Array.isArray(payload?.images) ? payload.images : [])
+    .map((item) => (typeof item === 'string' ? item.trim() : ''))
+    .filter(Boolean);
+
+  return Array.from(new Set(all));
+};
 
-const gaugeData = useInstantVector(
-  _gaugeConfigBase.map(item => ({ ...item, title: t(item.titleKey) })),
+const basicImage = computed(() => {
+  const imageList = extractImageList(detail.value);
+  if (!imageList.length) return '--';
+  if (imageList.length === 1) return imageList[0];
+  return `${imageList[0]}...`;
+});
+const basicImageTooltip = computed(() => {
+  const imageList = extractImageList(detail.value);
+  if (imageList.length <= 1) return '';
+  return imageList.join('\n');
+});
+const basicCreateTime = computed(() => (
+  detail.value?.createTime ? timeParse(detail.value.createTime) : '--'
+));
+const resourceOverviewData = useInstantVector(
+  [
+    {
+      key: 'gpuCards',
+      query: `sum(hami_container_vgpu_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"})`,
+    },
+    {
+      key: 'computeLimit',
+      query: `sum(hami_container_vcore_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"})`,
+    },
+    {
+      key: 'singleCardMemory',
+      query:
+        `sum(hami_container_vmemory_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}) ` +
+        `/ clamp_min(sum(hami_container_vgpu_allocated{container_name="$container",pod_name=~"$pod",namespace_name="$namespace"}), 1) / 1024`,
+    },
+    {
+      key: 'cpuLimit',
+      query:
+        `sum(kube_pod_container_resource_limits{resource="cpu", namespace="$namespace", pod=~"$pod", container="$container"})`,
+    },
+    {
+      key: 'memoryLimit',
+      query:
+        `sum(kube_pod_container_resource_limits{resource="memory", namespace="$namespace", pod=~"$pod", container="$container"}) / 1024 / 1024 / 1024`,
+    },
+  ],
   (query) =>
     query
-      .replaceAll(`$container`, detail.value.name)
-      .replaceAll(`$namespace`, detail.value.namespace)
-      .replaceAll(`$pod`, detail.value.appName),
+      .replaceAll(`$container`, detail.value.name || '')
+      .replaceAll(`$namespace`, detail.value.namespace || '')
+      .replaceAll(`$pod`, detail.value.appName || ''),
 );
+const toNumOrUndefined = (v) => {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : undefined;
+};
+const resourceOverviewTexts = computed(() => {
+  const get = (key) => resourceOverviewData.value.find((item) => item.key === key)?.count;
+  const gpuCards = toNumOrUndefined(get('gpuCards'));
+  const computeLimit = toNumOrUndefined(get('computeLimit'));
+  const singleCardMemory = toNumOrUndefined(get('singleCardMemory'));
+  const cpuLimit = toNumOrUndefined(get('cpuLimit'));
+  const memoryLimit = toNumOrUndefined(get('memoryLimit'));
+  return {
+    gpuCards: gpuCards === undefined ? '--' : `${Math.round(gpuCards)}`,
+    computeLimit: computeLimit === undefined ? '--' : `${roundToDecimal(computeLimit / 100, 1)}`,
+    singleCardMemory: singleCardMemory === undefined ? '--' : `${singleCardMemory.toFixed(1)} GiB`,
+    cpuLimit: cpuLimit === undefined ? '--' : `${Math.round(cpuLimit)} Core`,
+    memoryLimit: memoryLimit === undefined ? '--' : `${memoryLimit.toFixed(1)} GiB`,
+  };
+});
 
-const gaugeConfig = computed(() =>
-  gaugeData.value.map((item) => ({
-    ...item,
-    title: item.titleKey ? t(item.titleKey) : item.title,
-  })),
-);
+const handleNodeJump = () => {
+  const nodeName = detail.value?.nodeName || detail.value?.node_name || '';
+  if (!nodeUid.value || !nodeName) return;
+  router.push(`/admin/vgpu/node/admin/${nodeUid.value}?nodeName=${nodeName}`);
+};
+const handleGpuJump = (uuid) => {
+  if (!uuid) return;
+  router.push(`/admin/vgpu/card/admin/${uuid}`);
+};
 
 const lineConfig = ref([
   {
@@ -263,6 +363,8 @@ const lineConfig = ref([
   },
 ]);
 
+const headerStatusDisplay = computed(() => getStatusDisplay(detail.value?.status));
+
 const lineConfigView = computed(() =>
   lineConfig.value.map((item) => ({
     ...item,
@@ -303,6 +405,11 @@ onMounted(async () => {
   const { name, podUid } = route.query;
   detail.value = await taskApi.getTaskDetail({ name, podUid });
   const cards = await cardApi.getCardListReq({filters: {}});
+  cardTypeById.value = (cards.list || []).reduce((acc, item) => {
+    if (item?.uuid) acc[item.uuid] = item?.type || '--';
+    if (item?.id) acc[item.id] = item?.type || '--';
+    return acc;
+  }, {});
   const foundCard = cards.list.find((item) => item.uuid === detail.value.deviceIds[0]);
   if (foundCard) {
     detail.value.type = foundCard.type;
@@ -326,88 +433,150 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .task-top {
-  display: flex;
-  gap: 16px;
-
-  > .home-block {
-    flex: 7;
-  }
-
-  > .home-block:last-child {
-    flex: 3;
-  }
+  display: block;
 }
 
 .task-detail {
   width: 100%;
 
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  .basic-info-cards {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-top: 0;
+    margin-bottom: 20px;
   }
 
-  .title {
+  .basic-info-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    flex: 1;
+    border-radius: 8px;
+    padding: 15px 20px;
+    background: #f5f7fa;
+    box-shadow: none;
+    min-width: 0;
+    align-self: normal;
+  }
+
+  .basic-info-card-title {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
     color: #1d2b3a;
-    font-family: 'PingFang SC';
     font-size: 16px;
-    font-style: normal;
     font-weight: 500;
-    margin-bottom: 20px;
+    line-height: 28px;
+    min-height: 28px;
+    min-width: 0;
   }
 
-  .node-detail-info {
+  .gpu-model-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: nowrap;
+    overflow: hidden;
     width: 100%;
-    column-gap: 15px;
-    row-gap: 15px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    min-width: 0;
+  }
 
-    li {
-      display: flex;
-      align-items: center;
-      min-width: 0;
-    }
+  .gpu-model-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
 
-    .label {
-      display: inline-block;
-      width: 80px;
-      height: 20px;
-      color: #939ea9;
-      font-size: 12px;
-      line-height: 20px;
-      flex-shrink: 0;
-    }
+  .gpu-count {
+    color: #324558;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    white-space: nowrap;
+  }
 
-    .value {
-      color: #324558;
-      font-size: 14px;
-      line-height: 22px;
-      display: inline-flex;
-      align-items: center;
-      min-width: 0;
-    }
+  .gpu-separator {
+    width: 1px;
+    height: 22px;
+    background: #e4ebf1;
+    flex-shrink: 0;
+  }
 
-    .cp {
-      display: flex;
-      gap: 25px;
-    }
+  :deep(.t-tag) {
+    flex-shrink: 0;
+    margin: 0;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 22px;
+    height: auto;
+    padding: 2px 5px;
+    color: #324558;
+    border-radius: 6px;
+    background-color: #e4ebf1;
+    border-color: #d5dee7;
+    white-space: nowrap;
   }
 
-  &.is-en {
-    .node-detail-info {
-      .label {
-        width: 100px;
-      }
-    }
+  .basic-info-card-sub-title {
+    color: #939ea9;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
   }
-}
 
-.task-gauges {
-  margin-top: 15px;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
+  .node-link {
+    cursor: pointer;
+  }
+
+  .gpu-eye-icon {
+    cursor: pointer;
+    color: #697886;
+    font-size: 16px;
+  }
+
+  .related-gpu-count-text {
+    color: #324558;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 28px;
+  }
+
+  .basic-info-summary {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  .summary-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .summary-item-label {
+    width: 120px;
+    color: #939ea9;
+    font-size: 14px;
+    line-height: 24px;
+    flex-shrink: 0;
+  }
+
+  .summary-item-value {
+    color: #324558;
+    font-size: 14px;
+    line-height: 24px;
+    min-width: 0;
+  }
+
+  &.is-en {
+    .summary-item-label { width: 120px; }
+  }
 }
 
 .task-trend-row {
@@ -421,33 +590,158 @@ onMounted(async () => {
   }
 }
 
+.basic-info-block :deep(.home-block-content),
+.workload-overview :deep(.home-block-content) {
+  padding-top: 20px;
+}
+
+.basic-info-block,
+.workload-overview {
+  box-shadow: none;
+}
+
+.workload-overview {
+  margin-top: 16px;
+  padding: 20px;
+
+  .row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-top: 0;
+  }
+
+  .row-card {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    gap: 8px;
+    padding: 15px 20px;
+    border-radius: 8px;
+    border: 0;
+    background-color: #f5f7fa;
+    align-self: normal;
+  }
+
+  .row-card-content {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .row-card-content-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow:
+      0 2px 8px 0 rgb(2 5 8 / 4%),
+      0 6px 20px 0 rgb(2 5 8 / 8%);
+    flex-shrink: 0;
+  }
+
+  .row-card-content-icon :deep(svg) {
+    font-size: 20px;
+  }
+
+  .row-card-content-info {
+    min-width: 0;
+  }
+
+  .row-card-title {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #324558;
+    line-height: 28px;
+    min-height: 28px;
+  }
+
+  .row-card-sub-title {
+    color: #939ea9;
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+
 .trend-chart {
-  height: 200px;
+  height: 250px;
   margin-top: 15px;
 }
 
-.node-jump-cell {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  min-width: 0;
+.trend-vchart {
+  width: 100%;
+  height: 100%;
+}
+
+.relative-gpu-tooltip-content {
+  width: 400px;
+  max-width: 50vw;
+  max-height: 40vh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 16px 12px;
 }
 
-.node-jump-icon {
-  flex: none;
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
+.popup-title {
+  color: #1d2b3a;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.relative-gpu-tooltip-content :deep(.node-link-container) {
+  display: flex;
   align-items: center;
-  justify-content: center;
   cursor: pointer;
-  border-radius: 4px;
-  user-select: none;
 }
 
-.node-jump-icon.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
+.relative-gpu-tooltip-content :deep(.node-link-container .text) {
+  width: 236px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.relative-gpu-tooltip-content :deep(.t-table__header th) {
+  background: #f5f7fa;
+  color: #939ea9;
+  font-size: 14px;
+  font-weight: 400;
+  border: none;
+}
+
+.relative-gpu-tooltip-content :deep(.t-table__header th:first-child) {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.relative-gpu-tooltip-content :deep(.t-table__header th:last-child) {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.relative-gpu-tooltip-content :deep(.t-table__body td) {
+  border: none;
+  color: #1d2b3a;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.related-gpu-link-icon {
+  flex-shrink: 0;
+  color: #697886;
+  font-size: 14px;
 }
 
 </style>
diff --git a/packages/web/projects/vgpu/views/task/admin/index.vue b/packages/web/projects/vgpu/views/task/admin/index.vue
index d243810e..153505e3 100644
--- a/packages/web/projects/vgpu/views/task/admin/index.vue
+++ b/packages/web/projects/vgpu/views/task/admin/index.vue
@@ -27,13 +27,6 @@
             :options="statusOptions"
             @change="applyFilters"
           />
-          <t-select
-            v-model="filters.deviceId"
-            clearable
-            :placeholder="$t('task.allCards')"
-            :options="cardOptions"
-            @change="applyFilters"
-          />
           <t-input
             v-model="filters.name"
             clearable
@@ -81,7 +74,6 @@
 <script setup lang="jsx">
 import taskApi from '~/vgpu/api/task';
 import nodeApi from '~/vgpu/api/node';
-import cardApi from '~/vgpu/api/card';
 import Toolbar from '@/components/TablePlus/Toolbar.vue';
 import TablePagination from '@/components/TablePlus/Pagination.vue';
 import { roundToDecimal, timeParse } from '@/utils';
@@ -103,18 +95,12 @@ const filters = reactive({
   name: props.filters?.name || '',
   nodeName: props.filters?.nodeName,
   status: props.filters?.status,
-  deviceId: props.filters?.deviceId,
 });
 const rawNodeNames = ref([]);
-const rawCardUuids = ref([]);
 const nodeOptions = computed(() => [
   { label: t('task.allNodes'), value: undefined },
   ...rawNodeNames.value.map((name) => ({ label: name, value: name })),
 ]);
-const cardOptions = computed(() => [
-  { label: t('task.allCards'), value: undefined },
-  ...rawCardUuids.value.map((uuid) => ({ label: uuid, value: uuid })),
-]);
 const statusOptions = computed(() => [
   { label: t('task.allStatus'), value: undefined },
   { label: t('task.statusCompleted'), value: 'closed' },
@@ -133,19 +119,12 @@ const state = reactive({
 
 const fetchFilterOptions = async () => {
   try {
-    const [{ list: nodeList = [] }, { list: cardList = [] }] = await Promise.all([
-      request(nodeApi.getNodeList({ filters: {} })),
-      request(cardApi.getCardList({ filters: {} })),
-    ]);
+    const { list: nodeList = [] } = await request(nodeApi.getNodeList({ filters: {} }));
     rawNodeNames.value = nodeList
       .map((item) => item?.name)
       .filter(Boolean);
-    rawCardUuids.value = cardList
-      .map((item) => item?.uuid)
-      .filter(Boolean);
   } catch {
     rawNodeNames.value = [];
-    rawCardUuids.value = [];
   }
 };
 
@@ -154,16 +133,20 @@ const baseColumns = computed(() => [
     title: t('task.workload'),
     dataIndex: 'name',
     hideTooltip: true,
-    render: ({ name, appName, podUid }) => {
+    render: ({ name, appName, podUid, namespace, namespaceName }) => {
       const to = `/admin/vgpu/task/admin/detail?name=${name}&podUid=${podUid}`;
       const workloadName = appName || name || '--';
+      const workloadNamespace = namespace || namespaceName || '--';
       return (
-        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+        <span style={{ display: 'inline-flex', alignItems: 'flex-start', gap: '10px' }}>
           <span class="task-name-icon-card vgpu-table-name-icon-card">
             <svg-icon icon="task-name" style={{ fontSize: '20px' }} />
           </span>
           <span class="task-name-text-wrap vgpu-table-name-text-wrap">
-            <text-plus text={workloadName} to={to} />
+            <span style={{ display: 'inline-flex', flexDirection: 'column', minWidth: 0 }}>
+              <text-plus text={workloadName} to={to} />
+              <span class="task-namespace-text">{workloadNamespace}</span>
+            </span>
           </span>
         </span>
       );
@@ -218,59 +201,31 @@ const baseColumns = computed(() => [
     },
   },
   {
-    title: t('task.node'),
-    dataIndex: 'nodeName',
-    hideTooltip: true,
-    render: ({ nodeName }) => (
-      <ellipsis-text text={nodeName || '--'} mode="middle" tooltip="always" />
-    ),
-  },
-  {
-    title: t('task.allocatedVgpu'),
+    title: 'GPUs',
     dataIndex: 'deviceIds',
-    render: ({ deviceIds }) => {
+    render: ({ deviceIds, allocatedCores, allocatedMem }) => {
       const ids = Array.isArray(deviceIds) ? deviceIds : [];
-      if (!ids.length) return <span>--</span>;
+      const gpuCount = ids.length || '--';
+      const cores = allocatedCores === 0 || allocatedCores
+        ? roundToDecimal(allocatedCores / 100, 1)
+        : '--';
+      const memoryGiB = allocatedMem === 0 || allocatedMem
+        ? `${roundToDecimal(allocatedMem / 1024, 1)} GiB`
+        : '--';
       return (
-        <t-popup trigger="hover" placement="top" overlay-inner-style={{ width: '350px' }}>
-          {{
-            default: () => (
-              <t-tag theme="default" variant="light" style={{ cursor: 'pointer' }}>
-                {ids.length}
-              </t-tag>
-            ),
-            content: () => (
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: '10px',
-                  width: '100%',
-                  justifyContent: 'center',
-                }}
-              >
-                {ids.map((item) => (
-                  <t-tag theme="default" variant="light">{item}</t-tag>
-                ))}
-              </div>
-            ),
-          }}
-        </t-popup>
+        <div class="task-gpu-cell">
+          <span class="task-gpu-cell-icon" aria-hidden="true">
+            <svg-icon icon="card-id" style={{ fontSize: '14px' }} />
+          </span>
+          <span class="task-gpu-cell-info">
+            <span>{gpuCount}</span>
+            <span class="task-gpu-cell-segment">{cores}</span>
+            <span class="task-gpu-cell-segment">{memoryGiB}</span>
+          </span>
+        </div>
       );
     },
   },
-  {
-    title: t('task.allocatedCompute'),
-    dataIndex: 'allocatedCores',
-    render: ({ allocatedCores }) => `${allocatedCores} `,
-  },
-  {
-    title: t('task.allocatedMemory'),
-    dataIndex: 'allocatedMem',
-    render: ({ allocatedMem }) =>
-      `${roundToDecimal(allocatedMem / 1024, 1)} GiB`,
-  },
-
   {
     title: t('task.createTime'),
     dataIndex: 'createTime',
@@ -296,7 +251,6 @@ const fetchTableData = async () => {
         ...(nodeName ? { nodeName } : {}),
         ...(nodeUid ? { nodeUid } : {}),
         ...(filters.status ? { status: filters.status } : {}),
-        ...(filters.deviceId ? { deviceId: filters.deviceId } : {}),
       },
     };
     const { items = [] } = await taskApi.getTaskListReq(payload);
@@ -325,14 +279,12 @@ watch(
     props.filters?.nodeName,
     props.filters?.nodeUid,
     props.filters?.status,
-    props.filters?.deviceId,
   ],
   () => {
     hasManualNodeScope.value = false;
     filters.name = props.filters?.name || '';
     filters.nodeName = props.filters?.nodeName;
     filters.status = props.filters?.status;
-    filters.deviceId = props.filters?.deviceId;
     applyFilters();
   },
   { immediate: true },
@@ -374,4 +326,49 @@ watch(
 :deep(.task-name-text-wrap) {
   flex: 1;
 }
+
+:deep(.task-namespace-text) {
+  color: #939ea9;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+:deep(.task-gpu-cell) {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px 4px 4px;
+  border-radius: 6px;
+  background: #e4ebf1;
+  color: #324558;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+:deep(.task-gpu-cell-icon) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow:
+    0 1px 1px 0 rgb(2 5 8 / 2%),
+    0 1px 4px 0 rgb(2 5 8 / 6%);
+  flex-shrink: 0;
+}
+
+:deep(.task-gpu-cell-info) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:deep(.task-gpu-cell-segment) {
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 1px solid #d5dee7;
+}
+
 </style>
diff --git a/packages/web/src/App.vue b/packages/web/src/App.vue
index 0c222207..5f9dbd37 100644
--- a/packages/web/src/App.vue
+++ b/packages/web/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <el-config-provider :locale="elLocale">
-    <router-view></router-view>
+    <t-config-provider :global-config="tdGlobalConfig">
+      <router-view></router-view>
+    </t-config-provider>
   </el-config-provider>
 </template>
 
@@ -8,6 +10,9 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElConfigProvider } from 'element-plus';
+import { ConfigProvider as TConfigProvider } from 'tdesign-vue-next';
+import tdesignEnUS from 'tdesign-vue-next/es/locale/en_US';
+import tdesignZhCN from 'tdesign-vue-next/es/locale/zh_CN';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
 
@@ -20,4 +25,8 @@ const { locale } = useI18n();
 const elLocale = computed(() => {
   return locale.value === 'zh' ? zhCn : en;
 });
+
+const tdGlobalConfig = computed(() =>
+  locale.value === 'en' ? tdesignEnUS : tdesignZhCN,
+);
 </script>
diff --git a/packages/web/src/components/BackHeader.vue b/packages/web/src/components/BackHeader.vue
deleted file mode 100644
index 212113a5..00000000
--- a/packages/web/src/components/BackHeader.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <el-page-header id="BackHeader" @back="goBack">
-    <template #content>
-      <slot />
-    </template>
-    <template #extra>
-      <slot name="extra" />
-    </template>
-  </el-page-header>
-</template>
-
-<script setup lang="jsx">
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const goBack = () => {
-  router.go(-1);
-};
-</script>
-
-<style lang="scss">
-#BackHeader {
-  padding: 0 0 8px 0;
-  margin-bottom: 12px;
-
-  .el-page-header__back {
-    color: #999;
-    &:hover {
-      color: var(--el-color-primary);
-    }
-  }
-
-  .el-page-header__content {
-    font-size: 18px;
-    font-weight: 500;
-    color: #1d2b3a;
-  }
-}
-</style>
diff --git a/packages/web/src/components/BlockBox.vue b/packages/web/src/components/BlockBox.vue
index 1195b0ad..9ce7f755 100644
--- a/packages/web/src/components/BlockBox.vue
+++ b/packages/web/src/components/BlockBox.vue
@@ -16,7 +16,7 @@ defineProps(['title']);
 
 <style lang="scss">
 .home-block {
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid #e4ebf1;
   background: #fff;
   margin-bottom: 16px;
diff --git a/packages/web/src/components/PageHeader.vue b/packages/web/src/components/PageHeader.vue
new file mode 100644
index 00000000..4cf99fcd
--- /dev/null
+++ b/packages/web/src/components/PageHeader.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-page-header class="layout-page-header" @back="goBack">
+    <template #content>
+      <div class="layout-header-title">
+        <slot name="title">
+          <h3 class="layout-title">{{ title }}：{{ name }}</h3>
+        </slot>
+        <div v-if="status" class="layout-header-title-run-state">
+          <slot name="icon">
+            <svg-icon v-if="statusIcon" :icon="statusIcon" style="font-size: 16px" />
+          </slot>
+          <span>{{ status }}</span>
+          <slot name="titleSuffix"></slot>
+        </div>
+      </div>
+    </template>
+    <template #extra>
+      <slot name="actions"></slot>
+    </template>
+  </el-page-header>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const goBack = () => {
+  router.go(-1);
+};
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  status: {
+    type: String,
+    default: '',
+  },
+  statusIcon: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.layout-page-header {
+  padding: 0 0 8px 0;
+  margin-bottom: 12px;
+}
+
+.layout-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #1d2b3a;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 36px;
+}
+
+.layout-title {
+  margin: 0;
+  font-size: 21px;
+}
+
+.layout-header-title-run-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #324558;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+:deep(.el-page-header__back) {
+  color: #999;
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/packages/web/src/components/index.js b/packages/web/src/components/index.js
index 496ff74b..8535cafc 100644
--- a/packages/web/src/components/index.js
+++ b/packages/web/src/components/index.js
@@ -10,7 +10,6 @@ import FormItem from './FormPlus/FormItem.vue';
 import FormRender from './FormPlus/FormRender.vue';
 import FormGroup from './FormPlus/FormGroup.vue';
 import ItemGroup from './ItemGroup.vue';
-import BackHeader from './BackHeader.vue';
 import InfoPreview from './InfoPreview.vue';
 import ButtonGroup from './ButtonGroup.vue';
 import DetailDrawer from './DetailDrawer.vue';
@@ -37,7 +36,6 @@ export default (app) => {
   app.component('FormRender', FormRender);
   app.component('FormGroup', FormGroup);
   app.component('ItemGroup', ItemGroup);
-  app.component('BackHeader', BackHeader);
   app.component('InfoPreview', InfoPreview);
   app.component('ButtonGroup', ButtonGroup);
   app.component('DetailDrawer', DetailDrawer);
diff --git a/packages/web/src/icons/svg/cpu-limit.svg b/packages/web/src/icons/svg/cpu-limit.svg
new file mode 100644
index 00000000..19a51eb8
--- /dev/null
+++ b/packages/web/src/icons/svg/cpu-limit.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 21 20">
+  <path fill="#B6C2CD" fill-rule="evenodd" d="M4.567 3.333a.833.833 0 0 0-.834.833v11.667c0 .46.373.833.834.833h11.666c.46 0 .834-.373.834-.833V4.166a.833.833 0 0 0-.834-.833zm5 2.917 2.5 2.083-2.5 2.083V8.958H5.4v-1.25h4.167zM12.9 9.583l2.5 2.083-2.5 2.084V12.29H5.4v-1.25h7.5z" clip-rule="evenodd"></path>
+  <path fill="#324558" d="M7.9 1.667H6.233v1.667H7.9zM3.733 5.833H2.067V7.5h1.666zM2.067 9.167h1.666v1.667H2.067zM3.733 12.5H2.067v1.667h1.666zM17.067 5.833h1.666V7.5h-1.666zM18.733 9.167h-1.666v1.667h1.666zM17.067 12.5h1.666v1.667h-1.666zM11.233 1.667H9.567v1.667h1.666zM12.9 1.667h1.667v1.667H12.9zM7.9 16.667H6.233v1.667H7.9zM9.567 16.667h1.666v1.667H9.567zM14.567 16.667H12.9v1.667h1.667zM9.567 6.25l2.5 2.083-2.5 2.084V8.958H5.4v-1.25h4.167z"></path>
+  <path fill="#324558" d="m15.4 11.666-2.5-2.083v1.458H5.4v1.25h7.5v1.459z"></path>
+</svg>
diff --git a/packages/web/src/icons/svg/gpu-ascend.svg b/packages/web/src/icons/svg/gpu-ascend.svg
new file mode 100644
index 00000000..ed594ed8
--- /dev/null
+++ b/packages/web/src/icons/svg/gpu-ascend.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1327_1967)">
+<path d="M13.6711 0.214189C13.8776 -0.00769457 14.1965 -0.0851659 14.4818 0.0172295C14.767 0.119625 14.9639 0.382184 14.9822 0.684747L15 5.25727C12.6456 6.11563 9.88552 7.99624 7.18225 11.0451L7.17738 11.0516L3.07704 15.6306C2.79414 15.9477 2.36357 16.0898 1.9475 16.0034C1.53144 15.9169 1.1931 15.6151 1.05993 15.2115C0.926766 14.808 1.019 14.3641 1.3019 14.047L11.6071 2.44366L13.6711 0.214189ZM9.88228 9.87036C11.3086 8.74914 12.9717 7.97353 15 8.18609L14.9124 13.5634C14.9268 13.9273 14.7256 14.2656 14.399 14.4266C14.0724 14.5876 13.6816 14.5412 13.4017 14.3082L9.88228 9.87036Z" fill="#C31D20"/>
+</g>
+<defs>
+<clipPath id="clip0_1327_1967">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/web/src/icons/svg/gpu-aws.svg b/packages/web/src/icons/svg/gpu-aws.svg
new file mode 100644
index 00000000..7b2b590b
--- /dev/null
+++ b/packages/web/src/icons/svg/gpu-aws.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g transform="scale(0.85) translate(-0.5, 2.5)">
+    <path d="M6.763 10.036c0 .296.032.535.088.71.064.176.144.368.256.576.04.063.056.127.056.183 0 .08-.048.16-.152.24l-.503.335a.383.383 0 0 1-.208.072c-.08 0-.16-.04-.239-.112a2.47 2.47 0 0 1-.287-.375 6.18 6.18 0 0 1-.248-.471c-.622.734-1.405 1.101-2.347 1.101-.67 0-1.205-.191-1.596-.574-.391-.383-.591-.894-.591-1.533 0-.678.239-1.226.726-1.644.487-.417 1.133-.626 1.955-.626.272 0 .551.024.846.064.296.04.6.104.918.176v-.583c0-.607-.127-1.031-.375-1.277-.255-.246-.686-.367-1.3-.367-.28 0-.568.031-.863.103-.295.072-.583.16-.862.272a2.287 2.287 0 0 1-.28.104.488.488 0 0 1-.127.023c-.112 0-.168-.08-.168-.247v-.391c0-.128.016-.224.056-.28a.597.597 0 0 1 .224-.167c.279-.144.614-.263 1.005-.36C2.982 4.035 3.405 4 3.86 4c.87 0 1.507.199 1.91.597.399.398.598 1.005.598 1.821v2.618zm-3.24 1.214c.263 0 .534-.048.822-.144.287-.096.543-.271.758-.51.128-.152.224-.32.272-.512.047-.191.08-.423.08-.694v-.335a6.66 6.66 0 0 0-.735-.136 6.02 6.02 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296zm6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 5.55a1.398 1.398 0 0 1-.072-.32c0-.128.064-.2.191-.2h.782c.151 0 .255.025.312.081.064.047.12.159.168.31l1.325 5.227 1.229-5.226c.04-.16.096-.264.168-.311a.545.545 0 0 1 .319-.08h.638c.152 0 .256.024.32.08.063.047.119.159.167.31l1.245 5.291L15.696 5.55c.048-.152.104-.264.168-.311a.545.545 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1.137 1.137 0 0 1-.056.2l-1.914 6.162c-.048.16-.104.263-.168.31a.51.51 0 0 1-.303.08h-.687c-.151 0-.255-.023-.319-.079-.064-.048-.12-.16-.168-.32L12.255 6.7l-1.213 5.132c-.04.16-.096.263-.168.319-.064.056-.175.08-.32.08h-.686zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.563.563 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247.048 0 .096.008.144.024.048.016.12.048.2.08.271.12.566.215.878.279.319.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.777.777 0 0 0-.215-.559c-.144-.151-.415-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.902 1.902 0 0 1-.4-1.158c0-.335.073-.63.216-.886.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .359.008.535.032.183.024.35.056.518.088.16.04.311.08.455.127.144.048.256.096.336.144a.69.69 0 0 1 .24.2.43.43 0 0 1 .071.263v.375c0 .168-.064.256-.184.256-.063 0-.167-.024-.303-.08a4.137 4.137 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223-.248.152-.367.383-.367.71 0 .224.08.416.24.567.159.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767.247.327.367.702.367 1.117 0 .343-.072.655-.207.926-.144.272-.336.511-.591.703-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167z" fill="currentColor"/>
+    <path d="M19.747 16.95c-2.604 1.921-6.385 2.944-9.641 2.944-4.56 0-8.668-1.69-11.774-4.497-.247-.223-.024-.527.271-.351 3.354 1.953 7.502 3.131 11.79 3.131 2.89 0 6.073-.6 8.996-1.841.439-.191.806.287.358.615z" fill="currentColor"/>
+    <path d="M20.814 15.751c-.335-.43-2.205-.207-3.049-.103-.255.031-.295-.192-.064-.359 1.493-1.05 3.939-.743 4.225-.391.287.351-.08 2.793-1.469 3.959-.216.183-.423.087-.327-.151.319-.79 1.029-2.557.694-2.986z" fill="currentColor"/>
+  </g>
+</svg>
diff --git a/packages/web/src/icons/svg/gpu-metax.svg b/packages/web/src/icons/svg/gpu-metax.svg
new file mode 100644
index 00000000..dd21e707
--- /dev/null
+++ b/packages/web/src/icons/svg/gpu-metax.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1329_2000)">
+<path d="M11.1392 14.2575L7.73511 10.8515L9.13165 9.44922L13.9323 14.2575H11.1392Z" fill="#040000"/>
+<path d="M1.83146 4.91016L5.56511 8.67122L0 14.2577H2.79309L8.3582 8.67122L4.62305 4.91016H1.83146Z" fill="#4AB134"/>
+<path d="M13.2069 1L7.73511 6.49426L9.13165 7.89654L16 1H13.2069Z" fill="#5C246A"/>
+</g>
+<defs>
+<clipPath id="clip0_1329_2000">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/web/src/icons/svg/gpu-nvidia.svg b/packages/web/src/icons/svg/gpu-nvidia.svg
new file mode 100644
index 00000000..5689ee9a
--- /dev/null
+++ b/packages/web/src/icons/svg/gpu-nvidia.svg
@@ -0,0 +1,10 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_615_1905)">
+<path d="M5.96915 5.86427V4.91011C6.0517 4.9036 6.15028 4.89916 6.24934 4.8981H6.25184C8.86808 4.81552 10.5833 7.14916 10.5833 7.14916C10.5833 7.14916 8.73256 9.71843 6.74718 9.71843C6.48472 9.71893 6.22388 9.67723 5.97465 9.59491V6.69534C6.99385 6.81885 7.2 7.26723 7.80741 8.28643L9.16835 7.14314C9.16835 7.14314 8.17316 5.84075 6.5 5.84075C6.47342 5.84025 6.44196 5.83975 6.41044 5.83975C6.2568 5.8398 6.10328 5.84848 5.95062 5.86577L5.96913 5.86421L5.96915 5.86427ZM5.96915 2.70508V4.13157L6.25184 4.11351C9.88786 3.99 12.2625 7.09558 12.2625 7.09558C12.2625 7.09558 9.54061 10.4074 6.70516 10.4074C6.46027 10.4065 6.2159 10.3849 5.97465 10.3429V11.227C6.17599 11.2525 6.37863 11.2664 6.58156 11.2685C9.2214 11.2685 11.1312 9.91909 12.9815 8.32798C13.2877 8.57565 14.5426 9.17055 14.8028 9.43023C13.046 10.9033 8.95063 12.0881 6.62859 12.0881C6.41212 12.0883 6.1958 12.0764 5.98064 12.0526V13.2959H16.0101V2.70608L5.96915 2.70508ZM5.96915 9.59379V10.3484C3.52946 9.91207 2.85156 7.37281 2.85156 7.37281C2.85156 7.37281 4.02438 6.07592 5.96915 5.86377V6.68884H5.96364C4.94444 6.56476 4.14239 7.51941 4.14239 7.51941C4.14239 7.51941 4.59621 9.12851 5.96965 9.59434L5.96915 9.59379ZM1.63816 7.26623C1.63816 7.26623 3.08163 5.13326 5.97465 4.90911V4.13107C2.77049 4.39075 0 7.10113 0 7.10113C0 7.10113 1.56758 11.6388 5.96963 12.0511V11.226C2.7409 10.8257 1.63864 7.26567 1.63864 7.26567L1.63816 7.26623Z" fill="#76B900"/>
+</g>
+<defs>
+<clipPath id="clip0_615_1905">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/web/src/icons/svg/help-circle.svg b/packages/web/src/icons/svg/help-circle.svg
new file mode 100644
index 00000000..8161988f
--- /dev/null
+++ b/packages/web/src/icons/svg/help-circle.svg
@@ -0,0 +1,6 @@
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill="currentColor"
+    d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM23 12C23 18.0751 18.0751 23 12 23C5.92487 23 0.999999 18.0751 1 12C1 5.92487 5.92487 0.999999 12 1C18.0751 1 23 5.92487 23 12ZM13.0039 18.2539L11 18.2539L11 16.25H13.0039L13.0039 18.2539ZM11.0002 15.25V14C11.0002 13.1334 11.3904 12.4265 11.8265 11.8902C12.2582 11.3592 12.8004 10.9159 13.2364 10.5723C13.7034 10.2045 14.0002 9.63718 14.0002 9C14.0002 7.89543 13.1048 7 12.0002 7C11.1309 7 10.3888 7.5551 10.1137 8.33325L9.78049 9.27609L7.89481 8.60959L8.22806 7.66675C8.7767 6.11451 10.257 5 12.0002 5C14.2093 5 16.0002 6.79086 16.0002 9C16.0002 10.2759 15.4017 11.4125 14.4742 12.1433C14.0426 12.4834 13.6572 12.8088 13.3783 13.1519C13.1037 13.4896 13.0002 13.762 13.0002 14V15.25H11.0002Z"
+  />
+</svg>
diff --git a/packages/web/src/icons/svg/node-cpu-total.svg b/packages/web/src/icons/svg/node-cpu-total.svg
new file mode 100644
index 00000000..a7a4470d
--- /dev/null
+++ b/packages/web/src/icons/svg/node-cpu-total.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 21 20">
+  <path fill="#B6C2CD" fill-rule="evenodd" d="M4.367 3.333a.833.833 0 0 0-.834.833v11.667c0 .46.373.833.834.833h11.666c.46 0 .834-.373.834-.833V4.166a.833.833 0 0 0-.834-.833zM7.7 7.5h5v5h-5z" clip-rule="evenodd"></path>
+  <path fill="#324558" d="M6.033 1.667H7.7v1.667H6.033zM1.867 5.833h1.666V7.5H1.867zM3.533 9.167H1.867v1.667h1.666zM1.867 12.5h1.666v1.667H1.867zM18.533 5.833h-1.666V7.5h1.666zM16.867 9.167h1.666v1.667h-1.666zM18.533 12.5h-1.666v1.667h1.666zM9.367 1.667h1.666v1.667H9.367zM14.367 1.667H12.7v1.667h1.667zM6.033 16.667H7.7v1.667H6.033zM11.033 16.667H9.367v1.667h1.666zM12.7 16.667h1.667v1.667H12.7zM12.7 7.5h-5v5h5z"></path>
+</svg>
diff --git a/packages/web/src/icons/svg/node-memory-total.svg b/packages/web/src/icons/svg/node-memory-total.svg
new file mode 100644
index 00000000..cb41241f
--- /dev/null
+++ b/packages/web/src/icons/svg/node-memory-total.svg
@@ -0,0 +1,16 @@
+<svg data-v-5ed31d1a="" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 21 20">
+  <g clip-path="url(#a)">
+    <mask id="b" width="21" height="20" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance;">
+      <path fill="#fff" d="M20.6 0H.6v20h20z"></path>
+    </mask>
+    <g mask="url(#b)">
+      <path fill="#B6C2CD" fill-rule="evenodd" d="M.877 12.652a.833.833 0 0 0 0 1.178l1.473 1.473a1.25 1.25 0 0 1 1.768 1.768l2.652 2.652a.833.833 0 0 0 1.178 0l1.179-1.179-.884-.884L18.26 7.643l.884.884 1.178-1.179a.833.833 0 0 0 0-1.178l-2.651-2.652a1.25 1.25 0 0 1-1.768-1.768L14.43.277a.833.833 0 0 0-1.179 0zm12.375-8.84L11.484 5.58l2.357 2.357 1.768-1.767zM10.01 7.055 7.655 9.41l2.357 2.357 2.357-2.357zm-5.597 5.598 1.767-1.768 2.357 2.357-1.767 1.768z" clip-rule="evenodd"></path>
+      <path fill="#324558" d="m11.484 5.58 1.768-1.767 2.356 2.357-1.767 1.767zM7.654 9.41l2.357-2.356 2.357 2.357-2.357 2.357zM4.413 12.652l1.767-1.768 2.357 2.357-1.767 1.768zM16.345 9.558l.884-.884.884.884-.884.884zM14.577 11.325l.884-.884.884.884-.884.884zM12.81 13.094l.883-.884.884.884-.883.884zM11.042 14.861l.884-.884.884.884-.884.884zM9.274 16.629l.884-.884.884.884-.884.884z"></path>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.6 0h20v20H.6z"></path>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/packages/web/src/icons/svg/related-gpu-eye.svg b/packages/web/src/icons/svg/related-gpu-eye.svg
new file mode 100644
index 00000000..53cd1b28
--- /dev/null
+++ b/packages/web/src/icons/svg/related-gpu-eye.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M8 2a7.336 7.336 0 0 1 7.213 6A7.336 7.336 0 0 1 .788 8 7.336 7.336 0 0 1 8 2m0 10.667A6 6 0 0 0 13.852 8 6.003 6.003 0 0 0 2.148 8 6 6 0 0 0 8 12.667M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-1.333a1.667 1.667 0 1 0 0-3.334 1.667 1.667 0 0 0 0 3.334"></path>
+</svg>
diff --git a/packages/web/src/icons/svg/vgpu-workload.svg b/packages/web/src/icons/svg/vgpu-workload.svg
new file mode 100644
index 00000000..925b3809
--- /dev/null
+++ b/packages/web/src/icons/svg/vgpu-workload.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill="#B6C2CD"
+    d="M5.932 9.817a.83.83 0 0 0-.823 0L2.09 11.53a.83.83 0 0 0-.422.725v3.404c0 .3.16.577.422.725l3.02 1.715a.83.83 0 0 0 .823 0l3.021-1.715a.83.83 0 0 0 .422-.725v-3.404c0-.3-.161-.577-.422-.725zM14.89 9.817a.83.83 0 0 0-.822 0l-3.021 1.714a.83.83 0 0 0-.422.725v3.404c0 .3.161.577.422.725l3.02 1.715a.83.83 0 0 0 .823 0l3.021-1.715a.83.83 0 0 0 .422-.725v-3.404c0-.3-.16-.577-.422-.725z"
+  />
+  <path
+    fill="#324558"
+    d="M9.59 1.9a.83.83 0 0 1 .82 0l3.125 1.767a.83.83 0 0 1 .423.725V7.9c0 .3-.161.577-.423.725l-3.125 1.768a.83.83 0 0 1-.82 0L6.465 8.625a.83.83 0 0 1-.423-.725V4.392c0-.3.161-.577.423-.725z"
+  />
+</svg>
diff --git a/packages/web/src/locales/en.js b/packages/web/src/locales/en.js
index 1f893124..bf579fd2 100644
--- a/packages/web/src/locales/en.js
+++ b/packages/web/src/locales/en.js
@@ -74,10 +74,14 @@ export default {
     nodeTotal: 'Total Nodes',
     card: 'GPU',
     gpuCardCount: 'GPU Cards',
+    workloadCount: 'Workloads',
     vgpu: 'vGPU',
     compute: 'Compute',
+    cpuTotalCores: 'Total CPU Cores',
+    cpuCoreUnit: 'Core',
+    systemMemoryTotal: 'Total Memory',
     memory: 'Memory',
-    memoryTotal: 'Total Memory',
+    memoryTotal: 'Total GPU Memory',
     schedulable: 'Schedulable',
     unschedulable: 'Unschedulable',
     allocated: 'Allocated',
@@ -87,10 +91,24 @@ export default {
     allocRateLegend: 'Alloc Rate',
     gpuComputeAllocUsageTrend: 'GPU Compute Alloc/Usage Trend (%)',
     gpuMemAllocUsageTrend: 'GPU Memory Alloc/Usage Trend (%)',
+    cpuAllocUsageTrend: 'CPU Alloc/Usage Trend (%)',
+    memAllocUsageTrend: 'Memory Alloc/Usage Trend (%)',
+    cpuAllocRate: 'CPU Allocation Rate',
+    cpuUsageRate: 'CPU Usage Rate',
+    systemMemAllocRate: 'Memory Allocation Rate',
+    systemMemUsageRate: 'Memory Usage Rate',
     nodeResourceUsageTop5: 'Node Usage Top5',
     nodeResourceAllocTop5: 'Node Alloc Top5',
     nodeComputeTop5: 'Node Compute Top5',
     nodeMemoryTop5: 'Node Memory Top5',
+    nodeWorkloadTop5: 'Node Workload Count Top5',
+    nodeWorkloadDistribution: 'Node Workload Distribution',
+    nodeWorkloadDistributionDesc1:
+      'Show the distribution of all cluster nodes by workload-count ranges.',
+    nodeWorkloadDistributionDesc2:
+      'X-axis is workload-count range per node, and Y-axis is number of nodes in that range.',
+    workload24hTrendTop5: '24h Workload Usage Trend Top5 (%)',
+    workloadRange: 'Workload Range',
     gpuComputeTop5: 'GPU Compute Top5',
     gpuMemoryTop5: 'GPU Memory Top5',
     resourceAllocTrendTitle: 'Alloc Trend',
@@ -139,6 +157,8 @@ export default {
       resourceOverview: 'Resource Overview',
       title: 'Node Detail',
       detailInfo: 'Details',
+      nodeOverview: 'Node Overview',
+      workloadDistribution: 'Workload Distribution',
       nodeSchedule: 'Node Schedule',
       resourceAllocTrend: 'Alloc Trend (%)',
       resourceUsageTrend: 'Usage Trend (%)',
@@ -150,7 +170,7 @@ export default {
       vgpuOvercommit: 'vGPU Overcommit',
       computeOvercommit: 'Compute Overcommit',
       memoryOvercommit: 'Memory Overcommit',
-      nodeIpAddress: 'Node IP Address',
+      nodeIpAddress: 'Node IP',
       nodeUuid: 'Node UUID',
       osType: 'Operating System Type',
       architecture: 'Architecture',
@@ -191,14 +211,14 @@ export default {
     unmanaged: 'Unmanaged',
     detail: {
       title: 'GPU',
-      detailInfo: 'Details',
+      detailInfo: 'Basic Info',
       resourceOverview: 'Resource Overview',
+      workloadCount: 'Workloads',
+      workloadCountTip:
+        'Each accelerator card supports sharing by multiple workloads at the same time.\nThe chart shows [Allocated Count / Maximum Supported Count].',
       resourceAllocTrend: 'Alloc Trend (%)',
       resourceUsageTrend: 'Usage Trend (%)',
-      taskList: 'Workloads',
       noAllocData: 'No allocation data',
-      unmanagedNoTask: 'GPU unmanaged; task data unavailable',
-      noTaskData: 'No task data',
       uuid: 'GPU UUID',
       temperature: 'Temperature',
       powerUsage: 'Power Usage',
@@ -227,6 +247,11 @@ export default {
     allocatedVgpu: 'vGPU',
     allocatedCompute: 'Compute',
     allocatedMemory: 'Memory',
+    gpuCardCount: 'GPU Cards',
+    computePowerLimit: 'Compute Power Limit',
+    singleCardMemory: 'Single-card Memory',
+    cpuLimit: 'CPU Limit',
+    memoryLimit: 'Memory Limit',
     startTime: 'Start Time',
     duration: 'Duration',
     namespace: 'Namespace',
@@ -240,17 +265,26 @@ export default {
     card: 'GPU',
     allCards: 'All GPUs',
     cardType: 'GPU Type',
+    gpuModel: 'GPU Model',
+    relatedGpu: 'Related GPU',
+    relatedGpuCards: '{count} GPUs',
+    image: 'Image',
+    cpu: 'CPU',
+    memory: 'Memory',
+    priority: 'Priority',
     appName: 'App Name',
     createTime: 'Creation Time',
     times: 'x',
-    computeUsageTrend: 'GPU Compute Usage Trend (%)',
-    memUsageTrend: 'GPU Memory Usage Trend (%)',
+    computeUsageTrend: 'GPU Compute Utilization (%)',
+    memUsageTrend: 'GPU Memory Utilization (%)',
+    cpuUsageTrend: 'CPU Usage (%)',
+    memoryUsageTrend: 'Memory Usage (%)',
     noMonitorSupport: 'Vendor does not support task-level monitoring',
     topCount: 'Workload Count Top5',
     topApply: 'Workload Requests Top5',
     detail: {
       title: 'Workload',
-      detailInfo: 'Details',
+      detailInfo: 'Basic Info',
       resourceOverview: 'Resource Overview',
       containerInfo: 'Container',
       podName: 'Pod Name',
diff --git a/packages/web/src/locales/zh.js b/packages/web/src/locales/zh.js
index 35d5452c..83225670 100644
--- a/packages/web/src/locales/zh.js
+++ b/packages/web/src/locales/zh.js
@@ -74,10 +74,14 @@ export default {
     nodeTotal: '节点总数',
     card: 'GPU',
     gpuCardCount: 'GPU 卡数',
+    workloadCount: '工作负载数量',
     vgpu: 'vGPU',
     compute: '算力',
+    cpuTotalCores: 'CPU 总核',
+    cpuCoreUnit: 'Core',
+    systemMemoryTotal: '内存总量',
     memory: '显存',
-    memoryTotal: '显存总量',
+    memoryTotal: 'GPU 显存总量',
     schedulable: '可调度',
     unschedulable: '禁止调度',
     allocated: '已分配',
@@ -87,10 +91,22 @@ export default {
     allocRateLegend: '分配率',
     gpuComputeAllocUsageTrend: 'GPU 算力分配/使用趋势（%）',
     gpuMemAllocUsageTrend: 'GPU 显存分配/使用趋势（%）',
+    cpuAllocUsageTrend: 'CPU 分配/使用趋势（%）',
+    memAllocUsageTrend: '内存分配/使用趋势（%）',
+    cpuAllocRate: 'CPU 分配率',
+    cpuUsageRate: 'CPU 使用率',
+    systemMemAllocRate: '内存分配率',
+    systemMemUsageRate: '内存使用率',
     nodeResourceUsageTop5: '节点使用率 Top5',
     nodeResourceAllocTop5: '节点分配率 Top5',
     nodeComputeTop5: '节点算力 Top5',
     nodeMemoryTop5: '节点显存 Top5',
+    nodeWorkloadTop5: '节点工作负载数量 Top5',
+    nodeWorkloadDistribution: '节点工作负载分布（台）',
+    nodeWorkloadDistributionDesc1: '展示集群中所有节点的工作负载在不同数量区间的分布情况。',
+    nodeWorkloadDistributionDesc2: '横轴是节点的工作负载数量范围，纵轴表示落入该范围的节点数量。',
+    workload24hTrendTop5: '24 小时工作负载使用趋势 Top5 (%)',
+    workloadRange: '工作负载区间',
     gpuComputeTop5: 'GPU 算力 Top5',
     gpuMemoryTop5: 'GPU 显存 Top5',
     resourceAllocTrendTitle: '分配趋势',
@@ -139,6 +155,8 @@ export default {
       resourceOverview: '资源概览',
       title: '节点详情',
       detailInfo: '详细信息',
+      nodeOverview: '节点概览',
+      workloadDistribution: '工作负载分布',
       nodeSchedule: '节点调度',
       resourceAllocTrend: '分配趋势（%）',
       resourceUsageTrend: '使用趋势（%）',
@@ -150,13 +168,13 @@ export default {
       vgpuOvercommit: 'vGPU 超配',
       computeOvercommit: '算力超配',
       memoryOvercommit: '显存超配',
-      nodeIpAddress: '节点 IP 地址',
+      nodeIpAddress: '节点 IP',
       nodeUuid: '节点 UUID',
       osType: '操作系统类型',
-      architecture: '系统架构',
+      architecture: '架构',
       kubeletVersion: 'kubelet 版本',
-      osVersion: '操作系统版本',
-      kernelVersion: '内核版本',
+      osVersion: '操作系统',
+      kernelVersion: 'Kernel 版本',
       kubeProxyVersion: 'kube-proxy 版本',
       containerRuntime: '容器运行时',
       creationTime: '创建时间',
@@ -191,14 +209,13 @@ export default {
     unmanaged: '未纳管',
     detail: {
       title: 'GPU',
-      detailInfo: '详细信息',
+      detailInfo: '基本信息',
       resourceOverview: '资源概览',
+      workloadCount: '工作负载数',
+      workloadCountTip: '每张算力卡支持被多个工作负载同时共享。\n图中展示的是【已分配数量 / 最大支持数量】。',
       resourceAllocTrend: '资源分配趋势（%）',
       resourceUsageTrend: '资源使用趋势（%）',
-      taskList: '工作负载',
       noAllocData: '暂无资源分配数据',
-      unmanagedNoTask: '由于 GPU 未纳管，无法获取到任务数据',
-      noTaskData: '暂无任务数据',
       uuid: 'GPU UUID',
       temperature: '温度',
       powerUsage: '功耗',
@@ -227,6 +244,11 @@ export default {
     allocatedVgpu: 'vGPU',
     allocatedCompute: '算力',
     allocatedMemory: '显存',
+    gpuCardCount: 'GPU 卡数',
+    computePowerLimit: '算力限制',
+    singleCardMemory: '单卡显存',
+    cpuLimit: 'CPU 限制',
+    memoryLimit: '内存限制',
     startTime: '启动时间',
     duration: '运行时长',
     namespace: '命名空间',
@@ -240,17 +262,26 @@ export default {
     card: '所属显卡',
     allCards: '全部显卡',
     cardType: '显卡类型',
+    gpuModel: 'GPU 型号',
+    relatedGpu: '关联 GPU',
+    relatedGpuCards: '共 {count} 张',
+    image: '镜像',
+    cpu: 'CPU',
+    memory: '内存',
+    priority: '优先级',
     appName: '应用名称',
     createTime: '创建时间',
     times: '倍',
-    computeUsageTrend: '算力使用趋势（%）',
-    memUsageTrend: '显存使用趋势（%）',
+    computeUsageTrend: 'GPU 算力使用率（%）',
+    memUsageTrend: 'GPU 显存使用率（%）',
+    cpuUsageTrend: 'CPU 使用率（%）',
+    memoryUsageTrend: '内存使用率（%）',
     noMonitorSupport: '该设备厂商暂不支持任务维度监控',
     topCount: '任务数量分布 Top5',
     topApply: '任务资源申请 Top5',
     detail: {
       title: '任务管理',
-      detailInfo: '详细信息',
+      detailInfo: '基础信息',
       resourceOverview: '资源概览',
       containerInfo: '容器信息',
       podName: 'Pod 名称',
diff --git a/packages/web/src/main.js b/packages/web/src/main.js
index c7b72834..e51dfb11 100644
--- a/packages/web/src/main.js
+++ b/packages/web/src/main.js
@@ -4,6 +4,7 @@ import router from './router';
 import store from './store';
 import installElementPlus from './plugins/element';
 import installTDesign from './plugins/tdesign';
+import installEcharts from './plugins/echarts';
 import 'normalize.css/normalize.css'; // a modern alternative to CSS resets
 import '@/styles/index.scss'; // global css
 
@@ -20,6 +21,7 @@ const app = createApp(App);
 app.use(i18n);
 installElementPlus(app);
 installTDesign(app);
+installEcharts();
 installIcons(app);
 
 app.use(components);
diff --git a/packages/web/src/plugins/echarts.js b/packages/web/src/plugins/echarts.js
new file mode 100644
index 00000000..d74296a8
--- /dev/null
+++ b/packages/web/src/plugins/echarts.js
@@ -0,0 +1,8 @@
+import { LineChart, BarChart } from 'echarts/charts';
+import { GridComponent, TooltipComponent, LegendComponent, DataZoomComponent } from 'echarts/components';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+
+export default function installEcharts() {
+  use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent, LegendComponent, DataZoomComponent]);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f300656e..c8998f70 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -213,6 +213,9 @@ importers:
       vue-count-to:
         specifier: 1.0.13
         version: 1.0.13
+      vue-echarts:
+        specifier: ^6.7.3
+        version: 6.7.3(@vue/runtime-core@3.5.25)(echarts@5.4.3)(vue@3.5.25(typescript@5.9.3))
       vue-i18n:
         specifier: '9'
         version: 9.14.5(vue@3.5.25(typescript@5.9.3))
@@ -5929,6 +5932,9 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
+  resize-detector@0.3.0:
+    resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
+
   resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
@@ -6930,6 +6936,17 @@ packages:
   vue-count-to@1.0.13:
     resolution: {integrity: sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ==}
 
+  vue-demi@0.13.11:
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -6941,6 +6958,19 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-echarts@6.7.3:
+    resolution: {integrity: sha512-vXLKpALFjbPphW9IfQPOVfb1KjGZ/f8qa/FZHi9lZIWzAnQC1DgnmEK3pJgEkyo6EP7UnX6Bv/V3Ke7p+qCNXA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.0.5
+      '@vue/runtime-core': ^3.0.0
+      echarts: ^5.4.1
+      vue: ^2.6.12 || ^3.1.1
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      '@vue/runtime-core':
+        optional: true
+
   vue-eslint-parser@8.3.0:
     resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -13942,6 +13972,8 @@ snapshots:
 
   requires-port@1.0.0: {}
 
+  resize-detector@0.3.0: {}
+
   resolve-cwd@3.0.0:
     dependencies:
       resolve-from: 5.0.0
@@ -15091,10 +15123,23 @@ snapshots:
 
   vue-count-to@1.0.13: {}
 
+  vue-demi@0.13.11(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.25(typescript@5.9.3)
+
   vue-demi@0.14.10(vue@3.5.25(typescript@5.9.3)):
     dependencies:
       vue: 3.5.25(typescript@5.9.3)
 
+  vue-echarts@6.7.3(@vue/runtime-core@3.5.25)(echarts@5.4.3)(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      echarts: 5.4.3
+      resize-detector: 0.3.0
+      vue: 3.5.25(typescript@5.9.3)
+      vue-demi: 0.13.11(vue@3.5.25(typescript@5.9.3))
+    optionalDependencies:
+      '@vue/runtime-core': 3.5.25
+
   vue-eslint-parser@8.3.0(eslint@8.56.0):
     dependencies:
       debug: 4.4.3
diff --git a/server/api/v1/container.proto b/server/api/v1/container.proto
index 8445f188..04d97d73 100644
--- a/server/api/v1/container.proto
+++ b/server/api/v1/container.proto
@@ -66,6 +66,7 @@ message ContainerReply {
   string priority = 16;
   string namespace = 17;
   repeated string device_ids = 18;
+  repeated string images = 19;
 }
 
 message ContainersReply {
diff --git a/server/internal/biz/pod.go b/server/internal/biz/pod.go
index 15aa6c52..4162db75 100644
--- a/server/internal/biz/pod.go
+++ b/server/internal/biz/pod.go
@@ -15,6 +15,7 @@ type Container struct {
 	NodeName         string
 	PodUID           string
 	PodName          string
+	Image            string
 	ContainerDevices ContainerDevices
 	Status           string
 	CreateTime       time.Time
diff --git a/server/internal/data/pod.go b/server/internal/data/pod.go
index bfc71e8c..1cb2db78 100644
--- a/server/internal/data/pod.go
+++ b/server/internal/data/pod.go
@@ -140,6 +140,7 @@ func (r *podRepo) fetchContainerInfo(pod *corev1.Pod) []*biz.Container {
 			NodeName:         pod.Spec.NodeName,
 			PodName:          pod.Name,
 			PodUID:           string(pod.UID),
+			Image:            ctr.Image,
 			Status:           containerStat[ctr.Name],
 			NodeUID:          r.GetNodeUUID(pod),
 			Namespace:        pod.Namespace,
diff --git a/server/internal/service/container.go b/server/internal/service/container.go
index 4bde7f2a..c108586d 100644
--- a/server/internal/service/container.go
+++ b/server/internal/service/container.go
@@ -27,6 +27,23 @@ func NewContainerService(node *biz.NodeUsecase, pod *biz.PodUseCase) *ContainerS
 	return &ContainerService{node: node, pod: pod}
 }
 
+func uniqueNonEmpty(values []string) []string {
+	seen := make(map[string]struct{}, len(values))
+	result := make([]string, 0, len(values))
+	for _, value := range values {
+		v := strings.TrimSpace(value)
+		if v == "" {
+			continue
+		}
+		if _, ok := seen[v]; ok {
+			continue
+		}
+		seen[v] = struct{}{}
+		result = append(result, v)
+	}
+	return result
+}
+
 func (s *ContainerService) GetAllContainers(ctx context.Context, req *pb.GetAllContainersReq) (*pb.ContainersReply, error) {
 	filters := req.Filters
 	containers, err := s.pod.ListAllContainers(ctx)
@@ -58,6 +75,7 @@ func (s *ContainerService) GetAllContainers(ctx context.Context, req *pb.GetAllC
 		containerReply.Name = container.Name
 		containerReply.Status = container.Status
 		containerReply.AppName = container.PodName
+		containerReply.Images = uniqueNonEmpty([]string{container.Image})
 		containerReply.NodeName = container.NodeName
 		containerReply.PodUid = container.PodUID
 		containerReply.NodeUid = container.NodeUID
@@ -109,6 +127,18 @@ func (s *ContainerService) GetContainer(ctx context.Context, req *pb.GetContaine
 	ctrReply.NodeUid = container.NodeUID
 	ctrReply.Namespace = container.Namespace
 	ctrReply.Priority = container.Priority
+	allContainers, err := s.pod.ListAllContainers(ctx)
+	if err == nil {
+		images := make([]string, 0)
+		for _, item := range allContainers {
+			if item.PodUID == container.PodUID {
+				images = append(images, item.Image)
+			}
+		}
+		ctrReply.Images = uniqueNonEmpty(images)
+	} else {
+		ctrReply.Images = uniqueNonEmpty([]string{container.Image})
+	}
 	for _, containerDevice := range container.ContainerDevices {
 		if req.DeviceId != "" && req.DeviceId != containerDevice.UUID {
 			continue