diff --git a/src/class/Server.ts b/src/class/Server.ts
index 1d5911d..a2c09f7 100644
--- a/src/class/Server.ts
+++ b/src/class/Server.ts
@@ -8,6 +8,8 @@ export default class Server {
   configClass: ConfigServer;
   console: ServerConsole;
   docker: Docker;
+  systemMonitor: SystemMonitor;
+
   readonly serversStore = useServerConfigStore();
 
   constructor(id: string) {
@@ -15,6 +17,8 @@ export default class Server {
     this.configClass = new ConfigServer(this.serversStore.getServer(id));
     this.console = new ServerConsole(this);
     this.docker = new Docker(this);
+    this.systemMonitor = new SystemMonitor(this);
+
   }
 
   config(): ConfigServer {
@@ -193,6 +197,7 @@ class Docker {
     try {
       const output = await this.server.console.execute("docker version");
       const lines = output.split("\n");
+
       let foundCommunity = false;
       let version = null;
 
@@ -240,10 +245,11 @@ class Docker {
       const command = `echo "===CONTAINERS===" && docker ps -a --format "{{.Status}}" && echo "===IMAGES===" && docker images --format "{{.Repository}}" && echo "===DANGLING===" && docker images -f dangling=true --format "{{.Repository}}" && echo "===SIZE===" && docker system df`;
 
       const output = await this.server.console.execute(command);
-      console.log("Docker command output:", output); // Debug log
+      console.log("Docker command output:", output);
+      
+      const lines = output.split('\n');
+      let currentSection = '';
 
-      const lines = output.split("\n");
-      let currentSection = "";
       const containers: string[] = [];
       const images: string[] = [];
       const dangling: string[] = [];
@@ -277,8 +283,8 @@ class Docker {
             case "dangling":
               dangling.push(trimmedLine);
               break;
-            case "size":
-              if (trimmedLine.includes("Images")) {
+            case 'size':
+              if (trimmedLine.includes('Images')) {
                 const sizeMatch = trimmedLine.match(/(\d+\.?\d*[GMK]?B)/);
                 if (sizeMatch) {
                   size = sizeMatch[1];
@@ -292,7 +298,7 @@ class Docker {
       let running = 0;
       let stopped = 0;
       for (const container of containers) {
-        if (container.includes("Up")) {
+        if (container.includes('Up')) {
           running++;
         } else {
           stopped++;
@@ -303,19 +309,216 @@ class Docker {
         containers: {
           running,
           stopped,
-          total: running + stopped,
+          total: running + stopped
         },
         images: {
           local: images.length,
           size,
-          dangling: dangling.length,
-        },
+          dangling: dangling.length
+        }
       };
     } catch (error) {
       console.error("Error retrieving Docker data:", error);
       return {
         containers: { running: 0, stopped: 0, total: 0 },
         images: { local: 0, size: "0B", dangling: 0 },
+
+      };
+    }
+  }
+}
+
+class SystemMonitor {
+  readonly server: Server;
+
+  constructor(server: Server) {
+    this.server = server;
+  }
+
+  async getSystemInfo(): Promise<{
+    hostname: string;
+    uptime: string;
+    os: string;
+    kernel: string;
+    architecture: string;
+  }> {
+    try {
+      const commands = [
+        "hostname",
+        "uptime -p",
+        "uname -s",
+        "uname -r",
+        "uname -m",
+      ];
+
+      const results = await Promise.all(
+        commands.map((cmd) => this.server.console.execute(cmd)),
+      );
+
+      return {
+        hostname: results[0].trim(),
+        uptime: results[1].trim(),
+        os: results[2].trim(),
+        kernel: results[3].trim(),
+        architecture: results[4].trim(),
+      };
+    } catch (error) {
+      console.error("Error getting system info:", error);
+      return {
+        hostname: "Unknown",
+        uptime: "Unknown",
+        os: "Unknown",
+        kernel: "Unknown",
+        architecture: "Unknown",
+      };
+    }
+  }
+
+  async getSystemStats(): Promise<{
+    cpu: {
+      usage: number;
+      cores: number;
+      load: number[];
+    };
+    memory: {
+      total: number;
+      used: number;
+      free: number;
+      cached: number;
+      percentage: number;
+    };
+    disk: {
+      total: number;
+      used: number;
+      free: number;
+      percentage: number;
+    };
+    network: {
+      rx: number;
+      tx: number;
+      rxRate: number;
+      txRate: number;
+    };
+  }> {
+    try {
+      const command = `
+        echo "===CPU==="
+        # CPU usage from /proc/stat
+        head -1 /proc/stat | awk '{idle=\$5+\$6; total=\$2+\$3+\$4+\$5+\$6+\$7+\$8; print (1-idle/total)*100}'
+        nproc
+        uptime | awk -F'load average:' '{print \$2}' | awk '{print \$1","\$2","\$3}' | sed 's/,/ /g'
+        echo "===MEMORY==="
+        free -m | grep Mem | awk '{print \$2","\$3","\$4","\$6}'
+        echo "===DISK==="
+        df / | tail -1 | awk '{total=\$2/1024/1024; used=\$3/1024/1024; free=\$4/1024/1024; print total","used","free}'
+        echo "===NETWORK==="
+        # Get network stats from first active interface
+        cat /proc/net/dev | grep -E "(eth|ens|enp|wlan|wlp)" | head -1 | awk '{print \$2","\$10}' || echo "0,0"
+      `;
+
+      const output = await this.server.console.execute(command);
+      console.log("System stats command output:", output); // Debug log
+
+      const lines = output.split("\n");
+      let currentSection = "";
+      const cpuData: string[] = [];
+      const memoryData: string[] = [];
+      const diskData: string[] = [];
+      const networkData: string[] = [];
+
+      for (const line of lines) {
+        const trimmedLine = line.trim();
+
+        if (trimmedLine === "===CPU===") {
+          currentSection = "cpu";
+          continue;
+        } else if (trimmedLine === "===MEMORY===") {
+          currentSection = "memory";
+          continue;
+        } else if (trimmedLine === "===DISK===") {
+          currentSection = "disk";
+          continue;
+        } else if (trimmedLine === "===NETWORK===") {
+          currentSection = "network";
+          continue;
+        }
+
+        if (trimmedLine && !trimmedLine.includes("===")) {
+          switch (currentSection) {
+            case "cpu":
+              cpuData.push(trimmedLine);
+              break;
+            case "memory":
+              memoryData.push(trimmedLine);
+              break;
+            case "disk":
+              diskData.push(trimmedLine);
+              break;
+            case "network":
+              networkData.push(trimmedLine);
+              break;
+          }
+        }
+      }
+
+      const cpuUsage = parseFloat(cpuData[0] || "0");
+      const cores = parseInt(cpuData[1] || "1");
+      const loadAvgStr = cpuData[2] || "0 0 0";
+      const loadAvg = loadAvgStr
+        .split(" ")
+        .map(parseFloat)
+        .filter((n) => !isNaN(n));
+
+      const memoryStr = memoryData[0] || "0,0,0,0";
+      const memoryValues = memoryStr.split(",").map(Number);
+      const [totalMB, usedMB, freeMB, cachedMB] = memoryValues;
+      const memoryPercentage = totalMB > 0 ? (usedMB / totalMB) * 100 : 0;
+
+      const diskStr = diskData[0] || "0,0,0";
+      const diskValues = diskStr.split(",").map(Number);
+      const [totalGB, usedGB, freeGB] = diskValues;
+      const diskPercentage = totalGB > 0 ? (usedGB / totalGB) * 100 : 0;
+
+      const networkStr = networkData[0] || "0,0";
+      const networkValues = networkStr.split(",").map((val) => {
+        const num = Number(val);
+        return isNaN(num) ? 0 : num;
+      });
+      const [rxBytes, txBytes] = networkValues;
+
+      return {
+        cpu: {
+          usage: cpuUsage,
+          cores: cores,
+          load: loadAvg.length >= 3 ? loadAvg : [0, 0, 0],
+        },
+        memory: {
+          total: totalMB,
+          used: usedMB,
+          free: freeMB,
+          cached: cachedMB,
+          percentage: memoryPercentage,
+        },
+        disk: {
+          total: totalGB,
+          used: usedGB,
+          free: freeGB,
+          percentage: diskPercentage,
+        },
+        network: {
+          rx: rxBytes,
+          tx: txBytes,
+          rxRate: 0,
+          txRate: 0,
+        },
+      };
+    } catch (error) {
+      console.error("Error getting system stats:", error);
+      return {
+        cpu: { usage: 0, cores: 1, load: [0, 0, 0] },
+        memory: { total: 0, used: 0, free: 0, cached: 0, percentage: 0 },
+        disk: { total: 0, used: 0, free: 0, percentage: 0 },
+        network: { rx: 0, tx: 0, rxRate: 0, txRate: 0 },
       };
     }
   }
diff --git a/src/pages/server/index.vue b/src/pages/server/index.vue
index 2151ec4..6a2983a 100644
--- a/src/pages/server/index.vue
+++ b/src/pages/server/index.vue
@@ -40,8 +40,8 @@ const tools = [
         name: "System Monitor",
         desc: "Monitor system resources",
         icon: "mdi:chart-line",
-        disabled: true,
-        click: () => {},
+        tag: "Beta",
+        click: () => router.push(`/server/${server.value?.id}/monitor`),
     },
     {
         name: "Logs Viewer",
diff --git a/src/pages/server/monitor.vue b/src/pages/server/monitor.vue
new file mode 100644
index 0000000..1676aac
--- /dev/null
+++ b/src/pages/server/monitor.vue
@@ -0,0 +1,495 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Icon } from "@iconify/vue";
+import { Button } from "@/components/ui/button";
+import { useServerInstanceStore } from "@/stores/serverInstance";
+
+const router = useRouter();
+const serverInstancesStore = useServerInstanceStore();
+
+const server = computed(() =>
+    serverInstancesStore.getServerInstance(useRoute().params.id as string),
+);
+
+const systemInfo = ref<any>(null);
+const systemStats = ref<any>(null);
+const loading = ref(false);
+const refreshInterval = ref<NodeJS.Timeout | null>(null);
+async function loadSystemInfo() {
+    if (!server.value) return;
+
+    try {
+        systemInfo.value = await server.value.systemMonitor.getSystemInfo();
+    } catch (error) {
+        console.error("Error loading system info:", error);
+    }
+}
+
+async function loadSystemStats() {
+    if (!server.value) return;
+
+    try {
+        const stats = await server.value.systemMonitor.getSystemStats();
+        systemStats.value = stats;
+    } catch (error) {
+        console.error("Error loading system stats:", error);
+    }
+}
+
+function startLiveMonitoring() {
+    if (refreshInterval.value) {
+        clearInterval(refreshInterval.value);
+    }
+
+    loadSystemStats();
+
+    refreshInterval.value = setInterval(() => {
+        loadSystemStats();
+    }, 2000);
+
+    console.log("Live monitoring started");
+}
+
+function stopLiveMonitoring() {
+    if (refreshInterval.value) {
+        clearInterval(refreshInterval.value);
+        refreshInterval.value = null;
+        console.log("Live monitoring stopped");
+    }
+}
+
+function formatBytes(bytes: number): string {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+
+function getUsageColor(percentage: number): string {
+    if (percentage < 50) return "text-green-500";
+    if (percentage < 80) return "text-yellow-500";
+    return "text-red-500";
+}
+
+function getUsageBgColor(percentage: number): string {
+    if (percentage < 50) return "bg-green-500";
+    if (percentage < 80) return "bg-yellow-500";
+    return "bg-red-500";
+}
+
+onMounted(async () => {
+    await loadSystemInfo();
+    await loadSystemStats();
+    startLiveMonitoring();
+});
+
+onUnmounted(() => {
+    stopLiveMonitoring();
+});
+</script>
+
+<template>
+    <div
+        class="flex flex-col gap-6 max-w-full h-full min-h-0 p-4 overflow-y-auto"
+    >
+        <div class="flex items-center gap-4">
+            <button
+                @click="router.back()"
+                class="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+            >
+                <Icon icon="mdi:arrow-left" class="w-5 h-5" />
+            </button>
+            <div class="flex items-center gap-3">
+                <Icon icon="mdi:chart-line" class="w-8 h-8 text-blue-500" />
+                <div>
+                    <h1 class="text-2xl font-semibold">System Monitor</h1>
+                    <p class="text-sm text-muted-foreground">
+                        {{ server?.config().get().name }}
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <div
+            v-if="refreshInterval"
+            class="flex items-center justify-center gap-2 text-sm text-muted-foreground bg-green-50 dark:bg-green-900/20 p-3 rounded-lg border border-green-200 dark:border-green-800"
+        >
+            <Icon
+                icon="mdi:loading"
+                class="w-4 h-4 animate-spin text-green-500"
+            />
+            <span>Live monitoring active - updating every 2 seconds</span>
+        </div>
+
+        <div v-if="loading" class="flex items-center justify-center py-8">
+            <Icon icon="mdi:loading" class="w-6 h-6 animate-spin" />
+            <span class="ml-2">Loading system information...</span>
+        </div>
+
+        <div v-else-if="systemInfo && systemStats" class="space-y-6">
+            <div class="border rounded-lg p-6 bg-card">
+                <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
+                    <Icon icon="mdi:information" class="w-5 h-5" />
+                    System Information
+                </h2>
+                <div
+                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+                >
+                    <div class="space-y-1">
+                        <div class="text-sm text-muted-foreground">
+                            Hostname
+                        </div>
+                        <div class="font-medium">{{ systemInfo.hostname }}</div>
+                    </div>
+                    <div class="space-y-1">
+                        <div class="text-sm text-muted-foreground">Uptime</div>
+                        <div class="font-medium">{{ systemInfo.uptime }}</div>
+                    </div>
+                    <div class="space-y-1">
+                        <div class="text-sm text-muted-foreground">OS</div>
+                        <div class="font-medium">{{ systemInfo.os }}</div>
+                    </div>
+                    <div class="space-y-1">
+                        <div class="text-sm text-muted-foreground">Kernel</div>
+                        <div class="font-medium">{{ systemInfo.kernel }}</div>
+                    </div>
+                    <div class="space-y-1">
+                        <div class="text-sm text-muted-foreground">
+                            Architecture
+                        </div>
+                        <div class="font-medium">
+                            {{ systemInfo.architecture }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div class="border rounded-lg p-4 bg-card">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center gap-2">
+                            <Icon
+                                icon="mdi:cpu-64-bit"
+                                class="w-5 h-5 text-blue-500"
+                            />
+                            <span class="font-medium">CPU</span>
+                        </div>
+                        <span
+                            :class="[
+                                'text-sm font-semibold',
+                                getUsageColor(systemStats.cpu.usage),
+                            ]"
+                        >
+                            {{ systemStats.cpu.usage.toFixed(1) }}%
+                        </span>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">Cores:</span>
+                            <span>{{ systemStats.cpu.cores }}</span>
+                        </div>
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">Load:</span>
+                            <span>{{
+                                systemStats.cpu.load[0].toFixed(2)
+                            }}</span>
+                        </div>
+                        <div class="mt-2 relative">
+                            <svg
+                                width="100%"
+                                height="40"
+                                class="border rounded bg-gray-50 dark:bg-gray-900"
+                            >
+                                <path
+                                    d="M 2,35 Q 25,30 50,25 T 100,30 T 150,20 T 200,28"
+                                    fill="none"
+                                    stroke="#3b82f6"
+                                    stroke-width="2"
+                                    opacity="0.4"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,32 Q 25,27 50,22 T 100,27 T 150,17 T 200,25"
+                                    fill="none"
+                                    stroke="#3b82f6"
+                                    stroke-width="1.5"
+                                    opacity="0.25"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,38 Q 25,33 50,28 T 100,33 T 150,23 T 200,31"
+                                    fill="none"
+                                    stroke="#3b82f6"
+                                    stroke-width="1"
+                                    opacity="0.15"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                            <div
+                                class="absolute inset-0 flex items-center justify-center bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded"
+                            >
+                                <span
+                                    class="text-xs font-medium text-gray-700 dark:text-gray-300"
+                                    >Soon...</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="border rounded-lg p-4 bg-card">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center gap-2">
+                            <Icon
+                                icon="mdi:memory"
+                                class="w-5 h-5 text-green-500"
+                            />
+                            <span class="font-medium">Memory</span>
+                        </div>
+                        <span
+                            :class="[
+                                'text-sm font-semibold',
+                                getUsageColor(systemStats.memory.percentage),
+                            ]"
+                        >
+                            {{ systemStats.memory.percentage.toFixed(1) }}%
+                        </span>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">Used:</span>
+                            <span>{{ systemStats.memory.used }}MB</span>
+                        </div>
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">Total:</span>
+                            <span>{{ systemStats.memory.total }}MB</span>
+                        </div>
+                        <div class="mt-2 relative">
+                            <svg
+                                width="100%"
+                                height="40"
+                                class="border rounded bg-gray-50 dark:bg-gray-900"
+                            >
+                                <path
+                                    d="M 2,25 Q 25,35 50,30 T 100,20 T 150,35 T 200,15"
+                                    fill="none"
+                                    stroke="#10b981"
+                                    stroke-width="2"
+                                    opacity="0.4"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,28 Q 25,38 50,33 T 100,23 T 150,38 T 200,18"
+                                    fill="none"
+                                    stroke="#10b981"
+                                    stroke-width="1.5"
+                                    opacity="0.25"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,22 Q 25,32 50,27 T 100,17 T 150,32 T 200,12"
+                                    fill="none"
+                                    stroke="#10b981"
+                                    stroke-width="1"
+                                    opacity="0.15"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                            <div
+                                class="absolute inset-0 flex items-center justify-center bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded"
+                            >
+                                <span
+                                    class="text-xs font-medium text-gray-700 dark:text-gray-300"
+                                    >Soon...</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="border rounded-lg p-4 bg-card">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center gap-2">
+                            <Icon
+                                icon="mdi:harddisk"
+                                class="w-5 h-5 text-purple-500"
+                            />
+                            <span class="font-medium">Disk</span>
+                        </div>
+                        <span
+                            :class="[
+                                'text-sm font-semibold',
+                                getUsageColor(systemStats.disk.percentage),
+                            ]"
+                        >
+                            {{ systemStats.disk.percentage.toFixed(1) }}%
+                        </span>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">Used:</span>
+                            <span
+                                >{{ systemStats.disk.used.toFixed(1) }}GB</span
+                            >
+                        </div>
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">Total:</span>
+                            <span
+                                >{{ systemStats.disk.total.toFixed(1) }}GB</span
+                            >
+                        </div>
+                        <div class="mt-2 relative">
+                            <svg
+                                width="100%"
+                                height="40"
+                                class="border rounded bg-gray-50 dark:bg-gray-900"
+                            >
+                                <path
+                                    d="M 2,20 Q 25,10 50,15 T 100,25 T 150,10 T 200,20"
+                                    fill="none"
+                                    stroke="#8b5cf6"
+                                    stroke-width="2"
+                                    opacity="0.4"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,23 Q 25,13 50,18 T 100,28 T 150,13 T 200,23"
+                                    fill="none"
+                                    stroke="#8b5cf6"
+                                    stroke-width="1.5"
+                                    opacity="0.25"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,17 Q 25,7 50,12 T 100,22 T 150,7 T 200,17"
+                                    fill="none"
+                                    stroke="#8b5cf6"
+                                    stroke-width="1"
+                                    opacity="0.15"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                            <div
+                                class="absolute inset-0 flex items-center justify-center bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded"
+                            >
+                                <span
+                                    class="text-xs font-medium text-gray-700 dark:text-gray-300"
+                                    >Soon...</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="border rounded-lg p-4 bg-card">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center gap-2">
+                            <Icon
+                                icon="mdi:network"
+                                class="w-5 h-5 text-orange-500"
+                            />
+                            <span class="font-medium">Network</span>
+                        </div>
+                        <span class="text-sm font-semibold text-orange-500">
+                            Active
+                        </span>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">RX:</span>
+                            <span>{{
+                                formatBytes(systemStats.network.rx)
+                            }}</span>
+                        </div>
+                        <div class="flex justify-between text-sm">
+                            <span class="text-muted-foreground">TX:</span>
+                            <span>{{
+                                formatBytes(systemStats.network.tx)
+                            }}</span>
+                        </div>
+                        <div class="mt-2 relative">
+                            <svg
+                                width="100%"
+                                height="40"
+                                class="border rounded bg-gray-50 dark:bg-gray-900"
+                            >
+                                <path
+                                    d="M 2,30 Q 25,15 50,20 T 100,35 T 150,15 T 200,25"
+                                    fill="none"
+                                    stroke="#f97316"
+                                    stroke-width="2"
+                                    opacity="0.4"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,33 Q 25,18 50,23 T 100,38 T 150,18 T 200,28"
+                                    fill="none"
+                                    stroke="#f97316"
+                                    stroke-width="1.5"
+                                    opacity="0.25"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M 2,27 Q 25,12 50,17 T 100,32 T 150,12 T 200,22"
+                                    fill="none"
+                                    stroke="#f97316"
+                                    stroke-width="1"
+                                    opacity="0.15"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                            <div
+                                class="absolute inset-0 flex items-center justify-center bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded"
+                            >
+                                <span
+                                    class="text-xs font-medium text-gray-700 dark:text-gray-300"
+                                    >Soon...</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-muted-foreground">
+                        Live monitoring
+                        {{ refreshInterval ? "active" : "inactive" }}
+                    </span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <Button
+                        @click="
+                            refreshInterval
+                                ? stopLiveMonitoring()
+                                : startLiveMonitoring()
+                        "
+                        :variant="refreshInterval ? 'outline' : 'default'"
+                        size="sm"
+                    >
+                        <Icon
+                            :icon="refreshInterval ? 'mdi:pause' : 'mdi:play'"
+                            class="w-4 h-4 mr-2"
+                        />
+                        {{
+                            refreshInterval
+                                ? "Pause Monitoring"
+                                : "Start Monitoring"
+                        }}
+                    </Button>
+                    <Button
+                        @click="loadSystemStats"
+                        :disabled="loading"
+                        variant="outline"
+                        size="sm"
+                    >
+                        <Icon icon="mdi:refresh" class="w-4 h-4 mr-2" />
+                        {{ loading ? "Loading..." : "Refresh" }}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index b88eee9..af0d79e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -46,6 +46,11 @@ const routes: RouteRecordRaw[] = [
     name: "container-details",
     component: () => import("@/pages/server/docker/container/index.vue"),
   },
+  {
+    path: "/server/:id/monitor",
+    name: "system-monitor",
+    component: () => import("@/pages/server/monitor.vue"),
+  },
   {
     path: "/settings",
     name: "settings",