diff --git a/index.html b/index.html
index d3fc49b..5c4024e 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
     />
     <title>Schreiben</title>
   </head>
-  <body class="min-h-screen bg-slate-50 dark:bg-slate-900">
+  <body class="min-h-screen bg-slate-50 dark:bg-neutral-900">
     <div id="app" class="min-h-screen"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/src/editor/Editor.svelte b/src/editor/Editor.svelte
index 0789e34..3767be7 100644
--- a/src/editor/Editor.svelte
+++ b/src/editor/Editor.svelte
@@ -71,7 +71,7 @@
     <MenuBar {view} state={updatedState} />
   {/if}
   <!-- this element gets replaced with the editor itself when mounted -->
-  <div class="prose before:prose-p:content-none after:prose-p:content-none prose-blockquote:font-normal prose-blockquote:not-italic max-w-none min-h-screen" bind:this={wrapperEl} />
+  <div class="prose dark:prose-invert before:prose-p:content-none after:prose-p:content-none prose-blockquote:font-normal prose-blockquote:not-italic max-w-none min-h-screen" bind:this={wrapperEl} />
   {#if view}
     <BubbleMenu {view} {worldY} state={updatedState} />
   {/if}
diff --git a/src/editor/MenuBar.svelte b/src/editor/MenuBar.svelte
index e3e540f..42a2239 100644
--- a/src/editor/MenuBar.svelte
+++ b/src/editor/MenuBar.svelte
@@ -12,7 +12,7 @@
   export let state: EditorState;
 </script>
 
-<div class="menubar">
+<div class="menubar sticky top-0 flex py-2 px-4 z-50 items-center">
   <BlockSelect {view} {state} />
   <!-- <UploadItem {view} {state} /> -->
   <ListItem {view} {state} kind={ListKind.Unordered} />
@@ -22,12 +22,6 @@
 
 <style>
   .menubar {
-    position: sticky;
-    top: 0px;
-    z-index: 69;
-
-    display: flex;
-
     background: var(--background, white);
     border-bottom: 1px solid var(--accent-bg);
   }
diff --git a/src/editor/menubar/BlockSelect.svelte b/src/editor/menubar/BlockSelect.svelte
index 38fc9c9..b836904 100644
--- a/src/editor/menubar/BlockSelect.svelte
+++ b/src/editor/menubar/BlockSelect.svelte
@@ -38,7 +38,7 @@
   };
 </script>
 
-<select value={currentValue} on:change={onChange}>
+<select value={currentValue} on:change={onChange} class="relative flex items-center justify-between py-3 pl-3 pr-10 text-left bg-white dark:bg-neutral-800 border rounded-md shadow-sm cursor-default border-neutral-200/70 dark:border-neutral-700/70 text-sm">
   <option value="paragraph">Párrafo</option>
   <option value="heading:1">Titulo grande</option>
   <option value="heading:2">Titulo mediano</option>
diff --git a/src/views/ChooseWorld.svelte b/src/views/ChooseWorld.svelte
index 4c1ed1a..df3d966 100644
--- a/src/views/ChooseWorld.svelte
+++ b/src/views/ChooseWorld.svelte
@@ -16,14 +16,14 @@
     {#each worlds as world}
       <li>
         <WorldLink
-          className="px-6 py-4 bg-slate-200 w-full block rounded-2xl my-4 shadow text-xl"
+          className="px-6 py-4 bg-slate-200 dark:bg-neutral-800 w-full block rounded-2xl dark:border-neutral-700/70 border my-4 shadow text-xl"
           {world}
         />
       </li>
     {/each}
     <li>
       <a
-        class="px-6 py-4 bg-slate-200 w-full block rounded-2xl my-4 shadow text-xl"
+        class="px-6 py-4 bg-slate-200 dark:bg-neutral-800 w-full block rounded-2xl dark:border-neutral-700/70 border my-4 shadow text-xl"
         href={routes.CreateWorld}>Crear mundo</a
       >
     </li>
