diff --git a/hosts/server/natsu/services/caddy.nix b/hosts/server/natsu/services/caddy.nix
index 41007ce..370e0ee 100644
--- a/hosts/server/natsu/services/caddy.nix
+++ b/hosts/server/natsu/services/caddy.nix
@@ -1,5 +1,262 @@
 { pkgs, ... }:
 
+let
+  streamPlayer = pkgs.writeTextDir "index.html" ''
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Mizuki Stream</title>
+        <style>
+          :root {
+            color-scheme: dark;
+            --bg: #101114;
+            --panel: #191b20;
+            --panel-strong: #22252c;
+            --text: #f5f3ee;
+            --muted: #aaa49b;
+            --line: #363943;
+            --accent: #f08a92;
+            --accent-strong: #ffb45c;
+          }
+
+          * {
+            box-sizing: border-box;
+          }
+
+          body {
+            margin: 0;
+            min-height: 100vh;
+            background:
+              radial-gradient(circle at 20% 0%, rgba(240, 138, 146, 0.16), transparent 30rem),
+              linear-gradient(135deg, #101114 0%, #17191d 48%, #202026 100%);
+            color: var(--text);
+            font-family:
+              Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+              sans-serif;
+          }
+
+          main {
+            width: min(1120px, calc(100vw - 32px));
+            min-height: 100vh;
+            margin: 0 auto;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            gap: 20px;
+            padding: 24px 0;
+          }
+
+          header,
+          footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+          }
+
+          h1 {
+            margin: 0;
+            font-size: clamp(1.45rem, 3vw, 2.25rem);
+            font-weight: 760;
+            letter-spacing: 0;
+          }
+
+          .status {
+            min-width: 7.5rem;
+            border: 1px solid var(--line);
+            border-radius: 999px;
+            padding: 8px 12px;
+            background: rgba(25, 27, 32, 0.78);
+            color: var(--muted);
+            text-align: center;
+            font-size: 0.875rem;
+          }
+
+          .status.live {
+            border-color: rgba(240, 138, 146, 0.65);
+            color: var(--text);
+          }
+
+          .stage {
+            display: grid;
+            align-content: center;
+            gap: 16px;
+          }
+
+          .player {
+            overflow: hidden;
+            border: 1px solid var(--line);
+            border-radius: 8px;
+            background: #050506;
+            box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
+          }
+
+          video {
+            display: block;
+            width: 100%;
+            aspect-ratio: 16 / 9;
+            max-height: calc(100vh - 190px);
+            background: #050506;
+          }
+
+          form {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 10px;
+            padding: 12px;
+            border: 1px solid var(--line);
+            border-radius: 8px;
+            background: rgba(25, 27, 32, 0.82);
+          }
+
+          input,
+          button {
+            min-height: 42px;
+            border-radius: 6px;
+            font: inherit;
+          }
+
+          input {
+            width: 100%;
+            border: 1px solid var(--line);
+            background: var(--panel-strong);
+            color: var(--text);
+            padding: 0 12px;
+          }
+
+          button {
+            border: 0;
+            background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+            color: #1b1110;
+            font-weight: 760;
+            padding: 0 18px;
+            cursor: pointer;
+          }
+
+          footer {
+            color: var(--muted);
+            font-size: 0.875rem;
+          }
+
+          code {
+            color: var(--text);
+          }
+
+          @media (max-width: 680px) {
+            main {
+              width: min(100vw - 20px, 1120px);
+              padding: 12px 0;
+              gap: 12px;
+            }
+
+            header,
+            footer {
+              align-items: flex-start;
+              flex-direction: column;
+            }
+
+            form {
+              grid-template-columns: 1fr;
+            }
+
+            video {
+              max-height: none;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <main>
+          <header>
+            <h1>Mizuki Stream</h1>
+            <div id="status" class="status">Idle</div>
+          </header>
+
+          <section class="stage">
+            <div class="player">
+              <video id="video" controls playsinline></video>
+            </div>
+
+            <form id="controls">
+              <input id="source" name="source" type="url" autocomplete="off" />
+              <button type="submit">Play</button>
+            </form>
+          </section>
+
+          <footer>
+            <span id="now">/live/stream/stream.m3u8</span>
+            <span><code>rtmp://stream.mizuki.guru:1935/live</code></span>
+          </footer>
+        </main>
+
+        <script src="https://cdn.jsdelivr.net/npm/hls.js@1.6.7/dist/hls.min.js"></script>
+        <script>
+          const video = document.getElementById("video");
+          const form = document.getElementById("controls");
+          const source = document.getElementById("source");
+          const status = document.getElementById("status");
+          const now = document.getElementById("now");
+          let hls;
+
+          function defaultSource() {
+            const params = new URLSearchParams(window.location.search);
+            const app = params.get("app") || "live";
+            const stream = params.get("stream") || "stream";
+            return params.get("src") || "/" + app + "/" + stream + "/" + stream + ".m3u8";
+          }
+
+          function setStatus(text, isLive) {
+            status.textContent = text;
+            status.classList.toggle("live", isLive);
+          }
+
+          function play(url) {
+            const absolute = new URL(url, window.location.href).toString();
+            source.value = absolute;
+            now.textContent = new URL(absolute).pathname;
+            setStatus("Loading", false);
+
+            if (hls) {
+              hls.destroy();
+              hls = null;
+            }
+
+            if (video.canPlayType("application/vnd.apple.mpegurl")) {
+              video.src = absolute;
+              video.play().catch(() => setStatus("Ready", false));
+              setStatus("Live", true);
+              return;
+            }
+
+            if (window.Hls && Hls.isSupported()) {
+              hls = new Hls({ lowLatencyMode: true });
+              hls.loadSource(absolute);
+              hls.attachMedia(video);
+              hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                setStatus("Live", true);
+                video.play().catch(() => setStatus("Ready", false));
+              });
+              hls.on(Hls.Events.ERROR, (_, data) => {
+                if (data.fatal) setStatus("Offline", false);
+              });
+              return;
+            }
+
+            setStatus("Unsupported", false);
+          }
+
+          form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            play(source.value);
+          });
+
+          play(defaultSource());
+        </script>
+      </body>
+    </html>
+  '';
+in
 {
   services.caddy = {
     enable = true;
@@ -93,7 +350,12 @@
     '';
 
     virtualHosts."stream.mizuki.guru".extraConfig = ''
-      reverse_proxy 127.0.0.1:10023
+      @hls path_regexp hls ^/[^/]+/[^/]+/[^/]+\.(m3u8|ts)$
+      reverse_proxy @hls 127.0.0.1:10023
+
+      root * ${streamPlayer}
+      try_files {path} /index.html
+      file_server
     '';
 
     virtualHosts."netbird.mizuki.guru".extraConfig = ''
