diff --git a/packages/drizzle-duckdb-wasm/playground/src/App.vue b/packages/drizzle-duckdb-wasm/playground/src/App.vue
index a78fb6fd3..79396cc1f 100644
--- a/packages/drizzle-duckdb-wasm/playground/src/App.vue
+++ b/packages/drizzle-duckdb-wasm/playground/src/App.vue
@@ -1,7 +1,45 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { useDark, useToggle } from '@vueuse/core'
+import { RouterLink, RouterView } from 'vue-router'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <RouterView />
+  <div flex flex-col gap-2 p-4>
+    <header flex flex-row items-center justify-between>
+      <h1 text-2xl>
+        <a href="https://github.com/duckdb/duckdb-wasm">🦆 <code>@duckdb/duckdb-wasm</code></a> + <a
+          href="https://orm.drizzle.team/"
+        >Drizzle ORM</a>
+        Playground
+      </h1>
+      <div flex flex-row items-center gap-2>
+        <button text-lg @click="() => toggleDark()">
+          <div v-if="isDark" i-solar:moon-stars-bold-duotone />
+          <div v-else i-solar:sun-bold />
+        </button>
+        <a href="https://github.com/moeru-ai/airi/tree/main/packages/drizzle-duckdb-wasm">
+          <div i-simple-icons:github />
+        </a>
+      </div>
+    </header>
+    <nav bg="neutral-100 dark:neutral-800" w-fit flex items-center of-hidden rounded-lg>
+      <RouterLink
+        to="/" px-3 py-2 bg="hover:neutral-200 dark:hover:neutral-700"
+        transition="all duration-250 ease-in-out"
+      >
+        <h1>Interactive</h1>
+      </RouterLink>
+      <div bg="neutral-200 dark:neutral-600" h="1lh" w="0.5" />
+      <RouterLink
+        to="/graph" px-3 py-2 bg="hover:neutral-200 dark:hover:neutral-700"
+        transition="all duration-250 ease-in-out"
+      >
+        <h1>Graph</h1>
+      </RouterLink>
+    </nav>
+    <RouterView />
+  </div>
 </template>
diff --git a/packages/drizzle-duckdb-wasm/playground/src/pages/graph.vue b/packages/drizzle-duckdb-wasm/playground/src/pages/graph.vue
new file mode 100644
index 000000000..10ced17b3
--- /dev/null
+++ b/packages/drizzle-duckdb-wasm/playground/src/pages/graph.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Graph</h1>
+  </div>
+</template>
diff --git a/packages/drizzle-duckdb-wasm/playground/src/pages/index.vue b/packages/drizzle-duckdb-wasm/playground/src/pages/index.vue
index 5fd2d6104..8304ba040 100644
--- a/packages/drizzle-duckdb-wasm/playground/src/pages/index.vue
+++ b/packages/drizzle-duckdb-wasm/playground/src/pages/index.vue
@@ -3,7 +3,6 @@ import type { DuckDBWasmDrizzleDatabase } from '../../../src'
 
 import { DuckDBAccessMode } from '@duckdb/duckdb-wasm'
 import { DBStorageType } from '@proj-airi/duckdb-wasm'
-import { useDark, useToggle } from '@vueuse/core'
 import { serialize } from 'superjson'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
@@ -13,9 +12,6 @@ import * as schema from '../../db/schema'
 import { users } from '../../db/schema'
 import migration1 from '../../drizzle/0000_cute_kulan_gath.sql?raw'
 
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
-
 const db = ref<DuckDBWasmDrizzleDatabase<typeof schema>>()
 const results = ref<Record<string, unknown>[]>()
 const schemaResults = ref<Record<string, unknown>[]>()
@@ -126,153 +122,144 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div flex flex-col gap-2 p-4>
-    <header flex flex-row items-center justify-between>
-      <h1 text-2xl>
-        <a href="https://github.com/duckdb/duckdb-wasm"><code>@duckdb/duckdb-wasm</code></a> + <a
-          href="https://orm.drizzle.team/"
-        >Drizzle ORM</a>
-        Playground
-      </h1>
-      <div flex flex-row items-center gap-2>
-        <button text-lg @click="() => toggleDark()">
-          <div v-if="isDark" i-solar:moon-stars-bold-duotone />
-          <div v-else i-solar:sun-bold />
-        </button>
-        <a href="https://github.com/moeru-ai/airi/tree/main/packages/drizzle-duckdb-wasm">
-          <div i-simple-icons:github />
-        </a>
+  <div flex flex-col gap-2>
+    <h2 text-xl>
+      Storage
+    </h2>
+    <div flex flex-row gap-2>
+      <div flex flex-row gap-2>
+        <input id="in-memory" v-model="storage" type="radio" :value="undefined">
+        <label for="in-memory">In-Memory</label>
       </div>
-    </header>
+      <div flex flex-row gap-2>
+        <input id="opfs" v-model="storage" type="radio" :value="DBStorageType.ORIGIN_PRIVATE_FS">
+        <label for="opfs">Origin Private FS</label>
+      </div>
+    </div>
+  </div>
+  <div grid grid-cols-3 gap-2>
     <div flex flex-col gap-2>
       <h2 text-xl>
-        Storage
+        Logger
       </h2>
       <div flex flex-row gap-2>
-        <div flex flex-row gap-2>
-          <input id="in-memory" v-model="storage" type="radio" :value="undefined">
-          <label for="in-memory">In-Memory</label>
-        </div>
-        <div flex flex-row gap-2>
-          <input id="opfs" v-model="storage" type="radio" :value="DBStorageType.ORIGIN_PRIVATE_FS">
-          <label for="opfs">Origin Private FS</label>
-        </div>
-      </div>
-    </div>
-    <div grid grid-cols-3 gap-2>
-      <div flex flex-col gap-2>
-        <h2 text-xl>
-          Logger
-        </h2>
-        <div flex flex-row gap-2>
-          <input id="logger" v-model="logger" type="checkbox">
-          <label for="logger">Enable</label>
-        </div>
-      </div>
-      <div flex flex-col gap-2>
-        <h2 text-xl>
-          Read-only
-        </h2>
-        <div flex flex-row gap-2>
-          <input id="readOnly" v-model="readOnly" type="checkbox">
-          <label for="readOnly">Read-only (DB file creation will fail)</label>
-        </div>
-      </div>
-    </div>
-    <div v-if="storage === DBStorageType.ORIGIN_PRIVATE_FS" flex flex-col gap-2>
-      <h2 text-xl>
-        Path
-      </h2>
-      <div flex flex-col gap-1>
-        <input v-model="path" type="text" w-full rounded-lg p-4 font-mono bg="neutral-100 dark:neutral-800">
-        <div text-sm>
-          <ul list-disc-inside>
-            <li>
-              Leading slash is optional ("/path/to/database.db" is equivalent to "path/to/database.db")
-            </li>
-            <li>Empty path is INVALID</li>
-          </ul>
-        </div>
+        <input id="logger" v-model="logger" type="checkbox">
+        <label for="logger">Enable</label>
       </div>
     </div>
     <div flex flex-col gap-2>
       <h2 text-xl>
-        DSN (read-only)
+        Read-only
+      </h2>
+      <div flex flex-row gap-2>
+        <input id="readOnly" v-model="readOnly" type="checkbox">
+        <label for="readOnly">Read-only (DB file creation will fail)</label>
+      </div>
+    </div>
+  </div>
+  <div v-if="storage === DBStorageType.ORIGIN_PRIVATE_FS" flex flex-col gap-2>
+    <h2 text-xl>
+      Path
+    </h2>
+    <div flex flex-col gap-1>
+      <input v-model="path" type="text" w-full rounded-lg p-4 font-mono bg="neutral-100 dark:neutral-800">
+      <div text-sm>
+        <ul list-disc-inside>
+          <li>
+            Leading slash is optional ("/path/to/database.db" is equivalent to "path/to/database.db")
+          </li>
+          <li>Empty path is INVALID</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div flex flex-col gap-2>
+    <h2 text-xl>
+      DSN (read-only)
+    </h2>
+    <div>
+      <input v-model="dsn" readonly type="text" w-full rounded-lg p-4 font-mono bg="neutral-100 dark:neutral-800">
+    </div>
+  </div>
+  <div flex flex-row justify-between gap-2>
+    <div flex flex-row gap-2>
+      <button rounded-lg bg="cyan-100 dark:cyan-900" px-4 py-2 @click="reconnect">
+        Reconnect
+      </button>
+      <button
+        rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 :class="{ 'cursor-not-allowed': isMigrated }"
+        :disabled="isMigrated" @click="migrate"
+      >
+        {{ isMigrated ? 'Already migrated 🥳' : 'Migrate' }}
+      </button>
+      <button rounded-lg bg="violet-100 dark:violet-900" px-4 py-2 @click="insert">
+        Insert
+      </button>
+    </div>
+    <div flex flex-row gap-2>
+      <button rounded-lg bg="cyan-100 dark:cyan-900" px-4 py-2 @click="shallowListOPFS">
+        List OPFS (See console)
+      </button>
+      <button rounded-lg bg="violet-100 dark:violet-900" px-4 py-2 @click="wipeOPFS">
+        Wipe OPFS
+      </button>
+    </div>
+  </div>
+  <div grid grid-cols-2 gap-2>
+    <div flex flex-col gap-2>
+      <h2 text-xl>
+        Executing
       </h2>
       <div>
-        <input v-model="dsn" readonly type="text" w-full rounded-lg p-4 font-mono bg="neutral-100 dark:neutral-800">
-      </div>
-    </div>
-    <div flex flex-row justify-between gap-2>
-      <div flex flex-row gap-2>
-        <button rounded-lg bg="cyan-100 dark:cyan-900" px-4 py-2 @click="reconnect">
-          Reconnect
-        </button>
-        <button
-          rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 :class="{ 'cursor-not-allowed': isMigrated }"
-          :disabled="isMigrated" @click="migrate"
-        >
-          {{ isMigrated ? 'Already migrated 🥳' : 'Migrate' }}
-        </button>
-        <button rounded-lg bg="violet-100 dark:violet-900" px-4 py-2 @click="insert">
-          Insert
-        </button>
+        <textarea v-model="query" h-full w-full rounded-lg bg="neutral-100 dark:neutral-800" p-4 font-mono />
       </div>
       <div flex flex-row gap-2>
-        <button rounded-lg bg="cyan-100 dark:cyan-900" px-4 py-2 @click="shallowListOPFS">
-          List OPFS (See console)
-        </button>
-        <button rounded-lg bg="violet-100 dark:violet-900" px-4 py-2 @click="wipeOPFS">
-          Wipe OPFS
+        <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="execute">
+          Execute
         </button>
       </div>
-    </div>
-    <div grid grid-cols-2 gap-2>
       <div flex flex-col gap-2>
         <h2 text-xl>
-          Executing
+          Results
+        </h2>
+        <div whitespace-pre-wrap p-4 font-mono>
+          {{ JSON.stringify(serialize(results).json, null, 2) }}
+        </div>
+      </div>
+    </div>
+    <div>
+      <div flex flex-col gap-2>
+        <h2 text-xl>
+          Executing (ORM, read-only)
         </h2>
         <div>
-          <textarea v-model="query" h-full w-full rounded-lg bg="neutral-100 dark:neutral-800" p-4 font-mono />
+          <pre whitespace-pre-wrap rounded-lg p-4 font-mono bg="neutral-100 dark:neutral-800">
+await db
+  .insert(users)
+  .values({
+    id: crypto.randomUUID().replace(/-/g, ''),
+    decimal: '1.23456',
+    numeric: '1.23456',
+    real: 1.23456,
+    double: 1.23456,
+    interval: '365 day',
+  })
+
+await db.select().from(users)
+            </pre>
         </div>
         <div flex flex-row gap-2>
-          <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="execute">
+          <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="executeORM">
             Execute
           </button>
         </div>
-        <div flex flex-col gap-2>
-          <h2 text-xl>
-            Results
-          </h2>
-          <div whitespace-pre-wrap p-4 font-mono>
-            {{ JSON.stringify(serialize(results).json, null, 2) }}
-          </div>
-        </div>
       </div>
-      <div>
-        <div flex flex-col gap-2>
-          <h2 text-xl>
-            Executing (ORM, read-only)
-          </h2>
-          <div>
-            <pre whitespace-pre-wrap rounded-lg p-4 font-mono bg="neutral-100 dark:neutral-800">
-await db.insert(users).values({ id: '9449af72-faad-4c97-8a45-69f9f1ca1b05' })
-await db.select().from(users)
-            </pre>
-          </div>
-          <div flex flex-row gap-2>
-            <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="executeORM">
-              Execute
-            </button>
-          </div>
-        </div>
-        <div flex flex-col gap-2>
-          <h2 text-xl>
-            Schema Results
-          </h2>
-          <div whitespace-pre-wrap p-4 font-mono>
-            {{ JSON.stringify(serialize(schemaResults).json, null, 2) }}
-          </div>
+      <div flex flex-col gap-2>
+        <h2 text-xl>
+          Schema Results
+        </h2>
+        <div whitespace-pre-wrap p-4 font-mono>
+          {{ JSON.stringify(serialize(schemaResults).json, null, 2) }}
         </div>
       </div>
     </div>