diff --git a/static/client.js b/static/client.js
index bd1542f..d80f693 100644
--- a/static/client.js
+++ b/static/client.js
@@ -2,17 +2,46 @@ document.addEventListener("DOMContentLoaded", async () => {
 	let $main = document.querySelector('main');
 	const refreshStatus = async () => {
 		try {
-			const response = await fetch('/status.json');
+			const response = await fetch('./status.json');
 			if (!response.ok) {
 				throw new Error(`Error fetching status.json: ${response.statusText}`);
 			}
 			const status = await response.json();
-			
-			$main.innerHTML = template.render(status);
+			console.log(status);
+			for (let [siteId, endpointIds] of status.ui) {
+				let site = status[siteId];
 
+				let $site = document.createElement('div');
+				$site.classList.add('site');
+				let $siteName = document.createElement('h1');
+				$siteName.innerText = site.name;
+				$site.append($siteName);
+
+				let $statusBar = document.createElement('status-bar');
+				$statusBar.logs = '';
+				$site.append($statusBar);
+				$main.append($site);
+
+				for (let endpointId of endpointIds) {
+					let endpoint = site.endpoints[endpointId];
+					let $endpoint = document.createElement('div');
+					$endpoint.classList.add('endpoint');
+
+					$endpointName = document.createElement('h3');
+					$endpointName.innerText = endpoint.name;
+					$endpoint.append($endpointName);
+
+					let $statusBarEndpoint = document.createElement('status-bar');
+					$statusBarEndpoint.logs = endpoint.logs;
+					$endpoint.append($statusBarEndpoint);
+
+					$site.append($endpoint);
+				}
+			}
 		} catch (error) {
 			console.error("Error loading server status:", error);
 		}
 	};
+	refreshStatus();
 	setInterval(refreshStatus, 60_000); // Refresh every minute
 });
\ No newline at end of file