diff --git a/src/ntr_fetcher/static/dashboard.html b/src/ntr_fetcher/static/dashboard.html
index 569c1df..11bc935 100644
--- a/src/ntr_fetcher/static/dashboard.html
+++ b/src/ntr_fetcher/static/dashboard.html
@@ -1,5 +1,216 @@
 <!DOCTYPE html>
-<html><head><title>Dashboard</title></head>
-<body><h1>NtR Playlist Dashboard</h1>
-<script>const WS_TOKEN = "{{WS_TOKEN}}";</script>
-</body></html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>NtR Playlist Dashboard</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <style>
+        .status-dot {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 6px;
+            vertical-align: middle;
+        }
+        .status-dot.connected { background: #4caf50; }
+        .status-dot.disconnected { background: #666; }
+        nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
+        nav .left { display: flex; align-items: center; gap: 8px; }
+        .announce-btn { padding: 4px 14px; font-size: 0.85rem; cursor: pointer; }
+        .announce-btn.success { background: #4caf50; border-color: #4caf50; pointer-events: none; }
+        .announce-btn.warning { opacity: 0.5; cursor: not-allowed; }
+        .announce-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+        table { width: 100%; }
+        td a { word-break: break-all; }
+        .toast {
+            position: fixed; bottom: 20px; right: 20px; padding: 12px 20px;
+            border-radius: 8px; background: #333; color: #fff;
+            display: none; z-index: 100; max-width: 350px;
+        }
+        .toast.show { display: block; }
+        .toast.error { background: #e53935; }
+        details summary h3 { display: inline; cursor: pointer; }
+        .track-num { width: 40px; text-align: center; }
+    </style>
+</head>
+<body>
+    <main class="container">
+        <nav>
+            <div class="left">
+                <span class="status-dot disconnected" id="status-dot"></span>
+                <strong>NtR Playlist Dashboard</strong>
+                <small id="sub-count">(connecting...)</small>
+            </div>
+            <a href="/logout" role="button" class="outline secondary">Logout</a>
+        </nav>
+
+        <section id="current-show">
+            <h3>Loading current show...</h3>
+        </section>
+
+        <details id="prev-show-details">
+            <summary><h3>Previous Show</h3></summary>
+            <section id="prev-show"><p>Loading...</p></section>
+        </details>
+
+        <div class="toast" id="toast"></div>
+    </main>
+
+    <script>
+        const WS_TOKEN = "{{WS_TOKEN}}";
+        let subscriberCount = 0;
+
+        function showToast(msg, isError) {
+            const t = document.getElementById("toast");
+            t.textContent = msg;
+            t.className = "toast show" + (isError ? " error" : "");
+            setTimeout(() => { t.className = "toast"; }, 3000);
+        }
+
+        function renderTrackTable(tracks, showId) {
+            if (!tracks || tracks.length === 0) return "<p>No tracks yet.</p>";
+            let html = '<table role="grid"><thead><tr>';
+            html += '<th class="track-num">#</th><th>Title</th><th>Artist</th><th>Link</th><th></th>';
+            html += '</tr></thead><tbody>';
+            for (const t of tracks) {
+                const disabled = subscriberCount === 0 ? 'disabled title="No bots connected"' : "";
+                html += `<tr>
+                    <td class="track-num">${t.position}</td>
+                    <td>${esc(t.title)}</td>
+                    <td>${esc(t.artist)}</td>
+                    <td><a href="${esc(t.permalink_url)}" target="_blank" rel="noopener">link</a></td>
+                    <td><button class="announce-btn" ${disabled}
+                        onclick="announce(${showId}, ${t.position}, this)">Announce</button></td>
+                </tr>`;
+            }
+            html += '</tbody></table>';
+            return html;
+        }
+
+        function esc(s) {
+            const d = document.createElement("div");
+            d.textContent = s || "";
+            return d.innerHTML;
+        }
+
+        let currentShowData = null;
+        let prevShowData = null;
+
+        async function loadCurrentShow() {
+            try {
+                const resp = await fetch("/playlist");
+                if (!resp.ok) throw new Error("Failed to load playlist");
+                currentShowData = await resp.json();
+                const el = document.getElementById("current-show");
+                const ep = currentShowData.episode_number ? `Episode ${currentShowData.episode_number}` : "Current Show";
+                el.innerHTML = `<h3>${esc(ep)} <small>(${currentShowData.tracks.length} tracks)</small></h3>`
+                    + renderTrackTable(currentShowData.tracks, currentShowData.show_id);
+            } catch (e) {
+                document.getElementById("current-show").innerHTML = "<p>Failed to load current show.</p>";
+            }
+        }
+
+        async function loadPreviousShow() {
+            try {
+                const resp = await fetch("/shows?limit=2");
+                if (!resp.ok) throw new Error("Failed to load shows");
+                const shows = await resp.json();
+                if (shows.length < 2) {
+                    document.getElementById("prev-show").innerHTML = "<p>No previous show.</p>";
+                    return;
+                }
+                const prevId = shows[1].id;
+                const resp2 = await fetch(`/shows/${prevId}`);
+                if (!resp2.ok) throw new Error("Failed to load previous show");
+                prevShowData = await resp2.json();
+                const el = document.getElementById("prev-show");
+                const ep = prevShowData.episode_number ? `Episode ${prevShowData.episode_number}` : "Previous Show";
+                el.innerHTML = `<h4>${esc(ep)} <small>(${prevShowData.tracks.length} tracks)</small></h4>`
+                    + renderTrackTable(prevShowData.tracks, prevShowData.show_id);
+            } catch (e) {
+                document.getElementById("prev-show").innerHTML = "<p>Failed to load previous show.</p>";
+            }
+        }
+
+        async function announce(showId, position, btn) {
+            btn.disabled = true;
+            btn.textContent = "...";
+            try {
+                const resp = await fetch("/admin/announce", {
+                    method: "POST",
+                    headers: {"Content-Type": "application/json"},
+                    body: JSON.stringify({show_id: showId, position: position}),
+                });
+                if (!resp.ok) {
+                    const data = await resp.json().catch(() => ({}));
+                    throw new Error(data.detail || "Announce failed");
+                }
+                btn.textContent = "\u2713";
+                btn.classList.add("success");
+                setTimeout(() => {
+                    btn.textContent = "Announce";
+                    btn.classList.remove("success");
+                    btn.disabled = false;
+                }, 2000);
+            } catch (e) {
+                showToast(e.message, true);
+                btn.textContent = "Announce";
+                btn.disabled = false;
+            }
+        }
+
+        function updateStatus(count) {
+            subscriberCount = count;
+            const dot = document.getElementById("status-dot");
+            const sub = document.getElementById("sub-count");
+            if (count > 0) {
+                dot.className = "status-dot connected";
+                sub.textContent = `(${count} bot${count > 1 ? "s" : ""} connected)`;
+            } else {
+                dot.className = "status-dot disconnected";
+                sub.textContent = "(no bots connected)";
+            }
+            document.querySelectorAll(".announce-btn").forEach(btn => {
+                if (count === 0) {
+                    btn.disabled = true;
+                    btn.title = "No bots connected";
+                } else {
+                    btn.disabled = false;
+                    btn.title = "";
+                }
+            });
+        }
+
+        let wsBackoff = 1000;
+        function connectWS() {
+            const proto = location.protocol === "https:" ? "wss:" : "ws:";
+            const ws = new WebSocket(`${proto}//${location.host}/ws/announce`);
+            ws.onopen = () => {
+                ws.send(JSON.stringify({type: "subscribe", token: WS_TOKEN}));
+                wsBackoff = 1000;
+            };
+            ws.onmessage = (e) => {
+                try {
+                    const data = JSON.parse(e.data);
+                    if (data.type === "status") {
+                        updateStatus(data.subscribers);
+                    }
+                } catch {}
+            };
+            ws.onclose = () => {
+                updateStatus(0);
+                document.getElementById("sub-count").textContent = "(reconnecting...)";
+                setTimeout(connectWS, wsBackoff);
+                wsBackoff = Math.min(wsBackoff * 2, 60000);
+            };
+            ws.onerror = () => ws.close();
+        }
+
+        loadCurrentShow();
+        loadPreviousShow();
+        connectWS();
+    </script>
+</body>
+</html>
diff --git a/src/ntr_fetcher/static/login.html b/src/ntr_fetcher/static/login.html
index 52b87e9..7f0bae3 100644
--- a/src/ntr_fetcher/static/login.html
+++ b/src/ntr_fetcher/static/login.html
@@ -1,10 +1,31 @@
 <!DOCTYPE html>
-<html><head><title>Login</title></head>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>NtR Login</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <style>
+        body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+        main { max-width: 400px; width: 100%; }
+        .error { color: var(--pico-color-red-500, #e53935); margin-bottom: 1rem; }
+    </style>
+</head>
 <body>
-<!--ERROR-->
-<form method="post" action="/login">
-<label>Username <input name="username"></label>
-<label>Password <input name="password" type="password"></label>
-<button type="submit">Login</button>
-</form>
-</body></html>
+    <main>
+        <article>
+            <header><h2>NtR Playlist</h2></header>
+            <!--ERROR-->
+            <form method="post" action="/login">
+                <label>Username
+                    <input name="username" autocomplete="username" required>
+                </label>
+                <label>Password
+                    <input name="password" type="password" autocomplete="current-password" required>
+                </label>
+                <button type="submit">Log in</button>
+            </form>
+        </article>
+    </main>
+</body>
+</html>
