diff --git a/src/lib/components/IndexSidecard.svelte b/src/lib/components/IndexSidecard.svelte
index 70c5aed6..59464c6d 100644
--- a/src/lib/components/IndexSidecard.svelte
+++ b/src/lib/components/IndexSidecard.svelte
@@ -1,103 +1,89 @@
 <script lang="ts">
-    import { indexTicker } from "$lib/store";
-    import {
-      abbreviateNumber,
-      sectorNavigation,
-    } from "$lib/utils";
-  
-  
-    export let data;
-  
-    let info;
-    let topSectorList = [];
-    let description = "";
-  
-  
+  import { indexTicker } from "$lib/store";
+  import { abbreviateNumber, sectorNavigation } from "$lib/utils";
 
-    $: {
-      if ($indexTicker) {
-        info = data?.getIndexProfile?.at(0);
-        topSectorList = data?.getIndexSectorWeighting || [];
-       
-        description =
-          info?.description ??
-          "A detailed description of the company is not yet available.";
-  
-      }
+  export let data;
+
+  let info;
+  let topSectorList = [];
+  let description = "";
+
+  $: {
+    if ($indexTicker) {
+      info = data?.getIndexProfile?.at(0);
+      topSectorList = data?.getIndexSectorWeighting || [];
+
+      description =
+        info?.description ??
+        "A detailed description of the company is not yet available.";
     }
-  </script>
-  
-  <div class="px-0.5 lg:px-0">
-    <h2 class="mb-2 text-2xl text-white font-semibold">
-      About {$indexTicker}
-    </h2>
-    <p class="text-gray-200">
-      {description}
-    </p>
-  
-   
-  </div>
-  
-  {#if topSectorList?.length !== 0}
-    <div class="space-y-3 pt-5 {topSectorList?.length !== 0 ? '' : 'hidden'}">
-      <div class="h-auto w-full">
-        <!--Start Content-->
-        <div class="w-auto lg:w-full flex flex-col m-auto">
-          <h2
-            class="mb-2 text-2xl text-white font-semibold flex flex-row items-center"
-          >
-            <span>Top Sectors</span>
-          </h2>
-  
-          <div class="mt-2 w-full overflow-hidden">
-            <table class="w-full table table-sm table table-compact w-full">
-              <thead>
-                <tr>
-                  <th
-                    class="text-white font-semibold text-sm text-start bg-default"
-                    >Sector</th
-                  >
-  
-                  <th class="text-white font-semibold text-sm text-end bg-default"
-                    >Weight %</th
-                  >
-                </tr>
-              </thead>
-              <tbody>
-                {#each topSectorList as item}
-                  {#if item?.weightPercentage > 0}
-                    <tr class="text-white border-b border-[#27272A]">
-                      <td class="text-start text-sm sm:text-[1rem]">
-                        <a
-                          href={sectorNavigation?.find(
-                            (listItem) => listItem?.title === item?.sector,
-                          )?.link}
-                          class="sm:hover:underline sm:hover:underline-offset-4 text-white truncate"
-                        >
-                          {item?.sector}
-                        </a>
-                      </td>
-  
-                      <td class="text-white font-semibold text-end">
-                        {abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
-                      </td>
-                    </tr>
-                  {/if}
-                {/each}
-              </tbody>
-            </table>
-          </div>
-  
-          <a
-            href={`/industry/sectors`}
-            class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
-          >
-            All Sectors
-          </a>
+  }
+</script>
+
+<div class="px-0.5 lg:px-0">
+  <h2 class="mb-2 text-2xl text-white font-semibold">
+    About {$indexTicker}
+  </h2>
+  <p class="text-gray-200">
+    {description}
+  </p>
+</div>
+
+{#if topSectorList?.length !== 0}
+  <div
+    class="space-y-3 pt-5 text-muted dark:text-white {topSectorList?.length !==
+    0
+      ? ''
+      : 'hidden'}"
+  >
+    <div class="h-auto w-full">
+      <!--Start Content-->
+      <div class="w-auto lg:w-full flex flex-col m-auto">
+        <h2 class="mb-2 text-2xl flex flex-row items-center">
+          <span class="font-bold">Top Sectors</span>
+        </h2>
+
+        <div class="mt-2 w-full overflow-hidden">
+          <table class="w-full">
+            <thead>
+              <tr class="border-y border-gray-300 dark:border-gray-800">
+                <th class="px-1 py-1.5 text-left xs:px-2">Sector</th>
+
+                <th class="px-1 py-1.5 text-right xs:px-2">Weight %</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each topSectorList as item}
+                {#if item?.weightPercentage > 0}
+                  <tr class=" border-b border-gray-300 dark:border-gray-800">
+                    <td class="px-1 py-1.5 text-left xs:px-2">
+                      <a
+                        href={sectorNavigation?.find(
+                          (listItem) => listItem?.title === item?.sector,
+                        )?.link}
+                        class="sm:hover:underline sm:hover:underline-offset-4 truncate"
+                      >
+                        {item?.sector}
+                      </a>
+                    </td>
+
+                    <td class="px-1 py-1.5 text-right xs:px-2">
+                      {abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
+                    </td>
+                  </tr>
+                {/if}
+              {/each}
+            </tbody>
+          </table>
         </div>
+
+        <a
+          href={`/industry/sectors`}
+          class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
+        >
+          All Sectors
+        </a>
       </div>
     </div>
-  {/if}
-  
- 
-  
\ No newline at end of file
+  </div>
+{/if}
diff --git a/src/routes/index/[tickerID]/+page.svelte b/src/routes/index/[tickerID]/+page.svelte
index f2e3369f..0c8fa85d 100644
--- a/src/routes/index/[tickerID]/+page.svelte
+++ b/src/routes/index/[tickerID]/+page.svelte
@@ -218,21 +218,21 @@
                 hour: "numeric",
                 hour12: true,
               });
-              return `<span class="font-[501] text-xs">${timeString.replace(/\s/g, " ")}</span>`;
+              return `<span class=" text-xs">${timeString.replace(/\s/g, " ")}</span>`;
             } else if (["1W", "1M"].includes(displayData)) {
               const timeString = date?.toLocaleDateString("en-US", {
                 month: "short",
                 day: "numeric",
                 timeZone: "UTC",
               });
-              return `<span class="font-[501] text-xs">${timeString}</span>`;
+              return `<span class=" text-xs">${timeString}</span>`;
             } else {
               const timeString = date?.toLocaleDateString("en-US", {
                 year: "2-digit",
                 month: "short",
                 timeZone: "UTC",
               });
-              return `<span class="font-[501] text-xs">${timeString}</span>`;
+              return `<span class=" text-xs">${timeString}</span>`;
             }
           },
         },
@@ -680,29 +680,6 @@
               <div
                 class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
               >
-                <div class="flex items-center justify-between py-1 sm:pt-0.5">
-                  <div class="hide-scroll overflow-x-auto">
-                    <ul class="flex sm:space-x-2">
-                      {#each intervals as interval}
-                        <li>
-                          <button
-                            on:click={() => changeData(interval)}
-                            class="cursor-pointer focus:outline-none"
-                          >
-                            <span
-                              class="block px-3 py-1 rounded duration-100 ease-in-out
-          {displayData === interval
-                                ? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
-                                : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
-                            >
-                              {interval}
-                            </span>
-                          </button>
-                        </li>
-                      {/each}
-                    </ul>
-                  </div>
-                </div>
                 <div class="h-[250px] sm:h-[350px]">
                   <div
                     class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12"
@@ -721,25 +698,21 @@
               >
                 <div class="flex items-center justify-between py-1 sm:pt-0.5">
                   <div class="hide-scroll overflow-x-auto">
-                    <ul
-                      class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
-                    >
+                    <ul class="flex sm:space-x-2">
                       {#each intervals as interval}
                         <li>
                           <button
                             on:click={() => changeData(interval)}
-                            class="cursor-pointer px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
+                            class="cursor-pointer focus:outline-none"
                           >
                             <span
-                              class="block {displayData === interval
-                                ? 'text-white'
-                                : 'text-gray-400'}">{interval}</span
+                              class="block px-3 py-1 rounded duration-100 ease-in-out
+          {displayData === interval
+                                ? 'bg-gray-200 text-muted dark:bg-primary dark:text-white font-semibold'
+                                : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
                             >
-                            <div
-                              class="{displayData === interval
-                                ? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
-                                : 'bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
-                            />
+                              {interval}
+                            </span>
                           </button>
                         </li>
                       {/each}