diff --git a/pyproject.toml b/pyproject.toml
index cc3b557..199cbdc 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -9,7 +9,11 @@ description = "The backbone of the remote PC fleet management system."
 readme = "README.md"
 authors = []
 requires-python = ">=3.13"
-dependencies = ["flask>=3.1.1", "flask-login>=0.6.3"]
+dependencies = [
+    "flask>=3.1.1",
+    "flask-login>=0.6.3",
+    "flask-socketio>=5.5.1",
+]
 license = { text = "GPL-3.0+" }
 
 [dependency-groups]
diff --git a/src/judas_server/__main__.py b/src/judas_server/__main__.py
index ce09edf..7832738 100644
--- a/src/judas_server/__main__.py
+++ b/src/judas_server/__main__.py
@@ -4,14 +4,20 @@ import logging as lg
 
 if __name__ == "__main__":
     from judas_server.web.web_server import JudasWebServer
+    from judas_server.backend import BackendServer
 
     lg.basicConfig(
         level=lg.DEBUG,
-        format="%(asctime)s - %(name)s - %(levelname)s - %(message)s",
+        format="%(asctime)s : [%(levelname)s] : %(threadName)s : %(name)s :: %(message)s",
     )
 
-    server = JudasWebServer(secret_key="dildo")
-    server.run(
+    backend_server: BackendServer = BackendServer()
+    backend_server.run()
+
+    web_server: JudasWebServer = JudasWebServer(
+        backend=backend_server, secret_key="dildo"
+    )
+    web_server.run(
         host="0.0.0.0",
         port=5000,
     )
diff --git a/src/judas_server/backend/__init__.py b/src/judas_server/backend/__init__.py
index e69de29..fe2bf76 100644
--- a/src/judas_server/backend/__init__.py
+++ b/src/judas_server/backend/__init__.py
@@ -0,0 +1,3 @@
+from .server import BackendServer
+
+__all__ = ["BackendServer"]
diff --git a/src/judas_server/backend/server.py b/src/judas_server/backend/server.py
new file mode 100644
index 0000000..6324478
--- /dev/null
+++ b/src/judas_server/backend/server.py
@@ -0,0 +1,54 @@
+# -*- coding: utf-8 -*-
+from __future__ import annotations
+
+from typing import Any
+
+import logging as lg
+import random as rn
+import threading
+import time
+
+
+class BackendServer:
+    def __init__(self) -> None:
+        self.logger: lg.Logger = lg.getLogger(
+            f"{__name__}.{self.__class__.__name__}"
+        )
+        self.logger.debug("Initializing Server...")
+
+        # TODO: add socket logic here
+
+        self.clients: dict[str, dict[str, dict[str, Any]]] = {
+            "C_01": {
+                "one_time": {
+                    "hostname": "mock-host",
+                    "platform": "windows 11",
+                    "cpu_info": "i7",
+                },
+                "polled": {"cpu_usage": 0, "ram_usage": 0},
+                "ondemand": {},
+            }
+        }
+
+        self.running: bool = False
+
+    def run(self) -> None:
+        self.running = True
+        threading.Thread(
+            name="BackendServer thread", target=self._loop, daemon=True
+        ).start()
+
+    def _loop(self) -> None:
+        self.logger.info("Starting server loop...")
+        while self.running:
+            for client in self.clients.values():
+                client["polled"]["cpu_usage"] = round(rn.uniform(0, 100), 1)
+                client["polled"]["ram_usage"] = round(rn.uniform(0, 100), 1)
+            time.sleep(1)
+
+        self.logger.info("Server loop stopped.")
+
+    def get_client_data(
+        self, client_id: str
+    ) -> dict[str, dict[str, Any]] | None:
+        return self.clients.get(client_id, None)
diff --git a/src/judas_server/web/routes/api.py b/src/judas_server/web/routes/api.py
new file mode 100644
index 0000000..b2f9da6
--- /dev/null
+++ b/src/judas_server/web/routes/api.py
@@ -0,0 +1,60 @@
+# -*- coding: utf-8 -*-
+from __future__ import annotations
+from typing import TYPE_CHECKING
+
+import flask
+import flask_login
+import threading
+import logging as lg
+
+
+if TYPE_CHECKING:
+    from werkzeug.wrappers import Response
+
+bp: flask.Blueprint = flask.Blueprint("api", __name__, url_prefix="/api")
+
+
+@bp.route("/client/<client_id>", methods=["GET"])
+@flask_login.login_required
+def get_client_data(client_id: str) -> tuple[Response, int]:
+    """API endpoint to get client data by ID.
+
+    Args:
+        client_id (str): The ID of the client.
+
+    Returns:
+        Response: JSON response with client data or error message.
+    """
+    backend = flask.current_app.config["BACKEND"]
+    data = backend.get_client_data(client_id)
+    if data is None:
+        return flask.jsonify({"error": "Client not found"}), 404
+    return flask.jsonify(data), 200
+
+
+@bp.route("/clients", methods=["GET"])
+@flask_login.login_required
+def list_clients() -> tuple[Response, int]:
+    """API endpoint to list all clients.
+
+    Returns:
+        Response: JSON response with list of client IDs.
+    """
+    backend = flask.current_app.config["BACKEND"]
+    client_ids = list(backend.clients.keys())
+    return flask.jsonify({"clients": client_ids}), 200
+
+
+def emit_polled_data(app, socketio):
+    backend = app.config["BACKEND"]
+
+    def poll_loop():
+        import time
+
+        while True:
+            for client_id, data in backend.clients.items():
+                socketio.emit("update_data", {client_id: data})
+
+            time.sleep(1)
+
+    threading.Thread(name="Socketio", target=poll_loop, daemon=True).start()
diff --git a/src/judas_server/web/routes/panel.py b/src/judas_server/web/routes/panel.py
index 73c3962..c5e3e05 100644
--- a/src/judas_server/web/routes/panel.py
+++ b/src/judas_server/web/routes/panel.py
@@ -1,20 +1,16 @@
 # -*- coding: utf-8 -*-
 from __future__ import annotations
-from typing import TYPE_CHECKING
 
 import flask
 import flask_login
 
 
-if TYPE_CHECKING:
-    from werkzeug.wrappers import Response
-
 panel_bp: flask.Blueprint = flask.Blueprint(
     "panel", __name__, url_prefix="/panel"
 )
 
 
-@panel_bp.route("/")
+@panel_bp.route("")
 @flask_login.login_required
 def panel() -> str:
     """Renders the main panel page with PC details.
@@ -22,6 +18,4 @@ def panel() -> str:
     Returns:
         Rendered HTML template with PC details.
     """
-    return flask.render_template(
-        "panel.html", username=flask_login.current_user.id, pcs={}
-    )
+    return flask.render_template("panel.html")
diff --git a/src/judas_server/web/static/css/style.css b/src/judas_server/web/static/css/style.css
index c0a9a23..0078baf 100644
--- a/src/judas_server/web/static/css/style.css
+++ b/src/judas_server/web/static/css/style.css
@@ -1,70 +1,69 @@
 @import "palette.css";
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body {
-    background-color: var(--ctp-base);
-    font-family: monospace, sans-serif !important;
-    color: var(--ctp-text);
+  background-color: var(--ctp-base);
+  font-family: monospace, sans-serif !important;
+  color: var(--ctp-text);
 }
 
 input {
-    font-family: inherit;
-    color: #eceff4;
-    background-color: var(--ctp-crust);
-    border: none;
-    border-radius: 0.25rem;
-    padding: 0.25rem;
+  font-family: inherit;
+  color: #eceff4;
+  background-color: var(--ctp-crust);
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
 }
 
 a {
-    color: var(--ctp-blue);
-    text-decoration: none;
+  color: var(--ctp-blue);
+  text-decoration: none;
 }
 
 #wrapper {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: var(--ctp-mantle);
-    /* color: var(--ctp-text); */
-    padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--ctp-mantle);
+  /* color: var(--ctp-text); */
+  padding: 1rem;
 }
 
 main {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
-    /* background-color: var(--ctp-base); */
-    flex-grow: 1;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  /* background-color: var(--ctp-base); */
+  flex-grow: 1;
 }
 
 header a {
-    text-decoration: none;
-    /* color: var(--nord-fg0); */
+  text-decoration: none;
+  /* color: var(--nord-fg0); */
 }
 
 .button {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background-color: var(--ctp-lavender);
-    color: var(--ctp-base);
-    border: none;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    transition: 0.3s ease-in-out;
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: var(--ctp-lavender);
+  color: var(--ctp-base);
+  border: none;
+  border-radius: 0.25rem;
+  text-decoration: none;
+  transition: 0.3s ease-in-out;
 }
 
 /* .button a:hover { */
@@ -73,116 +72,131 @@ header a {
 /* } */
 
 .button:hover {
-    background-color: var(--ctp-mauve);
-    cursor: pointer;
+  background-color: var(--ctp-mauve);
+  cursor: pointer;
 }
 
 .center {
-    text-align: center;
+  text-align: center;
 }
 
 .error-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 1rem;
-    padding: 1rem;
-    background-color: var(--ctp-surface0);
-    color: var(--ctp-red);
-    border: 6px solid var(--ctp-red);
-    border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 1rem;
+  padding: 1rem;
+  background-color: var(--ctp-surface0);
+  color: var(--ctp-red);
+  border: 6px solid var(--ctp-red);
+  border-radius: 24px;
 }
 
 .center-table {
-    margin: 0 auto;
-    width: 100%;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .select-table {
-    border-collapse: collapse;
-    border: 2px solid var(--ctp-surface0);
+  border-collapse: collapse;
+  border: 2px solid var(--ctp-surface0);
 }
 
 .select-table thead {
-    position: sticky;
-    top: -1px;
-    z-index: 2;
+  position: sticky;
+  top: -1px;
+  z-index: 2;
 }
 
-.select-table th, .select-table td {
-    padding: 0.5rem;
-    text-align: center;
-    border: 1px solid var(--ctp-surface0);
-    border-collapse: collapse;
+.select-table th,
+.select-table td {
+  padding: 0.5rem;
+  text-align: center;
+  border: 1px solid var(--ctp-surface0);
+  border-collapse: collapse;
 }
 
 .select-table th {
-    background-color: var(--ctp-surface1);
-    color: var(--nord-fg0);
+  background-color: var(--ctp-surface1);
+  color: var(--nord-fg0);
 }
 
 .select-table a {
-    display: block;
-    /* color: var(--nord-acc0); */
-    text-decoration: none;
-    transition: 0.1s ease-in-out;
+  display: block;
+  /* color: var(--nord-acc0); */
+  text-decoration: none;
+  transition: 0.1s ease-in-out;
 }
 
 .select-table tr {
-    transition: 0.1s ease-in-out;
+  transition: 0.1s ease-in-out;
 }
 
 .select-table tr:hover {
-    background-color: var(--ctp-surface0);
+  background-color: var(--ctp-surface0);
 }
 
 .select-table tr:hover a {
-    color: var(--ctp-base);
+  color: var(--ctp-base);
 }
 
 .red-bg {
-    background-color: var(--ctp-red);
+  background-color: var(--ctp-red);
 }
 
 .yellow-bg {
-    background-color: var(--ctp-yellow);
+  background-color: var(--ctp-yellow);
 }
 
 .green-bg {
-    background-color: var(--ctp-green);
+  background-color: var(--ctp-green);
 }
 
 .button-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
 }
 
 .link {
-    transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
 }
 
 .link:hover {
-    color: var(--ctp-blue);
+  color: var(--ctp-blue);
 }
 
 .details-table tr td:first-child {
-    font-weight: 900;
-    background-color: var(--ctp-surface0);
-    white-space: nowrap;
-    width: 1%;
+  font-weight: 900;
+  background-color: var(--ctp-surface0);
+  white-space: nowrap;
+  width: 1%;
 }
 
 .details-table {
-    border-collapse: collapse;
-    border: 2px solid var(--ctp-surface1);
+  border-collapse: collapse;
+  border: 2px solid var(--ctp-surface1);
 }
 
-.details-table th, .details-table td {
-    padding: 0.5rem;
-    text-align: left;
-    border: 1px solid var(--ctp-text);
-    border-collapse: collapse;
+.details-table th,
+.details-table td {
+  padding: 0.5rem;
+  text-align: left;
+  border: 1px solid var(--ctp-text);
+  border-collapse: collapse;
+}
+
+#notify {
+  display: none;
+  position: fixed;
+  top: 3rem;
+  right: 50%;
+  transform: translateX(50%);
+  background-color: var(--ctp-surface1);
+  padding: 1rem 2rem;
+  border: 4px solid var(--ctp-text);
+  border-radius: 1rem;
+  opacity: 0.8;
 }
diff --git a/src/judas_server/web/templates/details.html b/src/judas_server/web/templates/details.html
index 778af20..2e62e58 100644
--- a/src/judas_server/web/templates/details.html
+++ b/src/judas_server/web/templates/details.html
@@ -1,36 +1,44 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>judas panel - details</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-</head>
-<body>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/style.css') }}"
+    />
+  </head>
+  <body>
     <div id="wrapper">
-        <header>
-            <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
-            <p><a class="button" href="{{ url_for('logout') }}">Logout</a></p>
-        </header>
-        <main>
-            <div class="button-container">
-                <p><a href="{{ url_for('panel') }}" class="link">Back to Panel</a></p>
-                <h2>{{ pc.id }}</h2>
-                <p><a href="{{ url_for('stream', pc_id=pc.id) }}" class="link">View Stream</a></p>
-            </div>
-            <table class="center-table details-table">
-                <tbody>
-                    <tr>
-                        <td>Status</td>
-                        <td>{{ pc.status }}</td>
-                    </tr>
-                    <tr>
-                        <td>Last Seen</td>
-                        <td>{{ pc.last_seen }}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </main>
+      <header>
+        <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
+        <p><a class="button" href="{{ url_for('logout') }}">Logout</a></p>
+      </header>
+      <main>
+        <div class="button-container">
+          <p><a href="{{ url_for('panel') }}" class="link">Back to Panel</a></p>
+          <h2>{{ pc.id }}</h2>
+          <p>
+            <a href="{{ url_for('stream', pc_id=pc.id) }}" class="link"
+              >View Stream</a
+            >
+          </p>
+        </div>
+        <table class="center-table details-table">
+          <tbody>
+            <tr>
+              <td>Status</td>
+              <td>{{ pc.status }}</td>
+            </tr>
+            <tr>
+              <td>Last Seen</td>
+              <td>{{ pc.last_seen }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </main>
     </div>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
+
diff --git a/src/judas_server/web/templates/index.html b/src/judas_server/web/templates/index.html
index 457890e..50c2034 100644
--- a/src/judas_server/web/templates/index.html
+++ b/src/judas_server/web/templates/index.html
@@ -1,54 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>judas</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>judas</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 </head>
 <body>
-    <div id="wrapper">
-        <header>
-            <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
-            {% if logged %}
-            <p><a class="button" href="{{ url_for('auth.logout') }}">Logout</a></p>
-            {% else %}
-            <p><a class="button" href="{{ url_for('auth.login') }}">Login</a></p>
-            {% endif %}
-        </header>
-        <main class="center">
-            <div>
-                <p>Welcome to</p>
-                <h2 id="typing-text" style="font-size: 3rem;">judas</h2>
-                <p>a remote PC fleet management system</p>
-            </div>
-            <p style="color: #bf616a;"><strong>Notice:</strong> Please use this system responsibly and in accordance with all applicable laws and organizational policies.</p>
-            {% if logged %}
-            <p><a class="button" href="{{ url_for('panel.panel') }}">Go to panel</a></p>
-            {% else %}
-            <p>Please <a href="{{ url_for('auth.login')}}" class="link">log in</a> to manage your remote PCs.</p>
-            {% endif %}
-        </main>
-    </div>
-    <script>
-        var i = 0;
-        var txt = document.getElementById("typing-text").innerHTML;
-        var minSpeed = 50;
-        var maxSpeed = 200;
+  <div id="wrapper">
+    <header>
+      <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
+      {% if logged %}
+        <p><a class="button" href="{{ url_for('auth.logout') }}">Logout</a></p>
+      {% else %}
+        <p><a class="button" href="{{ url_for('auth.login') }}">Login</a></p>
+      {% endif %}
+    </header>
+    <main class="center">
+      <div>
+        <p>Welcome to</p>
+        <h2 id="typing-text" style="font-size: 3rem;">judas</h2>
+        <p>a remote PC fleet management system</p>
+      </div>
+      <p style="color: #bf616a;"><strong>Notice:</strong> Please use this system responsibly and in accordance with all applicable laws and organizational policies.</p>
+      {% if logged %}
+        <p><a class="button" href="{{ url_for('panel.panel') }}">Go to panel</a></p>
+      {% else %}
+        <p>Please <a href="{{ url_for('auth.login')}}" class="link">log in</a> to manage your remote PCs.</p>
+      {% endif %}
+    </main>
+  </div>
+  <script>
+    var i = 0;
+    var txt = document.getElementById("typing-text").innerHTML;
+    var minSpeed = 50;
+    var maxSpeed = 200;
 
-        document.getElementById("typing-text").innerHTML = "";
+    document.getElementById("typing-text").innerHTML = "";
 
-        function typeWriter() {
-            if (i < txt.length) {
-                document.getElementById("typing-text").innerHTML += txt.charAt(i);
-                i++;
+    function typeWriter() {
+      if (i < txt.length) {
+        document.getElementById("typing-text").innerHTML += txt.charAt(i);
+        i++;
 
-                var randomDelay = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
-                setTimeout(typeWriter, randomDelay);
-            }
-        }
+        var randomDelay = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
+        setTimeout(typeWriter, randomDelay);
+      }
+    }
 
-        typeWriter();
-    </script>
+    typeWriter();
+  </script>
 </body>
 </html>
diff --git a/src/judas_server/web/templates/login.html b/src/judas_server/web/templates/login.html
index 4da82c7..aa13aae 100644
--- a/src/judas_server/web/templates/login.html
+++ b/src/judas_server/web/templates/login.html
@@ -1,32 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>judas - login page</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>judas - login page</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 </head>
 <body>
-    <div id="wrapper">
-        <header>
-            <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
-        </header>
-        <main>
-            <h1>Login</h1>
-            <form method="post" class="center">
-                <label for="password">Password:</label>
-                <input type="password" id="password" name="password" required autofocus>
-                <br>
-                <br>
-                <input type="submit" value="Login" class="button">
-                {% if error %}
-                <div class="error-container">
-                    <h1>Login failure</h1>
-                    <p>{{ error }}</p>
-                </div>
-                {% endif %}
-            </form>
-        </main>
-    </div>
+  <div id="wrapper">
+    <header>
+      <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
+    </header>
+    <main>
+      <h1>Login</h1>
+      <form method="post" class="center">
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" required autofocus>
+        <br>
+        <br>
+        <input type="submit" value="Login" class="button">
+        {% if error %}
+          <div class="error-container">
+            <h1>Login failure</h1>
+            <p>{{ error }}</p>
+          </div>
+        {% endif %}
+      </form>
+    </main>
+  </div>
 </body>
 </html>
diff --git a/src/judas_server/web/templates/panel.html b/src/judas_server/web/templates/panel.html
index 2e74380..3985f63 100644
--- a/src/judas_server/web/templates/panel.html
+++ b/src/judas_server/web/templates/panel.html
@@ -1,42 +1,61 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>judas panel</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-</head>
-<body>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/style.css') }}"
+    />
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
+    <script>
+      $(document).ready(function () {
+        const socket = io();
+        const dataElement = $("#data");
+
+        const showNotify = (message) => {
+          $("#notify").stop().fadeIn();
+          $("#notify").text(message);
+          setTimeout(() => {
+            $("#notify").fadeOut();
+          }, 3000);
+        };
+
+        $("#notify").hide();
+
+        socket.on("connect", () => {
+          console.log("Connected to server");
+          showNotify("Connected to server");
+        });
+
+        socket.on("disconnect", () => {
+          console.log("Disconnected from server");
+          showNotify("Disconnected from server");
+        });
+
+        socket.on("update_data", (data) => {
+          console.log("Received data:", data);
+          document.getElementById("data").innerHTML = JSON.stringify(
+            data,
+            null,
+            2,
+          );
+        });
+      });
+    </script>
+  </head>
+  <body>
     <div id="wrapper">
-        <header>
-            <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
-            <p><a class="button" href="{{ url_for('auth.logout') }}">Logout</a></p>
-        </header>
-        <main>
-            <h2 class="center">Select a PC to Control</h2>
-            <p class="center">Choose a PC from the list below to view details or send commands.</p>
-            <table class="center-table select-table">
-                <thead>
-                    <tr>
-                        <th>PC ID</th>
-                        <th>Status</th>
-                        <th>Last Seen</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for pc in pcs.values() %}
-                    <tr>
-                        <td><a href="{{ url_for('details', pc_id=pc.id) }}">{{ pc.id }}</a></td>
-                        <td class='{% if pc.status == "online" %}green-bg{% elif pc.status == "offline" %}red-bg{% else %}yellow-bg{% endif %}'>{{ pc.status if pc.status else 'Unknown' }}</td>                        <td>{{ pc.last_seen if pc.last_seen else 'Never' }}</td>
-                    </tr>
-                    {% else %}
-                    <tr>
-                        <td colspan="3">No PCs found.</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        </main>
+      <header>
+        <h1><a href="{{ url_for('index.index') }}">judas</a></h1>
+        <p><a class="button" href="{{ url_for('auth.logout') }}">Logout</a></p>
+      </header>
+      <div id="notify"></div>
+      <main>
+        <pre id="data"></pre>
+      </main>
     </div>
-</body>
+  </body>
 </html>
diff --git a/src/judas_server/web/web_server.py b/src/judas_server/web/web_server.py
index 1947f46..5b99771 100644
--- a/src/judas_server/web/web_server.py
+++ b/src/judas_server/web/web_server.py
@@ -3,30 +3,42 @@
 from __future__ import annotations
 
 import logging as lg
+from typing import TYPE_CHECKING
+
 from flask import Flask
 from flask_login import LoginManager
+from flask_socketio import SocketIO
 
 from judas_server.web.user import load_user
 
+if TYPE_CHECKING:
+    from judas_server.backend import BackendServer
+
 
 class JudasWebServer:
-    def __init__(self, secret_key: str) -> None:
+    def __init__(self, backend: BackendServer, secret_key: str) -> None:
         self.logger: lg.Logger = lg.getLogger(
             f"{__name__}.{self.__class__.__name__}"
         )
         self.logger.debug("Initializing JudasWebServer...")
 
+        self.backend: BackendServer = backend
+
         self.app: Flask = Flask(
             __name__, static_folder="static", template_folder="templates"
         )
         self.app.secret_key = secret_key
 
+        self.app.config["WEB_SERVER"] = self
+        self.app.config["BACKEND"] = self.backend
+
         # hard-code password
         self.app.config["PASSWORD"] = "123"
 
         # extensions
         self.login_manager: LoginManager = LoginManager()
-        self.app.config["LoginManager"] = self.login_manager
+
+        self.socketio: SocketIO = SocketIO(self.app, cors_allowed_origins="*")
 
         self.configure_extensions()
         self.init_routes()
@@ -41,13 +53,20 @@ class JudasWebServer:
 
     def init_routes(self) -> None:
         self.logger.debug("Initializing routes...")
-        from judas_server.web.routes import auth_bp, index_bp, panel_bp
+        from judas_server.web.routes import (
+            auth_bp,
+            index_bp,
+            panel_bp,
+            api,
+        )
 
         self.app.register_blueprint(index_bp)
         self.app.register_blueprint(auth_bp)
         self.app.register_blueprint(panel_bp)
+        self.app.register_blueprint(api.bp)
+        api.emit_polled_data(self.app, self.socketio)
 
     def run(self, host: str = "0.0.0.0", port: int = 5000) -> None:
         self.logger.info(f"Starting web server on {host}:{port}...")
-        self.app.run(host=host, port=port)
+        self.socketio.run(app=self.app, host=host, port=port)
         self.logger.info("Server stopped.")
diff --git a/uv.lock b/uv.lock
index 7a3016d..e2985ba 100644
--- a/uv.lock
+++ b/uv.lock
@@ -1,5 +1,5 @@
 version = 1
-revision = 2
+revision = 3
 requires-python = ">=3.13"
 
 [[package]]
@@ -11,6 +11,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/78/b6/6307fbef88d9b5ee7421e68d78a9f162e0da4900bc5f5793f6d3d0e34fb8/annotated_types-0.7.0-py3-none-any.whl", hash = "sha256:1f02e8b43a8fbbc3f3e0d4f0f4bfc8131bcb4eebe8849b8e5c773f3a1c582a53", size = 13643, upload-time = "2024-05-20T21:33:24.1Z" },
 ]
 
+[[package]]
+name = "bidict"
+version = "0.23.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/9a/6e/026678aa5a830e07cd9498a05d3e7e650a4f56a42f267a53d22bcda1bdc9/bidict-0.23.1.tar.gz", hash = "sha256:03069d763bc387bbd20e7d49914e75fc4132a41937fa3405417e1a5a2d006d71", size = 29093, upload-time = "2024-02-18T19:09:05.748Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/99/37/e8730c3587a65eb5645d4aba2d27aae48e8003614d6aaf15dda67f702f1f/bidict-0.23.1-py3-none-any.whl", hash = "sha256:5dae8d4d79b552a71cbabc7deb25dfe8ce710b17ff41711e13010ead2abfc3e5", size = 32764, upload-time = "2024-02-18T19:09:04.156Z" },
+]
+
 [[package]]
 name = "blinker"
 version = "1.9.0"
@@ -188,6 +197,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/59/f5/67e9cc5c2036f58115f9fe0f00d203cf6780c3ff8ae0e705e7a9d9e8ff9e/Flask_Login-0.6.3-py3-none-any.whl", hash = "sha256:849b25b82a436bf830a054e74214074af59097171562ab10bfa999e6b78aae5d", size = 17303, upload-time = "2023-10-30T14:53:19.636Z" },
 ]
 
+[[package]]
+name = "flask-socketio"
+version = "5.5.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "flask" },
+    { name = "python-socketio" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/d1/1f/54d3de4982df695682af99c65d4b89f8a46fe6739780c5a68690195835a0/flask_socketio-5.5.1.tar.gz", hash = "sha256:d946c944a1074ccad8e99485a6f5c79bc5789e3ea4df0bb9c864939586c51ec4", size = 37401, upload-time = "2025-01-06T19:49:59.056Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/47/38/1b75b3ba3452860211ec87710f9854112911a436ee4d155533e0b83b5cd9/Flask_SocketIO-5.5.1-py3-none-any.whl", hash = "sha256:35a50166db44d055f68021d6ec32cb96f1f925cd82de4504314be79139ea846f", size = 18259, upload-time = "2025-01-06T19:49:56.555Z" },
+]
+
 [[package]]
 name = "git-cliff"
 version = "2.10.0"
@@ -229,6 +251,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/01/61/d4b89fec821f72385526e1b9d9a3a0385dda4a72b206d28049e2c7cd39b8/gitpython-3.1.45-py3-none-any.whl", hash = "sha256:8908cb2e02fb3b93b7eb0f2827125cb699869470432cc885f019b8fd0fccff77", size = 208168, upload-time = "2025-07-24T03:45:52.517Z" },
 ]
 
+[[package]]
+name = "h11"
+version = "0.16.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/01/ee/02a2c011bdab74c6fb3c75474d40b3052059d95df7e73351460c8588d963/h11-0.16.0.tar.gz", hash = "sha256:4e35b956cf45792e4caa5885e69fba00bdbc6ffafbfa020300e549b208ee5ff1", size = 101250, upload-time = "2025-04-24T03:35:25.427Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/04/4b/29cac41a4d98d144bf5f6d33995617b185d14b22401f75ca86f384e87ff1/h11-0.16.0-py3-none-any.whl", hash = "sha256:63cf8bbe7522de3bf65932fda1d9c2772064ffb3dae62d55932da54b31cb6c86", size = 37515, upload-time = "2025-04-24T03:35:24.344Z" },
+]
+
 [[package]]
 name = "idna"
 version = "3.10"
@@ -279,11 +310,12 @@ wheels = [
 
 [[package]]
 name = "judas-server"
-version = "0.1.0"
+version = "0.1.1"
 source = { editable = "." }
 dependencies = [
     { name = "flask" },
     { name = "flask-login" },
+    { name = "flask-socketio" },
 ]
 
 [package.dev-dependencies]
@@ -302,6 +334,7 @@ test = [
 requires-dist = [
     { name = "flask", specifier = ">=3.1.1" },
     { name = "flask-login", specifier = ">=0.6.3" },
+    { name = "flask-socketio", specifier = ">=5.5.1" },
 ]
 
 [package.metadata.requires-dev]
@@ -489,6 +522,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/b2/05/77b60e520511c53d1c1ca75f1930c7dd8e971d0c4379b7f4b3f9644685ba/pytest_mock-3.14.1-py3-none-any.whl", hash = "sha256:178aefcd11307d874b4cd3100344e7e2d888d9791a6a1d9bfe90fbc1b74fd1d0", size = 9923, upload-time = "2025-05-26T13:58:43.487Z" },
 ]
 
+[[package]]
+name = "python-engineio"
+version = "4.12.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "simple-websocket" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/ba/0b/67295279b66835f9fa7a491650efcd78b20321c127036eef62c11a31e028/python_engineio-4.12.2.tar.gz", hash = "sha256:e7e712ffe1be1f6a05ee5f951e72d434854a32fcfc7f6e4d9d3cae24ec70defa", size = 91677, upload-time = "2025-06-04T19:22:18.789Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/0c/fa/df59acedf7bbb937f69174d00f921a7b93aa5a5f5c17d05296c814fff6fc/python_engineio-4.12.2-py3-none-any.whl", hash = "sha256:8218ab66950e179dfec4b4bbb30aecf3f5d86f5e58e6fc1aa7fde2c698b2804f", size = 59536, upload-time = "2025-06-04T19:22:16.916Z" },
+]
+
 [[package]]
 name = "python-gitlab"
 version = "6.2.0"
@@ -526,6 +571,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/89/be/10966ab26f0f26a58b7f56b31c6cb71dea85c8cbaa856f4989c035a62901/python_semantic_release-10.2.0-py3-none-any.whl", hash = "sha256:88ebe464bd15edf9793715212257fc3d04baafea10a6362bc78d69892418ce88", size = 141226, upload-time = "2025-06-29T22:06:31.14Z" },
 ]
 
+[[package]]
+name = "python-socketio"
+version = "5.13.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "bidict" },
+    { name = "python-engineio" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/21/1a/396d50ccf06ee539fa758ce5623b59a9cb27637fc4b2dc07ed08bf495e77/python_socketio-5.13.0.tar.gz", hash = "sha256:ac4e19a0302ae812e23b712ec8b6427ca0521f7c582d6abb096e36e24a263029", size = 121125, upload-time = "2025-04-12T15:46:59.933Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3c/32/b4fb8585d1be0f68bde7e110dffbcf354915f77ad8c778563f0ad9655c02/python_socketio-5.13.0-py3-none-any.whl", hash = "sha256:51f68d6499f2df8524668c24bcec13ba1414117cfb3a90115c559b601ab10caf", size = 77800, upload-time = "2025-04-12T15:46:58.412Z" },
+]
+
 [[package]]
 name = "requests"
 version = "2.32.4"
@@ -575,6 +633,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e0/f9/0595336914c5619e5f28a1fb793285925a8cd4b432c9da0a987836c7f822/shellingham-1.5.4-py2.py3-none-any.whl", hash = "sha256:7ecfff8f2fd72616f7481040475a65b2bf8af90a56c89140852d1120324e8686", size = 9755, upload-time = "2023-10-24T04:13:38.866Z" },
 ]
 
+[[package]]
+name = "simple-websocket"
+version = "1.1.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "wsproto" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/b0/d4/bfa032f961103eba93de583b161f0e6a5b63cebb8f2c7d0c6e6efe1e3d2e/simple_websocket-1.1.0.tar.gz", hash = "sha256:7939234e7aa067c534abdab3a9ed933ec9ce4691b0713c78acb195560aa52ae4", size = 17300, upload-time = "2024-10-10T22:39:31.412Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/52/59/0782e51887ac6b07ffd1570e0364cf901ebc36345fea669969d2084baebb/simple_websocket-1.1.0-py3-none-any.whl", hash = "sha256:4af6069630a38ed6c561010f0e11a5bc0d4ca569b36306eb257cd9a192497c8c", size = 13842, upload-time = "2024-10-10T22:39:29.645Z" },
+]
+
 [[package]]
 name = "smmap"
 version = "5.0.2"
@@ -665,3 +735,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/09/5e/1655cf481e079c1f22d0cabdd4e51733679932718dc23bf2db175f329b76/wrapt-1.17.2-cp313-cp313t-win_amd64.whl", hash = "sha256:eaf675418ed6b3b31c7a989fd007fa7c3be66ce14e5c3b27336383604c9da85c", size = 40750, upload-time = "2025-01-14T10:35:03.378Z" },
     { url = "https://files.pythonhosted.org/packages/2d/82/f56956041adef78f849db6b289b282e72b55ab8045a75abad81898c28d19/wrapt-1.17.2-py3-none-any.whl", hash = "sha256:b18f2d1533a71f069c7f82d524a52599053d4c7166e9dd374ae2136b7f40f7c8", size = 23594, upload-time = "2025-01-14T10:35:44.018Z" },
 ]
+
+[[package]]
+name = "wsproto"
+version = "1.2.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "h11" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c9/4a/44d3c295350d776427904d73c189e10aeae66d7f555bb2feee16d1e4ba5a/wsproto-1.2.0.tar.gz", hash = "sha256:ad565f26ecb92588a3e43bc3d96164de84cd9902482b130d0ddbaa9664a85065", size = 53425, upload-time = "2022-08-23T19:58:21.447Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/78/58/e860788190eba3bcce367f74d29c4675466ce8dddfba85f7827588416f01/wsproto-1.2.0-py3-none-any.whl", hash = "sha256:b9acddd652b585d75b20477888c56642fdade28bdfd3579aa24a4d2c037dd736", size = 24226, upload-time = "2022-08-23T19:58:19.96Z" },
+]