diff --git a/app/views/layouts/tailwind.html.erb b/app/views/layouts/tailwind.html.erb
index 4a2c04d1..8eb81b48 100644
--- a/app/views/layouts/tailwind.html.erb
+++ b/app/views/layouts/tailwind.html.erb
@@ -24,32 +24,31 @@
   <%# render 'cards/ui/notice' %>
 
   <section class="bg-gray-50 flex flex-col" x-data="{ sideBar: false }">
-    <nav class="fixed top-0 left-0 z-20 h-screen pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform bg-white border-r w-60 md:translate-x-0" :class="{ '-translate-x-full' : !sideBar, 'translate-x-0' : sideBar }" @click.away="sideBar = false">
-
-      <%= link_to root_path, class: 'flex items-center px-4 py-3 border-b border-gray-300' do %>
+    <nav class="fixed top-0 flex flex-col left-0 z-20 h-screen overflow-x-hidden transition origin-left transform bg-white border-r w-60 md:translate-x-0" :class="{ '-translate-x-full' : !sideBar, 'translate-x-0' : sideBar }" @click.away="sideBar = false">
+      <%= link_to root_path, class: 'flex items-center px-4 py-3 border-b border-blue-300 shadow' do %>
         <%= image_tag 'logos/book-small.webp', class: 'h-8 mr-3' %>
         <span class="text-2xl font-bold text-notebook-blue tracking-wide">
           Notebook.ai
         </span>
       <% end %>
 
-      <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
+      <nav class="text-sm font-medium text-gray-600 overflow-y-auto flex-grow" aria-label="Main Navigation">
         <%= link_to '#', class: 'flex items-center px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900' do %>
           <i class="material-icons text-gray-400 group-hover:text-gray-600 shrink-0 w-6 h-6 mr-2 text-gray-400 transition">dashboard</i>
           <span>Table of Contents</span> 
         <% end %>
 
-        <div x-data="collapse()">
-          <div class="flex items-center justify-between px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900" role="button" x-spread="trigger">
+        <div x-data="{ expandedWorldbuildingSidebar: false }">
+          <div class="flex items-center justify-between px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900" role="button" @click="expandedWorldbuildingSidebar = !expandedWorldbuildingSidebar" >
             <div class="flex items-center">
               <i class="material-icons text-notebook-blue shrink-0 w-6 h-6 mr-2">book</i>
               <span>Worldbuilding</span> 
             </div>
-            <svg :class="{ 'rotate-90': open }" class="shrink-0 w-4 h-4 ml-2 transition transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <svg :class="{ 'rotate-90': expandedWorldbuildingSidebar }" class="shrink-0 w-4 h-4 ml-2 transition transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
             </svg>
           </div>
-          <div x-spread="collapse" x-cloak class="pl-1">
+          <div x-show="expandedWorldbuildingSidebar" x-cloak class="pl-1 mb-2">
             <% @activated_content_types.each do |content_type| %>
               <% content_type_klass = content_class_from_name(content_type) %>
               <%= link_to main_app.polymorphic_path(content_type_klass), class: 'flex items-center px-4 py-2 cursor-pointer group hover:bg-notebook-blue hover:text-white rounded-l-full' do %>
@@ -123,8 +122,9 @@
       </nav>
     </nav>
 
+    <!-- navbar -->
     <div class="ml-0 transition md:ml-60">
-      <header class="flex sticky top-0 z-50 w-full px-2 bg-notebook-blue border-b border-blue-400 h-14">
+      <header class="flex sticky top-0 z-50 w-full px-2 bg-notebook-blue border-b border-blue-400 h-14 shadow">
         <button class="block btn btn-light md:hidden" @click.stop="sideBar = true">
           <span class="sr-only">Menu</span> 
           <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -196,17 +196,11 @@
       </div>
     </div>
     <!-- Sidebar Backdrop --> 
+    <!--
     <div class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" x-show.transition="sideBar" x-cloak></div>
+    -->
   </section>
 
-
-
-
-
-
-
-
-
   <%= react_component("Footer")      unless defined?(@show_footer) && !@show_footer %>
   <%# render 'layouts/quick_add_fab' unless defined?(@show_footer) && !@show_footer %>