diff --git a/src/pages/playground.tsx b/src/pages/playground/app.tsx
similarity index 71%
rename from src/pages/playground.tsx
rename to src/pages/playground/app.tsx
index e38dbc11c..fef5918cb 100644
--- a/src/pages/playground.tsx
+++ b/src/pages/playground/app.tsx
@@ -1,11 +1,11 @@
 import React, {useEffect} from "react"
 import ReactGA from "react-ga4"
 import Layout from "@theme/Layout"
-import PlaygroundPage from "../components/playground"
+import PlaygroundPage from "../../components/playground"
 import {useLocation} from "@docusaurus/router"
-import {PageDescription, PageTitle} from "../constants/titles"
+import {PageDescription, PageTitle} from "../../constants/titles"
 
-const Playground = () => {
+const PlaygroundApp = () => {
   const location = useLocation()
 
   useEffect(() => {
@@ -19,4 +19,4 @@ const Playground = () => {
   )
 }
 
-export default Playground
+export default PlaygroundApp
diff --git a/static/playground/index.html b/static/playground/index.html
new file mode 100644
index 000000000..322d0017c
--- /dev/null
+++ b/static/playground/index.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tailcall GraphQL Playground</title>
+    <meta name="description" content="Open the Tailcall GraphQL playground after entering a GraphQL API endpoint." />
+    <link rel="icon" href="/icons/companies/tailcall.svg" />
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #050608;
+        --panel: #101317;
+        --text: #f7f7f2;
+        --muted: #a9b0b8;
+        --line: #242a31;
+        --accent: #facc15;
+        --accent-strong: #f59e0b;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: var(--bg);
+        color: var(--text);
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+
+      main {
+        display: grid;
+        min-height: 100vh;
+        place-items: center;
+        padding: 40px 20px;
+      }
+
+      .shell {
+        width: min(760px, 100%);
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 42px;
+      }
+
+      .brand img {
+        width: 36px;
+        height: 36px;
+      }
+
+      .brand span {
+        font-size: 18px;
+        font-weight: 700;
+      }
+
+      h1 {
+        max-width: 720px;
+        margin: 0;
+        font-size: clamp(40px, 7vw, 74px);
+        line-height: 0.95;
+        letter-spacing: 0;
+      }
+
+      p {
+        max-width: 580px;
+        margin: 22px 0 0;
+        color: var(--muted);
+        font-size: 18px;
+        line-height: 1.6;
+      }
+
+      form {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 12px;
+        margin-top: 34px;
+      }
+
+      label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+      }
+
+      input,
+      button {
+        min-height: 52px;
+        border-radius: 8px;
+        font: inherit;
+      }
+
+      input {
+        width: 100%;
+        border: 1px solid var(--line);
+        background: var(--panel);
+        color: var(--text);
+        padding: 0 16px;
+        outline: none;
+      }
+
+      input:focus {
+        border-color: var(--accent);
+      }
+
+      button {
+        border: 0;
+        background: var(--accent);
+        color: #14120a;
+        cursor: pointer;
+        font-weight: 800;
+        padding: 0 22px;
+      }
+
+      button:hover,
+      button:focus-visible {
+        background: var(--accent-strong);
+      }
+
+      .hint {
+        min-height: 24px;
+        margin-top: 12px;
+        color: var(--muted);
+        font-size: 14px;
+      }
+
+      @media (max-width: 640px) {
+        main {
+          align-items: start;
+          padding-top: 32px;
+        }
+
+        form {
+          grid-template-columns: 1fr;
+        }
+
+        button {
+          width: 100%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="shell" aria-labelledby="title">
+        <div class="brand">
+          <img src="/icons/companies/tailcall.svg" alt="" width="36" height="36" />
+          <span>Tailcall</span>
+        </div>
+        <h1 id="title">GraphQL Playground</h1>
+        <p>
+          Enter an endpoint to open the full interactive playground. The editor loads only after you choose a GraphQL
+          API, keeping this route fast by default.
+        </p>
+        <form id="playground-form">
+          <label for="endpoint">GraphQL API endpoint</label>
+          <input
+            id="endpoint"
+            name="u"
+            type="url"
+            inputmode="url"
+            autocomplete="url"
+            placeholder="https://example.com/graphql"
+          />
+          <button type="submit">Open</button>
+        </form>
+        <div class="hint" id="hint" role="status"></div>
+      </section>
+    </main>
+    <script>
+      const form = document.getElementById("playground-form")
+      const input = document.getElementById("endpoint")
+      const hint = document.getElementById("hint")
+      const params = new URLSearchParams(window.location.search)
+      const endpoint = params.get("u")
+
+      const openApp = (value) => {
+        const url = new URL(value)
+        window.location.href = `/playground/app/?u=${encodeURIComponent(url.toString())}`
+      }
+
+      if (endpoint) {
+        input.value = endpoint
+        try {
+          openApp(endpoint)
+        } catch (error) {
+          hint.textContent = "Enter a valid endpoint URL to open the playground."
+        }
+      }
+
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        try {
+          openApp(input.value)
+        } catch (error) {
+          hint.textContent = "Enter a valid endpoint URL to open the playground."
+          input.focus()
+        }
+      })
+    </script>
+  </body>
+</html>
