diff --git a/src/App.svelte b/src/App.svelte
index 789e591..6f56611 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -53,7 +53,7 @@
 
 <svelte:window on:hashchange={hashchange}/>
 
-<TailwindUI.AppShell {alltopics}>
+<TailwindUI.AppShell>
     <svelte:fragment slot="content">
         {#if currentView === "/home" || currentView === "/"}
             <Home/>
@@ -66,7 +66,7 @@
         {:else if currentView === "/formats"}
             <FormatList/>
         {:else if currentView.startsWith("/format/")}
-            <FormatDetail format={currentView.split("/")[2]}/>
+            <FormatDetail format={currentView.split("/")[2]} {alltopics}/>
         {:else if currentView === "/courses"}
             <CourseList/>
         {:else if currentView.startsWith("/item/")}
diff --git a/src/FormatDetail.svelte b/src/FormatDetail.svelte
index 9fa3181..14f76d0 100644
--- a/src/FormatDetail.svelte
+++ b/src/FormatDetail.svelte
@@ -2,7 +2,10 @@
     import ItemCard from "./ItemCard.svelte"
     
     import VideoCard from "./VideoCard.svelte"
+    import SearchForm from "./SearchForm.svelte"
+
     export let format;
+    export let alltopics;
     let items = [];
 
     $: fetch(`/learn/items.json?_shape=array&links__contains=${format}|`)
@@ -12,6 +15,8 @@
         });
 </script>
 
+<SearchForm {alltopics}/>
+
 <div class="md:flex md:items-center md:justify-between mb-8">
     <div class="flex-1 min-w-0">
       <h2 class="text-2xl font-bold leading-7 text-gray-100 sm:text-3xl sm:truncate"> {format}</h2>
diff --git a/src/tailwindui/SearchForm.svelte b/src/SearchForm.svelte
similarity index 96%
rename from src/tailwindui/SearchForm.svelte
rename to src/SearchForm.svelte
index f4f373e..061a3d8 100644
--- a/src/tailwindui/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -1,6 +1,5 @@
 <script>
-  import Icon from "./Icon.svelte"
-  import ComboBox from "./ComboBox.svelte"
+  import ComboBox from "./tailwindui/ComboBox.svelte"
   export let alltopics;
 
   let query = {
diff --git a/src/TopicDetail.svelte b/src/TopicDetail.svelte
index 19d5c11..472fc16 100644
--- a/src/TopicDetail.svelte
+++ b/src/TopicDetail.svelte
@@ -5,6 +5,7 @@
     import BookCard from "./BookCard.svelte"
     import VideoCard from "./VideoCard.svelte"
     import GenericCard from "./GenericCard.svelte"
+    import SearchForm from "./SearchForm.svelte"
 
     export let topicname;
     export let alltopics;
@@ -18,6 +19,8 @@
         });  
 </script>
 
+<SearchForm {alltopics}/>
+
 <TopicMasonryGrid {topicname} {alltopics}/>
 
 <!-- <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
diff --git a/src/TopicList.svelte b/src/TopicList.svelte
index d300d9e..5d20c1f 100644
--- a/src/TopicList.svelte
+++ b/src/TopicList.svelte
@@ -1,6 +1,9 @@
 <script>
     import TopicMasonryGrid from "./TopicMasonryGrid.svelte"
     export let alltopics;
+    import SearchForm from "./SearchForm.svelte"
 </script>
 
+<SearchForm {alltopics}/>
+
 <TopicMasonryGrid {alltopics}/>
diff --git a/src/tailwindui/AppShell.svelte b/src/tailwindui/AppShell.svelte
index 3cb83f6..94437b2 100644
--- a/src/tailwindui/AppShell.svelte
+++ b/src/tailwindui/AppShell.svelte
@@ -4,8 +4,6 @@
     let isNavDrawerOpen = false
     export let showNotificationBell = false;
     export let showProfileMenu = false;
-    export let alltopics;
-    import SearchForm from "./SearchForm.svelte"
 
 </script>
 
@@ -95,7 +93,7 @@
           <Icon kind="menu"/>
         </button>
         <div class="flex-1 flex justify-between">
-          <SearchForm {alltopics}/>
+          
           {#if showNotificationBell || showProfileMenu}
           <div class="ml-4 flex items-center md:ml-6">
             {#if showNotificationBell}