diff --git a/web/index.html b/web/index.html
index a4065f4..2da1514 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,67 +3,105 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sova Jam</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwindcss.config = {
-      theme: {
-        extend: {
-          fontFamily: { mono: ['"JetBrains Mono"', 'monospace'] },
-        }
-      }
+  <title>sova-jam</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      background: #0a0a0a;
+      color: #888;
+      padding: 2rem;
+      max-width: 540px;
     }
-  </script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    a { color: #888; }
+    a:hover { color: #ccc; }
+    code {
+      color: #ccc;
+      background: #141414;
+      padding: 1px 5px;
+    }
+    h1 {
+      font-size: 13px;
+      font-weight: normal;
+      color: #ccc;
+      margin-bottom: 2rem;
+    }
+    h1 span { color: #555; }
+    .section {
+      border-top: 1px solid #1a1a1a;
+      padding: 1rem 0;
+    }
+    .row {
+      display: flex;
+      justify-content: space-between;
+      padding: 2px 0;
+    }
+    .label { color: #555; }
+    .val { color: #ccc; }
+    .val.dim { color: #555; }
+    .val.on { color: #6a9; }
+    .val.off { color: #a55; }
+    .val.tempo { font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; }
+    #peers { list-style: none; }
+    #peers li { color: #aaa; }
+    #peers li::before { content: "~ "; color: #444; }
+    #peers .empty { color: #333; font-style: italic; }
+    #peers .empty::before { content: ""; }
+    ol { list-style: none; counter-reset: step; }
+    ol li { counter-increment: step; }
+    ol li::before {
+      content: counter(step) ". ";
+      color: #444;
+    }
+    footer {
+      border-top: 1px solid #1a1a1a;
+      padding-top: 1rem;
+      color: #333;
+    }
+  </style>
 </head>
-<body class="bg-neutral-950 text-neutral-200 font-mono min-h-screen flex flex-col items-center justify-center p-6">
+<body>
 
-  <main class="w-full max-w-lg space-y-8">
-    <header class="text-center space-y-2">
-      <h1 class="text-4xl font-bold text-white tracking-tight">Sova Jam</h1>
-      <p class="text-neutral-500 text-sm">live coding session</p>
-    </header>
+  <h1>sova-jam <span>/ live session</span></h1>
 
-    <section id="status" class="border border-neutral-800 p-6 space-y-4">
-      <div class="flex items-center justify-between">
-        <span class="text-neutral-500 text-xs uppercase tracking-widest">Server</span>
-        <span id="server-status" class="text-xs px-2 py-0.5 border border-neutral-700 text-neutral-400">connecting...</span>
-      </div>
-      <div class="flex items-center justify-between">
-        <span class="text-neutral-500 text-xs uppercase tracking-widest">Tempo</span>
-        <span id="tempo" class="text-2xl font-bold text-white tabular-nums">--</span>
-      </div>
-      <div class="flex items-center justify-between">
-        <span class="text-neutral-500 text-xs uppercase tracking-widest">Playback</span>
-        <span id="playback" class="text-sm text-neutral-400">--</span>
-      </div>
-    </section>
+  <div class="section">
+    <div class="row">
+      <span class="label">server</span>
+      <span id="server-status" class="val dim">...</span>
+    </div>
+    <div class="row">
+      <span class="label">tempo</span>
+      <span id="tempo" class="val tempo">--</span>
+    </div>
+    <div class="row">
+      <span class="label">playback</span>
+      <span id="playback" class="val dim">--</span>
+    </div>
+  </div>
 
-    <section class="border border-neutral-800 p-6 space-y-3">
-      <div class="flex items-center justify-between">
-        <span class="text-neutral-500 text-xs uppercase tracking-widest">Musicians</span>
-        <span id="peer-count" class="text-xs text-neutral-600">0</span>
-      </div>
-      <ul id="peers" class="space-y-1">
-        <li class="text-neutral-600 text-sm italic">No musicians connected</li>
-      </ul>
-    </section>
+  <div class="section">
+    <div class="row">
+      <span class="label">peers</span>
+      <span id="peer-count" class="val dim">0</span>
+    </div>
+    <ul id="peers">
+      <li class="empty">none</li>
+    </ul>
+  </div>
 
-    <section class="border border-neutral-800 p-6 space-y-3">
-      <h2 class="text-neutral-500 text-xs uppercase tracking-widest">How to join</h2>
-      <ol class="text-sm text-neutral-400 space-y-2 list-decimal list-inside">
-        <li>Download <a href="https://github.com/sova-org/Sova" class="text-blue-400 hover:text-blue-300 underline">Sova</a></li>
-        <li>Connect to <code class="text-white bg-neutral-900 px-1.5 py-0.5">this server's address</code> on port <code class="text-white bg-neutral-900 px-1.5 py-0.5">8080</code></li>
-        <li>Enter the session password</li>
-        <li>Start coding music</li>
-      </ol>
-    </section>
+  <div class="section">
+    <div class="row"><span class="label">join</span></div>
+    <ol>
+      <li>get <a href="https://github.com/sova-org/Sova">sova</a></li>
+      <li>connect to <code>host</code> port <code>8080</code></li>
+      <li>enter session password</li>
+      <li>start coding</li>
+    </ol>
+  </div>
 
-    <footer class="text-center text-neutral-700 text-xs">
-      powered by <a href="https://github.com/sova-org/Sova" class="hover:text-neutral-500">sova</a>
-    </footer>
-  </main>
+  <footer>sova-jam &middot; <a href="https://github.com/sova-org/Sova">src</a></footer>
 
   <script>
     const $ = (id) => document.getElementById(id);
@@ -72,31 +110,29 @@
     ws.onmessage = (e) => {
       const s = JSON.parse(e.data);
 
-      $("server-status").textContent = s.connected ? "connected" : "disconnected";
-      $("server-status").className = s.connected
-        ? "text-xs px-2 py-0.5 border border-green-800 text-green-400"
-        : "text-xs px-2 py-0.5 border border-red-900 text-red-400";
+      const st = $("server-status");
+      st.textContent = s.connected ? "connected" : "disconnected";
+      st.className = "val " + (s.connected ? "on" : "off");
 
-      $("tempo").textContent = s.tempo.toFixed(1) + " bpm";
-      $("playback").textContent = s.isPlaying ? "playing" : "stopped";
-      $("playback").className = s.isPlaying
-        ? "text-sm text-green-400"
-        : "text-sm text-neutral-500";
+      $("tempo").textContent = s.tempo.toFixed(1);
+
+      const pb = $("playback");
+      pb.textContent = s.isPlaying ? "playing" : "stopped";
+      pb.className = "val " + (s.isPlaying ? "on" : "dim");
 
-      const peersEl = $("peers");
       $("peer-count").textContent = s.peers.length;
+      const peersEl = $("peers");
       if (s.peers.length === 0) {
-        peersEl.innerHTML = '<li class="text-neutral-600 text-sm italic">No musicians connected</li>';
+        peersEl.innerHTML = '<li class="empty">none</li>';
       } else {
-        peersEl.innerHTML = s.peers
-          .map(p => `<li class="text-sm text-neutral-300 border-l-2 border-neutral-700 pl-3">${esc(p)}</li>`)
-          .join("");
+        peersEl.innerHTML = s.peers.map(p => `<li>${esc(p)}</li>`).join("");
       }
     };
 
     ws.onclose = () => {
-      $("server-status").textContent = "disconnected";
-      $("server-status").className = "text-xs px-2 py-0.5 border border-red-900 text-red-400";
+      const st = $("server-status");
+      st.textContent = "disconnected";
+      st.className = "val off";
       setTimeout(() => location.reload(), 5000);
     };
 
