diff --git a/apps/demo/src/components/Nav.astro b/apps/demo/src/components/Nav.astro
index 71ac142..e9574f6 100644
--- a/apps/demo/src/components/Nav.astro
+++ b/apps/demo/src/components/Nav.astro
@@ -1,8 +1,25 @@
 ---
+const links = [
+  { label: "Home", url: "/" },
+  { label: "Pizza Delivery", url: "/pizza-delivery" },
+  { label: "Job Application", url: "/job-application" },
+  { label: "Docs Examples", url: "/examples" },
+  { label: "Experimental", url: "/experimental" },
+];
 ---
 
 <nav>
-  <a href="/">Home</a> | <a href="/pizza-delivery">Pizza Delivery</a> | <a
-    href="/job-application">Job Application</a
-  > | <a href="/examples">Docs Exaples</a>
+  {links.map((link) => <a href={link.url}>{link.label}</a>)}
 </nav>
+
+<style>
+  nav a::after {
+    content: " | ";
+  }
+  nav a {
+    text-decoration: none;
+  }
+  nav a:hover {
+    text-decoration: underline;
+  }
+</style>
diff --git a/apps/demo/src/pages/experimental/hyperdrive.astro b/apps/demo/src/pages/experimental/hyperdrive.astro
new file mode 100644
index 0000000..8500a70
--- /dev/null
+++ b/apps/demo/src/pages/experimental/hyperdrive.astro
@@ -0,0 +1,17 @@
+---
+import Layout from "../../components/Layout.astro";
+
+const Counter = {
+  count: 0,
+  increment() {
+    this.count++;
+  },
+  decrement() {
+    this.count--;
+  },
+};
+---
+
+<Layout title="Hyperdrive Experiment">
+  {Counter.count}
+</Layout>
diff --git a/apps/demo/src/pages/experimental/index.astro b/apps/demo/src/pages/experimental/index.astro
new file mode 100644
index 0000000..0b684f2
--- /dev/null
+++ b/apps/demo/src/pages/experimental/index.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "../../components/Layout.astro";
+---
+
+<Layout title="Experimental Demos">
+  <ul>
+    <li><a href="./experimental/hyperdrive">Hyperdrive</a></li>
+  </ul>
+</Layout>