diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index 0604cfbf4..d82acec20 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -21,7 +21,7 @@ setupVbenVxeTable({
         columnConfig: {
           resizable: true,
         },
-        minHeight: 320,
+        minHeight: 180,
         formConfig: {
           // 全局禁用vxe-table的表单配置，使用formOptions
           enabled: false,
diff --git a/apps/web-antd/src/locales/langs/en-US/page.json b/apps/web-antd/src/locales/langs/en-US/page.json
index b423e3ecd..986d05f43 100644
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -35,18 +35,8 @@
     "sysRole": "System Role",
     "sysUser": "System User"
   },
-  "table": {
-    "created_time": "Create Time",
-    "id": "ID",
-    "mark": "Mark",
-    "operation": "Operation",
-    "updated_time": "Update time"
-  },
   "monitor": {
     "redis": {
-      "desc": {
-        "title": "Basic Information"
-      },
       "cards": {
         "commands": {
           "title": "Command Statistics"
@@ -55,29 +45,66 @@
           "title": "Memory Status"
         }
       },
-      "stats": {
-        "title": {
-          "used_memory": "Used Memory"
-        }
+      "desc": {
+        "title": "Basic Information"
       },
       "info": {
-        "title": "Basic Info",
-        "version": "Version",
-        "mode": "Mode",
-        "os": "OS",
         "arch": "Arch",
-        "uptime": "Uptime",
         "clients": "Connections",
-        "memory_human": "Allocated Memory",
-        "connections_received": "Connections Received",
         "commands_processed": "Commands Processed",
-        "rejected_connections": "Rejected Connections",
+        "connections_received": "Connections Received",
         "keys_command_stats": "Keys Stats",
+        "keys_num": "Keys Num",
+        "memory_human": "Allocated Memory",
+        "mode": "Mode",
+        "os": "OS",
+        "rejected_connections": "Rejected Connections",
         "role": "Role",
+        "title": "Basic Info",
+        "uptime": "Uptime",
         "used_cpu": "Used CPU",
         "used_cpu_children": "Used CPU Children",
-        "keys_num": "Keys Num"
+        "version": "Version"
+      },
+      "stats": {
+        "title": {
+          "used_memory": "Used Memory"
+        }
       }
+    },
+    "server": {
+      "cpu": {
+        "current_freq": "Current Freq",
+        "logical_num": "Logical Num",
+        "physical_num": "Physical Num",
+        "usage": "Usage"
+      },
+      "disk": {
+        "device": "Device",
+        "dir": "Dir",
+        "free": "Free",
+        "title": "Disk",
+        "total": "Total",
+        "type": "Type",
+        "usage": "Usage",
+        "used": "Used"
+      },
+      "memory": {
+        "free": "Free",
+        "title": "Memory",
+        "total": "Total",
+        "usage": "Usage",
+        "used": "Used"
+      },
+      "service": "Service",
+      "system": "System"
     }
+  },
+  "table": {
+    "created_time": "Created Time",
+    "id": "ID",
+    "mark": "Mark",
+    "operation": "Operation",
+    "updated_time": "Updated time"
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN/page.json b/apps/web-antd/src/locales/langs/zh-CN/page.json
index 1ebcb019a..648d594c8 100644
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -35,18 +35,8 @@
     "sysRole": "系统角色",
     "sysUser": "系统角色"
   },
-  "table": {
-    "created_time": "创建时间",
-    "id": "序号",
-    "mark": "备注",
-    "operation": "操作",
-    "updated_time": "更新时间"
-  },
   "monitor": {
     "redis": {
-      "desc": {
-        "title": "基本信息"
-      },
       "cards": {
         "commands": {
           "title": "命令统计"
@@ -55,29 +45,66 @@
           "title": "内存情况"
         }
       },
-      "stats": {
-        "title": {
-          "used_memory": "已使用内存"
-        }
+      "desc": {
+        "title": "基本信息"
       },
       "info": {
-        "title": "基础信息",
-        "version": "版本",
-        "mode": "模式",
-        "os": "操作系统",
         "arch": "架构",
-        "uptime": "运行时间",
         "clients": "连接数",
-        "memory_human": "已分配内存",
-        "connections_received": "可接受连接数",
         "commands_processed": "已执行命令",
-        "rejected_connections": "已拒绝连接",
+        "connections_received": "可接受连接数",
         "keys_command_stats": "查询次数",
+        "keys_num": "Keys 数量",
+        "memory_human": "已分配内存",
+        "mode": "模式",
+        "os": "操作系统",
+        "rejected_connections": "已拒绝连接",
         "role": "角色",
+        "title": "基础信息",
+        "uptime": "运行时间",
         "used_cpu": "CPU 消耗",
         "used_cpu_children": "后台 CPU 占用",
-        "keys_num": "Keys 数量"
+        "version": "版本"
+      },
+      "stats": {
+        "title": {
+          "used_memory": "已使用内存"
+        }
       }
+    },
+    "server": {
+      "cpu": {
+        "current_freq": "当前频率",
+        "logical_num": "逻辑核心数",
+        "physical_num": "物理核心数",
+        "usage": "使用率"
+      },
+      "disk": {
+        "device": "设备",
+        "dir": "路径",
+        "free": "空闲",
+        "title": "磁盘",
+        "total": "总计",
+        "type": "类型",
+        "usage": "使用率",
+        "used": "已使用"
+      },
+      "memory": {
+        "free": "空闲",
+        "title": "内存",
+        "total": "总量",
+        "usage": "使用率",
+        "used": "已使用"
+      },
+      "service": "服务",
+      "system": "系统"
     }
+  },
+  "table": {
+    "created_time": "创建时间",
+    "id": "序号",
+    "mark": "备注",
+    "operation": "操作",
+    "updated_time": "更新时间"
   }
 }
diff --git a/apps/web-antd/src/views/monitor/redis/index.vue b/apps/web-antd/src/views/monitor/redis/index.vue
index c91c10d74..7696196fd 100644
--- a/apps/web-antd/src/views/monitor/redis/index.vue
+++ b/apps/web-antd/src/views/monitor/redis/index.vue
@@ -105,8 +105,8 @@ watch(redisInfo, (val) => {
 </script>
 
 <template>
-  <div class="container mx-auto p-4">
-    <div class="mb-2 rounded-lg p-2 shadow-md">
+  <div class="flex flex-col items-center px-4">
+    <div class="mt-4 w-full">
       <a-card :title="$t('page.monitor.redis.desc.title')" :loading="loading">
         <a-descriptions>
           <a-descriptions-item
@@ -119,8 +119,8 @@ watch(redisInfo, (val) => {
         </a-descriptions>
       </a-card>
     </div>
-    <div class="flex flex-col gap-2 md:flex-row">
-      <div class="rounded-lg p-2 shadow-md md:w-1/2">
+    <div class="mt-4 flex w-full space-x-4">
+      <div class="flex-1">
         <a-card
           :title="$t('page.monitor.redis.cards.commands.title')"
           :loading="loading"
@@ -128,7 +128,7 @@ watch(redisInfo, (val) => {
           <CommandsSeries :stats="redisStats" />
         </a-card>
       </div>
-      <div class="rounded-lg p-2 shadow-md md:w-1/2">
+      <div class="flex-1">
         <a-card
           :title="$t('page.monitor.redis.cards.memory.title')"
           :loading="loading"
diff --git a/apps/web-antd/src/views/monitor/server/index.vue b/apps/web-antd/src/views/monitor/server/index.vue
index 0102cc38c..7f4aa0b4b 100644
--- a/apps/web-antd/src/views/monitor/server/index.vue
+++ b/apps/web-antd/src/views/monitor/server/index.vue
@@ -1,5 +1,220 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getServerMonitor } from '#/api';
+
+const loading = ref<boolean>(false);
+
+const setServerData = ref<Record<string, any>>({});
+
+const diskData = ref<any[]>([]);
+
+const cpuData = computed(() => {
+  return {
+    usage: setServerData.value.cpu?.usage,
+    current_freq: setServerData.value.cpu?.current_freq,
+    max_freq: setServerData.value.cpu?.max_freq,
+    min_freq: setServerData.value.cpu?.min_freq,
+    logical_num: setServerData.value.cpu?.logical_num,
+    physical_num: setServerData.value.cpu?.physical_num,
+  };
+});
+
+const memData = computed(() => {
+  return {
+    total: setServerData.value.memory?.total,
+    used: setServerData.value.memory?.used,
+    free: setServerData.value.memory?.free,
+    usage: setServerData.value.memory?.usage,
+  };
+});
+
+const serviceData = computed(() => {
+  const data: any[] = [];
+  if (setServerData.value.service) {
+    Object.keys(setServerData.value.service).forEach((key) => {
+      data.push({
+        label: key,
+        value: setServerData.value.service[key],
+      });
+    });
+  }
+  return data;
+});
+
+const osData = computed(() => {
+  const data: any[] = [];
+  if (setServerData.value.system) {
+    Object.keys(setServerData.value.system).forEach((key) => {
+      data.push({
+        label: key,
+        value: setServerData.value.system[key],
+      });
+    });
+  }
+  return data;
+});
+
+const usageStyle = (type: string) => {
+  let num = 0;
+  if (type === 'cpu') {
+    num = cpuData.value.usage;
+  } else if (type === 'memory') {
+    num = memData.value.usage;
+  }
+  if (num < 50) {
+    return { color: '#32CD32' };
+  }
+  if (num < 80) {
+    return { color: '#FFD700' };
+  }
+  return { color: '#DC143C' };
+};
+
+const fetchServerData = async () => {
+  loading.value = true;
+  try {
+    const res = await getServerMonitor();
+    setServerData.value.cpu = res.cpu;
+    setServerData.value.memory = res.mem;
+    setServerData.value.system = res.sys;
+    setServerData.value.service = res.service;
+    diskData.value = res.disk;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'dir', title: $t('page.monitor.server.disk.dir') },
+      { field: 'type', title: $t('page.monitor.server.disk.type') },
+      { field: 'device', title: $t('page.monitor.server.disk.device') },
+      { field: 'total', title: $t('page.monitor.server.disk.total') },
+      { field: 'free', title: $t('page.monitor.server.disk.free') },
+      { field: 'used', title: $t('page.monitor.server.disk.used') },
+      { field: 'usage', title: $t('page.monitor.server.disk.usage') },
+    ],
+    stripe: true,
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+onMounted(async () => {
+  await fetchServerData();
+  gridApi.setGridOptions({ data: diskData.value });
+});
+</script>
+
 <template>
-  <div>
-    <h1>home page</h1>
+  <div class="flex flex-col items-center px-6">
+    <div class="mt-6 flex w-full space-x-6">
+      <div class="flex-1">
+        <a-card :loading="loading" title="CPU">
+          <div class="mt-6 flex w-full space-x-6 px-6">
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.cpu.usage')"
+                :value="cpuData.usage"
+                :value-style="usageStyle('cpu')"
+                suffix=" %"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.cpu.current_freq')"
+                :value="cpuData.current_freq"
+                suffix=" MHz"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.cpu.logical_num')"
+                :value="cpuData.logical_num"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.cpu.physical_num')"
+                :value="cpuData.physical_num"
+              />
+            </div>
+          </div>
+        </a-card>
+      </div>
+      <div class="flex-1">
+        <a-card
+          :loading="loading"
+          :title="$t('page.monitor.server.memory.title')"
+        >
+          <div class="mt-6 flex w-full space-x-6 px-6">
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.memory.total')"
+                :value="memData.total"
+                suffix=" GB"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.memory.used')"
+                :value="memData.used"
+                suffix=" GB"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.memory.free')"
+                :value="memData.free"
+                suffix=" GB"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                :title="$t('page.monitor.server.memory.usage')"
+                :value="memData.usage"
+                :value-style="usageStyle('memory')"
+                suffix=" %"
+              />
+            </div>
+          </div>
+        </a-card>
+      </div>
+    </div>
+    <div class="mt-6 w-full space-y-6">
+      <a-card :loading="loading" :title="$t('page.monitor.server.service')">
+        <a-descriptions>
+          <a-descriptions-item
+            v-for="item in serviceData"
+            :label="item.label"
+            :key="item.label"
+          >
+            {{ item.value }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+      <a-card :loading="loading" :title="$t('page.monitor.server.system')">
+        <a-descriptions size="middle" :column="4">
+          <a-descriptions-item
+            v-for="item in osData"
+            :label="item.label"
+            :key="item.label"
+          >
+            {{ item.value }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+      <a-card :loading="loading" :title="$t('page.monitor.server.disk.title')">
+        <Grid />
+      </a-card>
+    </div>
   </div>
 </template>