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>

PC ID	Status	Last Seen
{{ pc.id }}	{{ pc.status if pc.status else 'Unknown' }}	{{ pc.last_seen if pc.last_seen else 'Never' }}
No PCs found.