diff --git a/app.py b/app.py
index 52215d3..56f92a1 100644
--- a/app.py
+++ b/app.py
@@ -14,7 +14,7 @@ def homepage():
     return render_template("home.html", services=services)
 
 
-@app.route("/status")
+@app.route("/api/status")
 def status():
     return jsonify([s.to_dict() for s in services])
 
diff --git a/mem/__init__.py b/mem/__init__.py
index 8af79dd..864ecdd 100644
--- a/mem/__init__.py
+++ b/mem/__init__.py
@@ -40,6 +40,7 @@ class service:
             "ping": self.ping,
             "label": self.label,
             "icon_filetype": self.icon_filetype,
+            "id": self.id,
         }
 
     def set_status(self, status: Optional[int]):
diff --git a/templates/home.html b/templates/home.html
index 4911bb5..c8d4f63 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -2,7 +2,7 @@
 <html lang="en" data-bs-theme="dark">
 
 <head>
-    <meta charset="UTF-8" http-equiv="refresh" content="1">
+    <meta charset="UTF-8">
     <title>Debug Divs</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
@@ -27,4 +27,43 @@
 
 </body>
 
+<script>
+    const main_body = document.getElementById("main_body");
+    const url = '/api/status';
+
+    function fetchData() {
+        fetch(url, { cache: 'no-store' })
+            .then(response => response.json())
+            .then(data => {
+                console.log(data)
+                updateWebpage(data)
+            })
+            .catch(error => console.error("Error fetching data", error))
+            .finally(() => {
+                setTimeout(fetchData, 1000); // schedule next request after 1 second
+            });
+    }
+
+    function updateWebpage(services) {
+        main_body.innerHTML = ''; // Clear webpage
+
+        // Build all service divs as a single string
+        main_body.innerHTML = services.map(s => `
+        <div class="m-2 border border-3 ${s.online ? 'border-success' : 'border-danger'}" style="width: 200px">
+            <div class="bg-body-tertiary d-flex flex-column align-items-center">
+                <div class="bg-dark w-100">
+                    <h4 class="text-center text-truncate m-0" style="font-size: 1.5rem;">${s.label}</h4>
+                </div>
+                <div class="ratio ratio-1x1 w-75">
+                    <img src="static/icons/${s.id}.${s.icon_filetype}" class="img-fluid">
+                </div>
+            </div>
+        </div>
+    `).join(''); // join into a single string
+    }
+
+    fetchData(); // start the loop
+
+</script>
+
 </html>
\ No newline at end of file
