diff --git a/www/index.html b/www/index.html
index 90ad9a9..50c9573 100644
--- a/www/index.html
+++ b/www/index.html
@@ -16,7 +16,7 @@
   <div class="flex items-center gap-5">
     <a href="docs/index.html">Get Started</a>
     <a href="docs/modules.html">API</a>
-    <a class="px-3 py-2 rounded-md bg-green-600 text-white font-weight-500 text-shadow-green shadow" href="/playground">Playground</a>
+    <a class="px-3 py-2 rounded-md bg-green-600 text-white font-weight-500 text-shadow-green shadow" href="playground">Playground</a>
   </div>
 </nav>
 
@@ -28,7 +28,7 @@
     <span class="text-3xl">A signal-based web library that lets you <br> develop in a familiar functional style</span>
     <div class="flex gap-4">
         <a class="px-3 py-2 rounded-md bg-neutral-200 text-xl font-weight-500" href="docs/index.html">Get Started</a>
-        <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 shadow" href="/playground">Open Playground</a>
+        <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 shadow" href="playground">Open Playground</a>
     </div>
   </div>
 </section>
@@ -64,7 +64,7 @@ <h1 class="center text-5xl">Just write JavaScript!</h1>
 <section class="flex column items-center py-8">
     <p class="center text-2xl">Try in your Browser</p>
     <div class="flex items-center gap-4 pt-6">
-      <button class="button text-md playground">Open Playground</button>
+      <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 text-shadow-green shadow" href="playground">Open Playground</a>
     </div>
 </section>
 
diff --git a/www/playground.html b/www/playground.html
index 54607a8..61c5609 100644
--- a/www/playground.html
+++ b/www/playground.html
@@ -24,7 +24,7 @@
 
 function Editor(props) {
   const theme = EditorView.baseTheme({
-    "&.cm-editor": {height: "100%"},
+    "&.cm-editor": {height: "100%", backgroundColor:'lightpink'},
     ".cm-scroller": {overflow: "auto"}
     // 'cm-editor': {display:'flex', height:'100%',backgroundColor:'lightpink'},
     // '&': { maxHeight: '200px' },
@@ -58,16 +58,16 @@
 }
 
 function TopMenu(props) {
-  return h('.flex.items-center.p-2.gap-2.bg-neutral-200',[
+  return h('.flex.items-center.p-2.gap-2.bg-neutral-100',[
     h(Show, {when:()=>!props.show()}, [
       h(PreludeLogo),
       h('.button.rounded.text-xl.bg-neutral-200.px-3.p-1', {onClick:e=>(props.show(b=>!b))},
         h('i.icon.menu')),
     ]),
     h('input.grow', {value:'Example #1'}),
-    h('.flex.px-2.py-1.rounded.text-base.bg-neutral-300.font-weight-500.text-neutral-700.gap-2.shadow',
+    h('.flex.px-2.py-1.rounded.text-base.bg-neutral-200.font-weight-500.text-neutral-700.gap-2.shadow',
       [h('i.icon.plus.text-base'),'New']),
-    h('.flex.px-2.py-1.rounded.text-base.bg-neutral-300.font-weight-500.text-neutral-700.gap-2.shadow',
+    h('.flex.px-2.py-1.rounded.text-base.bg-neutral-200.font-weight-500.text-neutral-700.gap-2.shadow',
       [h('i.icon.clone.text-base'),'Clone']),
     h('a.px-4.py-1.button.rounded-full.text-xl.bg-blue-500.text-white.shadow', {href:'/'},
       h('i.icon.info.text-shadow-black'))])
diff --git a/www/vite.config.js b/www/vite.config.js
index a5f8f02..9ccd820 100644
--- a/www/vite.config.js
+++ b/www/vite.config.js
@@ -48,13 +48,15 @@ export default defineConfig(({ command, mode }) => {
     }
   }
 
+  console.log('BASE', mode==='production' ? 'https://wrnrlr.github.io/prelude/' : undefined)
+
   return {
     root,
     define,
     build,
     optimizeDeps,
     assetsInclude,
-    base: mode==='production' ? 'https://wrnrlr.github.io/prelude/' : undefined,
+    base: 'prelude',
     plugins: [
       // typedocPlugin()
     ]