From 3bc72a259aca93b270b78caed1628f10f2595053 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 11 Mar 2025 12:28:19 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/Options/DailyStats.svelte  | 108 ++---
 src/lib/components/Options/TickerFlow.svelte  |  33 +-
 src/lib/components/UpgradeToPro.svelte        |   4 +-
 src/routes/analysts/+page.svelte              |  28 +-
 src/routes/analysts/top-stocks/+page.svelte   |  16 +-
 src/routes/stocks/[tickerID]/+layout.svelte   |  34 +-
 .../[tickerID]/forecast/ai/+page.svelte       | 375 ++++++++++++------
 .../[tickerID]/forecast/analyst/+page.svelte  | 142 +++----
 .../stocks/[tickerID]/options/+layout.svelte  |  48 +--
 .../stocks/[tickerID]/options/+page.svelte    | 138 +++----
 10 files changed, 485 insertions(+), 441 deletions(-)

diff --git a/src/lib/components/Options/DailyStats.svelte b/src/lib/components/Options/DailyStats.svelte
index 646567e6..c3405cde 100644
--- a/src/lib/components/Options/DailyStats.svelte
+++ b/src/lib/components/Options/DailyStats.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import InfoModal from "$lib/components/InfoModal.svelte";
-  import { abbreviateNumberWithColor } from "$lib/utils";
+  import { abbreviateNumber } from "$lib/utils";
   import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
 
   export let rawData = {};
 </script>
 
-<div class="text-white">
+<div class="">
   <label
     for="dailyStats"
-    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
+    class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold w-fit"
   >
     Daily Stats
     <InfoModal
@@ -21,49 +21,41 @@
   <div
     class="mt-5 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] xl:min-w-[300px]">
+    <table class="w-[50%] text-sm sm:text-[1rem] xl:min-w-[300px]">
       <tbody
         ><tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Call Volume</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
-              rawData?.call_volume,
-              false,
-              true,
-            )}</td
+            >{abbreviateNumber(rawData?.call_volume)}</td
           ></tr
         >
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Call Premium</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
-              rawData?.call_premium,
-              false,
-              true,
-            )}</td
+            >{abbreviateNumber(rawData?.call_premium)}</td
           ></tr
         >
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Premium</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
+            >{abbreviateNumber(
               rawData?.call_premium + rawData?.put_premium,
               false,
               true,
@@ -71,22 +63,18 @@
           ></tr
         >
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Call Open Interest</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
-              rawData?.call_open_interest,
-              false,
-              true,
-            )}</td
+            >{abbreviateNumber(rawData?.call_open_interest)}</td
           ></tr
         >
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Implied Volatility (IV)
@@ -97,71 +85,59 @@
           ></tr
         >
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Total Open Interest</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
-              rawData?.total_open_interest,
-              false,
-              true,
-            )}</td
+            >{abbreviateNumber(rawData?.total_open_interest)}</td
           ></tr
         >
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Net Premium
           </td>
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html rawData?.net_premium
-              ? abbreviateNumberWithColor(rawData?.net_premium, false, true)
+            >{rawData?.net_premium
+              ? abbreviateNumber(rawData?.net_premium)
               : "n/a"}</td
           ></tr
         >
       </tbody>
     </table>
-    <table class="w-[50%] text-sm text-white xl:min-w-[300px]">
+    <table class="w-[50%] text-sm xl:min-w-[300px]">
       <tbody
         ><tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Put Volume</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
-              rawData?.put_volume,
-              false,
-              true,
-            )}</td
+            >{abbreviateNumber(rawData?.put_volume)}</td
           ></tr
         >
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Put Premium</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
-              rawData?.put_premium,
-              false,
-              true,
-            )}</td
+            >{abbreviateNumber(rawData?.put_premium)}</td
           ></tr
         >
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >P/C Ratio</td
@@ -173,23 +149,19 @@
         >
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >Put Open Interest</td
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumberWithColor(
-              rawData?.put_open_interest,
-              false,
-              true,
-            )}</td
+            >{abbreviateNumber(rawData?.put_open_interest)}</td
           ></tr
         >
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >IV Rank</td
@@ -201,7 +173,7 @@
         >
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >🐻/🐂 Prem
@@ -258,26 +230,26 @@
                   </div>
                 </HoverCard.Trigger>
                 <HoverCard.Content
-                  class="w-auto bg-secondary border border-gray-600"
+                  class="w-auto bg-secondary border border-gray-300 dark:border-gray-600"
                 >
                   <div class="flex justify-between space-x-4">
-                    <div class="space-y-1 flex flex-col items-start text-white">
+                    <div class="space-y-1 flex flex-col items-start">
                       <div>
-                        Bearish: {@html abbreviateNumberWithColor(
+                        Bearish: {abbreviateNumber(
                           rawData?.premium_ratio?.at(0),
                           false,
                           true,
                         )}
                       </div>
                       <div>
-                        Neutral: {@html abbreviateNumberWithColor(
+                        Neutral: {abbreviateNumber(
                           rawData?.premium_ratio?.at(1),
                           false,
                           true,
                         )}
                       </div>
                       <div>
-                        Bullish: {@html abbreviateNumberWithColor(
+                        Bullish: {abbreviateNumber(
                           rawData?.premium_ratio?.at(2),
                           false,
                           true,
@@ -294,7 +266,7 @@
         </tr>
 
         <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
             >(Net Call x Net Put) Prem</td
@@ -303,16 +275,8 @@
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
           >
             {#if rawData?.net_call_premium || rawData?.net_put_premium}
-              {@html abbreviateNumberWithColor(
-                rawData?.net_call_premium,
-                false,
-                true,
-              )}
-              x {@html abbreviateNumberWithColor(
-                rawData?.net_put_premium,
-                false,
-                true,
-              )}
+              {abbreviateNumber(rawData?.net_call_premium)}
+              x {abbreviateNumber(rawData?.net_put_premium)}
             {:else}
               n/a
             {/if}
diff --git a/src/lib/components/Options/TickerFlow.svelte b/src/lib/components/Options/TickerFlow.svelte
index d8de80a6..31685375 100644
--- a/src/lib/components/Options/TickerFlow.svelte
+++ b/src/lib/components/Options/TickerFlow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { abbreviateNumberWithColor } from "$lib/utils";
+  import { abbreviateNumber } from "$lib/utils";
   import InfoModal from "$lib/components/InfoModal.svelte";
 
   export let tickerFlow = [];
@@ -57,7 +57,7 @@
             {#if tickerFlow?.length > 0}
               <label
                 for="dailyNetPutCallPrem"
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
+                class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold w-fit"
               >
                 Daily Net Put / Call Premium
                 <InfoModal
@@ -74,22 +74,21 @@
                 />
               </label>
 
-              <div class="text-white text-xs sm:text-sm italic mt-5 mb-3">
+              <div class=" text-xs sm:text-sm italic mt-5 mb-3">
                 Last Updated: {formatDate(findLastNonNull(tickerFlow, "time"))}
               </div>
               <div
                 class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
               >
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div class=" text-sm mb-2 flex items-center">
                     <span>Volume</span>
-                    <span class="ml-1 text-yellow-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white">
-                      {@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold">
+                      {abbreviateNumber(
                         findLastNonNull(tickerFlow, "net_volume"),
                         false,
                         true,
@@ -99,15 +98,14 @@
                 </div>
 
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div class=" text-sm mb-2 flex items-center">
                     <span>Net Call Prem</span>
-                    <span class="ml-1 text-green-600">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white"
-                      >{@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold"
+                      >{abbreviateNumber(
                         findLastNonNull(tickerFlow, "net_call_premium"),
                         false,
                         true,
@@ -117,15 +115,14 @@
                 </div>
 
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div class=" text-sm mb-2 flex items-center">
                     <span>Net Put Prem</span>
-                    <span class="ml-1 text-red-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white"
-                      >{@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold"
+                      >{abbreviateNumber(
                         findLastNonNull(tickerFlow, "net_put_premium"),
                         false,
                         true,
diff --git a/src/lib/components/UpgradeToPro.svelte b/src/lib/components/UpgradeToPro.svelte
index afd47a4f..4b742f89 100644
--- a/src/lib/components/UpgradeToPro.svelte
+++ b/src/lib/components/UpgradeToPro.svelte
@@ -34,7 +34,7 @@
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke={$mode === "light" ? "white" : "black"}
-                  class="h-6 w-6 text-black"
+                  class="h-6 w-6"
                   ><path
                     stroke-linecap="round"
                     stroke-linejoin="round"
@@ -62,7 +62,7 @@
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke={$mode === "light" ? "white" : "black"}
-                  class="h-6 w-6 text-black"
+                  class="h-6 w-6"
                   ><path
                     stroke-linecap="round"
                     stroke-linejoin="round"
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 97178b0b..ed614fc1 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -319,9 +319,7 @@
                   >
                     Analyst Star Rankings
                   </h3>
-                  <p
-                    class="mt-3 leading-8 text-muted dark:text-faded xl:text-lg"
-                  >
+                  <p class="mt-3 leading-8 xl:text-lg">
                     Our analyst star rankings are based on these four factors
                   </p>
                 </div>
@@ -332,7 +330,7 @@
                     <div class="relative pl-14">
                       <dt class=" font-semibold leading-4 md:leading-7">
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -340,7 +338,7 @@
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
-                            class="h-6 w-6 text-black"
+                            class="h-6 w-6 text-white dark:text-black"
                             ><path
                               stroke-linecap="round"
                               stroke-linejoin="round"
@@ -350,14 +348,14 @@
                         </div>
                         Success Rate
                       </dt>
-                      <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                      <dd class="mt-2 leading-7">
                         The percentage of ratings that are profitable.
                       </dd>
                     </div>
                     <div class="relative pl-14">
                       <dt class=" font-semibold leading-4 md:leading-7">
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -365,7 +363,7 @@
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
-                            class="h-6 w-6 text-black"
+                            class="h-6 w-6 text-white dark:text-black"
                             ><path
                               stroke-linecap="round"
                               stroke-linejoin="round"
@@ -375,7 +373,7 @@
                         </div>
                         Average Return
                       </dt>
-                      <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                      <dd class="mt-2 leading-7">
                         The average percentage return within one year of the
                         rating.
                       </dd>
@@ -383,7 +381,7 @@
                     <div class="relative pl-14">
                       <dt class=" font-semibold leading-4 md:leading-7">
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -391,7 +389,7 @@
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
-                            class="h-6 w-6 text-black"
+                            class="h-6 w-6 text-white dark:text-black"
                             ><path
                               stroke-linecap="round"
                               stroke-linejoin="round"
@@ -401,7 +399,7 @@
                         </div>
                         Rating Count
                       </dt>
-                      <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                      <dd class="mt-2 leading-7">
                         The more ratings the analyst has provided, the higher
                         the score.
                       </dd>
@@ -409,7 +407,7 @@
                     <div class="relative pl-14">
                       <dt class=" font-semibold leading-4 md:leading-7">
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -417,7 +415,7 @@
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
-                            class="h-6 w-6 text-black"
+                            class="h-6 w-6 text-white dark:text-black"
                             ><path
                               stroke-linecap="round"
                               stroke-linejoin="round"
@@ -427,7 +425,7 @@
                         </div>
                         Recency
                       </dt>
-                      <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                      <dd class="mt-2 leading-7">
                         Ratings provided within the past year contribute to a
                         higher score.
                       </dd>
diff --git a/src/routes/analysts/top-stocks/+page.svelte b/src/routes/analysts/top-stocks/+page.svelte
index 4e43d3dc..e84f908c 100644
--- a/src/routes/analysts/top-stocks/+page.svelte
+++ b/src/routes/analysts/top-stocks/+page.svelte
@@ -83,7 +83,7 @@
                   <div class="relative pl-14">
                     <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -91,7 +91,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white dark:text-black"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -108,7 +108,7 @@
                   <div class="relative pl-14">
                     <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +116,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white dark:text-black"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -134,7 +134,7 @@
                   <div class="relative pl-14">
                     <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -142,7 +142,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white dark:text-black"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -160,7 +160,7 @@
                   <div class="relative pl-14">
                     <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -168,7 +168,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 32c9356b..15125cc2 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -410,7 +410,7 @@
                       viewBox="0 0 1024 1024"
                       ><g transform="rotate(-90 512 512)"
                         ><path
-                          fill="currentColor"
+                          fill={$mode === "light" ? "#2C6288" : "white"}
                           d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
                         /></g
                       ></svg
@@ -473,7 +473,7 @@
                       ></g><g id="SVGRepo_iconCarrier">
                         <path
                           d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z"
-                          fill="currentColor"
+                          fill={$mode === "light" ? "#2C6288" : "white"}
                         ></path>
                       </g></svg
                     >
@@ -495,7 +495,7 @@
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                fill="currentColor"
+                                fill={$mode === "light" ? "#2C6288" : "white"}
                                 d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                               /></svg
                             >
@@ -505,7 +505,7 @@
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                fill="currentColor"
+                                fill={$mode === "light" ? "#2C6288" : "white"}
                                 d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                               /></svg
                             >
@@ -518,11 +518,11 @@
                         >
                           {#if isTickerIncluded}
                             <svg
-                              class="w-6 h-6 inline-block text-muted dark:text-white"
+                              class="w-6 h-6 inline-block"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                fill="currentColor"
+                                fill={$mode === "light" ? "#2C6288" : "white"}
                                 d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                               /></svg
                             >
@@ -532,7 +532,7 @@
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                fill="currentColor"
+                                fill={$mode === "light" ? "#2C6288" : "white"}
                                 d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                               /></svg
                             >
@@ -547,7 +547,7 @@
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 16 16"
                         ><path
-                          fill="currentColor"
+                          fill={$mode === "light" ? "#2C6288" : "white"}
                           d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                         /></svg
                       >
@@ -616,7 +616,9 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="currentColor"
+                                        fill={$mode === "light"
+                                          ? "#2C6288"
+                                          : "white"}
                                         d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                       /></svg
                                     >
@@ -626,7 +628,9 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="currentColor"
+                                        fill={$mode === "light"
+                                          ? "#2C6288"
+                                          : "white"}
                                         d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                                       /></svg
                                     >
@@ -648,7 +652,9 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="currentColor"
+                                        fill={$mode === "light"
+                                          ? "#2C6288"
+                                          : "white"}
                                         d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                       /></svg
                                     >
@@ -658,7 +664,9 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="currentColor"
+                                        fill={$mode === "light"
+                                          ? "#2C6288"
+                                          : "white"}
                                         d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                                       /></svg
                                     >
@@ -680,7 +688,7 @@
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 16 16"
                                 ><path
-                                  fill="currentColor"
+                                  fill={$mode === "light" ? "#2C6288" : "white"}
                                   d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                                 /></svg
                               >
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
index 6eb9098e..c3857cb0 100644
--- a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
@@ -2,23 +2,11 @@
   import { displayCompanyName, stockTicker, screenWidth } from "$lib/store";
   import Infobox from "$lib/components/Infobox.svelte";
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
-  import { Chart } from "svelte-echarts";
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart, GaugeChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
   import SEO from "$lib/components/SEO.svelte";
 
   export let data;
-  use([
-    LineChart,
-    GaugeChart,
-    BarChart,
-    GridComponent,
-    TooltipComponent,
-    CanvasRenderer,
-  ]);
 
   const price = data?.getStockQuote?.price?.toFixed(2) || 0;
 
@@ -56,82 +44,158 @@
     // Determine the value based on the consensus rating
     switch (consensusRating) {
       case "Strong Sell":
-        value = 0;
-        break;
-      case "Sell":
-        value = 0.25;
-        break;
-      case "Hold":
         value = 0.5;
         break;
+      case "Sell":
+        value = 1.5;
+        break;
+      case "Hold":
+        value = 2.5;
+        break;
       case "Buy":
-        value = 0.75;
+        value = 3.5;
         break;
       case "Strong Buy":
-        value = 1;
+        value = 4.5;
         break;
       default:
         value = 0.5;
         break;
     }
-    const option = {
-      silent: true,
-      animation: false,
+
+    const options = {
+      legend: {
+        enabled: false,
+      },
+      credits: {
+        enabled: false,
+      },
+      chart: {
+        type: "gauge",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        animation: false,
+      },
+      title: {
+        text: null,
+      },
+      yAxis: {
+        min: 0,
+        max: 5,
+        tickPosition: "inside",
+        tickLength: 20,
+        tickWidth: 0,
+        minorTickInterval: null,
+        lineWidth: 0,
+        // Remove numeric tick labels
+        labels: {
+          enabled: false,
+        },
+        plotBands: [
+          {
+            from: 0,
+            to: 1,
+            color: "#9E190A",
+            thickness: 40,
+            borderRadius: "0px",
+          },
+          {
+            from: 1,
+            to: 2,
+            color: "#D9220E",
+            thickness: 40,
+            borderRadius: "0px",
+          },
+          {
+            from: 2,
+            to: 3,
+            color: "#f5b700",
+            thickness: 40,
+            borderRadius: "0px",
+          },
+          {
+            from: 3,
+            to: 4,
+            color: "#31B800",
+            thickness: 40,
+            borderRadius: "0px",
+          },
+          {
+            from: 4,
+            to: 5,
+            color: "#008A00",
+            thickness: 40,
+            borderRadius: "0px",
+          },
+        ],
+      },
+      pane: {
+        startAngle: -90,
+        endAngle: 89.9,
+        background: null,
+        center: ["50%", "50%"],
+        size: "70%",
+      },
       series: [
         {
-          type: "gauge",
-          startAngle: 180,
-          endAngle: 0,
-          center: ["50%", "45%"],
-          radius: "70%",
-          min: 0,
-          max: 1,
-          splitNumber: 4,
-          axisLine: {
-            lineStyle: {
-              width: 25,
-              color: [
-                [0.2, "#9E190A"],
-                [0.4, "#D9220E"],
-                [0.6, "#FF9E21"],
-                [0.8, "#31B800"],
-                [1, "#008A00"],
-              ],
+          name: "Rating",
+          data: [value],
+          animation: false,
+          dataLabels: {
+            enabled: true,
+            useHTML: true,
+            borderWidth: 0,
+            backgroundColor: "transparent",
+            style: {
+              textOutline: "none",
+              fontSize: "16px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              const rating = this.y;
+              let ratingText = "";
+              let textColor = "";
+
+              if (rating < 1) {
+                ratingText = "Strong Sell";
+                textColor = "#D9220E";
+              } else if (rating < 2) {
+                ratingText = "Sell";
+                textColor = "#D9220E";
+              } else if (rating < 3) {
+                ratingText = "Hold";
+                textColor = "#f5b700";
+              } else if (rating < 4) {
+                ratingText = "Buy";
+                textColor = "#31B800";
+              } else {
+                ratingText = "Strong Buy";
+                textColor = "#31B800";
+              }
+
+              // "Analyst Consensus:" in white, rating in color
+              return `
+          <span class="text-lg">Analyst Consensus: </span>
+          <span class="text-lg" style="color:${textColor};">${ratingText}</span>
+        `;
             },
           },
-          pointer: {
-            icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
-            length: "25%",
-            width: 20,
-            offsetCenter: [0, "-30%"],
-            itemStyle: {
-              color: "#fff",
-            },
+          dial: {
+            radius: "80%",
+            backgroundColor: "#2A2E39",
+            baseWidth: 12,
+            baseLength: "0%",
+            rearLength: "0%",
           },
-          axisTick: {
-            length: 0,
+          pivot: {
+            backgroundColor: "#2A2E39",
+            radius: 8,
           },
-          splitLine: {
-            length: 0,
-          },
-          axisLabel: {
-            show: false,
-          },
-          detail: {
-            show: false, // Hide the numerical value display
-          },
-          data: [
-            {
-              value: value,
-              label: {
-                show: false, // Hide the data label
-              },
-            },
-          ],
         },
       ],
     };
-    return option;
+
+    return options;
   }
 
   function getPriceForecastChart() {
@@ -201,18 +265,18 @@
         },
       },
       chart: {
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
         animation: false,
       },
       title: {
-        text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-400">
+        text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-600 dark:text-gray-400">
           <h3 class="text-left">${$screenWidth && $screenWidth < 640 ? "Past Year" : "Past 12 Months"}</h3>
           <h3 class="text-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3>
          </div>`,
         style: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
           width: "100%",
         },
         verticalAlign: "top",
@@ -220,12 +284,12 @@
       },
       xAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         type: "datetime",
         endOnTick: false,
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
           },
           formatter: function () {
             const date = new Date(this.value);
@@ -242,15 +306,14 @@
         },
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
           },
           formatter: function () {
             return `$${this.value.toFixed(0)}`;
           },
         },
         gridLineWidth: 1,
-        gridLineColor: "#111827",
-        tickInterval: 20, // Adjust this value to reduce step size
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
       },
 
       series: [
@@ -258,7 +321,7 @@
           animation: false,
           name: "Historical",
           data: processedHistorical,
-          color: "#fff",
+          color: $mode === "light" ? "#007050" : "#fff",
           marker: {
             enabled: true,
             symbol: "circle",
@@ -280,7 +343,7 @@
           animation: false,
           name: "Average",
           data: forecastAvg,
-          color: "#fff",
+          color: $mode === "light" ? "#007050" : "#fff",
           dashStyle: "Dash",
           marker: {
             enabled: false,
@@ -297,6 +360,93 @@
           },
         },
       ],
+      /*
+      annotations: [
+        {
+          labels: [
+            {
+              point: {
+                x: forecastHigh[forecastHigh.length - 1][0], // Last X (timestamp)
+                y: forecastHigh[forecastHigh.length - 1][1], // Last Y (Average value)
+                xAxis: 0,
+                yAxis: 0,
+              },
+              text: `<b>High</b><br><span class="text-sm">$${forecastHigh[forecastHigh.length - 1][1]}</span>`,
+              useHTML: true,
+              style: {
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                borderColor: "rgba(255, 255, 255, 0.2)",
+                borderWidth: 1,
+                fontSize: "12px",
+                fontWeight: "bold",
+              },
+              align: "left",
+              verticalAlign: "middles",
+              x: -10,
+              y: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.8)",
+              borderColor: "rgba(255, 255, 255, 0.2)",
+              borderWidth: 1,
+              padding: 8,
+              shape: "",
+            },
+            {
+              point: {
+                x: forecastAvg[forecastAvg.length - 1][0], // Last X (timestamp)
+                y: forecastAvg[forecastAvg.length - 1][1], // Last Y (Average value)
+                xAxis: 0,
+                yAxis: 0,
+              },
+              text: `<b>Average</b><br><span>$${forecastAvg[forecastAvg.length - 1][1]}</span>`,
+              useHTML: true,
+              style: {
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                borderColor: "rgba(255, 255, 255, 0.2)",
+                borderWidth: 1,
+                fontSize: "12px",
+                fontWeight: "bold",
+              },
+              align: "right",
+              verticalAlign: "middle",
+              x: -10,
+              y: 30,
+              backgroundColor: "rgba(0, 0, 0, 0.8)",
+              borderColor: "rgba(255, 255, 255, 0.2)",
+              borderWidth: 1,
+              padding: 5,
+              shape: "",
+            },
+            {
+              point: {
+                x: forecastLow[forecastLow.length - 1][0], // Last X (timestamp)
+                y: forecastLow[forecastLow.length - 1][1], // Last Y (Average value)
+                xAxis: 0,
+                yAxis: 0,
+              },
+              text: `<b>Low</b><br><span>$${forecastLow[forecastLow.length - 1][1]}</span>`,
+              useHTML: true,
+              style: {
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                borderColor: "rgba(255, 255, 255, 0.2)",
+                borderWidth: 1,
+                fontSize: "12px",
+                fontWeight: "bold",
+              },
+              align: "top",
+              verticalAlign: "middle",
+              x: -10,
+              y: -40,
+              backgroundColor: "rgba(0, 0, 0, 0.8)",
+              borderColor: "rgba(255, 255, 255, 0.2)",
+              borderWidth: 1,
+              padding: 5,
+              shape: "",
+            },
+          ],
+        },
+      ],
+      */
+
       legend: {
         enabled: false,
       },
@@ -307,8 +457,15 @@
     return options;
   }
 
-  let optionsPieChart = getPieChart() || null;
-  let config = getPriceForecastChart() || null;
+  let optionsPieChart = null;
+  let config = null;
+
+  $: {
+    if ($mode) {
+      optionsPieChart = getPieChart() || null;
+      config = getPriceForecastChart() || null;
+    }
+  }
 </script>
 
 <SEO
@@ -316,7 +473,7 @@
   description={`Discover our AI-powered forecast for ${$displayCompanyName} (${$stockTicker}). Get in-depth analyst ratings, price targets, upgrades, and downgrades from top Wall Street experts. Stay ahead of market trends and make smarter investment decisions.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<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"
@@ -328,7 +485,7 @@
         {#if Object?.keys(data?.getPriceAnalysis)?.length > 0}
           <div class="w-full mb-6 mt-3">
             <div
-              class="rounded-sm border border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-600"
+              class="rounded-sm border border-gray-300 dark:border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-300 dark:divide-gray-600"
             >
               <div
                 class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0"
@@ -352,11 +509,10 @@
                 </div>
                 <div>
                   <div>
-                    <div class="app h-[160px]">
-                      {#if optionsPieChart !== null}
-                        <Chart {init} options={optionsPieChart} class="chart" />
-                      {/if}
-                    </div>
+                    <div
+                      class="max-h-[225px]"
+                      use:highcharts={optionsPieChart}
+                    ></div>
                     <div class="-mt-36 text-center text-xl font-semibold">
                       Analyst Consensus: <span
                         class="font-bold {['Strong Buy', 'Buy']?.includes(
@@ -373,18 +529,16 @@
               </div>
               <div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0">
                 <div
-                  class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
+                  class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
                   use:highcharts={config}
                 ></div>
                 <div
                   class="hide-scroll mb-1 mt-2 overflow-x-auto px-1.5 text-center md:mb-0 md:px-0 lg:mt-2"
                 >
-                  <table
-                    class="w-full text-right text-tiny text-white xs:text-sm sm:"
-                  >
+                  <table class="w-full text-right text-tiny xs:text-sm">
                     <thead
                       ><tr
-                        class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
+                        class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
                         ><th class="py-[3px] text-left font-semibold lg:py-0.5"
                           >Target</th
                         > <th class="font-semibold">Low</th>
@@ -395,7 +549,7 @@
                     >
                     <tbody
                       ><tr
-                        class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
+                        class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
                         ><td class="py-[3px] text-left lg:py-0.5">Price</td>
                         <td>${lowPriceTarget}</td>
                         <td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td>
@@ -406,22 +560,26 @@
                         <td
                           class={lowChange > 0
                             ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                            : "text-[#FF2F1F]"}>{lowChange}%</td
+                            : "text-red-600 dark:text-[#FF2F1F]"}
+                          >{lowChange}%</td
                         >
                         <td
                           class={avgChange > 0
                             ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                            : "text-[#FF2F1F]"}>{avgChange}%</td
+                            : "text-red-600 dark:text-[#FF2F1F]"}
+                          >{avgChange}%</td
                         >
                         <td
                           class={medianChange > 0
                             ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                            : "text-[#FF2F1F]"}>{medianChange}%</td
+                            : "text-red-600 dark:text-[#FF2F1F]"}
+                          >{medianChange}%</td
                         >
                         <td
                           class={highChange > 0
                             ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                            : "text-[#FF2F1F]"}>{highChange}%</td
+                            : "text-red-600 dark:text-[#FF2F1F]"}
+                          >{highChange}%</td
                         ></tr
                       ></tbody
                     >
@@ -437,20 +595,3 @@
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
index aa388568..6e09d92a 100644
--- a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
@@ -196,9 +196,7 @@
   description={`A list of analyst ratings for ${$displayCompanyName} (${$stockTicker})} stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
 />
 
-<section
-  class="bg-default overflow-hidden text-white h-full min-h-screen mb-40 sm:mb-0 w-full"
->
+<section class=" overflow-hidden h-full min-h-screen mb-40 sm:mb-0 w-full">
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
@@ -223,7 +221,7 @@
                 class="inline-flex justify-center w-full rounded-md sm:w-auto"
               >
                 <div
-                  class="bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  class="bg-gray-300 dark:bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                 >
                   {#each tabs as item, i}
                     {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@@ -238,7 +236,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
                           >
@@ -261,7 +259,7 @@
                           class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
                           i
                             ? 'text-black'
-                            : 'text-white'}"
+                            : ''}"
                         >
                           {item.title}
                         </span>
@@ -275,10 +273,12 @@
         </div>
 
         <div
-          class="mb-4 grid grid-cols-2 grid-rows-2 divide-contrast rounded-md border border-gray-600 md:grid-cols-4 md:grid-rows-1 md:divide-x"
+          class="mb-4 grid grid-cols-2 grid-rows-2 divide-contrast rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-4 md:grid-rows-1 md:divide-x"
         >
-          <div class="p-4 bp:p-5 sm:p-6 border-r border-gray-600">
-            <div class="text-[1rem] font-normal text-white">Total Analysts</div>
+          <div
+            class="p-4 bp:p-5 sm:p-6 border-r border-gray-300 dark:border-gray-600"
+          >
+            <div class="text-[1rem] font-normal">Total Analysts</div>
 
             <div
               class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
@@ -286,10 +286,10 @@
               {numOfAnalyst}
             </div>
           </div>
-          <div class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-gray-600">
-            <div class="text-[1rem] font-normal text-white">
-              Consensus Rating
-            </div>
+          <div
+            class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-gray-300 dark:border-gray-600"
+          >
+            <div class="text-[1rem] font-normal">Consensus Rating</div>
             <div
               class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
             >
@@ -297,9 +297,9 @@
             </div>
           </div>
           <div
-            class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-t md:border-t-0 border-gray-600"
+            class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-t md:border-t-0 border-gray-300 dark:border-gray-600"
           >
-            <div class="text-[1rem] font-normal text-white">Price Target</div>
+            <div class="text-[1rem] font-normal">Price Target</div>
             <div
               class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
             >
@@ -309,16 +309,16 @@
             </div>
           </div>
           <div
-            class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0 border-l border-gray-600 md:border-0"
+            class="p-4 bp:p-5 sm:p-6 border-t border-gray-300 dark:border-gray-600 md:border-0 border-l border-gray-300 dark:border-gray-600 md:border-0"
           >
-            <div class="text-[1rem] font-normal text-white">Upside</div>
+            <div class="text-[1rem] font-normal">Upside</div>
             <div
               class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl {changesPercentage >=
               0
-                ? "before:content-['+'] after:content-['%'] text-[#00FC50]"
+                ? "before:content-['+'] after:content-['%'] text-green-600 dark:text-[#00FC50]"
                 : changesPercentage < 0
-                  ? "after:content-['%'] text-[#FF2F1F]"
-                  : 'text-white'}"
+                  ? "after:content-['%'] text-red-600 dark:text-[#FF2F1F]"
+                  : ''}"
             >
               {changesPercentage}
             </div>
@@ -336,44 +336,32 @@
             class="mt-10 mb-2 items-center justify-between py-0 md:mt-8 md:flex md:py-2"
           >
             <div class="flex justify-between md:block">
-              <h3 class="text-xl sm:text-2xl text-white font-bold">
-                Ratings History
-              </h3>
+              <h3 class="text-xl sm:text-2xl font-bold">Ratings History</h3>
             </div>
           </div>
 
           <div class=" w-full m-auto mb-4 overflow-x-auto lg:overflow-hidden">
             <table
-              class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
+              class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
             >
-              <thead class="bg-default">
+              <thead class="text-muted dark:text-white">
                 <tr>
-                  <td class="text-white font-semibold text-sm text-start"
-                    >Analyst</td
-                  >
-                  <td class="text-white font-semibold text-sm text-start"
-                    >Firm</td
-                  >
-                  <td class="text-white font-semibold text-sm text-end"
-                    >Rating</td
-                  >
-                  <td class="text-white font-semibold text-sm text-end"
-                    >Action</td
-                  >
-                  <td class="text-white font-semibold text-sm text-end"
-                    >Price Target</td
-                  >
+                  <td class=" font-semibold text-sm text-start">Analyst</td>
+                  <td class=" font-semibold text-sm text-start">Firm</td>
+                  <td class=" font-semibold text-sm text-end">Rating</td>
+                  <td class=" font-semibold text-sm text-end">Action</td>
+                  <td class=" font-semibold text-sm text-end">Price Target</td>
 
-                  <td class="text-white font-semibold text-sm text-end">Date</td
-                  >
+                  <td class=" font-semibold text-sm text-end">Date</td>
                 </tr>
               </thead>
               <tbody>
                 {#each ["Pro", "Plus"]?.includes(data?.user?.tier) ? historyList : historyList?.slice(0, 3) as item, index}
                   <tr
                     class=" {latestInfoDate(item?.date)
-                      ? 'bg-[#F9AB00]/10'
-                      : 'odd:bg-odd '}  {index + 1 ===
+                      ? 'bg-blue-100 dark:bg-[#F9AB00]/10  shadow'
+                      : 'dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd'}  {index +
+                      1 ===
                       historyList?.slice(0, 3)?.length &&
                     !['Pro', 'Plus']?.includes(data?.user?.tier)
                       ? 'opacity-[0.1]'
@@ -387,7 +375,7 @@
                           href={item?.analystId !== null
                             ? `/analysts/${item?.analystId}`
                             : "#"}
-                          class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
+                          class="text-blue-500 sm:hover:text-muted dark:sm:hover: dark:text-blue-400"
                           >{item?.analyst_name}
                         </a>
 
@@ -407,7 +395,7 @@
                               </svg>
                             {:else}
                               <svg
-                                class="w-3 h-3 text-gray-300 dark:text-gray-500"
+                                class="w-3 h-3 text-gray-400 dark:text-gray-500"
                                 aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="currentColor"
@@ -430,7 +418,7 @@
                     </td>
 
                     <td
-                      class="text-sm sm:text-[1rem] whitespace-nowrap text-start text-white"
+                      class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
                     >
                       {item?.analyst?.length > charNumber
                         ? item?.analyst?.slice(0, charNumber) + "..."
@@ -438,7 +426,7 @@
                     </td>
 
                     <td
-                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white"
+                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end"
                     >
                       <span
                         class=" {['Strong Buy', 'Buy']?.includes(
@@ -458,7 +446,7 @@
                     </td>
 
                     <td
-                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white"
+                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end"
                     >
                       {item?.action_company?.replace(
                         "Initiates Coverage On",
@@ -467,7 +455,7 @@
                     </td>
 
                     <td
-                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white font-semibold"
+                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end font-semibold"
                     >
                       <div class="flex flex-col items-end">
                         <div class="flex flex-row items-center">
@@ -503,12 +491,12 @@
                     </td>
 
                     <td
-                      class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                      class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                     >
                       <div class="flex flex-col items-end">
-                        {#if latestInfoDate(item?.date)}
+                        {#if !latestInfoDate(item?.date)}
                           <label
-                            class="bg-[#fff] text-black font-semibold text-xs rounded px-2 py-0.5 ml-3 mb-1"
+                            class="border-gray-300 shadow-sm bg-blue-100 dark:bg-[#fff] text-black font-semibold text-xs rounded px-2 py-0.5 ml-3 mb-1"
                           >
                             New
                           </label>
@@ -529,7 +517,7 @@
         {:else if activeIdx === 1}
           <div class="w-full flex justify-start items-center m-auto mt-10 mb-6">
             <div
-              class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4"
+              class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-300 dark:border-gray-600 p-4"
             >
               <svg
                 class="w-5 h-5 inline-block sm:mr-1 shrink-0"
@@ -553,12 +541,10 @@
           <div class="mt-4 py-6 xl:mt-10 border-t border-gray-200">
             <div class="mx-auto max-w-7xl px-3 xs:px-6 lg:px-8">
               <div class="mx-auto max-w-2xl md:text-center">
-                <h3
-                  class="mt-2 text-2xl font-bold tracking-tight text-white bp:text-3xl"
-                >
+                <h3 class="mt-2 text-2xl font-bold tracking-tight bp:text-3xl">
                   Analyst Star Rankings
                 </h3>
-                <p class="mt-3 leading-8 text-muted dark:text-faded xl:text-lg">
+                <p class="mt-3 leading-8 xl:text-lg">
                   Our analyst star rankings are based on these four factors
                 </p>
               </div>
@@ -567,11 +553,9 @@
                   class="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 lg:max-w-none lg:grid-cols-4 lg:gap-y-16"
                 >
                   <div class="relative pl-14">
-                    <dt
-                      class=" font-semibold leading-4 text-white md:leading-7"
-                    >
+                    <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -579,7 +563,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white dark:text-black"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -589,16 +573,14 @@
                       </div>
                       Success Rate
                     </dt>
-                    <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                    <dd class="mt-2 leading-7">
                       The percentage of ratings that are profitable.
                     </dd>
                   </div>
                   <div class="relative pl-14">
-                    <dt
-                      class=" font-semibold leading-4 text-white md:leading-7"
-                    >
+                    <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -606,7 +588,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white dark:text-black"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -616,17 +598,15 @@
                       </div>
                       Average Return
                     </dt>
-                    <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                    <dd class="mt-2 leading-7">
                       The average percentage return within one year of the
                       rating.
                     </dd>
                   </div>
                   <div class="relative pl-14">
-                    <dt
-                      class=" font-semibold leading-4 text-white md:leading-7"
-                    >
+                    <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -634,7 +614,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white dark:text-black"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -644,17 +624,15 @@
                       </div>
                       Rating Count
                     </dt>
-                    <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                    <dd class="mt-2 leading-7">
                       The more ratings the analyst has provided, the higher the
                       score.
                     </dd>
                   </div>
                   <div class="relative pl-14">
-                    <dt
-                      class=" font-semibold leading-4 text-white md:leading-7"
-                    >
+                    <dt class=" font-semibold leading-4 md:leading-7">
                       <div
-                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -662,7 +640,7 @@
                           viewBox="0 0 24 24"
                           stroke-width="1.5"
                           stroke="currentColor"
-                          class="h-6 w-6 text-black"
+                          class="h-6 w-6 text-white dark:text-black"
                           ><path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -672,7 +650,7 @@
                       </div>
                       Recency
                     </dt>
-                    <dd class="mt-2 leading-7 text-muted dark:text-faded">
+                    <dd class="mt-2 leading-7">
                       Ratings provided within the past year contribute to a
                       higher score.
                     </dd>
diff --git a/src/routes/stocks/[tickerID]/options/+layout.svelte b/src/routes/stocks/[tickerID]/options/+layout.svelte
index 3240cd89..92ddc03f 100644
--- a/src/routes/stocks/[tickerID]/options/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/+layout.svelte
@@ -58,21 +58,17 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main
-          class="w-full {displaySubSection === 'overview'
-            ? ''
-            : 'lg:w-3/4 lg:pr-10'}"
-        >
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <nav
-            class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
+            class="sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/stocks/${$stockTicker}/options`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -81,8 +77,8 @@
                 on:click={() => changeSubSection("unusual-activity")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'unusual-activity'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Unusual Activity
               </a>
@@ -91,8 +87,8 @@
                 on:click={() => changeSubSection("hottest-contracts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'hottest-contracts'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Hottest Contracts
               </a>
@@ -101,8 +97,8 @@
                 on:click={() => changeSubSection("volatility")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'volatility'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Volatility
               </a>
@@ -110,8 +106,8 @@
                 href={`/stocks/${$stockTicker}/options/oi`}
                 on:click={() => changeSubSection("oi")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 OI
               </a>
@@ -120,8 +116,8 @@
                 href={`/stocks/${$stockTicker}/options/gex`}
                 on:click={() => changeSubSection("gex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 GEX
               </a>
@@ -129,8 +125,8 @@
                 href={`/stocks/${$stockTicker}/options/dex`}
                 on:click={() => changeSubSection("dex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 DEX
               </a>
@@ -141,11 +137,7 @@
           </div>
         </main>
 
-        <aside
-          class="{displaySubSection === 'overview'
-            ? 'hidden'
-            : 'hidden lg:block'} relative fixed w-1/4 ml-4"
-        >
+        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <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"
           >
@@ -161,7 +153,7 @@
                   class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
                 />
               </div>
-              <span class="p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Get realtime options flow and customize your screener
               </span>
             </a>
@@ -182,7 +174,7 @@
                   class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
                 />
               </div>
-              <span class="p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Build your Stock Screener to find profitable stocks.
               </span>
             </a>
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 702fd00e..d2c13bfa 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -3,7 +3,7 @@
   import DailyStats from "$lib/components/Options/DailyStats.svelte";
   import TickerFlow from "$lib/components/Options/TickerFlow.svelte";
 
-  import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
+  import { abbreviateNumber, monthNames } from "$lib/utils";
   import { onMount } from "svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
@@ -90,7 +90,7 @@
               marker +
               param.seriesName +
               ": " +
-              abbreviateNumberWithColor(param.value, false, true) +
+              abbreviateNumber(param.value, false, true) +
               "<br/>";
           });
 
@@ -282,7 +282,7 @@
   description={`Explore unusual options activity for ${$displayCompanyName} (${$stockTicker}), providing insights into market sentiment and potential stock movement.`}
 />
 
-<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"
@@ -318,15 +318,15 @@
             </select>
           </div>
 
-          <div class="app w-full bg-default">
+          <div class="app w-full ">
             {#if filteredList?.length !== 0}
               <Chart {init} {options} class="chart" />
             {:else}
               <span
-                class="text-xl text-white m-auto flex justify-center items-center h-full"
+                class="text-xl  m-auto flex justify-center items-center h-full"
               >
                 <div
-                  class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
+                  class=" text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
                 >
                   <svg
                     class="w-5 h-5 inline-block sm:mr-2 shrink-0"
@@ -345,64 +345,42 @@
           -->
 
           {#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 {$stockTicker} Data
             </h3>
 
             <div class="flex justify-start items-center m-auto overflow-x-auto">
               <table
-                class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-3"
               >
-                <thead class="bg-default">
+                <thead class="text-muted dark:text-white">
                   <tr class="">
-                    <td class="text-white font-semibold text-sm text-start"
-                      >Date</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >% Change</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >P/C</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >Volume</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >C Volume</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >P Volume</td
-                    >
+                    <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="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Vol/30D</td
                     >
                       -->
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >🐻/🐂 Prem</td
                     >
                   -->
-                    <td class="text-white font-semibold text-sm text-end"
-                      >Total OI</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >OI Change</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >% OI Change</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >C Prem</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >P Prem</td
-                    >
+                    <td class=" font-semibold text-sm text-end">Total OI</td>
+                    <td class=" font-semibold text-sm text-end">OI Change</td>
+                    <td class=" font-semibold text-sm text-end">% OI Change</td>
+                    <td class=" font-semibold text-sm text-end">C Prem</td>
+                    <td class=" font-semibold text-sm text-end">P Prem</td>
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Net Prem</td
                     >
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Total Prem</td
                     >
                       -->
@@ -411,32 +389,28 @@
                 <tbody>
                   {#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
                     <tr
-                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800 {index +
+                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                         1 ===
                         optionList?.slice(0, 3)?.length &&
                       !['Pro']?.includes(data?.user?.tier)
                         ? 'opacity-[0.1]'
                         : ''}"
                     >
-                      <td class="text-white text-sm sm:text-[1rem] text-start">
+                      <td class=" text-sm sm:text-[1rem] text-start">
                         {formatDate(item?.date)}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
                           <span class="text-green-600 dark:text-[#00FC50]"
                             >+{item?.changesPercentage >= 1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentage,
-                                )
+                              ? abbreviateNumber(item?.changesPercentage)
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
                           <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentage,
-                                )
+                              ? abbreviateNumber(item?.changesPercentage)
                               : item?.changesPercentage?.toFixed(2)}%
                           </span>
                         {:else}
@@ -444,11 +418,11 @@
                         {/if}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
+                      <td class="text-sm sm:text-[1rem] text-end">
                         {item?.putCallRatio}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
+                      <td class="text-sm sm:text-[1rem] text-end">
                         {item?.volume?.toLocaleString("en-US")}
                       </td>
 
@@ -464,7 +438,7 @@
                         {item?.put_volume?.toLocaleString("en-US")}
                       </td>
                       <!--
-                      <td class="text-sm sm:text-[1rem] text-white text-end">
+                      <td class="text-sm sm:text-[1rem]  text-end">
                         {item?.avgVolumeRatio?.toFixed(2)}
                       </td>
                       -->
@@ -512,24 +486,24 @@
                           >
                             <div class="flex justify-between space-x-4">
                               <div
-                                class="space-y-1 flex flex-col items-start text-white"
+                                class="space-y-1 flex flex-col items-start "
                               >
                                 <div>
-                                  Bearish: {@html abbreviateNumberWithColor(
+                                  Bearish: {@html abbreviateNumber(
                                     item?.premium_ratio[0],
                                     false,
                                     true,
                                   )}
                                 </div>
                                 <div>
-                                  Neutral: {@html abbreviateNumberWithColor(
+                                  Neutral: {@html abbreviateNumber(
                                     item?.premium_ratio[1],
                                     false,
                                     true,
                                   )}
                                 </div>
                                 <div>
-                                  Bullish: {@html abbreviateNumberWithColor(
+                                  Bullish: {@html abbreviateNumber(
                                     item?.premium_ratio[2],
                                     false,
                                     true,
@@ -542,15 +516,15 @@
                       </td>
                       -->
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(
                           item?.total_open_interest,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changeOI >= 0}
                           <span class="text-green-600 dark:text-[#00FC50]"
                             >+{item?.changeOI?.toLocaleString("en-US")}</span
@@ -560,58 +534,50 @@
                             >{item?.changeOI?.toLocaleString("en-US")}
                           </span>
                         {:else}
-                          <span class="text-white"> n/a </span>
+                          <span class=""> n/a </span>
                         {/if}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentageOI >= 0}
                           <span class="text-green-600 dark:text-[#00FC50]"
                             >+{item?.changesPercentageOI >= 1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentageOI,
-                                )
+                              ? abbreviateNumber(item?.changesPercentageOI)
                               : item?.changesPercentageOI?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentageOI < 0}
                           <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentageOI <= -1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentageOI,
-                                )
+                              ? abbreviateNumber(item?.changesPercentageOI)
                               : item?.changesPercentageOI?.toFixed(2)}%
                           </span>
                         {:else}
-                          <span class="text-white"> n/a </span>
+                          <span class=""> n/a </span>
                         {/if}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(
                           item?.call_premium,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
-                          item?.put_premium,
-                          false,
-                          true,
-                        )}
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(item?.put_premium, false, true)}
                       </td>
                       <!--
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end ">
+                        {@html abbreviateNumber(
                           item?.net_premium,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end ">
+                        {@html abbreviateNumber(
                           item?.total_premium,
                           false,
                           true,