diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index 5d6f815..4b9eed4 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -5,7 +5,7 @@
 
 <div class=" mx-auto flex flex-wrap gap-3 justify-center items-center">
   {#each formats as format}
-  <a href="#/format/{format.id}" class="w-32 h-28 relativesm:w-64 flex flex-col rounded-lg shadow-md 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="w-32 h-28 object-cover" src={format.image} alt="">
         <div class="absolute inset-0 bg-neutral_Light mix-blend-multiply"></div>
@@ -13,7 +13,6 @@
       <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>
-      
   </a>
   {/each}
 </div>
\ No newline at end of file
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 73ac89a..570b039 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -108,6 +108,7 @@
     </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">
 
@@ -194,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">
         
@@ -288,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/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>