diff --git a/package.json b/package.json
index d13c9e1..f526996 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,9 @@
     "eslint-plugin-format": "^0.1.2",
     "eslint-plugin-svelte": "^2.43.0",
     "openai": "^4.56.0",
+    "paneforge": "^0.0.5",
     "pyodide": "0.26.3",
+    "qrious": "^4.0.2",
     "rehype-stringify": "^10.0.0",
     "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
diff --git a/src/routes/demo/+page.svelte b/src/routes/demo/+page.svelte
new file mode 100644
index 0000000..8fba370
--- /dev/null
+++ b/src/routes/demo/+page.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Qr from "./QR.svelte";
+  import { Pane, PaneGroup, PaneResizer } from "paneforge";
+</script>
+
+<div class="h-screen w-screen">
+  <PaneGroup direction="horizontal">
+    <Pane minSize={10} defaultSize={20}>
+      <div class="h-full w-full flex flex-col select-none gap-5 ws-nowrap p-5">
+        <div class="flex flex-col items-center gap-2 rounded-md bg-white/4 p-3 not-hover:op-80">
+          <Qr url="/" scale={2} />
+          <h3>扫码体验 Python Agent 🤖</h3>
+        </div>
+        <div class="flex flex-col items-center gap-2 rounded-md bg-white/4 p-3 not-hover:op-80">
+          <Qr url="https://github.com/promplate/reasonify" scale={2} />
+          <h3>GitHub 仓库求 ⭐</h3>
+        </div>
+        <div class="flex flex-row gap-2">
+          <div class="flex flex-col items-center gap-2 rounded-md bg-white/4 p-3 not-hover:op-80">
+            <Qr url="https://promplate.dev/" />
+            <h3>体验提示工程框架</h3>
+          </div>
+          <div class="flex flex-col items-center gap-2 rounded-md bg-white/4 p-3 not-hover:op-80">
+            <Qr url="https://docs.py.promplate.dev/" />
+            <h3>提示工程框架文档</h3>
+          </div>
+        </div>
+      </div>
+    </Pane>
+    <PaneResizer class="group">
+      <div
+        class="mx-1 h-full w-0.11em bg-white/10 transition group-active:bg-current group-hover:bg-white/30"
+      />
+    </PaneResizer>
+    <Pane minSize={20}>
+      <iframe class="h-full w-full" title="demo" src="/" frameborder="0" />
+    </Pane>
+  </PaneGroup>
+</div>
diff --git a/src/routes/demo/QR.svelte b/src/routes/demo/QR.svelte
new file mode 100644
index 0000000..9fe339c
--- /dev/null
+++ b/src/routes/demo/QR.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  // @ts-ignore
+  import QRious from "qrious";
+  import { onMount } from "svelte";
+
+  export let url: string;
+  export let scale = 1;
+
+  let qr: QRious;
+
+  onMount(() => {
+    qr = new QRious({
+      value: new URL(url, location.href).href,
+      background: "#00000000",
+      foreground: "#ffffff",
+      size: 345 * scale,
+      level: ["L", "M", "Q", "H"][scale],
+    });
+  });
+</script>
+
+<img src={qr?.toDataURL("image/svg")} alt="qr code" />