diff --git a/db/topics.csv b/db/topics.csv
index 8a89017..0833c0f 100644
--- a/db/topics.csv
+++ b/db/topics.csv
@@ -1,4 +1,4 @@
-name,display_name,image,parent_id
+name,display_name,image,parent_id,sort_index
 pricing,pricing,https://images.unsplash.com/photo-1530856021941-02c71be5926f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
 prisoners-dilemma,prisoners-dilemma,https://images.unsplash.com/photo-1603340424570-3a4603d4814d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
 libreria-ingegneria,libreria-ingegneria,https://images.unsplash.com/photo-1519032465794-2da0ceef0b63?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
@@ -6,7 +6,7 @@ libreria-ingegneria,libreria-ingegneria,https://images.unsplash.com/photo-151903
 lockpicking,lockpicking,https://images.unsplash.com/photo-1514820402329-de527fdd2e6d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
 tensor-analysis,tensor-analysis,https://images.unsplash.com/photo-1582719471180-aad67c6023c8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,linear-algebra
 sleep,sleep,https://images.unsplash.com/photo-1482434368596-fbd06cae4f89?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,health
-complex-numbers,complex-numbers,https://images.unsplash.com/photo-1532264523420-881a47db012d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,mathematics
+complex-numbers,complex-numbers,https://images.unsplash.com/photo-1532264523420-881a47db012d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,mathematics,2
 electronics-engineering,electronics-engineering,https://images.unsplash.com/photo-1581091871343-9a6c099886ed?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,engineering
 linear-algebra,linear-algebra,https://images.unsplash.com/photo-1544386912-a19598079867?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,mathematics
 flat-earth,flat-earth,https://images.unsplash.com/photo-1545537619-3b5475acd977?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
@@ -51,7 +51,7 @@ optimal-stopping,optimal stopping,https://images.unsplash.com/photo-156529139570
 heron-formula,Heron Formula,https://images.unsplash.com/photo-1567718203978-9d37d57d4199?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixlib=rb-1.2.1&q=80&w=400,
 witchcraft,witchcraft,https://images.unsplash.com/photo-1572965733111-499bd7022cf3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
 smoking,Smoking,https://images.unsplash.com/photo-1601675165519-19a19211406d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixlib=rb-1.2.1&q=80&w=400,
-algebra,algebra,https://images.unsplash.com/photo-1548691905-57c36cc8d935?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,mathematics
+algebra,algebra,https://images.unsplash.com/photo-1548691905-57c36cc8d935?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,mathematics,1
 audio-wanted,audio-wanted,https://images.unsplash.com/photo-1595500982573-a1132d41df41?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
 amateur-radio,amateur-radio,https://images.unsplash.com/photo-1596024141450-8818990ee803?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,hobbies
 memristor,Memristor,https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200,
@@ -265,7 +265,7 @@ historie,historie,https://images.unsplash.com/photo-1597175579909-62af6b71354b?c
 geochemistry,geochemistry,https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200,
 language,language,https://images.unsplash.com/photo-1585521551675-64daba4ba31e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
 probability,probability,https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200,mathematics
-mathematics,mathematics,https://images.unsplash.com/photo-1548691905-57c36cc8d935?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
+mathematics,mathematics,https://images.unsplash.com/photo-1548691905-57c36cc8d935?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,,1
 aviation,aviation,https://images.unsplash.com/photo-1560952860-2a06028bab16?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,engineering
 complexity-science,complexity-science,https://images.unsplash.com/photo-1555952494-efd681c7e3f9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,science
 economics,economics,https://images.unsplash.com/photo-1475275083424-b4ff81625b60?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,humanities
@@ -2948,7 +2948,7 @@ programming-languages/rust,programming-languages/rust,https://images.unsplash.co
 mobile-app-development,mobile-app-development,https://images.unsplash.com/photo-1557804483-ef3ae78eca57?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,programming
 time-management,time-management,https://images.unsplash.com/photo-1563371386-187140095137?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,personal-development
 relationships,relationships,https://images.unsplash.com/photo-1504447660567-77a0a12ebb75?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,personal-development
-programming-languages,programming-languages,https://images.unsplash.com/photo-1489389944381-3471b5b30f04?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
+programming-languages,programming-languages,https://images.unsplash.com/photo-1489389944381-3471b5b30f04?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,,2
 programming-languages/c++,programming-languages/c++,https://images.unsplash.com/photo-1484417894907-623942c8ee29?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,programming-languages
 information-overload,information-overload,https://images.unsplash.com/photo-1564760290292-23341e4df6ec?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,
 programming-languages/haskell,programming-languages/haskell,https://images.unsplash.com/photo-1503676593575-d732ab11be71?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=400,programming-languages
diff --git a/dummy.db b/dummy.db
new file mode 100644
index 0000000..256bdb2
Binary files /dev/null and b/dummy.db differ
diff --git a/learn.db b/learn.db
index ac54b73..4434c6e 100644
Binary files a/learn.db and b/learn.db differ
diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index 9eb861d..5d9810b 100644
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@@ -7,6 +7,8 @@
   let result_items = [];
   let result_topics = [];
 
+  let elm;
+
   function resetQuery(){
     query = '';
   }
@@ -22,6 +24,10 @@
         .then(data => {
             result_topics = data;
         });
+  
+  $: showSearch && elm && elm.focus();
+  
+
 </script>
 
 <sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
diff --git a/src/App.svelte b/src/App.svelte
index ed021dc..ccedf41 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -16,6 +16,7 @@
     import Bookmarks from './Bookmarks.svelte';
 
     let currentView = "/topics";
+    let randomTopicName;
     let randomItemId;
     let alltopics = [];
     let showSearch = null;
@@ -27,6 +28,13 @@
         });
     }
 
+    function getRandomTopicName(){
+        fetch('/learn.json?_shape=array&sql=select+name+from+topics+order+by+random()+limit+1').then(r => r.json())
+        .then(data => {
+            randomTopicName = data[0].name;
+        });
+    }
+
     $: fetch(`/learn/topics.json?_shape=array&_size=5000`)
         .then(r => r.json())
         .then(data => {
@@ -46,6 +54,7 @@
 	}
 
     onMount(getRandomItemId);
+    onMount(getRandomTopicName);
 	onMount(hashchange);
     
 </script>
@@ -70,7 +79,9 @@
             <CourseList/>
         {:else if currentView.startsWith("/item/")}
             <ItemDetail itemid={currentView.split("/")[2]}/>
-        {:else if currentView == "/random"}
+        {:else if currentView == "/randomtopic"}
+            {#if randomTopicName}<TopicDetail topicname={randomTopicName} {alltopics}/>{/if}
+        {:else if currentView == "/randomitem"}
             {#if randomItemId}<ItemDetail itemid={randomItemId}/>{/if}
         {:else if currentView === "/wanttolearn"}
             <Bookmarks kind={0}/>
@@ -90,9 +101,14 @@
             <ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
         </NavButtonWithLabel>
 
-        <a href="#/random" on:click={getRandomItemId} class={(currentView === "/random" ? '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="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? '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"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
-            <h3 class="text-center"> Random Item</h3>
+            <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' : '') + " 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"}>
+            <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' : '') + "text-lightSecondary1 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 00ad3b5..611b53c 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -85,7 +85,7 @@
 </div>
 
 <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 mb-8">
-  {#each [...map.entries()] as parent}
+  {#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
     <a href={"#/topic/" + parent[0].name}>
         <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border-8 border-lightPrimCont dark:border-darkPrimCont hover:bg-lightPrimCont dark:bg-darkPrimCont ">
             {#if typeof(parent[0]) == "string"}
@@ -95,8 +95,8 @@
             {/if}
         
             <div class="mt-2 flex flex-wrap text-sm text-gray-900">
-            {#each parent[1] as child}
-                <a href={"#/topic/" + child.name} class="text-lightTertiary dark:text-darkTertiary hover:text-lightPrimary dark:hover:darkPrimary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+            {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
+                <a href={"#/topic/" + child.name} class="text-lightSecondary2 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
             {/each}
             </div>    
         </div>