diff --git a/agent/app/dto/dashboard.go b/agent/app/dto/dashboard.go
index 570820a17..44a3045e0 100644
--- a/agent/app/dto/dashboard.go
+++ b/agent/app/dto/dashboard.go
@@ -116,6 +116,9 @@ type DashboardCurrent struct {
 	GPUData []GPUInfo `json:"gpuData"`
 	XPUData []XPUInfo `json:"xpuData"`
 
+	TopCPUItems []Process `json:"topCPUItems"`
+	TopMemItems []Process `json:"topMemItems"`
+
 	ShotTime time.Time `json:"shotTime"`
 }
 
diff --git a/agent/app/service/dashboard.go b/agent/app/service/dashboard.go
index 6e293bcc6..5792c59df 100644
--- a/agent/app/service/dashboard.go
+++ b/agent/app/service/dashboard.go
@@ -120,7 +120,7 @@ func (u *DashboardService) LoadCurrentInfoForNode() *dto.NodeCurrent {
 	memoryInfo, _ := mem.VirtualMemory()
 	currentInfo.MemoryTotal = memoryInfo.Total
 	currentInfo.MemoryAvailable = memoryInfo.Available
-	currentInfo.MemoryUsed = memoryInfo.Used + memoryInfo.Shared
+	currentInfo.MemoryUsed = memoryInfo.Used
 	currentInfo.MemoryUsedPercent = memoryInfo.UsedPercent
 
 	swapInfo, _ := mem.SwapMemory()
@@ -194,7 +194,7 @@ func (u *DashboardService) LoadCurrentInfo(ioOption string, netOption string) *d
 
 	memoryInfo, _ := mem.VirtualMemory()
 	currentInfo.MemoryTotal = memoryInfo.Total
-	currentInfo.MemoryUsed = memoryInfo.Used + memoryInfo.Shared
+	currentInfo.MemoryUsed = memoryInfo.Used
 	currentInfo.MemoryFree = memoryInfo.Free
 	currentInfo.MemoryCache = memoryInfo.Cached + memoryInfo.Buffers
 	currentInfo.MemoryShard = memoryInfo.Shared
@@ -211,6 +211,9 @@ func (u *DashboardService) LoadCurrentInfo(ioOption string, netOption string) *d
 	currentInfo.GPUData = loadGPUInfo()
 	currentInfo.XPUData = loadXpuInfo()
 
+	currentInfo.TopCPUItems = loadTopCPU()
+	currentInfo.TopMemItems = loadTopMem()
+
 	if ioOption == "all" {
 		diskInfo, _ := disk.IOCounters()
 		for _, state := range diskInfo {
diff --git a/agent/app/service/monitor.go b/agent/app/service/monitor.go
index ca96d7bad..f09d94773 100644
--- a/agent/app/service/monitor.go
+++ b/agent/app/service/monitor.go
@@ -183,7 +183,7 @@ func (m *MonitorService) Run() {
 	if len(totalPercent) == 1 {
 		itemModel.Cpu = totalPercent[0]
 	}
-	topCPU := m.loadTopCPU()
+	topCPU := loadTopCPU()
 	if len(topCPU) != 0 {
 		topItemCPU, err := json.Marshal(topCPU)
 		if err == nil {
@@ -199,7 +199,7 @@ func (m *MonitorService) Run() {
 
 	memoryInfo, _ := mem.VirtualMemory()
 	itemModel.Memory = memoryInfo.UsedPercent
-	topMem := m.loadTopMem()
+	topMem := loadTopMem()
 	if len(topMem) != 0 {
 		topMemItem, err := json.Marshal(topMem)
 		if err == nil {
@@ -350,7 +350,7 @@ func (m *MonitorService) saveNetDataToDB(ctx context.Context, interval float64)
 	}
 }
 
-func (m *MonitorService) loadTopCPU() []dto.Process {
+func loadTopCPU() []dto.Process {
 	processes, err := process.Processes()
 	if err != nil {
 		return nil
@@ -400,7 +400,7 @@ func (m *MonitorService) loadTopCPU() []dto.Process {
 	return top5
 }
 
-func (m *MonitorService) loadTopMem() []dto.Process {
+func loadTopMem() []dto.Process {
 	processes, err := process.Processes()
 	if err != nil {
 		return nil
diff --git a/frontend/src/api/interface/dashboard.ts b/frontend/src/api/interface/dashboard.ts
index abb640740..a87e36b18 100644
--- a/frontend/src/api/interface/dashboard.ts
+++ b/frontend/src/api/interface/dashboard.ts
@@ -103,11 +103,22 @@ export namespace Dashboard {
         gpuData: Array<GPUInfo>;
         xpuData: Array<XPUInfo>;
 
+        topCPUItems: Array<Process>;
+        topMemItems: Array<Process>;
+
         netBytesSent: number;
         netBytesRecv: number;
 
         shotTime: Date;
     }
+    export interface Process {
+        name: string;
+        pid: number;
+        percent: number;
+        memory: number;
+        cmd: string;
+        user: string;
+    }
     export interface DiskInfo {
         path: string;
         type: string;
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index fc96ac4b3..bc52d27ab 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -426,7 +426,7 @@ const message = {
         ioDelay: 'I/O latency',
         uptime: 'Uptime',
         runningTime: 'Up since',
-        mem: 'System',
+        mem: 'System Memory',
         swapMem: 'Swap Partition',
 
         runSmoothly: 'Low load',
@@ -436,6 +436,9 @@ const message = {
 
         core: 'Physical core',
         logicCore: 'Logical core',
+        corePercent: 'Core Usage',
+        cpuTop: 'Top 5 Processes by CPU Usage',
+        memTop: 'Top 5 Processes by Memory Usage',
         loadAverage: 'Load average in the last 1 minute | Load average in the last {n} minutes',
         load: 'Load',
         mount: 'Mount point',
@@ -3009,6 +3012,9 @@ const message = {
         stopProcess: 'End',
         viewDetails: 'View details',
         stopProcessWarn: 'Are you sure you want to end this process (PID:{0})?',
+        kill: 'Kill Process',
+        killNow: 'Kill Now',
+        killHelper: 'Killing process {0} may cause some programs to malfunction. Continue?',
         processName: 'Process name',
     },
     tool: {
diff --git a/frontend/src/lang/modules/es-es.ts b/frontend/src/lang/modules/es-es.ts
index d579940e2..02545d4db 100644
--- a/frontend/src/lang/modules/es-es.ts
+++ b/frontend/src/lang/modules/es-es.ts
@@ -434,7 +434,7 @@ const message = {
         ioDelay: 'Latencia de E/S',
         uptime: 'Tiempo en funcionamiento',
         runningTime: 'Desde',
-        mem: 'Sistema',
+        mem: 'Memoria del Sistema',
         swapMem: 'Partición swap',
         runSmoothly: 'Carga baja',
         runNormal: 'Carga moderada',
@@ -442,6 +442,9 @@ const message = {
         runJam: 'Carga pesada',
         core: 'Núcleo físico',
         logicCore: 'Núcleo lógico',
+        corePercent: 'Uso del Núcleo',
+        cpuTop: 'Top 5 de Procesos por Uso de CPU',
+        memTop: 'Top 5 de Procesos por Uso de Memoria',
         loadAverage: 'Promedio de carga en el último minuto | Promedio de carga en los últimos {n} minutos',
         load: 'Carga',
         mount: 'Punto de montaje',
@@ -2982,6 +2985,9 @@ const message = {
         stopProcess: 'Finalizar',
         viewDetails: 'Ver detalles',
         stopProcessWarn: '¿Seguro que deseas finalizar este proceso (PID:{0})?',
+        kill: 'Terminar Proceso',
+        killNow: 'Terminar Ahora',
+        killHelper: 'Terminar el proceso {0} puede hacer que algunos programas funcionen incorrectamente. ¿Continuar?',
         processName: 'Nombre del proceso',
     },
     tool: {
diff --git a/frontend/src/lang/modules/ja.ts b/frontend/src/lang/modules/ja.ts
index 7b887991e..0e0c3f94e 100644
--- a/frontend/src/lang/modules/ja.ts
+++ b/frontend/src/lang/modules/ja.ts
@@ -415,7 +415,7 @@ const message = {
         ioDelay: 'I/Oレイテンシ',
         uptime: 'それ以来',
         runningTime: '稼働時間',
-        mem: 'システム',
+        mem: 'システムメモリ',
         swapMem: 'パーティションを交換します',
 
         runSmoothly: '低負荷',
@@ -425,6 +425,9 @@ const message = {
 
         core: '物理コア',
         logicCore: '論理コア',
+        corePercent: 'コア使用率',
+        cpuTop: 'CPU使用率トップ5のプロセス情報',
+        memTop: 'メモリ使用率トップ5のプロセス情報',
         loadAverage: '最後の1分で平均を積み込みます|最後の{n}分で平均を読み込みます',
         load: '負荷',
         mount: 'マウントポイント',
@@ -2907,6 +2910,9 @@ const message = {
         stopProcess: '終わり',
         viewDetails: '詳細',
         stopProcessWarn: 'このプロセスを終了したいですか（PID:{0}）？',
+        kill: 'プロセス終了',
+        killNow: '今すぐ終了',
+        killHelper: 'プロセス {0} を終了すると一部のプログラムが正常に動作しなくなる可能性があります。続行しますか？',
         processName: 'プロセス名',
     },
     tool: {
diff --git a/frontend/src/lang/modules/ko.ts b/frontend/src/lang/modules/ko.ts
index 7d56677cf..80f403a97 100644
--- a/frontend/src/lang/modules/ko.ts
+++ b/frontend/src/lang/modules/ko.ts
@@ -418,7 +418,7 @@ const message = {
         ioDelay: 'I/O 지연 시간',
         uptime: '작동 시간',
         runningTime: '가동 시간',
-        mem: '시스템',
+        mem: '시스템 메모리',
         swapMem: '스왑 파티션',
 
         runSmoothly: '낮은 부하',
@@ -428,6 +428,9 @@ const message = {
 
         core: '물리적 코어',
         logicCore: '논리 코어',
+        corePercent: '코어 사용률',
+        cpuTop: 'CPU 사용률 상위 5개 프로세스 정보',
+        memTop: '메모리 사용률 상위 5개 프로세스 정보',
         loadAverage: '지난 1분의 평균 부하 | 지난 {n} 분의 평균 부하',
         load: '부하',
         mount: '마운트 지점',
@@ -2856,6 +2859,10 @@ const message = {
         stopProcess: '종료',
         viewDetails: '세부 사항',
         stopProcessWarn: '이 프로세스(PID:{0})를 종료하시겠습니까?',
+        kill: '프로세스 종료',
+        killNow: '즉시 종료',
+        killHelper:
+            '프로세스 {0}을(를) 종료하면 일부 프로그램이 정상적으로 작동하지 않을 수 있습니다. 계속하시겠습니까?',
         processName: '프로세스 이름',
     },
     tool: {
diff --git a/frontend/src/lang/modules/ms.ts b/frontend/src/lang/modules/ms.ts
index e0efa1c86..3fe36c3f0 100644
--- a/frontend/src/lang/modules/ms.ts
+++ b/frontend/src/lang/modules/ms.ts
@@ -424,7 +424,7 @@ const message = {
         ioDelay: 'I/O latency',
         uptime: 'Up since',
         runningTime: 'Uptime',
-        mem: 'System',
+        mem: 'Memori Sistem',
         swapMem: 'Swap partition',
 
         runSmoothly: 'Beban rendah',
@@ -433,6 +433,9 @@ const message = {
         runJam: 'Beban berat',
 
         core: 'Teras Fizikal',
+        corePercent: 'Penggunaan Teras',
+        cpuTop: 'Maklumat Proses 5 Teratas Mengikut Penggunaan CPU',
+        memTop: 'Maklumat Proses 5 Teratas Mengikut Penggunaan Memori',
         logicCore: 'Teras Logik',
         loadAverage: 'Purata beban dalam 1 minit terakhir | Purata beban dalam {n} minit terakhir',
         load: 'Beban',
@@ -2973,6 +2976,10 @@ const message = {
         stopProcess: 'End',
         viewDetails: 'Details',
         stopProcessWarn: 'Are you sure you want to end this process (PID:{0})?',
+        kill: 'Hentikan Proses',
+        killNow: 'Hentikan Sekarang',
+        killHelper:
+            'Menghentikan proses {0} mungkin menyebabkan beberapa program tidak berfungsi dengan normal. Teruskan?',
         processName: 'Process name',
     },
     tool: {
diff --git a/frontend/src/lang/modules/pt-br.ts b/frontend/src/lang/modules/pt-br.ts
index 67650ddec..29dbc6794 100644
--- a/frontend/src/lang/modules/pt-br.ts
+++ b/frontend/src/lang/modules/pt-br.ts
@@ -422,7 +422,7 @@ const message = {
         ioDelay: 'Latência de I/O',
         uptime: 'Tempo de atividade',
         runningTime: 'Tempo de execução',
-        mem: 'Memória',
+        mem: 'Memória do Sistema',
         swapMem: 'Partição Swap',
 
         runSmoothly: 'Baixo carregamento',
@@ -432,6 +432,9 @@ const message = {
 
         core: 'Núcleo físico',
         logicCore: 'Núcleo lógico',
+        corePercent: 'Uso do Núcleo',
+        cpuTop: 'Top 5 Processos por Uso de CPU',
+        memTop: 'Top 5 Processos por Uso de Memória',
         loadAverage: 'Média de carga nos últimos 1 minuto | Média de carga nos últimos {n} minutos',
         load: 'Carga',
         mount: 'Ponto de montagem',
@@ -2978,6 +2981,9 @@ const message = {
         stopProcess: 'Encerrar',
         viewDetails: 'Detalhes',
         stopProcessWarn: 'Tem certeza de que deseja encerrar este processo (PID:{0})?',
+        kill: 'Encerrar Processo',
+        killNow: 'Encerrar Agora',
+        killHelper: 'Encerrar o processo {0} pode fazer com que alguns programas funcionem incorretamente. Continuar?',
         processName: 'Nome do Processo',
     },
     tool: {
diff --git a/frontend/src/lang/modules/ru.ts b/frontend/src/lang/modules/ru.ts
index a5363106b..dd2225e36 100644
--- a/frontend/src/lang/modules/ru.ts
+++ b/frontend/src/lang/modules/ru.ts
@@ -419,7 +419,7 @@ const message = {
         ioDelay: 'Задержка ввода/вывода',
         uptime: 'Работает с',
         runningTime: 'Время работы',
-        mem: 'Память',
+        mem: 'Системная Память',
         swapMem: 'Раздел подкачки',
 
         runSmoothly: 'Низкая нагрузка',
@@ -429,6 +429,9 @@ const message = {
 
         core: 'Физических ядер',
         logicCore: 'Логических ядер',
+        corePercent: 'Использование Ядра',
+        cpuTop: 'Топ 5 Процессов по Использованию ЦПУ',
+        memTop: 'Топ 5 Процессов по Использованию Памяти',
         loadAverage: 'Средняя нагрузка за последнюю минуту | Средняя нагрузка за последние {n} минут',
         load: 'Нагрузка',
         mount: 'Точка монтирования',
@@ -2971,6 +2974,9 @@ const message = {
         stopProcess: 'Завершить',
         viewDetails: 'Подробности',
         stopProcessWarn: 'Вы уверены, что хотите завершить этот процесс (PID:{0})?',
+        kill: 'Завершить Процесс',
+        killNow: 'Завершить Сейчас',
+        killHelper: 'Завершение процесса {0} может привести к некорректной работе некоторых программ. Продолжить?',
         processName: 'Имя процесса',
     },
     tool: {
diff --git a/frontend/src/lang/modules/tr.ts b/frontend/src/lang/modules/tr.ts
index b1270a719..19a703bb2 100644
--- a/frontend/src/lang/modules/tr.ts
+++ b/frontend/src/lang/modules/tr.ts
@@ -430,7 +430,7 @@ const message = {
         ioDelay: 'G/Ç gecikmesi',
         uptime: 'Çalışma süresi',
         runningTime: 'Şu tarihten beri açık',
-        mem: 'Sistem',
+        mem: 'Sistem Belleği',
         swapMem: 'Swap Bölümü',
 
         runSmoothly: 'Düşük yük',
@@ -440,6 +440,9 @@ const message = {
 
         core: 'Fiziksel çekirdek',
         logicCore: 'Mantıksal çekirdek',
+        corePercent: 'Çekirdek Kullanımı',
+        cpuTop: 'CPU Kullanımına Göre İlk 5 İşlem',
+        memTop: 'Bellek Kullanımına Göre İlk 5 İşlem',
         loadAverage: 'Son 1 dakikadaki yük ortalaması | Son {n} dakikadaki yük ortalaması',
         load: 'Yük',
         mount: 'Bağlama noktası',
@@ -3051,6 +3054,10 @@ const message = {
         stopProcess: 'Sonlandır',
         viewDetails: 'Detayları görüntüle',
         stopProcessWarn: 'Bu işlemi (PID:{0}) sonlandırmak istediğinizden emin misiniz?',
+        kill: 'İşlemi Sonlandır',
+        killNow: 'Hemen Sonlandır',
+        killHelper:
+            '{0} işlemini sonlandırmak bazı programların düzgün çalışmamasına neden olabilir. Devam etmek istiyor musunuz?',
         processName: 'İşlem adı',
     },
     tool: {
diff --git a/frontend/src/lang/modules/zh-Hant.ts b/frontend/src/lang/modules/zh-Hant.ts
index bb129083d..72c2f4a37 100644
--- a/frontend/src/lang/modules/zh-Hant.ts
+++ b/frontend/src/lang/modules/zh-Hant.ts
@@ -413,7 +413,7 @@ const message = {
         ioDelay: '讀寫延遲',
         uptime: '啟動時間',
         runningTime: '執行時間',
-        mem: '系統',
+        mem: '系統記憶體',
         swapMem: 'Swap 分區',
 
         runSmoothly: '執行流暢',
@@ -423,6 +423,9 @@ const message = {
 
         core: '物理核心',
         logicCore: '邏輯核心',
+        corePercent: '核心使用率',
+        cpuTop: 'CPU 佔用率 Top5 的行程資訊',
+        memTop: '記憶體佔用率 Top5 的行程資訊',
         loadAverage: '最近 {0} 分鐘平均負載',
         load: '負載',
         mount: '掛載點',
@@ -2796,6 +2799,9 @@ const message = {
         stopProcess: '結束',
         viewDetails: '查看詳情',
         stopProcessWarn: '是否確定結束此行程 (PID:{0})？',
+        kill: '結束行程',
+        killNow: '立即結束',
+        killHelper: '結束行程 {0} 可能導致部分程式無法正常運作，是否繼續？',
         processName: '行程名稱',
     },
     tool: {
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index ee21b6983..b887a732a 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -413,7 +413,7 @@ const message = {
         ioDelay: '读写延迟',
         uptime: '启动时间',
         runningTime: '运行时间',
-        mem: '系统',
+        mem: '系统内存',
         swapMem: 'Swap 分区',
 
         runSmoothly: '运行流畅',
@@ -423,6 +423,9 @@ const message = {
 
         core: '物理核心',
         logicCore: '逻辑核心',
+        corePercent: '核心使用率',
+        cpuTop: 'CPU 占用率 Top5 的进程信息',
+        memTop: '内存占用率 Top5 的进程信息',
         loadAverage: '最近 {0} 分钟平均负载',
         load: '负载',
         mount: '挂载点',
@@ -2790,6 +2793,9 @@ const message = {
         stopProcess: '结束',
         viewDetails: '查看详情',
         stopProcessWarn: '是否确定结束此进程 (PID:{0})？',
+        kill: '结束进程',
+        killNow: '立即结束',
+        killHelper: '结束进程 {0} 可能导致部分程序无法正常运行，是否继续？',
         processName: '进程名称',
     },
     tool: {
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 307cf8092..ed0588ef8 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :key="$route.fullPath">
+    <div :key="$route.fullPath" id="dashboard">
         <RouterButton
             :buttons="[
                 {
@@ -425,6 +425,9 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
     netBytesSent: 0,
     netBytesRecv: 0,
 
+    topCPUItems: [],
+    topMemItems: [],
+
     shotTime: new Date(),
 });
 const currentChartInfo = reactive({
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index 0de049973..90750b35f 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -1,16 +1,37 @@
 <template>
-    <el-row :gutter="10">
-        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['load']">
-                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', [1]) }}: {{ formatNumber(currentInfo.load1) }}
-                </el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', [5]) }}: {{ formatNumber(currentInfo.load5) }}
-                </el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', [15]) }}: {{ formatNumber(currentInfo.load15) }}
-                </el-tag>
+    <div class="custom-row">
+        <el-col :xs="6" :sm="6" :md="3" :lg="3" :xl="3" align="center">
+            <el-popover :hide-after="20" :teleported="false" :width="320" v-if="chartsOption['load']">
+                <el-descriptions :column="1" size="small">
+                    <el-descriptions-item :label="$t('home.loadAverage', [1])">
+                        {{ formatNumber(currentInfo.load1) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.loadAverage', [5])">
+                        {{ formatNumber(currentInfo.load5) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.loadAverage', [15])">
+                        {{ formatNumber(currentInfo.load15) }}
+                    </el-descriptions-item>
+                </el-descriptions>
+
+                <el-button link size="small" type="primary" class="float-left mb-2" @click="showTop = !showTop">
+                    {{ $t('home.cpuTop') }}
+                    <el-icon v-if="!showTop"><ArrowRight /></el-icon>
+                    <el-icon v-if="showTop"><ArrowDown /></el-icon>
+                </el-button>
+                <ComplexTable v-if="showTop" :data="currentInfo.topCPUItems">
+                    <el-table-column :min-width="120" show-overflow-tooltip :label="$t('menu.process')" prop="name" />
+                    <el-table-column :min-width="60" :label="$t('monitor.percent')" prop="percent">
+                        <template #default="{ row }">{{ row.percent.toFixed(2) }}%</template>
+                    </el-table-column>
+                    <el-table-column :width="80" :label="$t('commons.table.operate')">
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="onKill(row)">
+                                {{ $t('process.stopProcess') }}
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </ComplexTable>
                 <template #reference>
                     <v-charts
                         height="160px"
@@ -23,42 +44,50 @@
             </el-popover>
             <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
         </el-col>
-        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover placement="bottom" :width="loadWidth()" trigger="hover" v-if="chartsOption['cpu']">
-                <div>
-                    <el-tooltip
-                        effect="dark"
-                        :content="baseInfo.cpuModelName"
-                        v-if="baseInfo.cpuModelName.length > 40"
-                        placement="top"
-                    >
-                        <el-tag class="cpuModeTag">
-                            {{ baseInfo.cpuModelName.substring(0, 40) + '...' }}
-                        </el-tag>
-                    </el-tooltip>
-                    <el-tag v-else>
-                        {{ baseInfo.cpuModelName }}
-                    </el-tag>
-                </div>
-                <el-tag class="cpuDetailTag">{{ $t('home.core') }} *{{ baseInfo.cpuCores }}</el-tag>
-                <el-tag class="cpuDetailTag">{{ $t('home.logicCore') }} *{{ baseInfo.cpuLogicalCores }}</el-tag>
-                <br />
-                <div v-for="(item, index) of currentInfo.cpuPercent" :key="index">
-                    <el-tag v-if="cpuShowAll || (!cpuShowAll && index < 32)" class="tagCPUClass">
-                        CPU-{{ index }}: {{ formatNumber(item) }}%
-                    </el-tag>
+        <el-col :xs="6" :sm="6" :md="3" :lg="3" :xl="3">
+            <el-popover :hide-after="20" :teleported="false" :width="430" v-if="chartsOption['cpu']">
+                <el-descriptions :title="baseInfo.cpuModelName" :column="2" size="small">
+                    <el-descriptions-item :label="$t('home.core')">
+                        {{ baseInfo.cpuCores }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.logicCore')">
+                        {{ baseInfo.cpuLogicalCores }}
+                    </el-descriptions-item>
+                </el-descriptions>
+
+                <el-button size="small" link type="primary" class="mb-2">
+                    {{ $t('home.corePercent') }}
+                </el-button>
+                <el-space wrap :size="5" class="ml-1">
+                    <template v-for="(item, index) of currentInfo.cpuPercent" :key="index">
+                        <div class="cpu-detail" v-if="cpuShowAll || (!cpuShowAll && index < 8)">
+                            CPU-{{ index }}: {{ formatNumber(item) }}%
+                        </div>
+                    </template>
+                </el-space>
+                <div v-if="currentInfo.cpuPercent.length > 8">
+                    <el-button v-if="!cpuShowAll" @click="cpuShowAll = true" icon="More" link size="small" />
+                    <el-button v-if="cpuShowAll" @click="cpuShowAll = false" icon="ArrowUp" link size="small" />
                 </div>
 
-                <div v-if="currentInfo.cpuPercent.length > 32" class="mt-1 float-right">
-                    <el-button v-if="!cpuShowAll" @click="cpuShowAll = true" link type="primary" size="small">
-                        {{ $t('commons.button.showAll') }}
-                        <el-icon><DArrowRight /></el-icon>
-                    </el-button>
-                    <el-button v-if="cpuShowAll" @click="cpuShowAll = false" link type="primary" size="small">
-                        {{ $t('commons.button.hideSome') }}
-                        <el-icon><DArrowLeft /></el-icon>
-                    </el-button>
-                </div>
+                <el-button link size="small" type="primary" class="mt-2 mb-2" @click="showTop = !showTop">
+                    {{ $t('home.cpuTop') }}
+                    <el-icon v-if="!showTop"><ArrowRight /></el-icon>
+                    <el-icon v-if="showTop"><ArrowDown /></el-icon>
+                </el-button>
+                <ComplexTable v-if="showTop" :data="currentInfo.topCPUItems">
+                    <el-table-column :min-width="120" show-overflow-tooltip :label="$t('menu.process')" prop="name" />
+                    <el-table-column :min-width="60" :label="$t('monitor.percent')" prop="percent">
+                        <template #default="{ row }">{{ row.percent.toFixed(2) }}%</template>
+                    </el-table-column>
+                    <el-table-column :width="80" :label="$t('commons.table.operate')">
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="onKill(row)">
+                                {{ $t('process.stopProcess') }}
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </ComplexTable>
                 <template #reference>
                     <v-charts
                         height="160px"
@@ -69,63 +98,84 @@
                     />
                 </template>
             </el-popover>
-            <span class="input-help">
-                ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} )
-                {{ $t('commons.units.core', currentInfo.cpuTotal) }}
-            </span>
+            <div class="text-center">
+                <span class="input-help">
+                    ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} )
+                    {{ $t('commons.units.core', currentInfo.cpuTotal) }}
+                </span>
+            </div>
         </el-col>
-        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover
-                placement="bottom"
-                :width="currentInfo.swapMemoryTotal ? 320 : 160"
-                trigger="hover"
-                v-if="chartsOption['memory']"
-            >
-                <el-row :gutter="5">
-                    <el-col :span="currentInfo.swapMemoryTotal ? 12 : 24">
-                        <el-row>
-                            <el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
-                        </el-row>
-                        <el-tag class="tagClass">
-                            {{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.free') }}: {{ computeSize(currentInfo.memoryFree) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.shard') }}: {{ computeSize(currentInfo.memoryShard) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.cache') }}: {{ computeSize(currentInfo.memoryCache) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.available') }}: {{ computeSize(currentInfo.memoryAvailable) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
-                        </el-tag>
-                    </el-col>
-                    <el-col :span="12" v-if="currentInfo.swapMemoryTotal" class="mt-20">
-                        <el-row>
-                            <el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
-                        </el-row>
-                        <el-tag class="tagClass">
-                            {{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
-                        </el-tag>
-                    </el-col>
-                </el-row>
+        <el-col :xs="6" :sm="6" :md="3" :lg="3" :xl="3" align="center">
+            <el-popover :hide-after="20" :teleported="false" :width="480" v-if="chartsOption['memory']">
+                <el-descriptions direction="vertical" :title="$t('home.mem')" class="ml-1" :column="4" size="small">
+                    <el-descriptions-item :label-width="60" :label="$t('home.total')">
+                        {{ computeSize(currentInfo.memoryTotal) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.used')">
+                        {{ computeSize(currentInfo.memoryUsed) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.free')">
+                        {{ computeSize(currentInfo.memoryFree) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.available')">
+                        {{ computeSize(currentInfo.memoryAvailable) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.shard')">
+                        {{ computeSize(currentInfo.memoryShard) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.cache')">
+                        {{ computeSize(currentInfo.memoryCache) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('home.percent')">
+                        {{ formatNumber(currentInfo.memoryUsedPercent) }}%
+                    </el-descriptions-item>
+                </el-descriptions>
+
+                <el-descriptions
+                    v-if="currentInfo.swapMemoryTotal"
+                    direction="vertical"
+                    :title="$t('home.swapMem')"
+                    :column="4"
+                    size="small"
+                    class="ml-1"
+                >
+                    <el-descriptions-item :label-width="60" :label="$t('home.total')">
+                        {{ computeSize(currentInfo.swapMemoryTotal) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label-width="60" :label="$t('home.used')">
+                        {{ computeSize(currentInfo.swapMemoryUsed) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label-width="60" :label="$t('home.free')">
+                        {{ computeSize(currentInfo.swapMemoryAvailable) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label-width="60" :label="$t('home.percent')">
+                        {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
+                    </el-descriptions-item>
+                </el-descriptions>
+
+                <el-button link size="small" type="primary" class="float-left mb-2" @click="showTop = !showTop">
+                    {{ $t('home.memTop') }}
+                    <el-icon v-if="!showTop"><ArrowRight /></el-icon>
+                    <el-icon v-if="showTop"><ArrowDown /></el-icon>
+                </el-button>
+                <ComplexTable v-if="showTop" :data="currentInfo.topMemItems">
+                    <el-table-column :min-width="120" show-overflow-tooltip :label="$t('menu.process')" prop="name" />
+                    <el-table-column :min-width="100" :label="$t('monitor.memory')" prop="memory">
+                        <template #default="{ row }">
+                            {{ computeSize(row.memory) }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column :min-width="80" :label="$t('monitor.percent')" prop="percent">
+                        <template #default="{ row }">{{ row.percent.toFixed(2) }}%</template>
+                    </el-table-column>
+                    <el-table-column :width="80" :label="$t('commons.table.operate')">
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="onKill(row)">
+                                {{ $t('process.stopProcess') }}
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </ComplexTable>
                 <template #reference>
                     <v-charts
                         height="160px"
@@ -141,48 +191,42 @@
             </span>
         </el-col>
         <template v-for="(item, index) of currentInfo.diskData" :key="index">
-            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
-                <el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
-                    <el-row :gutter="5">
-                        <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="nameTag">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="nameTag">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tooltip :content="item.device" v-if="item.device.length > 30">
-                            <el-tag class="nameTag">
-                                {{ $t('home.fileSystem') }}: {{ item.device.substring(0, 30) + '...' }}
-                            </el-tag>
-                        </el-tooltip>
-                        <el-tag v-else class="nameTag">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-col :span="12">
-                            <div><el-tag class="nameTag" style="font-weight: 500">Inode:</el-tag></div>
-                            <el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
-                            <el-tag class="tagClass">
-                                {{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
-                            </el-tag>
-                        </el-col>
+            <el-col :xs="6" :sm="6" :md="3" :lg="3" :xl="3" align="center" v-if="isShow('disk', index)">
+                <el-popover :hide-after="20" :teleported="false" :width="450" v-if="chartsOption[`disk${index}`]">
+                    <el-descriptions :column="1" size="small">
+                        <el-descriptions-item :label="$t('home.mount')">
+                            {{ item.path }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('commons.table.type')">
+                            {{ item.type }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('home.fileSystem')">
+                            {{ item.device }}
+                        </el-descriptions-item>
+                    </el-descriptions>
+                    <el-descriptions title="Inode" direction="vertical" :column="4" size="small">
+                        <el-descriptions-item :label="$t('home.total')">{{ item.inodesTotal }}</el-descriptions-item>
+                        <el-descriptions-item :label="$t('home.used')">{{ item.inodesUsed }}</el-descriptions-item>
+                        <el-descriptions-item :label="$t('home.free')">{{ item.inodesFree }}</el-descriptions-item>
+                        <el-descriptions-item :label="$t('home.percent')">
+                            {{ formatNumber(item.inodesUsedPercent) }}%
+                        </el-descriptions-item>
+                    </el-descriptions>
 
-                        <el-col :span="12">
-                            <div>
-                                <el-tag style="margin-top: 3px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
-                            </div>
-                            <el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(item.total) }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
-                            <el-tag class="tagClass">
-                                {{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
-                            </el-tag>
-                        </el-col>
-                    </el-row>
+                    <el-descriptions :title="$t('monitor.disk')" direction="vertical" :column="4" size="small">
+                        <el-descriptions-item :label="$t('home.total')">
+                            {{ computeSize(item.total) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('home.used')">
+                            {{ computeSize(item.used) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('home.free')">
+                            {{ computeSize(item.free) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('home.percent')">
+                            {{ formatNumber(item.usedPercent) }}%
+                        </el-descriptions-item>
+                    </el-descriptions>
                     <template #reference>
                         <v-charts
                             @click="routerToFileWithPath(item.path)"
@@ -198,19 +242,28 @@
             </el-col>
         </template>
         <template v-for="(item, index) of currentInfo.gpuData" :key="index">
-            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
-                <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
-                    <el-row :gutter="5">
-                        <el-tag class="nameTag" style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
-                    </el-row>
-                    <el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('monitor.temperature') }}: {{ item.temperature.replaceAll('C', '°C') }}
-                    </el-tag>
-                    <el-tag class="tagClass">{{ $t('monitor.performanceState') }}: {{ item.performanceState }}</el-tag>
-                    <el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
-                    <el-tag class="tagClass">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
-                    <el-tag class="tagClass">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
+            <el-col :xs="6" :sm="6" :md="3" :lg="3" :xl="3" align="center" v-if="isShow('gpu', index)">
+                <el-popover :hide-after="20" :teleported="false" :width="450" v-if="chartsOption[`gpu${index}`]">
+                    <el-descriptions :title="item.productName" direction="vertical" :column="3" size="small">
+                        <el-descriptions-item :label="$t('monitor.gpuUtil')">
+                            {{ item.gpuUtil }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.temperature')">
+                            {{ item.temperature.replaceAll('C', '°C') }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.performanceState')">
+                            {{ item.performanceState }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.powerUsage')">
+                            {{ item.powerUsage }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.memoryUsage')">
+                            {{ item.memoryUsage }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.fanSpeed')">
+                            {{ item.fanSpeed }}
+                        </el-descriptions-item>
+                    </el-descriptions>
                     <template #reference>
                         <v-charts
                             @click="goGPU()"
@@ -229,17 +282,22 @@
             </el-col>
         </template>
         <template v-for="(item, index) of currentInfo.xpuData" :key="index">
-            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('xpu', index)">
-                <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`xpu${index}`]">
-                    <el-row :gutter="5">
-                        <el-tag class="nameTag">{{ $t('home.baseInfo') }}:</el-tag>
-                    </el-row>
-                    <el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag>
-                    <el-tag class="tagClass">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag>
-                    <el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('monitor.memoryUsage') }}: {{ item.memoryUsed }}/{{ item.memory }}
-                    </el-tag>
+            <el-col :xs="6" :sm="6" :md="3" :lg="3" :xl="3" align="center" v-if="isShow('xpu', index)">
+                <el-popover :hide-after="20" :teleported="false" :width="400" v-if="chartsOption[`xpu${index}`]">
+                    <el-descriptions :title="item.deviceName" direction="vertical" :column="4" size="small">
+                        <el-descriptions-item :label="$t('monitor.gpuUtil')">
+                            {{ item.memoryUtil }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.temperature')">
+                            {{ item.temperature }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.powerUsage')">
+                            {{ item.power }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('monitor.memoryUsage')">
+                            {{ item.memoryUsed }}/{{ item.memory }}
+                        </el-descriptions-item>
+                    </el-descriptions>
                     <template #reference>
                         <v-charts
                             @click="goGPU()"
@@ -257,7 +315,7 @@
                 <span class="input-help" v-else>{{ item.deviceName }}</span>
             </el-col>
         </template>
-        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="totalCount > 5">
+        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" align="center" v-if="totalCount > 5">
             <el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="buttonClass">
                 {{ $t('tabs.more') }}
                 <el-icon><Bottom /></el-icon>
@@ -267,7 +325,8 @@
                 <el-icon><Top /></el-icon>
             </el-button>
         </el-col>
-    </el-row>
+        <ConfirmDialog ref="confirmConfRef" @confirm="submitKill" />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -276,6 +335,8 @@ import { computeSize } from '@/utils/util';
 import i18n from '@/lang';
 import { nextTick, ref } from 'vue';
 import { routerToFileWithPath, routerToName } from '@/utils/router';
+import { stopProcess } from '@/api/modules/process';
+import { MsgSuccess } from '@/utils/message';
 const showMore = ref(false);
 const totalCount = ref();
 
@@ -334,12 +395,18 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
     gpuData: [],
     xpuData: [],
 
+    topCPUItems: [],
+    topMemItems: [],
+
     netBytesSent: 0,
     netBytesRecv: 0,
     shotTime: new Date(),
 });
 
 const cpuShowAll = ref();
+const showTop = ref();
+const killProcessID = ref();
+const confirmConfRef = ref();
 
 const chartsOption = ref({
     cpu: { title: 'CPU', data: 0 },
@@ -411,6 +478,21 @@ const changeShowMore = (show: boolean) => {
     localStorage.setItem('dashboard_show', show ? 'more' : 'hide');
 };
 
+const onKill = async (row: any) => {
+    let params = {
+        header: i18n.global.t('process.kill'),
+        operationInfo: i18n.global.t('process.killHelper'),
+        submitInputInfo: i18n.global.t('process.killNow'),
+    };
+    killProcessID.value = row.pid;
+    confirmConfRef.value!.acceptParams(params);
+};
+const submitKill = async () => {
+    await stopProcess({ PID: killProcessID.value }).then(() => {
+        MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+    });
+};
+
 function loadStatus(val: number) {
     if (val < 30) {
         return i18n.global.t('home.runSmoothly');
@@ -428,14 +510,6 @@ const goGPU = () => {
     routerToName('GPU');
 };
 
-const loadWidth = () => {
-    if (!cpuShowAll.value || currentInfo.value.cpuPercent.length < 32) {
-        return 310;
-    }
-    let line = Math.floor(currentInfo.value.cpuPercent.length / 16);
-    return line * 141 + 28;
-};
-
 function formatNumber(val: number) {
     return Number(val.toFixed(2));
 }
@@ -446,44 +520,52 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-.cpuModeTag {
-    justify-content: flex-start !important;
-    text-align: left !important;
-    width: 280px;
-}
-.cpuDetailTag {
-    justify-content: flex-start !important;
-    text-align: left !important;
-    width: 140px;
-    margin-top: 3px;
-    margin-left: 1px;
-}
-.tagClass {
-    justify-content: flex-start !important;
-    text-align: left !important;
-    float: left;
-    margin-top: 3px;
-    width: 100%;
-}
-
-.tagCPUClass {
-    justify-content: flex-start !important;
-    text-align: left !important;
-    float: left;
-    margin-top: 3px;
-    margin-left: 1px;
-    width: 140px;
-}
-
 .buttonClass {
     margin-top: 28%;
     font-size: 14px;
 }
-.nameTag {
-    margin-top: 3px;
-    height: auto;
-    display: inline-block;
-    white-space: normal;
-    line-height: 1.8;
+.cpu-detail {
+    font-size: 12px;
+    width: 95px;
+}
+:deep(.el-descriptions__label) {
+    width: 80px;
+    background-color: transparent !important;
+}
+.custom-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 10px;
+    width: 100%;
+}
+.custom-row .el-col {
+    width: 100% !important;
+    max-width: 100% !important;
+    flex: none !important;
+    float: none !important;
+    display: block !important;
+}
+.custom-row .el-col.el-col-xs-6 {
+    grid-column: span 6;
+}
+@media (min-width: 768px) {
+    .custom-row .el-col.el-col-sm-6 {
+        grid-column: span 6;
+    }
+}
+@media (min-width: 992px) {
+    .custom-row .el-col.el-col-md-3 {
+        grid-column: span 3;
+    }
+}
+@media (min-width: 1200px) {
+    .custom-row .el-col.el-col-lg-3 {
+        grid-column: span 3;
+    }
+}
+@media (min-width: 1920px) {
+    .custom-row .el-col.el-col-xl-3 {
+        grid-column: span 3;
+    }
 }
 </style>
diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
index 273784a0a..2bbca9266 100644
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/frontend/src/views/host/monitor/monitor/index.vue
@@ -609,7 +609,7 @@ function withCPUProcess(datas: any) {
         res += loadSeries(item, item.data.value ? item.data.value : item.data, item.data.unit || '');
     }
     if (!tops) {
-        return '';
+        return res;
     }
     res += `
         <div style="margin-top: 10px; border-bottom: 1px dashed black;"></div>