diff --git a/html/metrics_page.html b/html/metrics_page.html
new file mode 100644
index 0000000..406d571
--- /dev/null
+++ b/html/metrics_page.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+        background-color: black;
+        color: white;
+    }
+</style>
+</head>
+<body>
+
+<title>Server Stats</title>
+<h1 id="hostname">Loading...</h1>
+
+<p>Uptime: <span id="uptime">-</span></p>
+<p>CPU usage: <span id="cpu">-</span>%</p>
+<p>CPU count: <span id="cpu-count">-</span></p>
+<p>RAM usage: <span id="ram">-</span>%</p>
+<p>RAM total: <span id="ram-total">-</span> GB</p>
+<p>Swap usage: <span id="swap">-</span>%</p>
+<p>Swap total: <span id="swap-total">-</span> GB</p>
+<p>Disk total: <span id="disk-total">-</span> GB</p>
+<p>Disk usage: <span id="disk">-</span>%</p>
+<p>Last updated: <span id="timestamp">-</span></p>
+
+<script>
+fetch("stats.json")
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById("hostname").textContent = data.hostname;
+        document.getElementById("uptime").textContent = data.uptime;
+        document.getElementById("cpu").textContent = data.cpu_usage;
+        document.getElementById("cpu-count").textContent = data.cpu_count;
+        document.getElementById("ram").textContent = data.ram_usage;
+        document.getElementById("ram-total").textContent = data.ram_total_gb;
+        document.getElementById("swap").textContent = data.swap_usage;
+        document.getElementById("swap-total").textContent = data.swap_total_gb;
+        document.getElementById("disk-total").textContent = data.disk_total_gb;
+        document.getElementById("disk").textContent = data.disk_usage;
+        document.getElementById("timestamp").textContent = data.timestamp;
+    });
+</script>
+</body>
+</html>