diff --git a/api/realtime.js b/api/realtime.js
new file mode 100644
index 0000000..f47bb00
--- /dev/null
+++ b/api/realtime.js
@@ -0,0 +1,198 @@
+const settings = require("../settings.json");
+const chalk = require('chalk');
+const fetch = require('node-fetch');
+
+module.exports.load = async function(app, db) {
+  const indexjs = require("../index.js");
+  const io = indexjs.io;
+  const statsService = indexjs.statsService;
+
+  if (!io || !statsService) {
+    console.error(chalk.red('[REALTIME] Socket.io or StatsService not initialized'));
+    return;
+  }
+  io.use(async (socket, next) => {
+    const sessionId = socket.handshake.auth.sessionId;
+    const userId = socket.handshake.auth.userId;
+    if (!userId || !sessionId) {
+      return next(new Error('Authentication required'));
+    }
+    const userExists = await db.get(`users-${userId}`);
+    if (!userExists) {
+      return next(new Error('Invalid user'));
+    }
+
+    socket.userId = userId;
+    socket.pteroUserId = userExists;
+    next();
+  });
+  io.on('connection', (socket) => {
+    console.log(chalk.cyan(`[REALTIME] User ${socket.userId} connected`));
+    socket.join(`user-${socket.userId}`);
+    socket.on('subscribe-dashboard', async () => {
+      socket.join('dashboard');
+      const allServers = statsService.getAllServersSnapshot();
+      socket.emit('dashboard-init', allServers);
+      
+      console.log(chalk.green(`[REALTIME] User ${socket.userId} subscribed to dashboard`));
+    });
+    socket.on('subscribe-server', async (data) => {
+      const { identifier } = data;
+      
+      if (!identifier) {
+        socket.emit('error', { message: 'Server identifier required' });
+        return;
+      }
+      const hasAccess = await verifyServerAccess(socket.pteroUserId, identifier);
+      if (!hasAccess) {
+        socket.emit('error', { message: 'Access denied' });
+        return;
+      }
+      socket.join(`server-${identifier}`);
+      const serverData = statsService.getServerStatsSnapshot(identifier);
+      if (serverData) {
+        socket.emit('server-init', serverData);
+      }
+
+      console.log(chalk.green(`[REALTIME] User ${socket.userId} subscribed to server ${identifier}`));
+    });
+    socket.on('subscribe-console', async (data) => {
+      const { identifier } = data;
+      
+      if (!identifier) {
+        socket.emit('error', { message: 'Server identifier required' });
+        return;
+      }
+      const hasAccess = await verifyServerAccess(socket.pteroUserId, identifier);
+      if (!hasAccess) {
+        socket.emit('error', { message: 'Access denied' });
+        return;
+      }
+      const wsUrl = await getServerWebSocketUrl(identifier);
+      if (wsUrl) {
+        connectToServerConsole(socket, identifier, wsUrl);
+      } else {
+        socket.emit('error', { message: 'Could not connect to server console' });
+      }
+    });
+    socket.on('unsubscribe-dashboard', () => {
+      socket.leave('dashboard');
+      console.log(chalk.yellow(`[REALTIME] User ${socket.userId} unsubscribed from dashboard`));
+    });
+
+    socket.on('unsubscribe-server', (data) => {
+      const { identifier } = data;
+      socket.leave(`server-${identifier}`);
+      console.log(chalk.yellow(`[REALTIME] User ${socket.userId} unsubscribed from server ${identifier}`));
+    });
+    socket.on('disconnect', () => {
+      console.log(chalk.yellow(`[REALTIME] User ${socket.userId} disconnected`));
+    });
+    socket.on('request-stats-history', async (data) => {
+      const { identifier, duration } = data;
+      
+      const hasAccess = await verifyServerAccess(socket.pteroUserId, identifier);
+      if (!hasAccess) {
+        socket.emit('error', { message: 'Access denied' });
+        return;
+      }
+
+      const history = await statsService.getServerHistory(identifier, duration);
+      socket.emit('stats-history', { identifier, history });
+    });
+  });
+  async function verifyServerAccess(pteroUserId, identifier) {
+    try {
+      const response = await fetch(
+        `${settings.pterodactyl.domain}/api/client/servers/${identifier}`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${settings.pterodactyl.account_key}`,
+            'Accept': 'application/json'
+          }
+        }
+      );
+
+      return response.ok;
+    } catch (error) {
+      return false;
+    }
+  }
+  async function getServerWebSocketUrl(identifier) {
+    try {
+      const response = await fetch(
+        `${settings.pterodactyl.domain}/api/client/servers/${identifier}/websocket`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${settings.pterodactyl.account_key}`,
+            'Accept': 'application/json'
+          }
+        }
+      );
+
+      if (!response.ok) return null;
+      
+      const data = await response.json();
+      return data.data;
+    } catch (error) {
+      return null;
+    }
+  }
+  function connectToServerConsole(clientSocket, identifier, wsData) {
+    const WebSocket = require('ws');
+    const ws = new WebSocket(wsData.socket);
+
+    ws.on('open', () => {
+      ws.send(JSON.stringify({
+        event: 'auth',
+        args: [wsData.token]
+      }));
+      ws.send(JSON.stringify({
+        event: 'send logs',
+        args: [null]
+      }));
+
+      console.log(chalk.green(`[REALTIME] Console connected for server ${identifier}`));
+    });
+
+    ws.on('message', (data) => {
+      try {
+        const message = JSON.parse(data);
+        if (message.event === 'console output') {
+          clientSocket.emit('console-output', {
+            identifier,
+            output: message.args[0]
+          });
+        }
+        if (message.event === 'status') {
+          clientSocket.emit('console-status', {
+            identifier,
+            status: message.args[0]
+          });
+        }
+      } catch (error) {
+        console.error(chalk.red('[REALTIME] Error parsing console message:'), error);
+      }
+    });
+
+    ws.on('error', (error) => {
+      console.error(chalk.red(`[REALTIME] Console WebSocket error for ${identifier}:`), error);
+      clientSocket.emit('console-error', { 
+        identifier, 
+        message: 'Console connection error' 
+      });
+    });
+    ws.on('close', () => {
+      console.log(chalk.yellow(`[REALTIME] Console disconnected for server ${identifier}`));
+      clientSocket.emit('console-disconnected', { identifier });
+    });
+    clientSocket.on('disconnect', () => {
+      ws.close();
+    });
+    clientSocket.consoleWs = ws;
+  }
+};
diff --git a/index.js b/index.js
index 45359ca..0a8170c 100644
--- a/index.js
+++ b/index.js
@@ -118,7 +118,22 @@ app.use(express.json({
   verify: undefined
 }));
 
-const listener = app.listen(settings.website.port, function() {
+const http = require('http');
+const server = http.createServer(app);
+const { Server } = require('socket.io');
+const io = new Server(server, {
+  cors: {
+    origin: settings.api.client.oauth2.link,
+    credentials: true
+  }
+});
+
+const StatsService = require('./managers/StatsService');
+const statsService = new StatsService(settings, db);
+module.exports.io = io;
+module.exports.statsService = statsService;
+
+const listener = server.listen(settings.website.port, function() {
   console.clear();
   console.log(chalk.gray("  "));
   console.log(chalk.gray("  ") + chalk.bgBlack("  LAPSUS CLIENT IS ONLINE  "));
@@ -128,6 +143,10 @@ const listener = app.listen(settings.website.port, function() {
   console.log(chalk.gray("  ") + chalk.blue("[THEME]") + chalk.white(" You're using ") + chalk.underline(settings.defaulttheme) + " theme");
   console.log(chalk.gray("  "));
   console.log(chalk.gray("  ") + chalk.cyan("[SYSTEM]") + chalk.white(" You can now access the dashboard at ") + chalk.underline(settings.api.client.oauth2.link + "/"));
+  console.log(chalk.gray("  "));
+  console.log(chalk.gray("  ") + chalk.magenta("[REALTIME]") + chalk.white(" WebSocket server initialized for live stats"));
+  statsService.initialize(io);
+  
   if (settings.defaulttheme !== 'lapsus' && settings.defaulttheme !== 'lapsusv2' && settings.defaulttheme !== 'pylex') {
 console.log(chalk.gray("  "));
 console.log(chalk.gray("  ") + chalk.yellow("[WARNING]") + chalk.white(" You're using an unofficial theme. This means you are exposed to vulnerabilities and bugs. Consider using the official theme or a third party theme provided by Lapsus."));  }
diff --git a/managers/StatsService.js b/managers/StatsService.js
new file mode 100644
index 0000000..937cb15
--- /dev/null
+++ b/managers/StatsService.js
@@ -0,0 +1,150 @@
+const fetch = require('node-fetch');
+const chalk = require('chalk');
+
+class StatsService {
+  constructor(settings, db) {
+    this.settings = settings;
+    this.db = db;
+    this.io = null;
+    this.updateInterval = 5000;
+    this.serverStats = new Map();
+    this.intervalId = null;
+  }
+
+  initialize(io) {
+    this.io = io;
+    console.log(chalk.green('[STATS] Real-time stats service initialized'));
+    this.startPolling();
+  }
+
+  startPolling() {
+    if (this.intervalId) return;
+    this.intervalId = setInterval(async () => {
+      await this.pollAllServers();
+    }, this.updateInterval);
+    this.pollAllServers();
+  }
+
+  stopPolling() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  async pollAllServers() {
+    try {
+      const allServersResponse = await fetch(
+        `${this.settings.pterodactyl.domain}/api/application/servers?per_page=100`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.settings.pterodactyl.key}`,
+            'Accept': 'application/json'
+          }
+        }
+      );
+
+      if (!allServersResponse.ok) {
+        console.error(chalk.red('[STATS] Failed to fetch servers from Pterodactyl'));
+        return;
+      }
+
+      const serversData = await allServersResponse.json();
+      const servers = serversData.data || [];
+
+      for (const server of servers) {
+        const stats = await this.getServerStats(server.attributes.identifier);
+        
+        if (stats) {
+          const serverData = {
+            serverId: server.attributes.id,
+            identifier: server.attributes.identifier,
+            name: server.attributes.name,
+            userId: server.attributes.user,
+            status: stats.current_state || 'offline',
+            resources: stats.resources || {},
+            timestamp: Date.now()
+          };
+
+          this.serverStats.set(server.attributes.identifier, serverData);
+          this.io.to(`server-${server.attributes.identifier}`).emit('server-stats', serverData);
+          this.io.to('dashboard').emit('server-update', serverData);
+        }
+      }
+    } catch (error) {
+      console.error(chalk.red('[STATS] Error polling servers:'), error.message);
+    }
+  }
+
+  async getAllUserKeys() {
+    try {
+      const keys = [];
+      return keys;
+    } catch (error) {
+      return [];
+    }
+  }
+
+  async getUserServers(pteroUserId) {
+    try {
+      const response = await fetch(
+        `${this.settings.pterodactyl.domain}/api/application/users/${pteroUserId}?include=servers`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.settings.pterodactyl.key}`,
+            'Accept': 'application/json'
+          }
+        }
+      );
+
+      if (!response.ok) return null;
+      
+      const data = await response.json();
+      return data.attributes?.relationships?.servers?.data || [];
+    } catch (error) {
+      console.error(chalk.red('[STATS] Error fetching user servers:'), error.message);
+      return null;
+    }
+  }
+
+  async getServerStats(identifier) {
+    try {
+      const response = await fetch(
+        `${this.settings.pterodactyl.domain}/api/client/servers/${identifier}/resources`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.settings.pterodactyl.account_key}`,
+            'Accept': 'application/json'
+          }
+        }
+      );
+
+      if (!response.ok) return null;
+      
+      const data = await response.json();
+      return data.attributes || null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  getServerStatsSnapshot(identifier) {
+    return this.serverStats.get(identifier);
+  }
+
+  getAllServersSnapshot() {
+    return Array.from(this.serverStats.values());
+  }
+
+  async getServerHistory(identifier, duration = 3600000) { // 1 hour default
+    return [this.serverStats.get(identifier)];
+  }
+}
+
+module.exports = StatsService;
diff --git a/package-lock.json b/package-lock.json
index 4ef5fed..90fdeea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,9 +15,10 @@
         "@keyv/redis": "^2.2.1",
         "@keyv/sqlite": "^3.5.2",
         "@tailwindcss/forms": "^0.5.3",
-        "axios": "^1.9.0",
+        "axios": "^1.12.2",
         "body-parser": "^1.20.3",
         "chalk": "^4.1.0",
+        "chart.js": "^4.5.1",
         "cookie-session": "^2.1.0",
         "cors": "^2.8.5",
         "credit-card-validate": "^0.9.3",
@@ -41,11 +42,13 @@
         "passport-google-oauth20": "^2.0.0",
         "path": "^0.12.7",
         "smtp-server": "^3.13.5",
+        "socket.io": "^4.8.1",
         "stripe": "^9.4.0",
         "systeminformation": "^5.25.11",
         "tailwindcss": "^3.3.1",
         "unzipper": "^0.12.3",
-        "warn": "^1.0.1"
+        "warn": "^1.0.1",
+        "ws": "^8.18.3"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -302,6 +305,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@mongodb-js/saslprep": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.3.0.tgz",
@@ -408,6 +417,12 @@
         "url": "https://ko-fi.com/killymxi"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
@@ -430,6 +445,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -742,9 +766,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.0.tgz",
-      "integrity": "sha512-oXTDccv8PcfjZmPGlWsPSwtOJCZ/b6W5jAMCNcfwJbCzDckwG0jrYJFaWH1yvivfCXjVzV/SPDEhMB3Q+DSurg==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -787,6 +811,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
     "node_modules/base64url": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/base64url/-/base64url-3.0.1.tgz",
@@ -1079,6 +1112,18 @@
         "node": "*"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1522,6 +1567,27 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/discord.js/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -1731,6 +1797,88 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
+      "integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/engine.io/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -5486,6 +5634,137 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/socket.io": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+      "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.3.4",
+        "ws": "~8.17.1"
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/socket.io-adapter/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/socket.io/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
     "node_modules/socks": {
       "version": "2.8.7",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
@@ -6467,16 +6746,16 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "7.5.10",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
-      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
       "license": "MIT",
       "engines": {
-        "node": ">=8.3.0"
+        "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
diff --git a/package.json b/package.json
index 8318f00..4f05afd 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,10 @@
     "@keyv/redis": "^2.2.1",
     "@keyv/sqlite": "^3.5.2",
     "@tailwindcss/forms": "^0.5.3",
-    "axios": "^1.9.0",
+    "axios": "^1.12.2",
     "body-parser": "^1.20.3",
     "chalk": "^4.1.0",
+    "chart.js": "^4.5.1",
     "cookie-session": "^2.1.0",
     "cors": "^2.8.5",
     "credit-card-validate": "^0.9.3",
@@ -38,11 +39,13 @@
     "passport-google-oauth20": "^2.0.0",
     "path": "^0.12.7",
     "smtp-server": "^3.13.5",
+    "socket.io": "^4.8.1",
     "stripe": "^9.4.0",
     "systeminformation": "^5.25.11",
     "tailwindcss": "^3.3.1",
     "unzipper": "^0.12.3",
-    "warn": "^1.0.1"
+    "warn": "^1.0.1",
+    "ws": "^8.18.3"
   },
   "scripts": {
     "start": "nodemon index.js",
diff --git a/themes/lapsus/components/navigation.ejs b/themes/lapsus/components/navigation.ejs
index 9510602..9f4c6c9 100644
--- a/themes/lapsus/components/navigation.ejs
+++ b/themes/lapsus/components/navigation.ejs
@@ -81,6 +81,13 @@ font-weight: semibold;
             Panel
           </a>
 
+          <a href="../realtime" class="transition text-gray-300 hover:bg-dark-700/50 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <svg class="text-gray-400 group-hover:text-winter-500 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 5.25m8.5-5.25l1 5.25m-8.5 0H6m10.5 0H18" />
+            </svg>
+            Real-Time Monitor
+          </a>
+
           <div class="pt-6"></div> <!-- Spacer -->
           <div class="mt-6 relative mb-2">
               <div class="relative flex">
diff --git a/themes/lapsus/pages.json b/themes/lapsus/pages.json
index 8ae848e..3e1a7af 100644
--- a/themes/lapsus/pages.json
+++ b/themes/lapsus/pages.json
@@ -69,7 +69,8 @@
         "servers": "servers.ejs",
         "lv": "lv.ejs",
         "j4r": "j4r.ejs",
-        "themes": "themes.ejs"
+        "themes": "themes.ejs",
+        "realtime": "realtime-dashboard.ejs"
     },
     "mustbeloggedin": [
         "/dashboard",
@@ -82,7 +83,8 @@
         "/redeem",
         "/servers",
         "/store",
-        "/earn"
+        "/earn",
+        "/realtime"
     ],
     "mustbeadmin": [
         "/admin",
diff --git a/themes/lapsus/realtime-dashboard.ejs b/themes/lapsus/realtime-dashboard.ejs
new file mode 100644
index 0000000..3893f39
--- /dev/null
+++ b/themes/lapsus/realtime-dashboard.ejs
@@ -0,0 +1,431 @@
+<head>
+  <title>Real-Time Dashboard - <%= settings.name %></title>
+  <link rel="icon" type="image/png" href="<%= settings.logo.url %>">
+  <link rel="stylesheet" href="../assets/tailwind.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  
+  <!-- Inter font -->
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <style>
+    .status-pulse {
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    .chart-container {
+      position: relative;
+      height: 150px;
+    }
+    .console-output {
+      font-family: 'Courier New', monospace;
+      background: #1e1e1e;
+      color: #d4d4d4;
+      height: 300px;
+      overflow-y: auto;
+      font-size: 12px;
+    }
+    .console-line {
+      padding: 2px 8px;
+      border-bottom: 1px solid #2d2d2d;
+    }
+    .server-card {
+      transition: all 0.3s ease;
+    }
+    .server-card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    }
+  </style>
+</head>
+
+<body class="bg-gray-100" style="font-family: 'Inter', sans-serif;">
+
+  <%- include('components/navigation') %>
+
+  <div class="md:pl-48 flex flex-col flex-1">
+    <main class="flex-1">
+      <div class="py-6">
+        <div class="max-w-7xl pt-8 mx-auto px-4 sm:px-6 md:px-8">
+
+          <!-- Header -->
+          <div class="lg:flex lg:items-center lg:justify-between mb-6">
+            <div class="min-w-0 flex-1">
+              <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+                Real-Time Server Monitor
+              </h2>
+              <p class="text-md font-medium text-gray-600">
+                Live statistics and console streaming for all your servers
+              </p>
+            </div>
+            <div class="mt-5 flex lg:ml-4 lg:mt-0">
+              <span class="inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold">
+                <span class="mr-2 text-gray-600">Connection:</span>
+                <span id="connection-status" class="status-pulse text-green-600 font-bold">● Connected</span>
+              </span>
+            </div>
+          </div>
+
+          <!-- Stats Overview -->
+          <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
+            <div class="bg-white overflow-hidden shadow rounded-lg">
+              <div class="p-5">
+                <div class="flex items-center">
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
+                    </svg>
+                  </div>
+                  <div class="ml-5 w-0 flex-1">
+                    <dl>
+                      <dt class="text-sm font-medium text-gray-500 truncate">Total Servers</dt>
+                      <dd class="text-lg font-semibold text-gray-900" id="total-servers">0</dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white overflow-hidden shadow rounded-lg">
+              <div class="p-5">
+                <div class="flex items-center">
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div class="ml-5 w-0 flex-1">
+                    <dl>
+                      <dt class="text-sm font-medium text-gray-500 truncate">Online</dt>
+                      <dd class="text-lg font-semibold text-green-600" id="online-servers">0</dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white overflow-hidden shadow rounded-lg">
+              <div class="p-5">
+                <div class="flex items-center">
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div class="ml-5 w-0 flex-1">
+                    <dl>
+                      <dt class="text-sm font-medium text-gray-500 truncate">Offline</dt>
+                      <dd class="text-lg font-semibold text-red-600" id="offline-servers">0</dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white overflow-hidden shadow rounded-lg">
+              <div class="p-5">
+                <div class="flex items-center">
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
+                    </svg>
+                  </div>
+                  <div class="ml-5 w-0 flex-1">
+                    <dl>
+                      <dt class="text-sm font-medium text-gray-500 truncate">Avg CPU</dt>
+                      <dd class="text-lg font-semibold text-gray-900" id="avg-cpu">0%</dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="servers-grid" class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          </div>
+          <div id="empty-state" class="flex flex-col items-center justify-center h-full mt-8" style="display: none;">
+            <img src="/assets/img/tree.png" class="w-24 h-24 bg-white p-2 rounded-lg" />
+            <p class="text-center text-2xl font-bold text-gray-900 mt-6">No servers found</p>
+            <p class="text-center text-gray-500">Connect to WebSocket to see your servers in real-time.</p>
+          </div>
+
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <div id="server-modal" style="display: none; position: fixed; z-index: 50; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px);" onclick="closeModal(event)">
+    <div class="bg-white mx-auto p-8 rounded-lg max-w-6xl" style="margin-top: 5%;" onclick="event.stopPropagation()">
+      <div class="flex items-center justify-between mb-6">
+        <h2 id="modal-server-name" class="text-2xl font-bold text-gray-900"></h2>
+        <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
+          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        <div class="bg-gray-50 rounded-lg p-4">
+          <p class="text-sm font-medium text-gray-600 mb-2">CPU Usage</p>
+          <div class="chart-container">
+            <canvas id="cpu-chart"></canvas>
+          </div>
+        </div>
+        <div class="bg-gray-50 rounded-lg p-4">
+          <p class="text-sm font-medium text-gray-600 mb-2">Memory Usage</p>
+          <div class="chart-container">
+            <canvas id="memory-chart"></canvas>
+          </div>
+        </div>
+        <div class="bg-gray-50 rounded-lg p-4">
+          <p class="text-sm font-medium text-gray-600 mb-2">Network I/O</p>
+          <div class="chart-container">
+            <canvas id="network-chart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <!-- Console Output -->
+      <div class="bg-gray-50 rounded-lg p-4">
+        <div class="flex items-center justify-between mb-4">
+          <p class="text-sm font-semibold text-gray-900">Live Console</p>
+          <button onclick="clearConsole()" class="text-sm text-gray-600 hover:text-gray-900">
+            Clear
+          </button>
+        </div>
+        <div id="console-output" class="console-output rounded-lg">
+          <div class="p-4 text-gray-500">Connecting to server console...</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const socket = io({
+      auth: {
+        userId: '<%= userinfo.id %>',
+        sessionId: '<%= Math.random().toString(36).substring(2) %>'
+      }
+    });
+
+    let currentServer = null;
+    let cpuChart, memoryChart, networkChart;
+    const servers = new Map();
+    socket.on('connect', () => {
+      console.log('Connected to real-time server');
+      document.getElementById('connection-status').innerHTML = '● Connected';
+      document.getElementById('connection-status').className = 'status-pulse text-green-600 font-bold';
+      socket.emit('subscribe-dashboard');
+    });
+
+    socket.on('disconnect', () => {
+      console.log('Disconnected from server');
+      document.getElementById('connection-status').innerHTML = '● Disconnected';
+      document.getElementById('connection-status').className = 'text-red-600 font-bold';
+    });
+
+    socket.on('dashboard-init', (serversList) => {
+      console.log('Received initial server data:', serversList);
+      if (serversList.length === 0) {
+        document.getElementById('empty-state').style.display = 'flex';
+      } else {
+        document.getElementById('empty-state').style.display = 'none';
+        serversList.forEach(server => updateServerCard(server));
+        updateStats();
+      }
+    });
+
+    socket.on('server-update', (server) => {
+      updateServerCard(server);
+      updateStats();
+    });
+
+    function updateServerCard(server) {
+      servers.set(server.identifier, server);
+            
+      const grid = document.getElementById('servers-grid');
+      let card = document.getElementById(`server-${server.identifier}`);
+      
+      if (!card) {
+        card = createServerCard(server);
+        grid.appendChild(card);
+        document.getElementById('empty-state').style.display = 'none';
+      } else {
+        updateExistingCard(card, server);
+      }
+    }
+
+    function createServerCard(server) {
+      const card = document.createElement('div');
+      card.id = `server-${server.identifier}`;
+      card.className = 'server-card bg-white shadow rounded-lg overflow-hidden cursor-pointer p-5';
+      card.onclick = () => openServerModal(server.identifier);
+      const statusColor = getStatusColor(server.status);
+      
+      card.innerHTML = `
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-gray-900 truncate">${server.name}</h3>
+          <span class="status-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor}">
+            ${server.status}
+          </span>
+        </div>
+        <div class="space-y-3">
+          <div>
+            <div class="flex justify-between text-sm text-gray-600 mb-1">
+              <span>CPU</span>
+              <span class="cpu-value font-medium">${Math.round(server.resources?.cpu_absolute || 0)}%</span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-2">
+              <div class="cpu-bar bg-blue-600 h-2 rounded-full transition-all" style="width: ${Math.min(100, Math.round(server.resources?.cpu_absolute || 0))}%"></div>
+            </div>
+          </div>
+          <div>
+            <div class="flex justify-between text-sm text-gray-600 mb-1">
+              <span>Memory</span>
+              <span class="ram-value font-medium">${formatBytes(server.resources?.memory_bytes || 0)}</span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-2">
+              <div class="ram-bar bg-purple-600 h-2 rounded-full transition-all" style="width: ${Math.min(100, (server.resources?.memory_bytes || 0) / (server.limits?.memory || 1) * 100)}%"></div>
+            </div>
+          </div>
+          <div class="pt-3 border-t border-gray-200 flex justify-between text-xs text-gray-500">
+            <span class="disk-value">💾 ${formatBytes(server.resources?.disk_bytes || 0)}</span>
+            <span class="network-value">🌐 ${formatBytes(server.resources?.network_tx_bytes || 0)}/s</span>
+          </div>
+        </div>
+      `;
+      
+      return card;
+    }
+
+    function updateExistingCard(card, server) {
+      const statusColor = getStatusColor(server.status);
+      card.querySelector('.status-badge').className = `status-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor}`;
+      card.querySelector('.status-badge').textContent = server.status;
+      
+      const cpuPercent = Math.round(server.resources?.cpu_absolute || 0);
+      card.querySelector('.cpu-value').textContent = `${cpuPercent}%`;
+      if (card.querySelector('.cpu-bar')) {
+        card.querySelector('.cpu-bar').style.width = `${Math.min(100, cpuPercent)}%`;
+      }
+      card.querySelector('.ram-value').textContent = formatBytes(server.resources?.memory_bytes || 0);
+      if (card.querySelector('.ram-bar')) {
+        const memPercent = (server.resources?.memory_bytes || 0) / (server.limits?.memory || 1) * 100;
+        card.querySelector('.ram-bar').style.width = `${Math.min(100, memPercent)}%`;
+      } 
+      card.querySelector('.disk-value').textContent = `💾 ${formatBytes(server.resources?.disk_bytes || 0)}`;
+      card.querySelector('.network-value').textContent = `🌐 ${formatBytes(server.resources?.network_tx_bytes || 0)}/s`;
+    }
+
+    function updateStats() {
+      const serversList = Array.from(servers.values());
+      const online = serversList.filter(s => s.status === 'running').length;
+      const offline = serversList.length - online;
+      const avgCpu = serversList.reduce((sum, s) => sum + (s.resources?.cpu_absolute || 0), 0) / serversList.length || 0;
+      
+      document.getElementById('total-servers').textContent = serversList.length;
+      document.getElementById('online-servers').textContent = online;
+      document.getElementById('offline-servers').textContent = offline;
+      document.getElementById('avg-cpu').textContent = `${Math.round(avgCpu)}%`;
+    }
+
+    function openServerModal(identifier) {
+      currentServer = servers.get(identifier);
+      if (!currentServer) return;
+      document.getElementById('modal-server-name').textContent = currentServer.name;
+      document.getElementById('server-modal').style.display = 'block';
+      socket.emit('subscribe-server', { identifier });
+      socket.emit('subscribe-console', { identifier });
+      initializeCharts();
+    }
+
+    function closeModal(event) {
+      if (event && event.target !== event.currentTarget) return;
+      
+      document.getElementById('server-modal').style.display = 'none';
+      
+      if (currentServer) {
+        socket.emit('unsubscribe-server', { identifier: currentServer.identifier });
+      }
+      
+      destroyCharts();
+    }
+
+    function initializeCharts() {
+      const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+          y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
+          x: { grid: { display: false } }
+        }
+      };
+
+      cpuChart = new Chart(document.getElementById('cpu-chart'), {
+        type: 'line',
+        data: {
+          labels: ['Now'],
+          datasets: [{ data: [0], borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4 }]
+        },
+        options: chartOptions
+      });
+
+      memoryChart = new Chart(document.getElementById('memory-chart'), {
+        type: 'line',
+        data: {
+          labels: ['Now'],
+          datasets: [{ data: [0], borderColor: 'rgb(168, 85, 247)', backgroundColor: 'rgba(168, 85, 247, 0.1)', tension: 0.4 }]
+        },
+        options: chartOptions
+      });
+
+      networkChart = new Chart(document.getElementById('network-chart'), {
+        type: 'line',
+        data: {
+          labels: ['Now'],
+          datasets: [{ data: [0], borderColor: 'rgb(34, 197, 94)', backgroundColor: 'rgba(34, 197, 94, 0.1)', tension: 0.4 }]
+        },
+        options: chartOptions
+      });
+    }
+    function destroyCharts() {
+      if (cpuChart) cpuChart.destroy();
+      if (memoryChart) memoryChart.destroy();
+      if (networkChart) networkChart.destroy();
+    }
+    socket.on('console-output', (data) => {
+      if (currentServer && data.identifier === currentServer.identifier) {
+        const output = document.getElementById('console-output');
+        const line = document.createElement('div');
+        line.className = 'console-line';
+        line.textContent = data.output;
+        output.appendChild(line);
+        output.scrollTop = output.scrollHeight;
+      }
+    });
+    function clearConsole() {
+      document.getElementById('console-output').innerHTML = '';
+    }
+    function getStatusColor(status) {
+      const colors = {
+        'running': 'bg-green-100 text-green-800',
+        'offline': 'bg-red-100 text-red-800',
+        'starting': 'bg-yellow-100 text-yellow-800',
+        'stopping': 'bg-orange-100 text-orange-800'
+      };
+      return colors[status] || 'bg-gray-100 text-gray-800';
+    }
+    function formatBytes(bytes) {
+      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 Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    }
+  </script>
+</body>