From b34a7c16c4de17dff241d09c95e334c8408f83f8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 9 Mar 2025 10:40:40 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/AIScore.svelte           | 12 ++--
 src/lib/components/News.svelte              | 36 +++++-----
 src/lib/components/NextEarnings.svelte      | 16 ++---
 src/lib/components/Sidecard.svelte          | 62 ++++++++--------
 src/routes/affiliate-program/+page.svelte   | 80 +++++++++++++++------
 src/routes/stocks/[tickerID]/+layout.svelte | 76 ++++++++++----------
 src/routes/stocks/[tickerID]/+page.svelte   | 66 +++++++++--------
 7 files changed, 192 insertions(+), 156 deletions(-)

diff --git a/src/lib/components/AIScore.svelte b/src/lib/components/AIScore.svelte
index e6c7a1af..dec062f9 100644
--- a/src/lib/components/AIScore.svelte
+++ b/src/lib/components/AIScore.svelte
@@ -13,16 +13,14 @@
   }
 </script>
 
-<section class="overflow-hidden text-white">
+<section class="overflow-hidden text-muted dark:text-white">
   <main class="overflow-hidden">
     <div class="w-full">
       <div
-        class="flex flex-col items-center w-auto p-4 sm:p-4 bg-default sm:bg-default rounded-md relative"
+        class="flex flex-col items-center w-auto p-4 sm:p-4 rounded-md relative"
       >
         <div class="relative">
-          <h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">
-            AI Score
-          </h3>
+          <h3 class="text-center text-sm sm:text-[1rem] mb-2">AI Score</h3>
         </div>
 
         <div class="flex flex-row items-center justify-between">
@@ -77,7 +75,7 @@
               class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
             >
               {#if ["Pro", "Plus"]?.includes(tier)}
-                <span class="text-center text-white text-xl font-semibold">
+                <span class="text-center text-xl font-semibold">
                   {score}
                 </span>
               {:else}
@@ -107,7 +105,7 @@
             </div>
           </div>
         </div>
-        <h4 class="text-center text-white text-sm mt-1 font-semibold">
+        <h4 class="text-center text-sm mt-1 font-semibold">
           {#if ["Pro", "Plus"]?.includes(tier)}
             {#if score === 10}
               Strong Buy
diff --git a/src/lib/components/News.svelte b/src/lib/components/News.svelte
index 90ebd77f..234159c4 100644
--- a/src/lib/components/News.svelte
+++ b/src/lib/components/News.svelte
@@ -102,13 +102,13 @@
   }
 </script>
 
-<div class="space-y-3 overflow-hidden">
+<div class="space-y-3 overflow-hidden text-muted dark:text-white">
   <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
     <div class="flex flex-col items-center w-full mb-1">
       <div class="flex flex-row justify-start mr-auto items-center">
         <div class="flex flex-row items-center">
           <label
-            class="mr-1 cursor-pointer flex flex-row items-center text-white text-2xl font-bold"
+            class="mr-1 cursor-pointer flex flex-row items-center text-2xl font-bold"
           >
             <h2>News</h2>
           </label>
@@ -116,9 +116,9 @@
       </div>
     </div>
 
-    <div class=" mt-1 sm:mt-0 text-white">
+    <div class=" mt-1 sm:mt-0">
       <div
-        class="hflex flex-row items-center justify-between overflow-x-auto border-b border-gray-600 py-1.5"
+        class="hflex flex-row items-center justify-between overflow-x-auto border-b border-gray-300 dark:border-gray-600 py-1.5"
       >
         <ul
           class="hide-scroll mb-0.5 flex flex-row overflow-x-auto whitespace-nowrap text-lg"
@@ -126,9 +126,9 @@
           <li>
             <button
               on:click={() => (displaySection = "all")}
-              class="rounded-md px-3 py-0.5 sm:hover:bg-secondary {displaySection ===
+              class="cursor-pointer rounded-md px-3 py-0.5 sm:hover:bg-blue-50 dark:sm:hover:bg-secondary {displaySection ===
               'all'
-                ? 'bg-secondary'
+                ? 'bg-blue-50 dark:bg-secondary'
                 : ''}">All</button
             >
           </li>
@@ -136,9 +136,9 @@
             <li>
               <button
                 on:click={() => (displaySection = "videos")}
-                class="rounded-md px-3 py-0.5 ml-2 sm:hover:bg-secondary {displaySection ===
+                class="ml-1 cursor-pointer rounded-md px-3 py-0.5 sm:hover:bg-blue-50 dark:sm:hover:bg-secondary {displaySection ===
                 'videos'
-                  ? 'bg-secondary'
+                  ? 'bg-blue-50 dark:bg-secondary'
                   : ''}">Videos</button
               >
             </li>
@@ -147,9 +147,9 @@
             <li>
               <button
                 on:click={() => getPressRelease()}
-                class="rounded-md px-3 py-0.5 ml-2 sm:hover:bg-secondary {displaySection ===
+                class="ml-1 cursor-pointer rounded-md px-3 py-0.5 sm:hover:bg-blue-50 dark:sm:hover:bg-secondary {displaySection ===
                 'press-releases'
-                  ? 'bg-secondary'
+                  ? 'bg-blue-50 dark:bg-secondary'
                   : ''}"
                 ><span class="inline sm:hidden">Press</span><span
                   class="hidden sm:inline">Press Releases</span
@@ -165,7 +165,7 @@
       {#if filteredNewsList?.length > 0}
         <div class="grid grid-cols-1 gap-2 pb-5 pt-5">
           {#each filteredNewsList as item, index (item.url)}
-            <div class="w-full flex flex-col bg-default rounded-md m-auto">
+            <div class="w-full flex flex-col rounded-md m-auto">
               {#if checkIfYoutubeVideo(item.url)}
                 {#if showVideo[index]}
                   <!-- Show the YouTube iframe when the user clicks play -->
@@ -196,17 +196,17 @@
                   </div>
                 {/if}
                 <div class="mt-3 w-full">
-                  <h3 class="text-sm text-white/80 truncate mb-2">
+                  <h3 class="text-sm dark:text-white/80 truncate mb-2">
                     {formatDate(item?.publishedDate)} &#183; {item?.site}
                   </h3>
                   <a
                     href={item?.url}
                     rel="noopener noreferrer"
                     target="_blank"
-                    class="text-lg sm:text-xl font-bold text-white"
+                    class="text-lg sm:text-xl font-bold"
                   >
                     {item?.title}
-                    <p class="text-white text-sm mt-2 font-normal">
+                    <p class=" text-sm mt-2 font-normal">
                       {item?.text?.length > 200
                         ? item?.text?.slice(0, 200) + "..."
                         : item?.text}
@@ -239,10 +239,10 @@
                       href={item?.url}
                       rel="noopener noreferrer"
                       target="_blank"
-                      class="text-lg sm:text-xl font-bold text-white"
+                      class="text-lg sm:text-xl font-bold"
                     >
                       {item?.title}
-                      <p class="text-white text-sm mt-2 font-normal">
+                      <p class=" text-sm mt-2 font-normal">
                         {item?.text?.length > 200
                           ? item?.text?.slice(0, 200) + "..."
                           : item?.text}
@@ -252,7 +252,9 @@
                 </div>
               {/if}
             </div>
-            <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
+            <hr
+              class="border-gray-300 dark:border-gray-600 w-full m-auto mt-5 mb-5"
+            />
           {/each}
         </div>
       {:else}
diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
index b39edc41..b51c9d8d 100644
--- a/src/lib/components/NextEarnings.svelte
+++ b/src/lib/components/NextEarnings.svelte
@@ -35,23 +35,21 @@
 </script>
 
 {#if Object?.keys(rawData)?.length !== 0}
-  <div class="space-y-3 overflow-hidden">
+  <div class="space-y-3 overflow-hidden text-muted dark:text-white">
     <!--Start Content-->
     <div class="w-auto lg:w-full flex flex-col m-auto">
       <div class="flex flex-col items-center w-full mb-3">
         <div class="flex flex-row justify-start mr-auto items-center">
           <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
           <div class="flex flex-row items-center">
-            <h3
-              class="mr-1 flex flex-row items-center text-white text-2xl font-bold"
-            >
+            <h3 class="mr-1 flex flex-row items-center text-2xl font-bold">
               Next Earnings Release
             </h3>
           </div>
         </div>
       </div>
 
-      <div class="text-white text-[1rem]">
+      <div class=" text-[1rem]">
         {$displayCompanyName} is scheduled to release its earnings on {new Date(
           rawData?.date ?? null,
         )?.toLocaleString("en-US", {
@@ -89,10 +87,10 @@
           >, reflecting a
           <span
             class="{revenueRatio >= 0 && revenueRatio !== 'Infinity'
-              ? "before:content-['+'] text-[#00FC50]"
+              ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
               : revenueRatio < 0 && revenueRatio !== 'Infinity'
-                ? 'text-[#FF2F1F]'
-                : 'text-white'} "
+                ? 'text-red-600 dark:text-[#FF2F1F]'
+                : 'text-muted dark:text-white'} "
             >{revenueRatio !== "Infinity"
               ? abbreviateNumber(revenueRatio) + "%"
               : "n/a"}</span
@@ -107,7 +105,7 @@
             <span class="font-semibold">{rawData?.epsEst}</span>, making a
             <span
               class="{epsRatio > 0
-                ? "before:content-['+'] text-[#00FC50]"
+                ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                 : 'text-[#FF2F1F]'} ">{epsRatio}%</span
             >
             {epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index ac12a2be..78d42a83 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -2,6 +2,7 @@
   import { stockTicker } from "$lib/store";
   import { sectorNavigation } from "$lib/utils";
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
   export let data;
 
@@ -62,15 +63,15 @@
     const options = {
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 250,
         animation: false,
       },
       title: {
-        text: `<div class="text-gray-200 mt-3  text-center font-normal text-2xl">Price Target: <span class="${changesPercentage >= 0 ? "text-[#00FC50]" : "text-[#FF2F1F]"}">$${priceTarget}</span></div>
-        <div class="text-gray-200  mb-2 text-center font-normal text-xl">(${changesPercentage}% ${changesPercentage >= 0 ? "upside" : "downside"})</div>
-        <div class="text-gray-200 text-center font-normal text-xl flex justify-center items-center">Analyst Consensus: <span class="ml-1 ${consensusRating === "Buy" ? "text-[#00FC50]" : consensusRating === "Sell" ? "text-[#FF2F1F]" : consensusRating === "Hold" ? "text-[#D5AB31]" : "text-white"}">${consensusRating ?? "n/a"}</span></div>`,
+        text: `<div class="text-muted dark:text-gray-200 mt-3  text-center font-normal text-2xl">Price Target: <span class="${changesPercentage >= 0 ? "text-green-500 dark:text-[#00FC50]" : "text-[#FF2F1F]"}">$${priceTarget}</span></div>
+        <div class="text-muted dark:text-gray-200  mb-2 text-center font-normal text-xl">(${changesPercentage}% ${changesPercentage >= 0 ? "upside" : "downside"})</div>
+        <div class="text-muted dark:text-gray-200 text-center font-normal text-xl flex justify-center items-center">Analyst Consensus: <span class="ml-1 ${consensusRating === "Buy" ? "text-green-500 dark:text-[#00FC50]" : consensusRating === "Sell" ? "text-red-500 dark:text-[#FF2F1F]" : consensusRating === "Hold" ? "text-orange-500 dark:text-[#D5AB31]" : "text-muted dark:text-white"}">${consensusRating ?? "n/a"}</span></div>`,
         style: {
           color: "white",
           // Using inline CSS for margin-top and margin-bottom
@@ -83,14 +84,17 @@
         gridLineWidth: 0,
         labels: {
           rotation: 0,
-          style: { color: "white", fontSize: "12.5px" },
+          style: {
+            color: $mode === "light" ? "black" : "white",
+            fontSize: "12.5px",
+          },
         },
       },
       yAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "black" : "white" },
           formatter: function () {
             return Math.floor(this.value); // Ensures whole numbers only
           },
@@ -148,7 +152,7 @@
   }
 
   $: {
-    if ($stockTicker) {
+    if ($stockTicker || $mode) {
       info = data?.getStockDeck;
       ipoDate =
         info?.ipoDate !== null && info?.ipoDate?.length > 0
@@ -198,69 +202,69 @@
   }
 </script>
 
-<div class="space-y-3">
+<div class="space-y-3 text-muted dark:text-white">
   <div class="h-auto w-full">
     <!--Start Content-->
     <div class="w-auto lg:w-full flex flex-col m-auto">
-      <h2 class="mb-2 text-2xl text-white font-semibold">
+      <h2 class="mb-2 text-2xl font-semibold">
         About {$stockTicker}
       </h2>
-      <p class="text-gray-200">
+      <p class="dark:text-gray-200">
         {snippet}
       </p>
       <div class="inline-block">
         <a
           href={`/stocks/${$stockTicker}/profile`}
-          class="w-full text-md mt-1 cursor-pointer sm:hover:text-white text-blue-400 sm:hover:underline"
+          class="w-full text-md mt-1 cursor-pointer sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400 sm:hover:underline"
         >
           [Show more]
         </a>
       </div>
 
       <div class="mt-3 grid grid-cols-2 gap-3 w-full">
-        <div class="col-span-1 text-gray-200">
+        <div class="col-span-1 dark:text-gray-200">
           <span class="block font-semibold">Industry</span>
           <a
             href={getIndustryHref(industry)}
-            class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+            class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
             >{industry}</a
           >
         </div>
-        <div class="col-span-1 text-gray-200">
+        <div class="col-span-1 dark:text-gray-200">
           <span class="block font-semibold">Sector</span>
           <a
             href={sectorNavigation?.find((item) => item?.title === sector)
               ?.link}
-            class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+            class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
             >{sector}</a
           >
         </div>
-        <div class="col-span-1 text-gray-200">
+        <div class="col-span-1 dark:text-gray-200">
           <span class="block font-semibold">IPO Date</span>
           <span>{ipoDate}</span>
         </div>
-        <div class="col-span-1 text-gray-200">
+        <div class="col-span-1 dark:text-gray-200">
           <span class="block font-semibold">Employees</span>
           <a
             href={`/stocks/${$stockTicker}/profile/employees`}
-            class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+            class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
             >{new Intl.NumberFormat("en")?.format(employees)}</a
           >
         </div>
-        <div class="col-span-1 text-gray-200">
+        <div class="col-span-1 dark:text-gray-200">
           <span class="block font-semibold">Stock Exchange</span>
           <span>{exchange}</span>
         </div>
-        <div class="col-span-1 text-gray-200">
+        <div class="col-span-1 dark:text-gray-200">
           <span class="block font-semibold">Ticker Symbol</span>
           <span>{$stockTicker}</span>
         </div>
         {#if website}
-          <div class="col-span-1 whitespace-nowrap text-gray-200">
+          <div class="col-span-1 whitespace-nowrap dark:text-gray-200">
             <span class="block font-semibold">Website</span>
             <a
               href={website}
-              class="sm:hover:text-white truncate text-blue-400"
+              class="sm:hover:text-muted dark:sm:hover:text-white truncate text-blue-500 dark:text-blue-400"
               target="_blank">{website}</a
             >
           </div>
@@ -268,7 +272,7 @@
       </div>
       <a
         href={`/stocks/${$stockTicker}/profile`}
-        class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
+        class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-white dark:text-black sm:hover:text-muted dark:sm:hover:bg-gray-300 bg-[#3C74D4] dark:bg-[#ffff] transition duration-100"
       >
         Full Company Profile
       </a>
@@ -286,8 +290,8 @@
     <div class="h-auto w-full">
       <!--Start Content-->
       <div class="w-auto lg:w-full flex flex-col m-auto pb-10">
-        <h2 class="mb-2 text-2xl text-white font-semibold">Analyst Forecast</h2>
-        <p class="text-gray-200">
+        <h2 class="mb-2 text-2xl font-semibold">Analyst Forecast</h2>
+        <p class="dark:text-gray-200">
           According to {numOfAnalyst} analyst ratings, the average rating for {$stockTicker}
           stock is "{consensusRating}." The 12-month stock price forecast is ${priceTarget},
           which is {changesPercentage > 0 ? "an increase" : "a decrease"} of {changesPercentage}%
@@ -295,13 +299,13 @@
         </p>
 
         <div
-          class="mt-3 border border-gray-700 rounded"
+          class="mt-3 border border-gray-300 dark:border-gray-700 rounded"
           use:highcharts={configAnalyst}
         ></div>
 
         <a
           href={`/stocks/${$stockTicker}/forecast/analyst`}
-          class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] font-semibold text-center text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
+          class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-white dark:text-black sm:hover:text-muted dark:sm:hover:bg-gray-300 bg-[#3C74D4] dark:bg-[#ffff] transition duration-100"
         >
           Stock Forecasts
         </a>
diff --git a/src/routes/affiliate-program/+page.svelte b/src/routes/affiliate-program/+page.svelte
index 4e707890..50220db5 100644
--- a/src/routes/affiliate-program/+page.svelte
+++ b/src/routes/affiliate-program/+page.svelte
@@ -72,8 +72,10 @@
   description="Join Stocknear's Affiliate Program and earn up to 20% commission on every sale. Refer customers and start earning cash today!"
 />
 
-<main class="text-white w-full">
-  <section class="border-b border-gray-600 sm:rounded-md w-full">
+<main class="text-muted dark:text-white w-full">
+  <section
+    class="border-b border-gray-200 dark:border-none shadow dark:border-gray-800 sm:rounded-md w-full bg-gray-100 dark:bg-gray-500/20"
+  >
     <div class="mx-auto max-w-7xl px-6 py-16 sm:py-2 md:px-8">
       <div class="text-center">
         <img
@@ -82,18 +84,17 @@
           alt="Stocknear Logo"
           loading="lazy"
         />
-        <h1 class="mt-1 text-4xl font-bold text-white sm:text-5xl lg:text-6xl">
+        <h1 class="mt-1 text-4xl font-bold sm:text-5xl lg:text-6xl">
           Affiliate Program
         </h1>
         <p
-          class="mx-auto mt-5 max-w-3xl text-xl leading-normal text-white md:mt-7 md:text-2xl"
+          class="mx-auto mt-5 max-w-3xl text-xl leading-normal md:mt-7 md:text-2xl"
         >
-          Become a Stocknear affiliate today &amp; earn up to <strong
-            >20%</strong
-          > on each sale!
+          Become a Stocknear affiliate today &amp; earn <strong>20%</strong> on each
+          sale!
         </p>
         <p
-          class="mx-auto max-w-3xl text-lg sm:text-xl leading-normal text-white mt-3 mb-8"
+          class="mx-auto max-w-3xl text-lg sm:text-xl leading-normal mt-3 mb-8"
         >
           Refer customers and start earning cash today!
         </p>
@@ -102,7 +103,7 @@
             href="https://affiliates.lemonsqueezy.com/programs/stocknear"
             rel="noopener noreferrer"
             target="_blank"
-            class="bg-purple-600 sm:hover:bg-purple-700 transition-colors ease-out duration-50 text-white px-5 py-3 text-lg font-semibold rounded-md"
+            class="text-white bg-[#3B82F6] sm:hover:bg-blue-700 transition-colors ease-out duration-50 px-5 py-3 text-lg font-semibold rounded-md"
           >
             Become an affiliate
           </a>
@@ -111,7 +112,7 @@
     </div>
   </section>
 
-  <section class="border-t border-gray-600 text-white">
+  <section class="border-t border-gray-300 dark:border-0 dark:border-gray-600">
     <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
       <dl
         class="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 md:space-y-0"
@@ -119,7 +120,7 @@
         <div class="relative">
           <dt>
             <div
-              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
             >
               <svg
                 class="w-6 h-6"
@@ -154,7 +155,7 @@
         <div class="relative">
           <dt>
             <div
-              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
             >
               <svg
                 class="w-6 h-6"
@@ -183,7 +184,7 @@
             </p>
           </dt>
           <dd class="ml-16 mt-2">
-            You can earn up to <strong>$24.00</strong> commission on every referral
+            You can earn up to <strong>$36.00</strong> commission on every referral
             that results in a successful sale. There's no limit to how much you can
             make by promoting us.
           </dd>
@@ -191,7 +192,44 @@
         <div class="relative">
           <dt>
             <div
-              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
+            >
+              <svg
+                class="w-6 h-6"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.75 9.25V6.5M19.25 6.5V10.5C19.25 10.9324 18.7796 11.3281 18 11.6335M19.25 6.5C19.25 7.4665 16.8995 8.25 14 8.25C11.1005 8.25 8.75 7.4665 8.75 6.5M19.25 6.5C19.25 5.5335 16.8995 4.75 14 4.75C11.1005 4.75 8.75 5.5335 8.75 6.5"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
+                <path
+                  d="M15.25 13.5V17.5C15.25 18.4665 12.8995 19.25 10 19.25C7.10051 19.25 4.75 18.4665 4.75 17.5V13.5M15.25 13.5C15.25 14.4665 12.8995 15.25 10 15.25C7.10051 15.25 4.75 14.4665 4.75 13.5M15.25 13.5C15.25 12.5335 12.8995 11.75 10 11.75C7.10051 11.75 4.75 12.5335 4.75 13.5"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
+              </svg>
+            </div>
+            <p class="ml-16 text-lg font-semibold leading-6">
+              Do you support recurrent commissions?
+            </p>
+          </dt>
+          <dd class="ml-16 mt-2">
+            Yes, we offer recurring commissions! That means as long as your
+            referred customer remains a subscriber, you’ll continue earning 20%
+            on every payment they make. 🚀
+          </dd>
+        </div>
+        <div class="relative">
+          <dt>
+            <div
+              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
             >
               <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24">
                 <path
@@ -237,7 +275,7 @@
         <div class="relative">
           <dt>
             <div
-              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
             >
               <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24">
                 <path
@@ -276,7 +314,7 @@
         <div class="relative">
           <dt>
             <div
-              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
             >
               <svg
                 class="w-6 h-6"
@@ -306,7 +344,7 @@
         <div class="relative">
           <dt>
             <div
-              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+              class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
             >
               <svg
                 class="w-6 h-6"
@@ -372,9 +410,11 @@
     </div>
   </section>
 
-  <section class="border-t border-gray-600 text-white">
+  <section
+    class="border-t border-gray-200 shadow dark:border-gray-800 bg-gray-100 sm:rounded-md dark:bg-gray-500/20"
+  >
     <div
-      class="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-28 bg-gray-500/20 rounded mt-10 mb-10"
+      class="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-28 rounded mt-10 mb-10"
     >
       <div class="m-auto flex flex-col justify-center items-center">
         <h2 class="text-2xl font-semibold">Start earning cash today!</h2>
@@ -383,7 +423,7 @@
             href="https://affiliates.lemonsqueezy.com/programs/stocknear"
             rel="noopener noreferrer"
             target="_blank"
-            class="bg-purple-600 sm:hover:bg-purple-700 transition-colors ease-out duration-50 text-white px-5 py-3 text-lg font-semibold rounded-md"
+            class="text-white bg-[#3B82F6] sm:hover:bg-blue-600 transition-colors ease-out duration-50 px-5 py-3 text-lg font-semibold rounded-md"
           >
             Become an affiliate
           </a>
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 026d90e1..23fd256a 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -382,7 +382,7 @@
 <svelte:window bind:scrollY={y} />
 
 <body
-  class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
+  class="text-muted dark:text-white w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
 >
   <!-- Page wrapper -->
   <div class="mt-5 flex flex-col w-full relative w-full sm:max-w-[1250px]">
@@ -391,7 +391,7 @@
         <div class="w-full">
           <div class="sm:flex sm:justify-start w-full">
             <!--Start Mobile Navbar-->
-            <div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden">
+            <div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
               <div class="navbar w-full px-4 py-2">
                 <div
                   class="{isScrolled
@@ -424,10 +424,10 @@
                         ? "hidden"
                         : "flex flex-col items-center ml-6 transition-transform ease-in"}
                     >
-                      <span class="text-white text-xs font-semibold">
+                      <span class=" text-xs font-semibold">
                         {$stockTicker}
                       </span>
-                      <span class="text-white text-sm">
+                      <span class=" text-sm">
                         {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
                           {$currentPortfolioPrice}
                         {:else}
@@ -545,7 +545,7 @@
                     {:else}
                       <label
                         for="userLogin"
-                        class="cursor-pointer shrink-0 text-white mr-4"
+                        class="cursor-pointer shrink-0 mr-4"
                       >
                         <svg
                           class="w-6 h-6 inline-block"
@@ -610,7 +610,7 @@
                           <div class="flex flex-col ml-auto mr-2">
                             {#if userWatchList?.length !== 0}
                               <div
-                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                               >
                                 <label
                                   for="addWatchListModal"
@@ -641,7 +641,7 @@
                               </div>
                             {:else if userWatchList?.length === 0}
                               <div
-                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                               >
                                 <label
                                   on:click={() =>
@@ -675,11 +675,11 @@
                           </div>
                         {:else}
                           <div
-                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                           >
                             <label
                               for="userLogin"
-                              class="cursor-pointer shrink-0 text-white"
+                              class="cursor-pointer shrink-0"
                             >
                               <svg
                                 class="w-7 h-7 inline-block"
@@ -698,12 +698,12 @@
                         <!--Start Price Alert -->
 
                         <div
-                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                         >
                           <label
                             on:click={() => ($openPriceAlert = true)}
                             for={data?.user ? "priceAlertModal" : "userLogin"}
-                            class="cursor-pointer shrink-0 text-white"
+                            class="cursor-pointer shrink-0"
                           >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
@@ -750,9 +750,7 @@
                             <div
                               class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
                             >
-                              <h1
-                                class="text-2xl lg:text-3xl font-bold text-white"
-                              >
+                              <h1 class="text-2xl lg:text-3xl font-bold">
                                 {$displayCompanyName?.length > charNumber
                                   ? $displayCompanyName?.slice(0, charNumber) +
                                     "..."
@@ -775,7 +773,7 @@
                             </div>
 
                             <div
-                              class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5 text-white"
+                              class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5"
                             >
                               <div class="w-full max-w-[50%] whitespace-nowrap">
                                 <div
@@ -903,16 +901,14 @@
                     <nav
                       class="sm:ml-4 border-b-[2px] overflow-x-auto whitespace-nowrap no-scrollbar"
                     >
-                      <ul
-                        class="flex flex-row items-center w-full text-[1rem] text-white"
-                      >
+                      <ul class="flex flex-row items-center w-full text-[1rem]">
                         <a
                           href={`/stocks/${$stockTicker}`}
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Overview
                         </a>
@@ -921,8 +917,8 @@
                           on:click={() => changeSection("financials")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'financials'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Financials
                         </a>
@@ -931,8 +927,8 @@
                           on:click={() => changeSection("statistics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'statistics'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                           >Statistics</a
                         >
 
@@ -941,8 +937,8 @@
                           on:click={() => changeSection("metrics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'metrics'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                           >Metrics</a
                         >
 
@@ -952,8 +948,8 @@
                             on:click={() => changeSection("forecast")}
                             class="p-2 px-5 cursor-pointer {displaySection ===
                             'forecast'
-                              ? 'text-white bg-secondary font-semibold'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                              ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                              : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                           >
                             Forecast
                           </a>
@@ -963,8 +959,8 @@
                           on:click={() => changeSection("dark-pool")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dark-pool'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Dark Pool
                         </a>
@@ -973,8 +969,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Options
                         </a>
@@ -984,8 +980,8 @@
                           on:click={() => changeSection("insider")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'insider'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Insider
                         </a>
@@ -994,8 +990,8 @@
                           on:click={() => changeSection("dividends")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dividends'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Dividends
                         </a>
@@ -1004,8 +1000,8 @@
                           on:click={() => changeSection("history")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'history'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           History
                         </a>
@@ -1014,8 +1010,8 @@
                           on:click={() => changeSection("profile")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'profile'
-                            ? 'text-white bg-secondary font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                            ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
+                            : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
                         >
                           Profile
                         </a>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index bdc49e0e..0acad41d 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -658,7 +658,9 @@
   description={`Get a real-time ${data?.companyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
 />
 
-<section class="bg-default min-h-screen pb-40 overflow-hidden w-full">
+<section
+  class="text-muted dark:text-white min-h-screen pb-40 overflow-hidden w-full"
+>
   <div class="w-full m-auto overflow-hidden">
     <div
       class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full"
@@ -672,7 +674,7 @@
           <div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
             {#if dataMapping[displayData]?.length === 0}
               <div
-                class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
+                class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
               >
                 <div class="flex items-center justify-between py-1 sm:pt-0.5">
                   <div class="hide-scroll overflow-x-auto">
@@ -687,7 +689,7 @@
                           >
                             <span
                               class="block {displayData === interval
-                                ? 'text-white'
+                                ? 'text-muted dark:text-white'
                                 : 'text-gray-400'}">{interval}</span
                             >
                             <div
@@ -703,11 +705,9 @@
                 </div>
                 <div class="h-[360px]">
                   <div
-                    class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12"
+                    class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-300 dark:border-gray-800 p-6 text-center md:p-12"
                   >
-                    <div
-                      class="mb-4 text-white text-[1rem] sm:text-xl font-semibold"
-                    >
+                    <div class="mb-4 text-[1rem] sm:text-xl font-semibold">
                       No {displayData} chart data available
                     </div>
                   </div>
@@ -715,7 +715,7 @@
               </div>
             {:else}
               <div
-                class="order-1 lg:order-5 grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
+                class="order-1 lg:order-5 grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
               >
                 <div class="flex items-center justify-between py-1 sm:pt-0.5">
                   <div class="hide-scroll overflow-x-auto">
@@ -730,13 +730,13 @@
                           >
                             <span
                               class="block {displayData === interval
-                                ? 'text-white'
+                                ? 'text-muted dark:text-white'
                                 : 'text-gray-400'}">{interval}</span
                             >
                             <div
                               class="{displayData === interval
                                 ? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
-                                : 'bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
+                                : 'bg-white dark:bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
                             />
                           </button>
                         </li>
@@ -754,7 +754,7 @@
                       {displayLegend?.graphChange ??
                         data?.getStockQuote?.changesPercentage?.toFixed(2)}%
                     </span>
-                    <span class="hidden text-gray-200 sm:block"
+                    <span class="hidden text-muted dark:text-gray-200 sm:block"
                       >({displayData})</span
                     >
                   </div>
@@ -783,12 +783,10 @@
             <div
               class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
             >
-              <table
-                class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
-              >
+              <table class="w-[50%] text-sm sm:text-[1rem] lg:min-w-[250px]">
                 <tbody
                   ><tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Bid</td
@@ -803,12 +801,12 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       ><a
                         href={`/stocks/${$stockTicker}/statistics/market-cap`}
-                        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+                        class="sm:hover:text-blue-400 underline underline-offset-4"
                         >Market Cap</a
                       ></td
                     >
@@ -822,7 +820,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Revenue (ttm)</td
@@ -836,7 +834,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Net Income (ttm)</td
@@ -850,7 +848,7 @@
                   >
 
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >EPS (ttm)</td
@@ -861,7 +859,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >PE Ratio (ttm)</td
@@ -872,7 +870,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Forward PE</td
@@ -883,7 +881,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       ><a
@@ -893,8 +891,8 @@
                           : ""}
                         class={data?.getAnalystSummary?.consensusRating !==
                         undefined
-                          ? "sm:hover:text-blue-400 text-white underline underline-offset-4"
-                          : "text-white cursor-text"}>Analyst</a
+                          ? "sm:hover:text-blue-400  underline underline-offset-4"
+                          : " cursor-text"}>Analyst</a
                       >
                     </td>
                     <td
@@ -908,10 +906,10 @@
                   >
                 </tbody>
               </table>
-              <table class="w-[50%] text-sm text-white lg:min-w-[250px]">
+              <table class="w-[50%] text-sm lg:min-w-[250px]">
                 <tbody
                   ><tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Ask</td
@@ -926,7 +924,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Volume</td
@@ -939,7 +937,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Avg. Volume (20D)</td
@@ -954,7 +952,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Open</td
@@ -965,7 +963,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Previous Close</td
@@ -976,7 +974,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Day's Range</td
@@ -989,7 +987,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >52-Week Range</td
@@ -1002,7 +1000,7 @@
                     ></tr
                   >
                   <tr
-                    class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
+                    class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
                       >Beta</td