diff --git a/apps/playground/src/assets/global.css b/apps/playground/src/assets/global.css
index 7a01fd1..e41b08e 100644
--- a/apps/playground/src/assets/global.css
+++ b/apps/playground/src/assets/global.css
@@ -1,3 +1,40 @@
-#editor-mount .cm-content {
-  padding: 4rem;
+@import "tailwindcss";
+
+@theme {
+  --color-background: var(--background);
+  --color-background-muted: var(--background-muted);
+  --color-foreground: var(--foreground);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-border: var(--border);
+  --color-border-muted: var(--border-muted);
+}
+
+:root {
+  --background: var(--color-white);
+  --background-muted: var(--color-neutral-100);
+  --foreground: var(--color-black);
+  --foreground-muted: var(--color-neutral-500);
+  --border: var(--color-neutral-300);
+  --border-muted: var(--color-neutral-200);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: var(--color-black);
+    --background-muted: var(--color-neutral-800);
+    --foreground: var(--color-white);
+    --foreground-muted: var(--color-neutral-400);
+    --border: var(--color-neutral-800);
+    --border-muted: var(--color-neutral-900);
+  }
+}
+
+*,
+*::before,
+*::after {
+  @apply border-border;
+}
+
+:root {
+  @apply bg-background text-foreground;
 }
diff --git a/apps/playground/src/layouts/Base.astro b/apps/playground/src/layouts/Base.astro
new file mode 100644
index 0000000..ca7a5d0
--- /dev/null
+++ b/apps/playground/src/layouts/Base.astro
@@ -0,0 +1,78 @@
+---
+import type { $brand } from "astro:schema";
+import "../assets/global.css";
+
+interface NavigationItem {
+    title: string;
+    href: string;
+}
+
+interface NavigationGroup {
+    title?: string;
+    items: NavigationItem[];
+}
+
+interface Navigation {
+    groups: NavigationGroup[];
+}
+
+const navigation: Navigation = {
+    groups: [
+        {
+            title: "Demos",
+            items: [{ title: "Default Editor", href: "/demos/default" }],
+        },
+        {
+            title: "Examples",
+            items: [
+                { title: "Basic Example", href: "/examples/basic" },
+                { title: "Advanced Example", href: "/examples/advanced" },
+            ],
+        },
+    ],
+};
+---
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <title>Inkwell Playground</title>
+    </head>
+    <body>
+        <div class="h-dvh w-dvw flex">
+            <div class="w-56 border-r bg-background flex-none p-6">
+                <a href="/">inkwell</a>
+                {
+                    navigation.groups.map((group) => (
+                        <div class="mt-6">
+                            {group.title && (
+                                <h2 class="mb-2 text-sm font-semibold">
+                                    {group.title}
+                                </h2>
+                            )}
+                            <ul>
+                                {group.items.map((item) => (
+                                    <li>
+                                        <a
+                                            href={item.href}
+                                            class="block rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
+                                        >
+                                            {item.title}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))
+                }
+            </div>
+            <div class="flex-1 overflow-y p-6 lg:p-16">
+                <slot />
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/apps/playground/src/pages/demos/default.astro b/apps/playground/src/pages/demos/default.astro
new file mode 100644
index 0000000..e348c51
--- /dev/null
+++ b/apps/playground/src/pages/demos/default.astro
@@ -0,0 +1,71 @@
+---
+import Base from "../../layouts/Base.astro";
+---
+
+<Base>
+    <div class="mb-4 flex items-center gap-2 flex-wrap">
+        <button id="runChain">Run Chain</button>
+        <button id="runCommand">Run Command</button>
+    </div>
+    <div id="editor-mount"></div>
+</Base>
+
+<script>
+    import { Editor, type InkwellExtension } from "@inkwell/core";
+
+    const TestExtension: InkwellExtension = {
+        name: "test",
+        priority: 10,
+        addKeybinds() {
+            return [
+                {
+                    key: "Mod-Enter",
+                    run(view) {
+                        const newContent = `Hello World!\n\n**This** is a great text _extension_!`;
+                        // insert "Hello World" at the current cursor position
+                        view.dispatch({
+                            changes: {
+                                from: view.state.selection.main.from,
+                                to: view.state.selection.main.to,
+                                insert: newContent,
+                            },
+                            selection: {
+                                anchor:
+                                    view.state.selection.main.from +
+                                    newContent.length,
+                            },
+                        });
+                        return true;
+                    },
+                },
+            ];
+        },
+    };
+
+    const editor = new Editor({
+        element: document.getElementById("editor-mount")!,
+        content: "# This is the Inkwell playground\n\nFeel free to play around",
+        extensions: [TestExtension],
+    });
+
+    const runCommandBtn = document.getElementById("runCommand");
+    const runChainBtn = document.getElementById("runChain");
+
+    runCommandBtn?.addEventListener("click", () => {
+        editor.commands.insertContent({
+            content: "Inserted with command!",
+            from: 0,
+        });
+    });
+
+    runChainBtn?.addEventListener("click", () => {
+        editor
+            .chain()
+            .insertContent({ content: "Inserted with chain!", from: 0 })
+            .run();
+    });
+
+    console.log(editor);
+    // @ts-expect-error we set the editor on window
+    window.editor = editor;
+</script>
diff --git a/apps/playground/src/pages/index.astro b/apps/playground/src/pages/index.astro
index abd5bcd..0002ab2 100644
--- a/apps/playground/src/pages/index.astro
+++ b/apps/playground/src/pages/index.astro
@@ -1,79 +1,7 @@
 ---
-import "../assets/global.css";
+import Base from "../layouts/Base.astro";
 ---
 
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <link rel="icon" href="/favicon.ico" />
-        <meta name="viewport" content="width=device-width" />
-        <meta name="generator" content={Astro.generator} />
-        <title>Inkwell Playground</title>
-    </head>
-    <body>
-        <button id="runChain">Run Chain</button>
-        <button id="runCommand">Run Command</button>
-        <div class="p-16" id="editor-mount"></div>
-    </body>
-</html>
-
-<script>
-    import { Editor, type InkwellExtension } from "@inkwell/core";
-
-    const TestExtension: InkwellExtension = {
-        name: "test",
-        priority: 10,
-        addKeybinds() {
-            return [
-                {
-                    key: "Mod-Enter",
-                    run(view) {
-                        const newContent = `Hello World!\n\n**This** is a great text _extension_!`;
-                        // insert "Hello World" at the current cursor position
-                        view.dispatch({
-                            changes: {
-                                from: view.state.selection.main.from,
-                                to: view.state.selection.main.to,
-                                insert: newContent,
-                            },
-                            selection: {
-                                anchor:
-                                    view.state.selection.main.from +
-                                    newContent.length,
-                            },
-                        });
-                        return true;
-                    },
-                },
-            ];
-        },
-    };
-
-    const editor = new Editor({
-        element: document.getElementById("editor-mount")!,
-        content: "# This is the Inkwell playground\n\nFeel free to play around",
-        extensions: [TestExtension],
-    });
-
-    const runCommandBtn = document.getElementById("runCommand");
-    const runChainBtn = document.getElementById("runChain");
-
-    runCommandBtn?.addEventListener("click", () => {
-        editor.commands.insertContent({
-            content: "Inserted with command!",
-            from: 0,
-        });
-    });
-
-    runChainBtn?.addEventListener("click", () => {
-        editor
-            .chain()
-            .insertContent({ content: "Inserted with chain!", from: 0 })
-            .run();
-    });
-
-    console.log(editor);
-    // @ts-expect-error we set the editor on window
-    window.editor = editor;
-</script>
+<Base>
+    <p>Welcome to the inkwell demo</p>
+</Base>
diff --git a/apps/playground/src/styles/global.css b/apps/playground/src/styles/global.css
deleted file mode 100644
index f1d8c73..0000000
--- a/apps/playground/src/styles/global.css
+++ /dev/null
@@ -1 +0,0 @@
-@import "tailwindcss";
