diff --git a/hosts/server/natsu/services/caddy.nix b/hosts/server/natsu/services/caddy.nix
index 41007ce..16347f7 100644
--- a/hosts/server/natsu/services/caddy.nix
+++ b/hosts/server/natsu/services/caddy.nix
@@ -1,5 +1,95 @@
 { 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>
+          html,
+          body {
+            margin: 0;
+            min-height: 100%;
+            background: #0d0f12;
+            color: #f5f3ee;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+          }
+
+          main {
+            min-height: 100vh;
+            display: grid;
+            grid-template-rows: 1fr auto;
+            gap: 12px;
+            padding: 12px;
+          }
+
+          video {
+            width: 100%;
+            max-height: calc(100vh - 72px);
+            aspect-ratio: 16 / 9;
+            align-self: center;
+            background: #000;
+            border: 1px solid #2f343c;
+            border-radius: 8px;
+          }
+
+          footer {
+            display: flex;
+            justify-content: space-between;
+            gap: 12px;
+            color: #a9acb3;
+            font-size: 14px;
+          }
+
+          code {
+            color: #f5f3ee;
+          }
+
+          @media (max-width: 720px) {
+            footer {
+              flex-direction: column;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <main>
+          <video id="video" controls autoplay playsinline></video>
+          <footer>
+            <span id="stream"></span>
+            <code>rtmp://stream.mizuki.guru:1935/live</code>
+          </footer>
+        </main>
+
+        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+        <script>
+          var video = document.getElementById("video");
+          var label = document.getElementById("stream");
+          var path = window.location.pathname.replace(/^\/+|\/+$/g, "");
+          var name = path && !path.startsWith("live/") ? path.split("/")[0] : "stream";
+          var source = "https://stream.mizuki.guru/live/" + name + "/" + name + ".m3u8";
+
+          label.textContent = source;
+
+          if (video.canPlayType("application/vnd.apple.mpegurl")) {
+            video.src = source;
+            video.play();
+          } else if (Hls.isSupported()) {
+            var hls = new Hls();
+            hls.loadSource(source);
+            hls.attachMedia(video);
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+              video.play();
+            });
+          }
+        </script>
+      </body>
+    </html>
+  '';
+in
 {
   services.caddy = {
     enable = true;
@@ -93,7 +183,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 = ''
