diff --git a/src/AppShell.svelte b/src/AppShell.svelte
index b66b440..a0e8b13 100644
--- a/src/AppShell.svelte
+++ b/src/AppShell.svelte
@@ -35,16 +35,16 @@
 
 <div >
   <div class="md:pl-64 flex flex-col flex-1">
-    <div class=" sticky top-0 z-10 flex-shrink-0 flex text-primary shadow">
+    <div class="sticky top-0 z-10 flex-shrink-0 flex text-primary_light bg-primary shadow">
       {#if isNavDrawerOpen == false}
-      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary 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-primary text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+      <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
         <span class="sr-only">Close sidebar</span>
         <Icon kind="close"/>
       </button>
@@ -83,10 +83,10 @@
   <!-- 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-nutral_Light bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
+    <div class="fixed inset-0 bg-neutral_Light 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-primary_light text-primary dark:bg-nutral_dark dark:text-primary_light">
+      <div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-primary_light text-primary dark:bg-neutral_dark dark:text-primary_light">
         <!-- <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">
@@ -101,7 +101,7 @@
         <!-- <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">
+        <div class="md: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>
             {#if window.location.href.startsWith('http://127.0.0.1')}
diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index b87ede5..4b9eed4 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -5,11 +5,14 @@
 
 <div class=" mx-auto flex flex-wrap gap-3 justify-center items-center">
   {#each formats as format}
-  <a href="#/format/{format.id}" class="w-52 flex flex-col rounded-lg shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
+  <a href="#/format/{format.id}" class="w-32 h-28 relative sm:w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
       <div class="flex-shrink-0">
-        <img class="h-32 w-full object-cover" src={format.image} alt="">
+        <img class="w-32 h-28 object-cover" src={format.image} alt="">
+        <div class="absolute inset-0 bg-neutral_Light mix-blend-multiply"></div>
+      </div>
+      <div class="absolute flex justify-center items-center inset-0">
+        <h1 class="text-sm text-center md:text-lg font-semibold p-2 tracking-wider text-lightGradOne">{format.name}</h1>
       </div>
-      <h1 class="text-sm font-semibold p-2 tracking-wider text-primary">{format.name}</h1>
   </a>
   {/each}
 </div>
\ No newline at end of file
diff --git a/src/GenericCard.svelte b/src/GenericCard.svelte
index 2bebfd2..e9c5a4c 100644
--- a/src/GenericCard.svelte
+++ b/src/GenericCard.svelte
@@ -2,7 +2,7 @@
   export let item: {name: string, creators: string, rowid: number};
 </script>
 
-<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-white text-primary dark:bg-nutral_dark dark:text-primary_light hover:rounded-3xl border-2 border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
+<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-white text-primary dark:bg-neutral_dark dark:text-primary_light hover:rounded-3xl border border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
   <div class="flex flex-col justify-between">
     <div class="flex flex-col">
       <strong class="font-extrabold text-sm sm:text-lg">{item.name}</strong>
diff --git a/src/Home.svelte b/src/Home.svelte
index b65d401..4efbd51 100644
--- a/src/Home.svelte
+++ b/src/Home.svelte
@@ -8,13 +8,13 @@
             <span class="block text-secondary text-3xl mt-2">Humanity's learning map</span>
           </span>
         </h1>
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This is a collection of learning resources organized by topics, formats, difficulty levels, and quality tags like visual / interactive / challenging etc. It also includes reviews from experts and metadata like paywall/loginwall to help you find the best resource for your learning goals.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This is a collection of learning resources organized by topics, formats, difficulty levels, and quality tags like visual / interactive / challenging etc. It also includes reviews from experts and metadata like paywall/loginwall to help you find the best resource for your learning goals.</p>
 
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">For certain resources like research paper or books, there will be direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub etc.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">For certain resources like research paper or books, there will be direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub etc.</p>
 
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This requires us to build a giant taxonomy of all human knowledge. Arranging topics in a hierarchy is not sufficient. Instead we are creating a graph of topics and levels with multiple types of edges: "is-a-subtopic-of", "is-a-prerequisite-of" etc. If you are an expert or educator in some domain, you can contribute to this project via our GitHub repository.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This requires us to build a giant taxonomy of all human knowledge. Arranging topics in a hierarchy is not sufficient. Instead we are creating a graph of topics and levels with multiple types of edges: "is-a-subtopic-of", "is-a-prerequisite-of" etc. If you are an expert or educator in some domain, you can contribute to this project via our GitHub repository.</p>
 
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">In conjunction with this, we're also building an online game where this is presented as a skill-tree for life and allows you to chase ambitious life goals and keep track of your progress while inspiring and being inspired by your friends. More on this will be revealed soon.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">In conjunction with this, we're also building an online game where this is presented as a skill-tree for life and allows you to chase ambitious life goals and keep track of your progress while inspiring and being inspired by your friends. More on this will be revealed soon.</p>
       </div>
       
     </div>
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 7093c51..570b039 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -88,17 +88,27 @@
   .scroll::-webkit-scrollbar-thumb {
     background-color: rgb(31 41 55);
 }
+  .linkButton::part(base){
+    max-width: fit-content;
+    min-height: fit-content;
+  }
 </style>
 
 {#if item}
   
-  <div class="max-w-4xl mx-auto border shadow-2xl px-20 py-8 rounded-xl mt-20 bg-white font-sans">
+  <div class="w-full px-6 py-4 mt-10 md:max-w-4xl mx-auto border shadow-2xl md:px-20 md:py-8 rounded-xl md:mt-20 bg-white font-sans">
     <h3 class="my-2">
       {#each item.topics.split(";") as topicname}
-      <a href={"#/topic/" + topicname} class="mr-2 font-bold">{topicname.toUpperCase()}</a>
+      <div class="group inline-flex">
+        <a href={"#/topic/" + topicname} class="mr-2 font-bold">{topicname.toUpperCase()}
+          <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>
+      </div>
       {/each}
     </h3>
+
     <div class="mt-10">
+      {#if !item.links.includes('video|') && oembed_iframe}
       <div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
         <div class="flex-nowrap">
 
@@ -137,7 +147,7 @@
         <div class="flex w-full flex-col justify-between">
           <!-- title, sub title, author  -->
           <section>
-            <h1 class="text-4xl font-extrabold">{item.name}</h1>
+            <h1 class="text-xl md:text-4xl font-extrabold">{item.name}</h1>
             <span class="text-sm mt-5">{item.creators}</span>
             <div class="mt-5">
               <sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
@@ -145,10 +155,10 @@
           </section>
           <!-- ratings and upload buttons -->
           <div class="mt-2 mb-6 flex flex-col justify-between">
-            <div class="flex items-center justify-start gap-3 mt-5">
+            <div class="flex flex-wrap items-center justify-start gap-3 mt-5">
               {#each item.links.split(";") as type}
               <sl-button-group>
-                <sl-button size="small" href={type.split("|")[1]} target="_blank">{type.split("|")[0]} at {get_tld(type.split("|")[1])} <sl-icon name="link-45deg"></sl-icon></sl-button>
+                <sl-button size="small" href={type.split("|")[1]} target="_blank" class="linkButton">{type.split("|")[0]} at {get_tld(type.split("|")[1])} <sl-icon name="link-45deg"></sl-icon></sl-button>
                 {#if type.split("|")[2] || type.split("|")[0] === 'book'}
                   <sl-dropdown placement="bottom-end" on:sl-select="{e => window.open(e.detail.item.value, '_blank')}">
                     <sl-button slot="trigger" size="small" caret>
@@ -185,16 +195,15 @@
         </div>
       </div>
       <hr class="bg-lightPrimary"/>
-      
-      <!-- Description  -->
-      {#if item.description}
-      <section class="my-8">
-        <h2 class="font-bold text-lg">Description</h2>
-        <p class="mt-4 tracking-wide">{item.description}</p>
-      </section>
+       <!-- Description  -->
+       {#if item.description}
+       <section class="my-8">
+         <h2 class="font-bold text-lg">Description</h2>
+         <p class="mt-4 tracking-wide">{item.description}</p>
+       </section>
+       {/if}
       {/if}
-
-      
+       
       <!-- details  -->
       <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
         
@@ -279,11 +288,71 @@
       </section>
       {/if}
 
-      {#if item.links.includes('wiki|')}
-      <iframe src={wikiUrlForEmbed(item)} class="w-full h-[48rem]" title="embedded wiki"></iframe>
-      {:else if item.links.includes('video|') && oembed_iframe}
-      {@html oembed_iframe.replace('width="200"','width="100%"').replace('height="113"','height="400"')}
-      {/if}
+      <div>
+        {#if item.links.includes('wiki|')}
+        <iframe src={wikiUrlForEmbed(item)} class="w-full h-[48rem]" title="embedded wiki"></iframe>
+        {:else if item.links.includes('video|') && oembed_iframe}
+        {@html oembed_iframe.replace('width="200"','width="100%"').replace('height="113"','height="400"')}
+        {/if}
+
+        <div class="mt-10 flex w-full flex-col justify-between">
+          <!-- title, sub title, author  -->
+          <section>
+            <h1 class="text-xl md:text-4xl font-extrabold">{item.name}</h1>
+            <span class="text-sm mt-5">{item.creators}</span>
+            <div class="mt-5">
+              <sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
+            </div>
+          </section>
+
+           <!-- Description  -->
+          {#if item.description}
+          <section class="my-8">
+            <h2 class="font-bold text-lg">Description</h2>
+            <p class="mt-4 tracking-wide">{item.description}</p>
+          </section>
+          {/if}
+          <!-- ratings and upload buttons -->
+          <div class="mt-2 mb-6 flex flex-col justify-between">
+            <div class="flex flex-wrap items-center justify-start gap-3 mt-5">
+              {#each item.links.split(";") as type}
+              <sl-button-group>
+                <sl-button size="small" href={type.split("|")[1]} target="_blank" class="linkButton">{type.split("|")[0]} at {get_tld(type.split("|")[1])} <sl-icon name="link-45deg"></sl-icon></sl-button>
+                {#if type.split("|")[2] || type.split("|")[0] === 'book'}
+                  <sl-dropdown placement="bottom-end" on:sl-select="{e => window.open(e.detail.item.value, '_blank')}">
+                    <sl-button slot="trigger" size="small" caret>
+                      <sl-icon name="cloud-download"></sl-icon>
+                    </sl-button>
+                    <sl-menu style="width: 200px;">
+                      {#if type.split("|")[2] && type.split("|")[2].startsWith('ipfs:')}
+                      <sl-menu-label>Download via IPFS:</sl-menu-label>
+                      <sl-menu-item value={'https://cloudflare-ipfs.com/ipfs/' + type.split("|")[2].replace('ipfs:','')}>Cloudflare</sl-menu-item>
+                      <sl-menu-item value={'https://ipfs.io/ipfs/' + type.split("|")[2].replace('ipfs:','')}>IPFS.io</sl-menu-item>
+                      <sl-menu-item value={'https://ipfs.infura.io/ipfs/' + type.split("|")[2].replace('ipfs:','')}>Infura</sl-menu-item>
+                      <sl-menu-item value={'https://gateway.pinata.cloud/ipfs/' + type.split("|")[2].replace('ipfs:','')}>Pinata</sl-menu-item>
+                      {/if}
+
+                      {#if type.split("|")[2] && type.split("|")[2].startsWith('doi:')}
+                      <sl-menu-item value={'https://sci-hub.se/' + type.split("|")[2].replace('doi:','')}>On SciHub</sl-menu-item>
+                      {/if}
+                      
+                      {#if type.split("|")[0] === 'book'}
+                      <sl-divider></sl-divider>
+                      <sl-menu-label>Look up on:</sl-menu-label>
+                      <sl-menu-item value={'http://libgen.rs/search.php?req=' + encodeURIComponent(item.name)}>LibGen</sl-menu-item>
+                      <sl-menu-item value={'https://openlibrary.org/search?q=' + encodeURIComponent(item.name)}>OpenLibrary</sl-menu-item>
+                      <sl-menu-item value={'https://www.goodreads.com/search?q=' + encodeURIComponent(item.name)}>GoodReads</sl-menu-item>
+                      {/if}
+                    </sl-menu>
+                  </sl-dropdown>
+                {/if}
+              </sl-button-group>
+              {/each}
+            </div>
+            <ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>    
+          </div>
+        </div>
+      </div>
     </div>
   </div> 
 {:else}
diff --git a/src/ItemList.svelte b/src/ItemList.svelte
index 720629e..5f4838c 100644
--- a/src/ItemList.svelte
+++ b/src/ItemList.svelte
@@ -18,7 +18,8 @@
     <div class="">
         <sl-tab-group placement="start">
             {#each formats.filter(f => items.filter(x => x.links.includes(f.id + '|')).length > 0) as format, i}
-                    <sl-tab slot="nav" panel={format.id} active={i == 0}>{getFormatDisplayName(format.name)} </sl-tab>
+                
+            <sl-tab slot="nav" panel={format.id} active={i == 0} class="sticky left-0">{getFormatDisplayName(format.name)} </sl-tab>
         
                 {#if format.id == 'book'}
                 <sl-tab-panel name={format.id} active={i == 0}>
diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte
index ba12bd3..166428c 100644
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -18,21 +18,11 @@
 
 </script>
 
-<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">
+<form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row sticky top-14 z-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo" 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>
 
-    <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}
@@ -62,5 +52,12 @@
       <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>
 
diff --git a/src/TopicDetail.svelte b/src/TopicDetail.svelte
index f26d7f3..249f6b2 100644
--- a/src/TopicDetail.svelte
+++ b/src/TopicDetail.svelte
@@ -46,6 +46,10 @@
 
 <TopicMasonryGrid {topicname} {alltopics}/>
 
-<SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideTopic={true} hideFormat={true}/>
+<div>
+    <SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideTopic={true} hideFormat={true}/>
+
+    <ItemList items={filteredItems}/>
+</div>
+
 
-<ItemList items={filteredItems}/>
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 009734d..47d0a83 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -66,9 +66,18 @@
 
 </script>
 
-<div class="my-2 text-lightButton2">
+<style>
+    .title::part(base) {
+        font-size: 1rem;
+        font-weight: bold;
+        color: #1E3A8A;
+}
+</style>
+<div class="my-2">
     <sl-breadcrumb>
-        <sl-breadcrumb-item href="#/topics" class="text-lg">All Topics</sl-breadcrumb-item>
+        
+        <sl-breadcrumb-item href="#/topics" class="title">All Topics</sl-breadcrumb-item>
+        
         {#if topic}
             {#if topic.parent_id}
                 <sl-breadcrumb-item href={"#/topic/"  + topic.parent_id}>
@@ -88,11 +97,16 @@
   {#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-primary dark:border-primary_light bg-white ease-in-out duration-300 hover:rounded-3xl dark:bg-nutral_light ">
+        <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 ">
             {#if typeof(parent[0]) == "string"}
             <span class="mt-1 p-1  font-extrabold text-lg text-primary underline">{ parent[0] }</span>
             {:else}
-            <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold underline underline-offset-4 text-lg ">{ format_topic_name(parent[0]) }</span></a>
+            <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>
+            </div>
+            
             {/if}
         
             <div class="mt-2 flex flex-wrap">
diff --git a/src/VideoCard.svelte b/src/VideoCard.svelte
index 10ca749..9cd6aa7 100644
--- a/src/VideoCard.svelte
+++ b/src/VideoCard.svelte
@@ -36,14 +36,14 @@
 </script>
 
 
-<a class="flex flex-wrap justify-between overflow-hidden rounded-lg duration-300 break-inside-avoid max-w-lg bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
-  <div class="relative w-full max-w-sm w-64 ring-black/5 rounded-xl flex flex-col items-start">
-    <div class="h-32 w-64 flex justify-center items-center relative bg-lightSecondary">
+<a class="flex flex-wrap justify-between overflow-hidden w-full rounded-lg duration-300 break-inside-avoid max-w-lg bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary border-secondary" href="#/item/{item.rowid}">
+  <div class="relative w-full max-w-sm w-full md:w-64 ring-black/5 rounded-xl flex flex-col items-start">
+    <div class="h-36 w-full md:w-64 flex justify-center items-center relative ">
 
       {#if item.image || oEmded_image_ytb_url}
     
-      <div>
-        <img src={item.image || oEmded_image_ytb_url} class="object-cover " alt="{item.name}">
+      <div class="rounded-lg">
+        <img src={item.image || oEmded_image_ytb_url} class="object-cover w-48 h-full" alt="{item.name}">
         <div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
           <svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
         </div>
@@ -52,14 +52,18 @@
       
       {:else}
       
-      <div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
-        <svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
+      <div class="w-full flex justify-center items-center rounded-lg">
+        <div class="w-48 h-36 bg-primary"></div>
+        <div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
+          <svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
+        </div>
       </div>
       
+      
       {/if}
     </div>
     
-    <div class="flex flex-col ml-5 mt-10 mb-5">
+    <div class="flex flex-col ml-5 my-5">
       <strong class="font-extrabold">{item.name}</strong>
       <span class="text-sm font-medium">{item.creators}</span>
     </div>
diff --git a/templates/index.html b/templates/index.html
index 5cbe799..e9c962b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,11 +10,13 @@
 					extend: {
 						colors: {
 							primary: '#1E3A8A', //blue-900
-							primary_light: '#FAFAFA', //nutral-50
-							nutral_Light: '#737373', // nutral-400
-							nutral_dark: '#262626', // nutral-800
+							primary_light: '#FAFAFA', //neutral-50
+							neutral_Light: '#737373', // neutral-400
+							neutral_dark: '#262626', // neutral-800
 							secondary: '#6B21A8', // purple-800
 							white: '#ffffff',
+							lightGradOne: '#DBEAFE', //blue-100
+							lightGradTwo: '#F3E8FF', //purple-100
 						},
 					},
 					fontFamily: {
@@ -41,7 +43,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-primary_light 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-nutral_dark dark:text-nutral_light font-serif">
 		<div class="h-full" id="app"></div>
 	</body>
 </html>