diff --git a/web/index.html b/web/index.html
index 17fabec..b1af0c0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,17 +1,353 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Document</title>
-	<script src="js/script.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Monitor Dashboard</title>
+
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Load Phosphor Icons for sleek iconography -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+
+    <!-- Load Google Fonts (Inter) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- Custom Styles for animations and glassmorphism fine-tuning -->
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+            background-image:
+                radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
+                radial-gradient(at 50% 0%, hsla(225,39%,30%,0.2) 0, transparent 50%),
+                radial-gradient(at 100% 0%, hsla(339,49%,30%,0.2) 0, transparent 50%);
+            background-attachment: fixed;
+            color: #e2e8f0;
+        }
+
+        .glass-card {
+            background: rgba(30, 41, 59, 0.4);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Smooth progress bar transitions */
+        .progress-bar-fill {
+            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+    </style>
 </head>
-<body>
-<h1>Hello world!</h1>
-<p id="cpu-load">Waiting for load data...</p>
-<p id="cpu-usage">Waiting for usage data...</p>
-<p id="memory">Waiting for memory data...</p>
-<p id="temperature">Waiting for temperature data...</p>
-<p id="uptime">Waiting for uptime data...</p>
+<body class="min-h-screen flex flex-col items-center justify-center p-4 sm:p-8 relative overflow-x-hidden">
+
+    <!-- Decorative background blobs for glassmorphism contrast -->
+    <div class="absolute top-[-10%] left-[-10%] w-96 h-96 bg-indigo-600/20 rounded-full blur-[100px] z-0 pointer-events-none"></div>
+    <div class="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-emerald-600/10 rounded-full blur-[100px] z-0 pointer-events-none"></div>
+
+    <main class="w-full max-w-5xl z-10 flex flex-col gap-8">
+
+        <!-- Header -->
+        <header class="flex items-center justify-between mb-2">
+            <div>
+                <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white flex items-center gap-3">
+                    <i class="ph-fill ph-hard-drives text-indigo-400"></i>
+                    System Monitor
+                </h1>
+                <p class="text-slate-400 mt-1 text-sm md:text-base">Real-time server performance metrics</p>
+            </div>
+            <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium shadow-[0_0_15px_rgba(16,185,129,0.1)]">
+                <span class="relative flex h-2.5 w-2.5">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                  <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+                </span>
+                Live Data
+            </div>
+        </header>
+
+        <!-- Dashboard Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+
+            <!-- Uptime Card -->
+            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300">
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="p-2 bg-indigo-500/20 rounded-lg text-indigo-400">
+                        <i class="ph ph-clock text-xl"></i>
+                    </div>
+                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">System Uptime</h2>
+                </div>
+                <div class="mt-auto">
+                    <p id="uptime-val" class="text-2xl lg:text-3xl font-bold text-white tracking-tight">Waiting...</p>
+                </div>
+            </div>
+
+            <!-- CPU Load Card -->
+            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300">
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="p-2 bg-amber-500/20 rounded-lg text-amber-400">
+                        <i class="ph ph-activity text-xl"></i>
+                    </div>
+                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">CPU Load (1, 5, 15m)</h2>
+                </div>
+                <div class="mt-auto flex items-baseline gap-2">
+                    <p id="cpu-load-val" class="text-2xl lg:text-3xl font-bold text-white tracking-tight">-- -- --</p>
+                </div>
+            </div>
+
+            <!-- Temperature Card -->
+            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300">
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="p-2 bg-rose-500/20 rounded-lg text-rose-400">
+                        <i class="ph ph-thermometer text-xl"></i>
+                    </div>
+                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">CPU Temperature</h2>
+                </div>
+                <div class="mt-auto">
+                    <p id="temperature-val" class="text-2xl lg:text-3xl font-bold text-white tracking-tight">-- C°</p>
+                </div>
+            </div>
+
+            <!-- CPU Usage Card (Span 2 cols on tablet, 1 on desktop if desired, but we'll let it flow naturally or span full on smaller) -->
+            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300 lg:col-span-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-3">
+                        <div class="p-2 bg-blue-500/20 rounded-lg text-blue-400">
+                            <i class="ph ph-cpu text-xl"></i>
+                        </div>
+                        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">Total CPU Usage</h2>
+                    </div>
+                    <span id="cpu-usage-val" class="text-2xl font-bold text-white">--%</span>
+                </div>
+
+                <div class="mt-auto pt-4">
+                    <div class="w-full bg-slate-700/50 rounded-full h-3 overflow-hidden border border-slate-700">
+                        <div id="cpu-usage-bar" class="progress-bar-fill bg-gradient-to-r from-blue-500 to-indigo-400 h-full rounded-full relative" style="width: 0%">
+                            <!-- Subtle highlight inside the bar -->
+                            <div class="absolute inset-0 bg-white/20 w-full h-full rounded-full blur-[2px]"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Memory Usage Card (Span 2 cols on tablet) -->
+            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300 lg:col-span-1 md:col-span-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-3">
+                        <div class="p-2 bg-emerald-500/20 rounded-lg text-emerald-400">
+                            <i class="ph ph-memory text-xl"></i>
+                        </div>
+                        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">Memory Usage</h2>
+                    </div>
+                </div>
+
+                <div class="mt-auto">
+                    <p id="memory-val" class="text-xl font-bold text-white mb-3">-- GB / -- GB</p>
+                    <div class="w-full bg-slate-700/50 rounded-full h-3 overflow-hidden border border-slate-700">
+                        <div id="memory-bar" class="progress-bar-fill bg-gradient-to-r from-emerald-500 to-teal-400 h-full rounded-full relative" style="width: 0%">
+                            <div class="absolute inset-0 bg-white/20 w-full h-full rounded-full blur-[2px]"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <script>
+        // --- State Variables ---
+        let prevCPUIdle = 0;
+        let prevCPUKernel = 0;
+        let prevCPUUser = 0;
+
+        // --- Core UI Update Logic ---
+        function updateDashboard(data) {
+            const GB = 1024 * 1024 * 1024;
+
+            let currentCPUIdle = data.processor_info.IdleTimeSinceBoot;
+            let currentCPUKernel = data.processor_info.KernelTimeSinceBoot;
+            let currentCPUUser = data.processor_info.UserTimeSinceBoot;
+
+            // Calculate metrics
+            let loadText = data.load_average.Load1.toFixed(2) + "  " + data.load_average.Load5.toFixed(2) + "  " + data.load_average.Load15.toFixed(2);
+            let cpuUsageNum = calculateCPUUsage(currentCPUIdle, currentCPUKernel, currentCPUUser);
+
+            let usedMem = (data.memory_info.SystemMemory - data.memory_info.AvailableMemory) / GB;
+            let totalMem = data.memory_info.SystemMemory / GB;
+            let memPercent = (usedMem / totalMem) * 100;
+
+            // DOM Updates
+            document.getElementById("cpu-load-val").innerText = loadText;
+
+            document.getElementById("cpu-usage-val").innerText = cpuUsageNum.toFixed(1) + "%";
+            // Clamp value between 0 and 100 for visual bar
+            document.getElementById("cpu-usage-bar").style.width = Math.min(Math.max(cpuUsageNum, 0), 100) + "%";
+            // Change color if CPU usage is high
+            const cpuBar = document.getElementById("cpu-usage-bar");
+            if(cpuUsageNum > 85) {
+                cpuBar.className = "progress-bar-fill bg-gradient-to-r from-rose-500 to-red-400 h-full rounded-full relative";
+            } else if (cpuUsageNum > 60) {
+                cpuBar.className = "progress-bar-fill bg-gradient-to-r from-amber-500 to-orange-400 h-full rounded-full relative";
+            } else {
+                cpuBar.className = "progress-bar-fill bg-gradient-to-r from-blue-500 to-indigo-400 h-full rounded-full relative";
+            }
+
+            document.getElementById("memory-val").innerText = usedMem.toFixed(2) + " GB / " + totalMem.toFixed(2) + " GB";
+            document.getElementById("memory-bar").style.width = Math.min(Math.max(memPercent, 0), 100) + "%";
+
+            document.getElementById("temperature-val").innerText = checkTemperatureAvailability(data.temperature_info);
+            document.getElementById("uptime-val").innerText = formatUptime(data.uptime_info);
+        }
+
+        // --- Helper Functions ---
+        function calculateCPUUsage(currentIdle, currentKernel, currentUser) {
+            if (prevCPUIdle === 0 || prevCPUKernel === 0 || prevCPUUser === 0) {
+                prevCPUIdle = currentIdle;
+                prevCPUKernel = currentKernel;
+                prevCPUUser = currentUser;
+                return 0;
+            }
+
+            let deltaIdle = currentIdle - prevCPUIdle;
+            let deltaKernel = currentKernel - prevCPUKernel;
+            let deltaUser = currentUser - prevCPUUser;
+
+            let deltaTotal = deltaIdle + deltaKernel + deltaUser;
+
+            // Prevent division by zero
+            if (deltaTotal === 0) return 0;
+
+            let totalCPUUsage = ((deltaKernel + deltaUser) / deltaTotal) * 100;
+
+            prevCPUIdle = currentIdle;
+            prevCPUKernel = currentKernel;
+            prevCPUUser = currentUser;
+
+            return totalCPUUsage;
+        }
+
+        function checkTemperatureAvailability(temperatureStruct) {
+            if (temperatureStruct.Supported) {
+                // Formatting to 1 decimal place for cleaner look
+                return parseFloat(temperatureStruct.Celsius).toFixed(1) + " C°";
+            } else {
+                return "Unsupported";
+            }
+        }
+
+        function formatUptime(uptimeStruct) {
+            let total = Math.round(uptimeStruct.Uptime);
+            if (total < 60) {
+                return Math.floor(total) + "s";
+            }
+            let s = total % 60;
+            let m = Math.floor(total / 60) % 60;
+
+            if (total < 3600) {
+                return m + "m " + String(s).padStart(2, '0') + "s";
+            }
+
+            let h = Math.floor(total / 3600) % 24;
+            if (total < 86400) {
+                return h + "h " + String(m).padStart(2, '0') + "m " + String(s).padStart(2, '0') + "s";
+            }
+
+            let d = Math.floor(total / 86400);
+            return  d + "d " + String(h).padStart(2, '0') + "h " + String(m).padStart(2, '0') + "m";
+        }
+
+        // --- STREAMING_CHUNK:EventSource Connection and Mock Fallback Configuration... ---
+
+        // Mock Data Generators (for preview/fallback purposes)
+        let mockUptime = 315480; // Start with a realistic uptime (e.g., a few days)
+        let mockIdle = 100000;
+        let mockKernel = 20000;
+        let mockUser = 30000;
+
+        function generateMockData() {
+            mockUptime += 1;
+
+            // Simulate typical CPU ticks
+            // Mostly idle, varying amounts of user and kernel time
+            let idleTick = Math.random() * 150 + 50;
+            let kernelTick = Math.random() * 15 + 2;
+            let userTick = Math.random() * 40 + 5;
+
+            // Sometimes spike the CPU
+            if(Math.random() > 0.9) {
+                userTick += Math.random() * 300;
+                kernelTick += Math.random() * 100;
+                idleTick = Math.random() * 10;
+            }
+
+            mockIdle += idleTick;
+            mockKernel += kernelTick;
+            mockUser += userTick;
+
+            const totalMem = 16 * 1024 * 1024 * 1024; // 16GB
+            // Fluctuating available memory
+            const availableMem = (8 + Math.sin(mockUptime / 10) * 1 + Math.random() * 0.5) * 1024 * 1024 * 1024;
+
+            return {
+                processor_info: {
+                    IdleTimeSinceBoot: mockIdle,
+                    KernelTimeSinceBoot: mockKernel,
+                    UserTimeSinceBoot: mockUser
+                },
+                load_average: {
+                    Load1: 0.15 + Math.random() * 0.5,
+                    Load5: 0.20 + Math.random() * 0.2,
+                    Load15: 0.10 + Math.random() * 0.1
+                },
+                memory_info: {
+                    SystemMemory: totalMem,
+                    AvailableMemory: availableMem
+                },
+                temperature_info: {
+                    Supported: true,
+                    Celsius: 45.0 + Math.sin(mockUptime / 5) * 5 + Math.random() * 2
+                },
+                uptime_info: {
+                    Uptime: mockUptime
+                }
+            };
+        }
+
+        // Attempt Real Connection, fallback to Mock Data
+        try {
+            const eventSource = new EventSource("/api/events");
+
+            eventSource.onmessage = function (event) {
+                try {
+                    const data = JSON.parse(event.data);
+                    updateDashboard(data);
+                } catch (e) {
+                    console.error("Error parsing event data:", e);
+                }
+            };
+
+            eventSource.onerror = function(err) {
+                console.warn("EventSource failed (expected in preview environment). Falling back to mock data.");
+                eventSource.close();
+                startMockDataLoop();
+            };
+        } catch (error) {
+            console.warn("Could not create EventSource. Falling back to mock data.");
+            startMockDataLoop();
+        }
+
+        function startMockDataLoop() {
+            // Generate initial data to populate immediately
+            updateDashboard(generateMockData());
+            // Then update every second to mimic SSE
+            setInterval(() => {
+                updateDashboard(generateMockData());
+            }, 1000);
+        }
+
+    </script>
 </body>
 </html>
diff --git a/web/original_index.html b/web/original_index.html
new file mode 100644
index 0000000..17fabec
--- /dev/null
+++ b/web/original_index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+	<script src="js/script.js"></script>
+</head>
+<body>
+<h1>Hello world!</h1>
+<p id="cpu-load">Waiting for load data...</p>
+<p id="cpu-usage">Waiting for usage data...</p>
+<p id="memory">Waiting for memory data...</p>
+<p id="temperature">Waiting for temperature data...</p>
+<p id="uptime">Waiting for uptime data...</p>
+</body>
+</html>