diff --git a/src/routes/list/market-cap/[slug]/+page.svelte b/src/routes/list/market-cap/[slug]/+page.svelte
index 7357db57..1c7b4824 100644
--- a/src/routes/list/market-cap/[slug]/+page.svelte
+++ b/src/routes/list/market-cap/[slug]/+page.svelte
@@ -3,6 +3,7 @@
   import { abbreviateNumber } from "$lib/utils";
   import { onMount } from "svelte";
   import { page } from "$app/stores";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
@@ -293,14 +294,9 @@
                 </td>
 
                 <td
-                  class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                  class="text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
                 >
-                  <a
-                    href={"/stocks/" + item?.symbol}
-                    class="sm:hover:text-white text-blue-400"
-                  >
-                    {item?.symbol}
-                  </a>
+                 <HoverStockChart symbol={item?.symbol} />
                 </td>
 
                 <td
diff --git a/src/routes/list/sector/[slug]/+page.svelte b/src/routes/list/sector/[slug]/+page.svelte
index f5c8b4eb..bc2de6dd 100644
--- a/src/routes/list/sector/[slug]/+page.svelte
+++ b/src/routes/list/sector/[slug]/+page.svelte
@@ -3,6 +3,8 @@
   import { abbreviateNumber } from "$lib/utils";
   import { onMount } from "svelte";
   import { page } from "$app/stores";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
@@ -226,7 +228,7 @@
             <TableHeader {columns} {sortOrders} {sortData} />
           </thead>
           <tbody>
-            {#each marketCapList as item, index}
+            {#each marketCapList as item}
               <!-- row -->
               <tr
                 class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
@@ -238,14 +240,9 @@
                 </td>
 
                 <td
-                  class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                  class="text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
                 >
-                  <a
-                    href={"/stocks/" + item?.symbol}
-                    class="sm:hover:text-white text-blue-400"
-                  >
-                    {item?.symbol}
-                  </a>
+                  <HoverStockChart symbol={item?.symbol} />
                 </td>
 
                 <td