diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index 51b5ac5..bc1f763 100644
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@@ -11,6 +11,7 @@
 
   function resetQuery(){
     query = '';
+    showSearch =false;
   }
 
   $: query && fetch(`/learn/items.json?_shape=array&name__contains=${query}&_size=6`)
diff --git a/src/App.svelte b/src/App.svelte
index 248a43c..4d2b16d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -93,7 +93,11 @@
     </svelte:fragment>
 
     <svelte:fragment slot="nav">
-        <NavButtonWithLabel isActive={currentView === "/topics"} target="#/topics" label="Topics">
+        <NavButtonWithLabel 
+            isActive={currentView === "/topics"} 
+            target="#/topics" 
+            label="Topics"
+             >
             <LibraryIcon class=" flex-shrink-0 h-6 w-6"/>
         </NavButtonWithLabel>
 
@@ -101,17 +105,17 @@
             <ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
         </NavButtonWithLabel>
 
-        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <h3 class="text-center">Random Topic</h3>
         </a>
 
-        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "  w-full  hover:dark:bg-darkPrimaryBg group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "  w-full  hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <h3 class="text-center">Random Item</h3>
         </a>
 
-        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
+        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
             <SearchIcon class=" flex-shrink-0 h-6 w-6"/>
             <h3 class="text-center"> Search</h3>
         </button>
diff --git a/src/ItemList.svelte b/src/ItemList.svelte
index 9840051..5e13cf7 100644
--- a/src/ItemList.svelte
+++ b/src/ItemList.svelte
@@ -16,7 +16,7 @@
         
                 {#if format.id == 'book'}
                 <sl-tab-panel name={format.id} active={i == 0}>
-                    <div class="grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-items-center">
+                    <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 justify-items-center">
                         {#each items.filter(x => x.links.includes(format.id + '|')) as item}
                         <BookCard {item}/>
                         {/each}
diff --git a/src/NavButtonWithLabel.svelte b/src/NavButtonWithLabel.svelte
index c662105..31d461f 100644
--- a/src/NavButtonWithLabel.svelte
+++ b/src/NavButtonWithLabel.svelte
@@ -3,10 +3,13 @@
   export let label;
   export let target;
   
+  
 </script>
 
 
-<a href={target} class={(isActive ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg hover:text-lightSecondary2 group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+<a 
+  href={target}
+  class={(isActive ? 'sm:bg-lightPrimCont sm:text-lightPrimary sm:dark:bg-darkPrimCont sm:dark:text-darkPrimary' : '') + " w-full hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
   <slot></slot>
   
   <h3 class="text-center"> {label}</h3>
diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte
index 59fd4c5..2b37902 100644
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -19,7 +19,7 @@
 
 </script>
 
-<form class="w-full p-2 inline-flex flex-wrap" on:submit|preventDefault>
+<form class="w-full p-2 gap-3 mt-12 inline-flex flex-wrap" on:submit|preventDefault>
     <sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
@@ -32,7 +32,7 @@
       </fluent-combobox>
     {/if}
 
-    <sl-select class="ml-2 w-52"  on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
+    <sl-select class="w-52"  on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
       <sl-menu-item value="">Any tag</sl-menu-item>
       <sl-menu-item value="inspirational">Inspirational</sl-menu-item>
       <sl-menu-item value="educational">Educational</sl-menu-item>
@@ -43,7 +43,7 @@
       <sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
     </sl-select>
 
-    <sl-select class="ml-2 w-44"  on:sl-change="{e => query.level = e.target.value}" value={query.level}>
+    <sl-select class="w-44"  on:sl-change="{e => query.level = e.target.value}" value={query.level}>
       <sl-menu-item value="">Any level</sl-menu-item>
       <sl-menu-item value="childlike">Childlike</sl-menu-item>
       <sl-menu-item value="beginner">Beginner</sl-menu-item>
@@ -52,7 +52,7 @@
       <sl-menu-item value="research">Research</sl-menu-item>
     </sl-select>
 
-    <sl-select class="ml-2 w-52" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
+    <sl-select class="w-52" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
       <sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
       <sl-menu-item value="rating">Sort by Rating</sl-menu-item>
       <sl-menu-item value="year">Sort by Year</sl-menu-item>
diff --git a/src/tailwindui/AppShell.svelte b/src/tailwindui/AppShell.svelte
index 35d46f9..50f7fe9 100644
--- a/src/tailwindui/AppShell.svelte
+++ b/src/tailwindui/AppShell.svelte
@@ -8,113 +8,100 @@
 </script>
 
 <div >
-    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
-    {#if isNavDrawerOpen}
-    <div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
-      <!--
-        Off-canvas menu backdrop, show/hide based on off-canvas menu state.
-  
-        Entering: "transition-opacity ease-linear duration-300"
-          From: "opacity-0"
-          To: "opacity-100"
-        Leaving: "transition-opacity ease-linear duration-300"
-          From: "opacity-100"
-          To: "opacity-0"
-      -->
-      <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
-  
-      <div class="fixed inset-0 flex z-40">
-        <!--
-          Off-canvas menu, show/hide based on off-canvas menu state.
-  
-          Entering: "transition ease-in-out duration-300 transform"
-            From: "-translate-x-full"
-            To: "translate-x-0"
-          Leaving: "transition ease-in-out duration-300 transform"
-            From: "translate-x-0"
-            To: "-translate-x-full"
-        -->
-        <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1">
-          <!--
-            Close button, show/hide based on off-canvas menu state.
-  
-            Entering: "ease-in-out duration-300"
-              From: "opacity-0"
-              To: "opacity-100"
-            Leaving: "ease-in-out duration-300"
-              From: "opacity-100"
-              To: "opacity-0"
-          -->
-          <div class="absolute top-0 right-0 -mr-12 pt-2">
-            <button on:click={e => isNavDrawerOpen = false} type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-              <span class="sr-only">Close sidebar</span>
-              <!-- Heroicon name: outline/x -->
-              <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-  
-          <div class="flex-shrink-0 flex items-center px-4">
-            <a href="#/" class="">LearnAwesome</a>
-          </div>
-          <div class="mt-5 flex-1 h-0 overflow-y-auto">
-            <nav class="px-2 space-y-1">
-              <slot name="sidebar"></slot>
-            </nav>
-          </div>
-        </div>
-  
-        <div class="flex-shrink-0 w-14" aria-hidden="true">
-          <!-- Dummy element to force sidebar to shrink to fit close icon -->
+  <div class="md:pl-64 flex flex-col flex-1">
+    <div class=" sticky top-0 z-10 flex-shrink-0 flex bg-lightPrimary text-lightPrimCont shadow">
+      {#if isNavDrawerOpen == false}
+      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
+        <span class="sr-only">Open sidebar</span>
+        <Icon kind="menu"/>
+      </button>
+      {/if}
+
+      {#if isNavDrawerOpen}
+      <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
+        <span class="sr-only">Close sidebar</span>
+        <Icon kind="close"/>
+      </button>
+      {/if}
+
+      <div class="md:hidden py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightPrimCont group">
+        <a href="/" class="">LearnAwesome</a>
+        <div class="w-1/5 mt-0.25 h-0.5 bg-white group-hover:w-full ease-in-out duration-300"></div>
+      </div>
+
+      <div class="flex-1 flex justify-between">
+        
+        {#if showNotificationBell || showProfileMenu}
+        <div class="ml-4 flex items-center md:ml-6">
+          {#if showNotificationBell}
+          <button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            <span class="sr-only">View notifications</span>
+            <Icon kind="bell"/>
+          </button>
+          {/if}
+
+          {#if showProfileMenu}<MenuButton />{/if}
         </div>
+        {/if}
       </div>
     </div>
-    {/if}
-  
-    <!-- Static sidebar for desktop -->
-    <div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
-      <!-- Sidebar component, swap this element with another sidebar if you like -->
-      <div class="flex flex-col flex-grow pt-5 border-r overflow-y-auto">
-        <div class="flex items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightTertiary">
-          <a href="/" class="">LearnAwesome</a>
+
+    <!-- content  -->
+    <main class="">
+      <div class="py-6">
+        <div class="max-w-none mx-auto px-4 sm:px-6 md:px-8">
+          <slot name="content"></slot>
         </div>
-        <div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
-          <nav class="flex-1 pb-4 space-y-1">
+      </div>
+    </main>
+  </div>
+  <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
+  {#if isNavDrawerOpen}
+  <div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
+    <div class="fixed inset-0 bg-lightSecondary bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
+
+    <div class="fixed inset-y-0 left-0 flex z-50 mt-12">
+      <div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-lightPrimary text-lightBg dark:bg-darkSecondary dark:text-darkBg">
+        <!-- <div class="absolute top-0 right-0 -mr-12 pt-2"> -->
+          
+          <!-- <button on:click={e => isNavDrawerOpen = false} type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+            <span class="sr-only">Close sidebar</span> -->
+            <!-- Heroicon name: outline/x -->
+            <!-- <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button> -->
+        <!-- </div> -->
+
+        <!-- <div class="flex-shrink-0 flex items-center tracking-wider font-bold text-lightPrimCont">
+          <a href="#/" class="">LearnAwesome</a>
+        </div> -->
+        <div class="ml-6 flex-1 h-0 overflow-y-auto">
+          <nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
             <slot name="nav"></slot>
           </nav>
         </div>
       </div>
-    </div>
-    <div class="md:pl-64 flex flex-col flex-1">
-      <div class="sticky top-0 z-10 flex-shrink-0 flex bg-cyan-900 text-white shadow">
-        <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
-          <span class="sr-only">Open sidebar</span>
-          <Icon kind="menu"/>
-        </button>
-        <div class="flex-1 flex justify-between">
-          
-          {#if showNotificationBell || showProfileMenu}
-          <div class="ml-4 flex items-center md:ml-6">
-            {#if showNotificationBell}
-            <button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              <span class="sr-only">View notifications</span>
-              <Icon kind="bell"/>
-            </button>
-            {/if}
 
-            {#if showProfileMenu}<MenuButton />{/if}
-          </div>
-          {/if}
-        </div>
-      </div>
-  
-      <main class="">
-        <div class="py-6">
-          <div class="max-w-none mx-auto px-4 sm:px-6 md:px-8">
-            <slot name="content"></slot>
-          </div>
-        </div>
-      </main>
+      <!-- <div class="flex-shrink-0 w-14" aria-hidden="true"> -->
+        <!-- Dummy element to force sidebar to shrink to fit close icon -->
+      <!-- </div> -->
     </div>
-  </div>
\ No newline at end of file
+  </div>
+  {/if}
+
+  <!-- Static sidebar for desktop -->
+  <div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
+    <!-- Sidebar component, swap this element with another sidebar if you like -->
+    <div class="flex flex-col flex-grow pt-5 border-r overflow-y-auto">
+      <div class="flex items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightTertiary">
+        <a href="/" class="">LearnAwesome</a>
+      </div>
+      <div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
+        <nav class="flex-1 pb-4 space-y-1">
+          <slot name="nav"></slot>
+        </nav>
+      </div>
+    </div>
+  </div>   
+</div>
\ No newline at end of file
diff --git a/src/tailwindui/Icon.svelte b/src/tailwindui/Icon.svelte
index 087c998..9e05ce8 100644
--- a/src/tailwindui/Icon.svelte
+++ b/src/tailwindui/Icon.svelte
@@ -13,6 +13,11 @@
   <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
     <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
   </svg>
+{:else if kind === "close"}
+  <!-- Heroicon name: outline/x -->
+  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
 {:else if kind === "bell"}
     <!-- Heroicon name: outline/bell -->
     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
@@ -24,12 +29,12 @@
         <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
     </svg>
 {:else if kind === "dots"}
-          <!-- Heroicon name: solid/dots-vertical -->
-          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-          </svg>
+    <!-- Heroicon name: solid/dots-vertical -->
+    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+    </svg>
 {:else if kind === "link"}
-            <svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
-            </svg>        
+    <svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
+    </svg>        
 {/if}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 587054f..beadb49 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,7 +15,9 @@
 							lightBg: '#fafafa', //zinc-50
 							lightPrimCont: '#dbeafe', // blue-200
 							lightButtonBg: 'rgb(20 83 45)', //green-900
+							light: '#ffffff', //white
 
+							dark: '#0F172A', //slate-900
 							darkPrimary: 'rgb(147 197 253)',  //blue-300
 							darkSecondary: 'rgb(203 213 225)', //slate-300
 							darkTertiary: 'rgb(216 180 254)', //purple-300
@@ -48,7 +50,7 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 
 	</head>
-	<body class="max-w-none mx-auto h-full bg-lightBg dark:bg-darkBg text-lightPrimary dark:text-darkPrimary font-serif">
+	<body class="max-w-none mx-auto h-full bg-light dark:bg-dark text-lightPrimary dark:text-darkPrimary font-serif">
 		<div class="h-full" id="app"></div>
 	</body>
 </html>