diff --git a/src/lib/components/IndexSidecard.svelte b/src/lib/components/IndexSidecard.svelte
index 59464c6d..c60176d6 100644
--- a/src/lib/components/IndexSidecard.svelte
+++ b/src/lib/components/IndexSidecard.svelte
@@ -21,10 +21,10 @@
 </script>
 
 <div class="px-0.5 lg:px-0">
-  <h2 class="mb-2 text-2xl text-white font-semibold">
+  <h2 class="mb-2 text-2xl font-bold">
     About {$indexTicker}
   </h2>
-  <p class="text-gray-200">
+  <p>
     {description}
   </p>
 </div>
diff --git a/src/routes/index/[tickerID]/+layout.svelte b/src/routes/index/[tickerID]/+layout.svelte
index 00618ce3..192073ed 100644
--- a/src/routes/index/[tickerID]/+layout.svelte
+++ b/src/routes/index/[tickerID]/+layout.svelte
@@ -365,7 +365,7 @@
 <svelte:window bind:scrollY={y} />
 
 <body
-  class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
+  class=" w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
 >
   <!-- Page wrapper -->
   <div class="mt-5 flex flex-col w-full relative w-full">
@@ -374,7 +374,7 @@
         <div class="w-full">
           <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
             <!--Start Mobile Navbar-->
-            <div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden">
+            <div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
               <div class="navbar w-full px-4 py-2">
                 <div
                   class="{isScrolled
@@ -407,10 +407,10 @@
                         ? "hidden"
                         : "flex flex-col items-center ml-6 transition-transform ease-in"}
                     >
-                      <span class="text-white text-xs font-semibold">
+                      <span class=" text-xs font-semibold">
                         {$indexTicker}
                       </span>
-                      <span class="text-white text-sm">
+                      <span class=" text-sm">
                         {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
                           {$currentPortfolioPrice}
                         {:else}
@@ -528,7 +528,7 @@
                     {:else}
                       <label
                         for="userLogin"
-                        class="cursor-pointer shrink-0 text-white mr-4"
+                        class="cursor-pointer shrink-0 mr-4"
                       >
                         <svg
                           class="w-6 h-6 inline-block"
@@ -593,7 +593,7 @@
                           <div class="flex flex-col ml-auto mr-2">
                             {#if userWatchList?.length !== 0}
                               <div
-                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                               >
                                 <label
                                   for="addWatchListModal"
@@ -624,7 +624,7 @@
                               </div>
                             {:else if userWatchList?.length === 0}
                               <div
-                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                               >
                                 <label
                                   on:click={() =>
@@ -658,11 +658,11 @@
                           </div>
                         {:else}
                           <div
-                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                           >
                             <label
                               for="userLogin"
-                              class="cursor-pointer shrink-0 text-white"
+                              class="cursor-pointer shrink-0"
                             >
                               <svg
                                 class="w-7 h-7 inline-block"
@@ -681,12 +681,12 @@
                         <!--Start Price Alert -->
 
                         <div
-                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                         >
                           <label
                             on:click={() => ($openPriceAlert = true)}
                             for={data?.user ? "priceAlertModal" : "userLogin"}
-                            class="cursor-pointer shrink-0 text-white"
+                            class="cursor-pointer shrink-0"
                           >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
@@ -721,9 +721,7 @@
                             <div
                               class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
                             >
-                              <h1
-                                class="text-2xl lg:text-3xl font-bold text-white"
-                              >
+                              <h1 class="text-2xl lg:text-3xl font-bold">
                                 {$displayCompanyName?.length > charNumber
                                   ? $displayCompanyName?.slice(0, charNumber) +
                                     "..."
@@ -735,7 +733,7 @@
                             </div>
 
                             <div
-                              class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5 text-white"
+                              class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5"
                             >
                               <div class="w-full max-w-[50%] whitespace-nowrap">
                                 <div
@@ -757,14 +755,14 @@
                                   <span
                                     class={displayLegend?.change >= 0
                                       ? "before:content-['+'] text-green-800 dark:text-[#00FC50]"
-                                      : "text-[#FF2F1F]"}
+                                      : "text-red-800 dark:text-[#FF2F1F]"}
                                   >
                                     {displayLegend?.change}
                                   </span>
                                   <span
                                     class={displayLegend?.changesPercentage >= 0
-                                      ? "text-[#00FC50]"
-                                      : "text-[#FF2F1F]"}
+                                      ? "text-green-800 dark:text-[#00FC50]"
+                                      : "text-red-800 dark:text-[#FF2F1F]"}
                                   >
                                     ({displayLegend?.changesPercentage}%)
                                   </span>
@@ -861,18 +859,16 @@
                     <!--Start Ticker Section-->
 
                     <nav
-                      class="sm:ml-4 border-b-[2px] overflow-x-auto md:overflow-hidden whitespace-nowrap"
+                      class="sm:ml-4 border-b-[2px] border-[#2C6288] dark:border-white overflow-x-auto whitespace-nowrap no-scrollbar"
                     >
-                      <ul
-                        class="flex flex-row items-center w-full text-[1rem] text-white"
-                      >
+                      <ul class="flex flex-row items-center w-full text-[1rem]">
                         <a
                           href={`/index/${$indexTicker}`}
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Overview
                         </a>
@@ -882,8 +878,8 @@
                           on:click={() => changeSection("holdings")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'holdings'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Holdings
                         </a>
@@ -892,8 +888,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Options
                         </a>
@@ -903,8 +899,8 @@
                           on:click={() => changeSection("history")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'history'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           History
                         </a>
@@ -948,12 +944,12 @@
   <div class="modal-box rounded-md w-full bg-secondary border border-gray-600">
     <label
       for="addWatchListModal"
-      class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem] text-white"
+      class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem]"
     >
       ✕
     </label>
 
-    <div class="text-white">
+    <div class="">
       <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
       <div class="flex flex-col items-center w-full max-w-3xl bg-secondary">
@@ -970,10 +966,10 @@
                 : 'border-gray-600'}"
             >
               <div class="flex flex-col items-center w-full">
-                <span class="ml-1 text-white mr-auto">
+                <span class="ml-1 mr-auto">
                   {item?.title}
                 </span>
-                <span class="ml-1 text-white text-sm mr-auto">
+                <span class="ml-1 text-sm mr-auto">
                   {item?.ticker?.length}
                   {item?.ticker?.length !== 1 ? "Companies" : "Company"}
                 </span>
diff --git a/src/routes/index/[tickerID]/+page.svelte b/src/routes/index/[tickerID]/+page.svelte
index 0c8fa85d..cd073b63 100644
--- a/src/routes/index/[tickerID]/+page.svelte
+++ b/src/routes/index/[tickerID]/+page.svelte
@@ -187,11 +187,11 @@
 
           // Loop through each point in the shared tooltip
           this.points?.forEach((point) => {
-            tooltipContent += `<span class="text-white text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`;
+            tooltipContent += `<span class=" text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`;
           });
 
           // Append the formatted date at the end
-          tooltipContent += `<span class="text-white m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
+          tooltipContent += `<span class=" m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
 
           return tooltipContent;
         },
@@ -664,7 +664,7 @@
   description={`Get a real-time ${data?.companyName} (${$indexTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
 />
 
-<section class="bg-default min-h-screen pb-40 overflow-hidden w-full">
+<section class=" min-h-screen pb-40 overflow-hidden w-full">
   <div class="w-full m-auto overflow-hidden">
     <div
       class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full"
@@ -684,9 +684,7 @@
                   <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"
                   >
-                    <div
-                      class="mb-4 text-white text-[1rem] sm:text-xl font-semibold"
-                    >
+                    <div class="mb-4 text-[1rem] sm:text-xl font-semibold">
                       No {displayData} chart data available
                     </div>
                   </div>
@@ -708,8 +706,8 @@
                             <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'}"
+                                ? 'bg-gray-200 text-muted dark:bg-primary dark: font-semibold'
+                                : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover: sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
                             >
                               {interval}
                             </span>
@@ -758,14 +756,12 @@
             <div
               class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
             >
-              <table
-                class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
-              >
+              <table class="w-[50%] text-sm sm:text-[1rem] lg:min-w-[250px]">
                 <tbody>
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Open</td
                     >
                     <td
@@ -775,9 +771,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Volume</td
                     >
                     <td
@@ -789,9 +785,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Market Cap</td
                     >
                     <td
@@ -801,9 +797,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Price Avg 50</td
                     >
                     <td
@@ -813,9 +809,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Day's Range</td
                     >
                     <td
@@ -827,12 +823,12 @@
                   >
                 </tbody>
               </table>
-              <table class="w-[50%] text-sm text-white lg:min-w-[250px]">
+              <table class="w-[50%] text-sm lg:min-w-[250px]">
                 <tbody>
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Previous Close</td
                     >
                     <td
@@ -842,9 +838,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Avg. Volume</td
                     >
                     <td
@@ -856,9 +852,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Holdings
                     </td>
                     <td
@@ -870,9 +866,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >Price Avg 200</td
                     >
                     <td
@@ -882,9 +878,9 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
                       >52-Week Range</td
                     >
                     <td
diff --git a/src/routes/index/[tickerID]/history/+page.svelte b/src/routes/index/[tickerID]/history/+page.svelte
index 660f9a90..a342ccdc 100644
--- a/src/routes/index/[tickerID]/history/+page.svelte
+++ b/src/routes/index/[tickerID]/history/+page.svelte
@@ -7,11 +7,10 @@
   import { goto } from "$app/navigation";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import SEO from "$lib/components/SEO.svelte";
-
   import { onMount } from "svelte";
+  import { removeCompanyStrings } from "$lib/utils";
 
   export let data;
-  let isLoaded = false;
   let timePeriod = "Daily";
   let rawData = data?.getData || [];
   let originalData = [];
@@ -259,36 +258,34 @@
   }
 
   $: {
-    if (timePeriod && typeof window !== "undefined") {
-      isLoaded = false;
+    if (timePeriod) {
       rawData = prepareDataset(data?.getData, timePeriod);
       originalData = rawData;
       stockList = rawData?.slice(0, 50);
-      isLoaded = true;
     }
   }
 </script>
 
 <SEO
-  title={`${$displayCompanyName} (${$indexTicker}) Historical Stock Price Data`}
+  title={`${$displayCompanyName} (${$indexTicker}) Stock Price History · Stocknear`}
   description={`Get a complete stock price history for ${$displayCompanyName} (${$indexTicker}), starting from its first trading day. Includes open, high, low, close and volume.`}
 />
 
 <section
-  class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
+  class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
 >
   <div class="w-full overflow-hidden m-auto mt-5">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
             <div
-              class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5"
+              class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-3"
             >
               <h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0">
-                {$indexTicker} Stock Price History
+                {removeCompanyStrings($displayCompanyName)} Stock Price History
               </h1>
               <div
                 class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0"
@@ -298,11 +295,9 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-fit sm:w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                        class="shadow-sm w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                       >
-                        <span class="truncate text-white px-1"
-                          >{timePeriod}</span
-                        >
+                        <span class="truncate px-1">{timePeriod}</span>
                         <svg
                           class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                           viewBox="0 0 20 20"
@@ -321,20 +316,20 @@
                     <DropdownMenu.Content
                       class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                     >
-                      <DropdownMenu.Label class="text-gray-400">
+                      <DropdownMenu.Label class="text-muted dark:text-gray-400">
                         Select time frame
                       </DropdownMenu.Label>
                       <DropdownMenu.Separator />
                       <DropdownMenu.Group>
                         <DropdownMenu.Item
                           on:click={() => (timePeriod = "Daily")}
-                          class="cursor-pointer hover:bg-primary"
+                          class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                         >
                           Daily
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                           on:click={() => (timePeriod = "Weekly")}
-                          class="cursor-pointer hover:bg-primary"
+                          class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                         >
                           Weekly
                         </DropdownMenu.Item>
@@ -342,7 +337,7 @@
                           {#each ["Monthly", "Quarterly", "Annual"] as entry}
                             <DropdownMenu.Item
                               on:click={() => goto("/pricing")}
-                              class="cursor-pointer hover:bg-primary"
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                             >
                               {entry}
                               <svg
@@ -350,7 +345,7 @@
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24"
                                 ><path
-                                  fill="#A3A3A3"
+                                  fill="currentColor"
                                   d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                                 /></svg
                               >
@@ -359,19 +354,19 @@
                         {:else}
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Monthly")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Monthly
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Quarterly")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Quarterly
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Annual")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Annual
                           </DropdownMenu.Item>
@@ -383,9 +378,9 @@
 
                 <Button
                   on:click={() => exportData()}
-                  class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                  class="shadow-sm ml-2 border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                 >
-                  <span class="truncate text-white">Download</span>
+                  <span class="truncate">Download</span>
                   <svg
                     class="{['Pro', 'Plus']?.includes(data?.user?.tier)
                       ? 'hidden'
@@ -393,130 +388,114 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
                     ><path
-                      fill="#A3A3A3"
+                      fill="currentColor"
                       d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                     /></svg
                   >
                 </Button>
               </div>
             </div>
-            {#if isLoaded}
-              {#if rawData?.length !== 0}
-                <div class="w-full m-auto mt-2">
-                  <div
-                    class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
+            {#if rawData?.length !== 0}
+              <div class="w-full m-auto">
+                <div
+                  class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
+                >
+                  <table
+                    class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full border border-gray-300 dark:border-gray-800 m-auto"
                   >
-                    <table
-                      class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
-                    >
-                      <thead>
-                        <TableHeader {columns} {sortOrders} {sortData} />
-                      </thead>
+                    <thead>
+                      <TableHeader {columns} {sortOrders} {sortData} />
+                    </thead>
 
-                      <tbody>
-                        {#each stockList as item, index}
-                          <tr
-                            class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
-                              1 ===
-                              rawData?.length &&
-                            !['Pro', 'Plus']?.includes(data?.user?.tier)
-                              ? 'opacity-[0.1]'
-                              : ''}"
+                    <tbody>
+                      {#each stockList as item, index}
+                        <tr
+                          class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                            1 ===
+                            rawData?.length &&
+                          !['Pro', 'Plus']?.includes(data?.user?.tier)
+                            ? 'opacity-[0.1]'
+                            : ''}"
+                        >
+                          <td
+                            class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                           >
-                            <td
-                              class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {#if timePeriod === "Weekly"}
-                                Week of {new Date(item?.time).toLocaleString(
-                                  "en-US",
-                                  {
-                                    month: "short",
-                                    day: "numeric",
-                                    year: "numeric",
-                                    daySuffix: "2-digit",
-                                  },
-                                )}
-                              {:else}
-                                {new Date(item?.time).toLocaleString("en-US", {
+                            {#if timePeriod === "Weekly"}
+                              Week of {new Date(item?.time).toLocaleString(
+                                "en-US",
+                                {
                                   month: "short",
                                   day: "numeric",
                                   year: "numeric",
-                                  daySuffix: "2-digit",
-                                })}
-                              {/if}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.open?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.high?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.low?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.close?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.change !== null ? item?.change : "n/a"}
-                            </td>
-                            <td
-                              class="text-sm sm:text-[1rem] {item?.changesPercentage >=
-                                0 && item?.changesPercentage !== null
-                                ? "text-[#00FC50] before:content-['+'] "
-                                : item?.changesPercentage < 0 &&
-                                    item?.changesPercentage !== null
-                                  ? 'text-red-800 dark:text-[#FF2F1F]'
-                                  : 'text-white'} text-end"
-                            >
-                              {item?.changesPercentage !== null
-                                ? item?.changesPercentage + "%"
-                                : "n/a"}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.volume
-                                ? item?.volume?.toLocaleString("en-US")
-                                : "n/a"}
-                            </td>
-                          </tr>
-                        {/each}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              {:else}
-                <Infobox
-                  text={`No price history are available for ${$displayCompanyName}.`}
-                />
-              {/if}
-            {:else}
-              <div class="flex justify-center items-center h-80">
-                <div class="relative">
-                  <label
-                    class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                  >
-                    <span
-                      class="loading loading-spinner loading-md text-gray-400"
-                    ></span>
-                  </label>
+                                  timeZone: "Europe/Berlin",
+                                },
+                              )}
+                            {:else}
+                              {new Date(item?.time).toLocaleString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric",
+                                timeZone: "Europe/Berlin",
+                              })}
+                            {/if}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.open?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.high?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.low?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.close?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.change !== null ? item?.change : "n/a"}
+                          </td>
+                          <td
+                            class="text-sm sm:text-[1rem] {item?.changesPercentage >=
+                              0 && item?.changesPercentage !== null
+                              ? "text-green-800 dark:text-[#00FC50] before:content-['+'] "
+                              : item?.changesPercentage < 0 &&
+                                  item?.changesPercentage !== null
+                                ? 'text-red-800 dark:text-[#FF2F1F]'
+                                : ''} text-end"
+                          >
+                            {item?.changesPercentage !== null
+                              ? item?.changesPercentage + "%"
+                              : "n/a"}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.volume?.toLocaleString("en-US")}
+                          </td>
+                        </tr>
+                      {/each}
+                    </tbody>
+                  </table>
                 </div>
               </div>
+            {:else}
+              <Infobox
+                text={`No price history are available for ${$displayCompanyName}.`}
+              />
             {/if}
           </div>
         </main>
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           <div
             class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
@@ -528,9 +507,7 @@
                 <h2 class="text-start text-xl font-semibold ml-3">
                   Stock Screener
                 </h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
+                <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
               </div>
               <span class="p-3 ml-3 mr-3">
                 Filter, sort and analyze all stocks to find your next
@@ -548,9 +525,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
+                <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
               </div>
               <span class="p-3 ml-3 mr-3">
                 Keep track of your favorite stocks in real-time.
diff --git a/src/routes/index/[tickerID]/holdings/+page.svelte b/src/routes/index/[tickerID]/holdings/+page.svelte
index e0eee688..a2011006 100644
--- a/src/routes/index/[tickerID]/holdings/+page.svelte
+++ b/src/routes/index/[tickerID]/holdings/+page.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-  import {
-    indexTicker,
-    displayCompanyName,
-  } from "$lib/store";
+  import { indexTicker, displayCompanyName } from "$lib/store";
   import { formatString } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
@@ -57,11 +54,13 @@
   let htmlOutput = generateStatementInfoHTML();
 </script>
 
-
-<SEO title={`${$displayCompanyName} (${$indexTicker}) Holdings List`} description={`Get the Holdings List of ${$displayCompanyName} (${$indexTicker}).`} />
+<SEO
+  title={`${$displayCompanyName} (${$indexTicker}) Holdings List`}
+  description={`Get the Holdings List of ${$displayCompanyName} (${$indexTicker}).`}
+/>
 
 <section
-  class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
+  class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
 >
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
@@ -80,7 +79,7 @@
             </div>
           {/if}
         </div>
-        <div class="mt-5 mb-10">
+        <div class="mt-5 mb-5">
           <Infobox text={htmlOutput} />
         </div>
 
diff --git a/src/routes/index/[tickerID]/options/+page.svelte b/src/routes/index/[tickerID]/options/+page.svelte
index ef66e1c0..415f3b63 100644
--- a/src/routes/index/[tickerID]/options/+page.svelte
+++ b/src/routes/index/[tickerID]/options/+page.svelte
@@ -142,7 +142,7 @@
   description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$indexTicker}).`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white min-h-screen">
+<section class="w-full overflow-hidden min-h-screen">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -160,7 +160,7 @@
 
         {#if rawData?.length > 0}
           {#if optionList?.length !== 0}
-            <h3 class="text-xl sm:text-2xl text-white font-bold text-start">
+            <h3 class="text-xl sm:text-2xl font-bold text-start">
               Historical {$indexTicker} Data
             </h3>
 
@@ -170,12 +170,27 @@
               >
                 <thead class="text-muted dark:text-white dark:bg-default">
                   <tr class="">
-                    <td class=" font-semibold text-sm text-start">Date</td>
-                    <td class=" font-semibold text-sm text-end">% Change</td>
-                    <td class=" font-semibold text-sm text-end">P/C</td>
-                    <td class=" font-semibold text-sm text-center">Volume</td>
-                    <td class=" font-semibold text-sm text-center">C Volume</td>
-                    <td class=" font-semibold text-sm text-center">P Volume</td>
+                    <td class=" font-semibold text-sm sm:text-[1rem] text-start"
+                      >Date</td
+                    >
+                    <td class=" font-semibold text-sm sm:text-[1rem] text-end"
+                      >% Change</td
+                    >
+                    <td class=" font-semibold text-sm sm:text-[1rem] text-end"
+                      >P/C</td
+                    >
+                    <td
+                      class=" font-semibold text-sm sm:text-[1rem] text-center"
+                      >Volume</td
+                    >
+                    <td
+                      class=" font-semibold text-sm sm:text-[1rem] text-center"
+                      >C Volume</td
+                    >
+                    <td
+                      class=" font-semibold text-sm sm:text-[1rem] text-center"
+                      >P Volume</td
+                    >
                     <!--
                     <td class=" font-semibold text-sm text-end"
                       >Vol/30D</td
@@ -340,11 +355,11 @@
                       </td>
 
                       <td class=" text-sm sm:text-[1rem] text-end">
-                        {#if item?.changeOI >= 0}
+                        {#if item?.changeOI >= 0 && item?.changeOI}
                           <span class="text-green-800 dark:text-[#00FC50]"
                             >+{item?.changeOI?.toLocaleString("en-US")}</span
                           >
-                        {:else if item?.changeOI < 0}
+                        {:else if item?.changeOI < 0 && item?.changeOI}
                           <span class="text-red-800 dark:text-[#FF2F1F]"
                             >{item?.changeOI?.toLocaleString("en-US")}
                           </span>
@@ -354,13 +369,13 @@
                       </td>
 
                       <td class=" text-sm sm:text-[1rem] text-end">
-                        {#if item?.changesPercentageOI >= 0}
+                        {#if item?.changesPercentageOI >= 0 && item?.changesPercentageOI}
                           <span class="text-green-800 dark:text-[#00FC50]"
                             >+{item?.changesPercentageOI >= 1000
                               ? abbreviateNumber(item?.changesPercentageOI)
                               : item?.changesPercentageOI?.toFixed(2)}%</span
                           >
-                        {:else if item?.changesPercentageOI < 0}
+                        {:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI}
                           <span class="text-red-800 dark:text-[#FF2F1F]"
                             >{item?.changesPercentageOI <= -1000
                               ? abbreviateNumber(item?.changesPercentageOI)
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index dcb0d996..a7add9a6 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -381,7 +381,7 @@
 <svelte:window bind:scrollY={y} />
 
 <body
-  class="text-muted dark:text-white w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
+  class=" w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
 >
   <!-- Page wrapper -->
   <div class=" flex flex-col w-full relative w-full sm:max-w-[1250px]">
@@ -909,7 +909,7 @@
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Overview
@@ -919,7 +919,7 @@
                           on:click={() => changeSection("financials")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'financials'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Financials
@@ -929,7 +929,7 @@
                           on:click={() => changeSection("statistics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'statistics'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                           >Statistics</a
                         >
@@ -939,7 +939,7 @@
                           on:click={() => changeSection("metrics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'metrics'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                           >Metrics</a
                         >
@@ -950,7 +950,7 @@
                             on:click={() => changeSection("forecast")}
                             class="p-2 px-5 cursor-pointer {displaySection ===
                             'forecast'
-                              ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                              ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                               : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                           >
                             Forecast
@@ -961,7 +961,7 @@
                           on:click={() => changeSection("dark-pool")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dark-pool'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Dark Pool
@@ -971,7 +971,7 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Options
@@ -982,7 +982,7 @@
                           on:click={() => changeSection("insider")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'insider'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Insider
@@ -992,7 +992,7 @@
                           on:click={() => changeSection("dividends")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dividends'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Dividends
@@ -1002,7 +1002,7 @@
                           on:click={() => changeSection("history")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'history'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           History
@@ -1012,7 +1012,7 @@
                           on:click={() => changeSection("profile")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'profile'
-                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
                             : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Profile
