diff --git a/src/Layout.tsx b/src/Layout.tsx
index 8955a72..4419571 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -50,6 +50,10 @@ const Layout: ParentComponent = (props) => {
           <Icon icon="hugeicons:settings-01" class="text-[14px] stroke-1" />
           <span class="navigate">Settings</span>
         </NavigateLink>
+        <NavigateLink href="/demo">
+          <Icon icon="hugeicons:atom-01" class="text-[14px] stroke-1" />
+          <span class="navigate">Demo</span>
+        </NavigateLink>
         <button class="ml-auto h-8 p-2 bg-transparent hover:bg-neutral-hover/45 active:bg-neutral-active/45 text-on-surface">
           <Icon icon="hugeicons:menu-01" class="text-base/[1] stroke-1" />
         </button>
diff --git a/src/index.tsx b/src/index.tsx
index 0eade6f..2caf88a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,12 +6,16 @@ import './index.css';
 import { Route, Router } from '@solidjs/router';
 import { render } from 'solid-js/web';
 import Layout from './Layout';
+import ComponentsDemo from './pages/ComponentsDemo';
 import Models from './pages/Models';
+import Settings from './pages/Settings';
 
 render(
   () => (
     <Router root={Layout}>
       <Route path="/" component={Models} />
+      <Route path="/settings" component={Settings} />
+      <Route path="/demo" component={ComponentsDemo} />
     </Router>
   ),
   document.getElementById('root') as HTMLElement,
diff --git a/src/pages/ComponentsDemo.tsx b/src/pages/ComponentsDemo.tsx
new file mode 100644
index 0000000..032d4e8
--- /dev/null
+++ b/src/pages/ComponentsDemo.tsx
@@ -0,0 +1,9 @@
+import { Component } from 'solid-js';
+
+const ComponentsDemo: Component = () => {
+  return (
+    <div class="workspace flex flex-col items-stretch gap-2 rounded-sm bg-swatch-neutral-20"></div>
+  );
+};
+
+export default ComponentsDemo;