diff --git a/index.html b/index.html
index 6c946f2..edaea3d 100644
--- a/index.html
+++ b/index.html
@@ -7,27 +7,37 @@
 	<title>uppe.rs</title>
 	<style>
 		span.cell {
+			position: relative;
 			display: inline-block;
-			width: 1rem;
-			height: 1rem;
+			width: .5rem;
+			height: 1.2rem;
 			border: 1px solid var(--secondary);
-			font-size: 6pt;
-			line-height: 1rem;
+			font-size: 8pt;
+			line-height: 1.2rem;
 			background-color: rgba(var(--secondary-rgb), 0.4);
-			margin-top: .2rem;
-			margin-bottom: .2rem;
+			margin-top: .3rem;
+			margin-bottom: .3rem;
 			padding-top: 0;
 			padding-bottom: 0;
 			transition: .1s;
 			text-align: center;
 			cursor: default;
+			border-radius: .3rem;
+			color: #ffffff00;
 		}
 		span.cell:hover {
-			padding-top: .2rem;
-			padding-bottom: .2rem;
+			padding-top: .3rem;
+			padding-bottom: .3rem;
+			width: 2rem;
+			font-size: 8pt;
 			margin-top: 0;
 			margin-bottom: 0;
-			line-height: 1rem;
+			margin-right: -0.75rem;
+			margin-left: -0.75rem;
+			color: var(--background);
+			background-color: rgba(var(--secondary-rgb), 1);
+			z-index: 1;
+			font-weight: bold;
 		}
 		span.cell.warning {
 			border-color: var(--accent);
@@ -36,6 +46,9 @@
 			border-color: var(--accent);
 			background-color: rgba(var(--accent-rgb), 0.4);
 		}
+		span.cell.error:hover {
+			background-color: rgba(var(--accent-rgb), 1);
+		}
 		hr.color {
 			color: var(--accent);
 			border-color: var(--accent);
@@ -43,9 +56,20 @@
 		hr.separator {
 			margin: 2em;
 		}
-		span.nobr {
+		div.card {
+			display: inline-block;
 			white-space: nowrap;
-			margin-right: 1em;
+			overflow-x: scroll;
+			max-width: 100%;
+			margin-top: 2em;
+			border-radius: 1em;
+			border: 1px solid var(--background-secondary);
+			padding: 1em;
+			box-sizing: border-box;
+			transition: .3s;
+		}
+		div.card:hover {
+			background-color: var(--background-dim);
 		}
 	</style>
 </head>
@@ -53,6 +77,7 @@
 	<h1>uppe.rs</h1>
 	<p>keeping track of your infra's up status</p>
 	<hr class="color"/>
+	<small style="display: block" class="rev">now --&gt;</small>
 
 	<main id="uppe-rs-content">
 
@@ -66,7 +91,7 @@ function cell(timestamp, rtt) {
 		warning = " warning";
 	}
 	if (rtt === null) {
-		return `<span class="cell error" title="${d}"></span>`;
+		return `<span class="cell error" title="${d}">╳</span>`;
 	} else {
 		return `<span class="cell${warning}" title="${rtt}ms -- ${d}">${rtt}</span>`;
 	}
@@ -78,12 +103,11 @@ function card(key, history, last_rtt) {
 		bar += cell(el[0], el[1]);
 	}
 	return `<div class="card">
-		<h3>${key} (${last_rtt}ms)</h3>
+		<h3 class="mt-0">${key} <code class="color">${last_rtt ? last_rtt + 'ms' : 'DOWN'}</code></h3>
 		<div class="box">
-			<span class="nobr">${bar}</span>
+			${bar}
 		</div>
-	</div>
-	<hr class="separator"/>`;
+	</div>`;
 }
 
 let main = document.getElementById("uppe-rs-content");
@@ -91,6 +115,11 @@ let main = document.getElementById("uppe-rs-content");
 async function updateStatus() {
 	let res = await fetch("/api/status")
 	let status = await res.json()
+	if (status.error) {
+		console.error("server error:", status);
+		return;
+	}
+
 	let keys = Object.keys(status);
 	keys.sort();
 
@@ -100,6 +129,7 @@ async function updateStatus() {
 		let res = await fetch(`/api/status/${key}?limit=120`);
 		let history = await res.json();
 		out += card(key, history, status[key]);
+		out += "\n";
 	}
 
 	main.innerHTML = out;