diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index bc1f763..a6042c1 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 w-full fixed top-32 max-w-lg">
+  <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="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 f65e5c7..57f9a4d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -108,19 +108,31 @@
             <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: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"}>
+        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " 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"/>
-            <h3 class="text-center">Random Topic</h3>
+            <div class="flex flex-col items-start">
+                <h3 class="text-center">Random Topic</h3>
+                <div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
+            </div>
+            
         </a>
 
-        <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"}>
+        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "  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"/>
-            <h3 class="text-center">Random Item</h3>
+            <div class="flex flex-col items-start">
+                <h3 class="text-center">Random Item</h3>
+                <div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
+            </div>
+            
         </a>
 
-        <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"}>
+        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " 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>
+            <div class="flex flex-col items-start">
+                <h3 class="text-center"> Search</h3>
+                <div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
+            </div>
+            
         </button>
 
         <NavButtonWithLabel isActive={currentView === "/wanttolearn"} target="#/wanttolearn" label="Want to learn">
diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index f8aa159..85e9cf3 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -5,7 +5,7 @@
 
 <div class=" mx-auto flex flex-wrap gap-5 justify-center items-center">
   {#each formats as format}
-  <a href="#/format/{format.id}" class="w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
+  <a href="#/format/{format.id}" class="w-52 sm:w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
       <div class="flex-shrink-0">
         <img class="h-48 w-full object-cover" src={format.image} alt="">
       </div>
diff --git a/src/NavButtonWithLabel.svelte b/src/NavButtonWithLabel.svelte
index 76a767c..26fb843 100644
--- a/src/NavButtonWithLabel.svelte
+++ b/src/NavButtonWithLabel.svelte
@@ -7,8 +7,13 @@
 </script>
 
 
-<a href={target} target={target.startsWith('http') ? '_blank' : ''} 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"}>
-  <slot></slot>
+<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'bg-light text-lightPrimary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
+  <div class="flex justify-start gap-3 items-center">
+    <slot></slot>
   
-  <h3 class="text-center"> {label}</h3>
+    <div class="flex flex-col items-start">
+      <h3 class="text-center"> {label}</h3>
+      <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>  
 </a>
diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte
index 2b37902..9cdd580 100644
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -19,11 +19,21 @@
 
 </script>
 
-<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}">
+<form class="w-full p-2 gap-3 mt-12 flex flex-col xl:flex-row" on:submit|preventDefault>
+  <div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
+    <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>
 
+    <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>
+  </div>
+    
+
     {#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}
@@ -32,7 +42,8 @@
       </fluent-combobox>
     {/if}
 
-    <sl-select class="w-52"  on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
+  <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>
@@ -43,7 +54,7 @@
       <sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
     </sl-select>
 
-    <sl-select class="w-44"  on:sl-change="{e => query.level = e.target.value}" value={query.level}>
+    <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>
@@ -51,14 +62,6 @@
       <sl-menu-item value="advanced">Advanced</sl-menu-item>
       <sl-menu-item value="research">Research</sl-menu-item>
     </sl-select>
-
-    <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>
-      <sl-menu-item value="name">Sort by Name</sl-menu-item>
-    </sl-select>
-
-
+  </div>
 </form>
 
diff --git a/src/TopicList.svelte b/src/TopicList.svelte
index a95a910..6313619 100644
--- a/src/TopicList.svelte
+++ b/src/TopicList.svelte
@@ -4,7 +4,7 @@
     import SearchForm from "./SearchForm.svelte"
 </script>
 
-<div class="flex justify-end">
+<div class="hidden lg:flex lg:justify-end">
     <a href="#/map" class="font-semibold bg-lightTertiary text-lightBg rounded-lg hover:scale-110 px-3 py-2 hover:ease-in-out transition duration-200">Explore Map</a>
 </div>
 <TopicMasonryGrid {alltopics}/>
diff --git a/src/tailwindui/AppShell.svelte b/src/tailwindui/AppShell.svelte
index 7e9a233..7094ead 100644
--- a/src/tailwindui/AppShell.svelte
+++ b/src/tailwindui/AppShell.svelte
@@ -41,7 +41,7 @@
 
       <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 class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
       </div>
 
       <div class="flex-1 flex justify-between">
@@ -115,7 +115,7 @@
       <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">
+      <div class="mt-5 flex-1 flex flex-col bg-lightPrimary text-lightBg">
         <nav class="flex-1 pb-4 space-y-1">
           <slot name="nav"></slot>
         </nav>