diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index a6042c1..81c2319 100644
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
-  <div class="transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all fixed top-32 inset-x-20 sm:inset-x-auto max-w-lg">
+  <div class="transform overflow-hidden rounded-xl bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all fixed top-32 sm:inset-x-auto w-72 md:w-96">
     <div class="relative">
       <!-- Heroicon name: solid/search -->
       <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
diff --git a/src/App.svelte b/src/App.svelte
index 13344cf..8da4b74 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -108,29 +108,29 @@
             <ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
         </NavButtonWithLabel>
 
-        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full 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" ? 'text-secondary dark:text-primary_light' : '') + " w-full 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"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center">Random Topic</h3>
-                <div class={(currentView === "/randomtopic" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
+                <div class={(currentView === "/randomtopic" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </a>
 
-        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + "  w-full 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" ? 'text-secondary dark:text-primary_light' : '') + "  w-full 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"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center">Random Item</h3>
-                <div class={(currentView === "/randomitem" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
+                <div class={(currentView === "/randomitem" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </a>
 
-        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " 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" ? 'text-secondary dark:text-primary_light' : '') + " 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"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center"> Search</h3>
-                <div class={(currentView === "/search" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
+                <div class={(currentView === "/randomitem" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </button>
diff --git a/src/AppShell.svelte b/src/AppShell.svelte
index 0bf9664..4bc2eb1 100644
--- a/src/AppShell.svelte
+++ b/src/AppShell.svelte
@@ -109,7 +109,7 @@
         <a href="/" class="">LearnAwesome</a>
         <div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
       </div> -->
-      <div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary">
+      <div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary dark:bg-neutral_dark dark:text-neutral_light">
         <nav class="flex-1 pb-4 space-y-1 pt-5">
           <slot name="nav"></slot>
           {#if window.location.href.startsWith('http://127.0.0.1')}
diff --git a/src/BookCard.svelte b/src/BookCard.svelte
index 7130552..787a080 100644
--- a/src/BookCard.svelte
+++ b/src/BookCard.svelte
@@ -6,8 +6,8 @@
   <img class="object-cover h-36 w-24 lg:h-64 lg:w-44" src={item.image || '/static/book-cover.png'} alt="{item.name}"/>
   
   {#if item.rating}
-  <h1 class="text-lg font-semibold p-2 text-white tracking-wider">
-    <sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
+  <h1 class="text-sm md:text-lg font-semibold p-2 text-white tracking-wider">
+    <sl-rating style="--symbol-size: 0.80 rem;" readonly precision="0.1" value={item.rating}></sl-rating>
   </h1>
   {/if}
   
diff --git a/src/NavButtonWithLabel.svelte b/src/NavButtonWithLabel.svelte
index df963a4..07a7c6b 100644
--- a/src/NavButtonWithLabel.svelte
+++ b/src/NavButtonWithLabel.svelte
@@ -7,13 +7,13 @@
 </script>
 
 
-<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
+<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:text-primary_light' : '') + " sw-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
   <div class="flex justify-start gap-3 items-center">
     <slot></slot>
   
     <div class="flex flex-col items-start">
       <h3 class="text-center"> {label}</h3>
-      <div class={(isActive ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
+      <div class={(isActive ? 'bg-secondary w-full dark:bg-primary_light ' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
     </div>
   </div>  
 </a>
diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte
index 89180fe..4f3dbe4 100644
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -21,70 +21,69 @@
 
 </script>
 
-<div class="sticky top-24 z-10 md:top-12 bg-primary md:bg-gradient-to-r from-lightGradOne to-lightGradTwo rounded">
-  {#if  showForm == false}
-  <div class="bg-primary rounded absolute -top-8 right-0">
-    <button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
-      <span class="sr-only">Open search form</span>
-      <Icon kind="search"/>
-    </button>
-  </div>
-    
-  {/if}
+<div class="sticky z-10 top-[50px] bg-gradient-to-r from-lightGradOne to-lightGradTwo dark:bg-gradient-to-r dark:from-neutral_light dark:to-neutral_light rounded">
+  <div class="relative pt-1">
+    {#if  showForm == false}
+    <div class="bg-primary rounded absolute top-0 right-0">
+      <button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+        <span class="sr-only">Open search form</span>
+        <Icon kind="search"/>
+      </button>
+    </div>    
+    {/if}
 
-  {#if showForm}
-  <div class="bg-primary rounded absolute -top-8 right-0">
-    <button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
-      <span class="sr-only">Close search form</span>
-      <Icon kind="close"/>
-    </button>
-  </div>
-  {/if}
+    {#if showForm}
+    <div class="bg-primary rounded absolute top-0 right-0">
+      <button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+        <span class="sr-only">Close search form</span>
+        <Icon kind="close"/>
+      </button>
+    </div>
+    {/if}
 
-  {#if showForm}
-    <form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row" on:submit|preventDefault>
-        <sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full 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>
+    {#if showForm}
+      <form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row" on:submit|preventDefault>
+          <sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full 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>
 
-        {#if !hideTopic}
-          <fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
-            {#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
-              <fluent-option value={topic.name}>{topic.display_name}</fluent-option>
-            {/each}
-          </fluent-combobox>
-        {/if}
+          {#if !hideTopic}
+            <fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
+              {#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
+                <fluent-option value={topic.name}>{topic.display_name}</fluent-option>
+              {/each}
+            </fluent-combobox>
+          {/if}
 
-      <div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
-        <sl-select class="w-full"  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>
-          <sl-menu-item value="challenging">Challenging</sl-menu-item>
-          <sl-menu-item value="entertaining">Entertaining</sl-menu-item>
-          <sl-menu-item value="visual">Visual</sl-menu-item>
-          <sl-menu-item value="interactive">Interactive</sl-menu-item>
-          <sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
+        <div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
+          <sl-select class="w-full"  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>
+            <sl-menu-item value="challenging">Challenging</sl-menu-item>
+            <sl-menu-item value="entertaining">Entertaining</sl-menu-item>
+            <sl-menu-item value="visual">Visual</sl-menu-item>
+            <sl-menu-item value="interactive">Interactive</sl-menu-item>
+            <sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
+          </sl-select>
+
+          <sl-select class="w-full"  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>
+            <sl-menu-item value="intermediate">Intermediate</sl-menu-item>
+            <sl-menu-item value="advanced">Advanced</sl-menu-item>
+            <sl-menu-item value="research">Research</sl-menu-item>
+          </sl-select>
+        </div>
+
+        <sl-select class="w-full md:w-2/5" 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>
+          <sl-menu-item value="name">Sort by Name</sl-menu-item>
         </sl-select>
-
-        <sl-select class="w-full"  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>
-          <sl-menu-item value="intermediate">Intermediate</sl-menu-item>
-          <sl-menu-item value="advanced">Advanced</sl-menu-item>
-          <sl-menu-item value="research">Research</sl-menu-item>
-        </sl-select>
-      </div>
-
-      <sl-select class="w-full md:w-2/5" 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>
-        <sl-menu-item value="name">Sort by Name</sl-menu-item>
-      </sl-select>
-    </form>
-  {/if} 
-  
-  
+      </form>
+    {/if} 
+  </div> 
 </div>
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 47d0a83..0920d91 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -97,13 +97,13 @@
   {#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
   {#if parent[0] !== 'Misc'}
     <a href={"#/topic/" + parent[0].name}>
-        <div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-white ease-in-out duration-300 hover:rounded-3xl dark:bg-neutral_light ">
+        <div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light ease-in-out duration-300 hover:rounded-3xl dark:bg-neutral_light ">
             {#if typeof(parent[0]) == "string"}
             <span class="mt-1 p-1  font-extrabold text-lg text-primary underline">{ parent[0] }</span>
             {:else}
             <div class="group inline-flex">
-                <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span>
-                    <div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary group-hover:w-full ease-in-out duration-300"></div>
+                <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg dark:text-primary_light">{ format_topic_name(parent[0]) }</span>
+                    <div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary dark:bg-lightGradOne group-hover:w-full ease-in-out duration-300"></div>
                 </a>
             </div>
             
@@ -111,7 +111,7 @@
         
             <div class="mt-2 flex flex-wrap">
             {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
-                <a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+                <a href={"#/topic/" + child.name} class="text-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
             {/each}
             </div>    
         </div>
@@ -119,16 +119,16 @@
     {/if}
 
     {#if parent[0] == 'Misc'}
-    <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-primary dark:border-primary_light bg-primary_light hover:bg-white ">
+    <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light dark:bg-neutral_light ease-in-out duration-300 hover:rounded-3xl">
         {#if typeof(parent[0]) == "string"}
-        <span class="mt-1 p-1  font-semibold text-lg text-primary">{ parent[0] }</span>
+        <span class="mt-1 p-1  font-semibold text-lg text-primary dark:text-primary_light">{ parent[0] }</span>
         {:else}
-        <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary text-lg ">{ format_topic_name(parent[0]) }</span></a>
+        <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg  dark:text-primary_light">{ format_topic_name(parent[0]) }</span></a>
         {/if}
     
         <div class="mt-2 flex flex-wrap">
         {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
-            <a href={"#/topic/" + child.name} class="text-primary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+            <a href={"#/topic/" + child.name} class="text-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
         {/each}
         </div>    
     </div>
diff --git a/static/._book-cover-2.png b/static/._book-cover-2.png
new file mode 100644
index 0000000..1645536
Binary files /dev/null and b/static/._book-cover-2.png differ
diff --git a/static/._book-cover-3.png b/static/._book-cover-3.png
new file mode 100644
index 0000000..aecb2f5
Binary files /dev/null and b/static/._book-cover-3.png differ
diff --git a/static/book-cover-2.png b/static/book-cover-2.png
new file mode 100644
index 0000000..c0cd031
Binary files /dev/null and b/static/book-cover-2.png differ
diff --git a/static/book-cover-3.png b/static/book-cover-3.png
new file mode 100644
index 0000000..f37dbf3
Binary files /dev/null and b/static/book-cover-3.png differ
diff --git a/templates/index.html b/templates/index.html
index ba741a8..a4c81e6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,6 +14,7 @@
 							neutral_light: '#737373', // neutral-400
 							neutral_dark: '#262626', // neutral-800
 							secondary: '#6B21A8', // purple-800
+							primary_medium: '#60A5FA', //blue-400
 							//white: '#ffffff',
 							lightGradOne: '#DBEAFE', //blue-100
 							lightGradTwo: '#F3E8FF', //purple-100
@@ -43,7 +44,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-gradient-to-r from-lightGradOne to-lightGradTwo text-nutral_dark dark:bg-nutral_dark dark:text-nutral_light font-serif">
+	<body class="max-w-none mx-auto h-full bg-gradient-to-r from-lightGradOne to-lightGradTwo text-nutral_dark dark:bg-gradient-to-r dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light font-serif">
 		<div class="h-full" id="app"></div>
 	</body>
 </html>