diff --git a/src/judas_server/web/templates/panel.html b/src/judas_server/web/templates/panel.html
index d5100b3..2582ef6 100644
--- a/src/judas_server/web/templates/panel.html
+++ b/src/judas_server/web/templates/panel.html
@@ -1,204 +1,16 @@
-<!doctype html>
-<html lang="en">
-  <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') }}"
-    />
-    <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();
+{% extends "base/base.html" %}
 
-        const showNotify = (message) => {
-          $("#notify").stop().fadeIn();
-          $("#notify").text(message);
-          setTimeout(() => {
-            $("#notify").fadeOut();
-          }, 3000);
-        };
+{% block title %}panel{% endblock %}
 
-        const loadClientDetails = (clientId) => {
-          fetch(`/client/${clientId}`)
-            .then((response) => response.text())
-            .then((html) => {
-              $("#content").html(html);
-            })
-            .catch((error) => {
-              console.error("Error fetching client details:", error);
-            });
-        };
+{% block content %}
+<main class="flex grow h-full">
+  <aside class="border-r-4 border-r-ctp-mantle">
+    <ul id="client-list"></ul>
+  </aside>
+  <div id="content" class="grow"></div>
+</main>
+{% endblock %}
 
-        // load client_details for the client specified in the URL
-        const urlParams = new URLSearchParams(window.location.search);
-        const clientId = urlParams.get("client");
-        if (clientId) {
-          loadClientDetails(clientId);
-          $(`#client-list a[href="?client=${clientId}"]`).addClass("active");
-        }
-
-        $("#notify").hide();
-
-        socket.on("connect", () => {
-          console.log("Connected to server");
-          $("#no-connection-message").hide();
-          showNotify("Connected to server");
-        });
-
-        socket.on("disconnect", () => {
-          console.log("Disconnected from server");
-          $("#no-connection-message").show();
-          showNotify("Disconnected from server");
-        });
-
-        socket.on("update_data", (data) => {
-          const clientList = $("#client-list");
-          const existingItems = {};
-
-          // Index current <li> by clientId
-          clientList.children("li").each(function () {
-            const a = $(this).find("a");
-            if (a.length) {
-              const clientId = a.attr("href").substring(1);
-              existingItems[clientId] = $(this);
-            }
-          });
-
-          // Track which clientIds are still present
-          const seen = new Set();
-
-          Object.entries(data).forEach(([clientId, client]) => {
-            seen.add(clientId);
-
-            // Build icon
-            const iconElement = document.createElement("i");
-            switch (client.status) {
-              case "online":
-                iconElement.className = "fi fi-sr-play";
-                iconElement.style.color = "var(--ctp-green)";
-                break;
-              case "offline":
-                iconElement.className = "fi fi-sr-stop";
-                iconElement.style.color = "var(--ctp-red)";
-                break;
-              case "pending":
-                iconElement.className = "fi fi-sr-pending";
-                iconElement.style.color = "var(--ctp-yellow)";
-                break;
-              case "stale":
-                iconElement.className = "fi fi-sr-skull";
-                iconElement.style.color = "var(--ctp-orange)";
-                break;
-              default:
-                iconElement.className = "fi fi-rr-question";
-                iconElement.style.color = "var(--ctp-gray)";
-            }
-
-            // Time since last seen
-            const lastSeen = new Date(client.last_seen * 1000);
-            const now = new Date();
-            const timeSinceLastSeen = Math.floor((now - lastSeen) / 1000);
-            const days = Math.floor(timeSinceLastSeen / 86400);
-            const hours = Math.floor((timeSinceLastSeen % 86400) / 3600);
-            const minutes = Math.floor((timeSinceLastSeen % 3600) / 60);
-            const seconds = timeSinceLastSeen % 60;
-            let timeSinceLastSeenText = "";
-            if (days > 0) timeSinceLastSeenText += `${days}d `;
-            if (hours > 0) timeSinceLastSeenText += `${hours}h `;
-            if (minutes > 0) timeSinceLastSeenText += `${minutes}m `;
-            if (seconds > 0) timeSinceLastSeenText += `${seconds}s`;
-
-            timeSinceLastSeenText = timeSinceLastSeenText.trim() || "0s";
-
-            let statusText = `${client.id} (${timeSinceLastSeenText})`;
-
-            // check if <li> exists
-            if (existingItems[clientId]) {
-              // update if needed
-              const li = existingItems[clientId];
-              const a = li.find("a");
-              if (a.text() !== statusText) {
-                a.text(statusText);
-              }
-
-              li.attr(
-                "title",
-                `Status: ${client.status}\nLast Seen: ${lastSeen.toISOString()}`,
-              );
-
-              // update icon
-              const icon = li.find("i")[0];
-              if (icon) {
-                icon.className = iconElement.className;
-                icon.style.color = iconElement.style.color;
-              }
-            } else {
-              // add new <li>
-              const li = $("<li></li>");
-              li.append(iconElement);
-              const a = $("<a></a>")
-                .text(statusText)
-                .attr("href", `?client=${clientId}`);
-
-              li.attr(
-                "title",
-                `Status: ${client.status}\nLast Seen: ${lastSeen.toISOString()}`,
-              );
-
-              li.append(a);
-              clientList.append(li);
-            }
-          });
-
-          // Remove <li> for clients no longer present
-          Object.keys(existingItems).forEach((clientId) => {
-            if (!seen.has(clientId)) {
-              existingItems[clientId].remove();
-            }
-          });
-
-          // Re-bind click handlers
-          $("#client-list li > a")
-            .off("click")
-            .on("click", function (e) {
-              let clientId = $(this).attr("href").substring(1);
-              // this is client=clientId
-
-              clientId = clientId.replace("client=", "");
-
-              loadClientDetails(clientId);
-              $("#client-list a").removeClass("active");
-              $(this).addClass("active");
-              e.preventDefault();
-
-              let newUrl = `${window.location.pathname}?client=${clientId}`;
-              window.history.pushState({ path: newUrl }, "", newUrl);
-            });
-        });
-      });
-    </script>
-  </head>
-  <body>
-    <div id="wrapper">
-      <header>
-        <h2><a href="{{ url_for('index.index') }}">judas</a></h2>
-        <p id="no-connection-message">
-          <i class="fi fi-rr-link-slash"></i>
-          <span> No connection to server </span>
-        </p>
-        <a class="button" href="{{ url_for('auth.logout') }}">Logout</a>
-      </header>
-      <div id="notify"></div>
-      <main>
-        <aside>
-          <ul id="client-list"></ul>
-        </aside>
-        <div id="content"></div>
-      </main>
-    </div>
-  </body>
-</html>
+{% block scripts %}
+  <script src="{{ url_for('static', filename='js/panel.js') }}"></script>
+{% endblock %}
