diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index 2e039c1..3f21087 100644
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@@ -65,7 +65,7 @@
             <h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900">Topics</h2>
             <ul class="mt-2 text-sm text-gray-800">
                 {#each result_topics as topic}
-                <li><a href="#/topic/{topic.id}" class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" id="option-1" role="option" tabindex="-1">{topic.display_name}</a></li>
+                <li><a href="#/topic/{topic.name}" class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" id="option-1" role="option" tabindex="-1">{topic.display_name}</a></li>
                 {/each}
             </ul>
           </li>
diff --git a/src/ItemCard.svelte b/src/ItemCard.svelte
index ca74582..4cda857 100644
--- a/src/ItemCard.svelte
+++ b/src/ItemCard.svelte
@@ -7,7 +7,7 @@
     <img class="h-64 max-w-sm object-contain py-2 mb-6 float-left rounded-md transform transition ease-out duration-300 hover:scale-105" 
       src={item.image} alt="{item.name}">
   </div>
-    <span class="flex-1 text-base font-semibold text-yellow-400">★ ★ ★ ★ ★</span>
+  <sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
 </a>
 
 
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 72e6cce..0e7c205 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -35,15 +35,13 @@
         <section>
           <h1 class="text-2xl">{item.name}</h1>
           <p class="font text-gray-500">Into Several Rmote Regions of the World</p>
-          <span class="text-sm">{item.creator}</span>
+          <span class="text-sm">{item.creators}</span>
         </section>
         <!-- ratings and upload buttons -->
         <div class="mt-2 mb-6 flex flex-col justify-between">
           <div class="flex justify-between items-center">
             <div>
-              <span class="text-yellow-500">★★★★★</span>
-              <br />
-              <span class="text-xs text-gray-500">333 Ratings</span>
+              <sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
             </div>
             
             <ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>
@@ -64,7 +62,7 @@
     <!-- Description  -->
     <section class="my-8">
       <h2 class="text-base font-bold">Description</h2>
-      <p class="mt-4 text-sm">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non asperiores vel sint veniam placeat tenetur illum cum voluptatum ducimus aut assumenda nesciunt eum veritatis, fuga ex earum. Consectetur, tempore fugit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, veniam voluptates explicabo distinctio accusantium eos a commodi aperiam sit neque non corporis iure odit quisquam laboriosam eum quos iusto nesciunt.</p>
+      <p class="mt-4 text-sm">{item.description}</p>
     </section>
     <hr />
     <!-- details  -->
diff --git a/templates/index.html b/templates/index.html
index 03a2ec4..dbaeab4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,6 +6,8 @@
 		<script src="//cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
         <script src="/static/bundle.js" defer></script>
 		<link href="/static/bundle.css" rel="stylesheet" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />
+		<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>
 		<title>LearnAwesome</title>
 	</head>
 	<body class="h-full">
