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

---
 src/lib/components/AIScore.svelte           |  27 +-
 src/lib/components/EarningsSurprise.svelte  |  30 +-
 src/lib/components/NextEarnings.svelte      |   2 +-
 src/lib/components/WIIM.svelte              |  32 +-
 src/lib/components/shadcn/card/card.svelte  |   2 +-
 src/routes/affiliate-program/+page.svelte   |   4 +-
 src/routes/pricing/+page.svelte             | 242 +++++++------
 src/routes/stocks/[tickerID]/+layout.svelte | 363 ++++++++++----------
 src/routes/stocks/[tickerID]/+page.svelte   |  32 +-
 9 files changed, 378 insertions(+), 356 deletions(-)

diff --git a/src/lib/components/AIScore.svelte b/src/lib/components/AIScore.svelte
index dec062f9..d12ec522 100644
--- a/src/lib/components/AIScore.svelte
+++ b/src/lib/components/AIScore.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { scoreComponent, stockTicker } from "$lib/store";
 
-  export let score;
-  export let tier;
+  export let score = 0;
+  export let tier = "Free";
 
   // Use the correct reactive declaration
   $: {
@@ -20,7 +20,11 @@
         class="flex flex-col items-center w-auto p-4 sm:p-4 rounded-md relative"
       >
         <div class="relative">
-          <h3 class="text-center text-sm sm:text-[1rem] mb-2">AI Score</h3>
+          <h3
+            class="font-semibold dark:font-normal text-center text-sm sm:text-[1rem] mb-2"
+          >
+            AI Score
+          </h3>
         </div>
 
         <div class="flex flex-row items-center justify-between">
@@ -36,7 +40,7 @@
                 cy="18"
                 r="16"
                 fill="none"
-                class="stroke-current text-[#303030]"
+                class="stroke-current text-gray-300 dark:text-[#303030]"
                 stroke-width="2"
               ></circle>
               <!-- score Circle inside a group with rotation -->
@@ -48,10 +52,10 @@
                   r="16"
                   fill="none"
                   class="stroke-current {score >= 7
-                    ? 'text-[#00FC50]'
+                    ? 'text-green-600 dark:text-[#00FC50]'
                     : score >= 4
-                      ? 'text-[#fff]'
-                      : 'text-[#FF2F1F]'}"
+                      ? 'text-blue-900 dark:text-[#fff]'
+                      : 'text-red-600 dark:text-[#FF2F1F]'}"
                   stroke-width="3"
                   stroke-dasharray="100.48"
                   stroke-dashoffset={100.48 -
@@ -61,13 +65,6 @@
                 </circle>
               </g>
               <!-- Text in the middle -->
-              <text
-                x="18"
-                y="21"
-                text-anchor="middle"
-                font-size="10"
-                fill="#000">{["Pro", "Plus"]?.includes(tier) ? score : 0}</text
-              >
             </svg>
 
             <!-- Percentage Text -->
@@ -87,7 +84,7 @@
                   </span>
                   <div class="absolute top-0.5 flex items-center">
                     <svg
-                      class="size-5 text-[#fff]"
+                      class="size-5 text-muted dark:text-[#fff]"
                       viewBox="0 0 20 20"
                       fill="currentColor"
                       style="max-width: 40px;"
diff --git a/src/lib/components/EarningsSurprise.svelte b/src/lib/components/EarningsSurprise.svelte
index e1c889b9..50a23a5b 100644
--- a/src/lib/components/EarningsSurprise.svelte
+++ b/src/lib/components/EarningsSurprise.svelte
@@ -44,22 +44,20 @@
   }
 </script>
 
-<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 p-1 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">
             Earnings Surprise
           </h3>
           <label
             class="{latestInfoDate(rawData?.date)
-              ? ''
-              : 'hidden'} text-black bg-[#fff] ml-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
+              ? 'border border-gray-300'
+              : 'hidden'} shadow bg-blue-100 dark:text-black dark:bg-[#fff] ml-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
             >New</label
           >
         </div>
@@ -67,9 +65,9 @@
     </div>
 
     <div
-      class="text-white text-[1rem] {latestInfoDate(rawData?.date)
-        ? 'bg-[#F9AB00]/10 p-3 rounded-md'
-        : 'bg-default pl-1'} "
+      class="text-[1rem] {latestInfoDate(rawData?.date)
+        ? 'bg-blue-100 p-3 rounded-md shadow'
+        : ' pl-1'} "
     >
       <div class="mt-1">
         {removeCompanyStrings($displayCompanyName)} has released their quartely earnings
@@ -83,7 +81,7 @@
 
       <li
         class="ml-[20px] sm:ml-[30px]"
-        style="color: #fff; line-height: 22px; margin-top:10px; margin-bottom: 10px; list-style-type: disc;"
+        style="line-height: 22px; margin-top:10px; margin-bottom: 10px; list-style-type: disc;"
       >
         Revenue of <span class=""
           >{abbreviateNumber(rawData?.revenue, true)}</span
@@ -94,14 +92,14 @@
         )}, with
         <span
           class=" {revenueRatio > 0
-            ? "before:content-['+'] text-[#00FC50]"
-            : 'text-[#FF2F1F]'}">{revenueRatio}%</span
+            ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
+            : 'text-red-600 dark:text-[#FF2F1F]'}">{revenueRatio}%</span
         >
         YoY {revenueRatio < 0 ? "decline" : "growth"}.
       </li>
       <li
         class="ml-[20px] sm:ml-[30px]"
-        style="color: #fff; line-height: 22px; margin-top: 0px; margin-bottom: 0px; list-style-type: disc;"
+        style="line-height: 22px; margin-top: 0px; margin-bottom: 0px; list-style-type: disc;"
       >
         EPS of <span class="">{rawData?.eps}</span>
         {rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by {rawData?.epsSurprise?.toFixed(
@@ -109,10 +107,10 @@
         )}, with
         <span
           class=" {epsRatio === null
-            ? 'text-white'
+            ? ''
             : epsRatio > 0
-              ? 'text-[#00FC50]'
-              : 'text-[#FF2F1F]'}"
+              ? 'text-green-600 dark:text-[#00FC50]'
+              : 'text-red-600 dark:text-[#FF2F1F]'}"
         >
           {epsRatio === null ? "n/a" : `${epsRatio}%`}
         </span>
diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
index b51c9d8d..2e6e2c94 100644
--- a/src/lib/components/NextEarnings.svelte
+++ b/src/lib/components/NextEarnings.svelte
@@ -106,7 +106,7 @@
             <span
               class="{epsRatio > 0
                 ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                : 'text-[#FF2F1F]'} ">{epsRatio}%</span
+                : 'text-retext-[#FF2F1F]'} ">{epsRatio}%</span
             >
             {epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
           {:else}
diff --git a/src/lib/components/WIIM.svelte b/src/lib/components/WIIM.svelte
index 13a9bb4c..41482433 100644
--- a/src/lib/components/WIIM.svelte
+++ b/src/lib/components/WIIM.svelte
@@ -42,12 +42,12 @@
   }
 </script>
 
-<section class="overflow-hidden text-white h-full mt-5">
+<section class="overflow-hidden text-muted dark:text-white h-full mt-5">
   <main class="overflow-hidden">
     <div class="flex flex-row items-center">
       <label
         for="whyPriceMovedInfo"
-        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>Why Price Moved</h2>
       </label>
@@ -77,21 +77,21 @@
                       '-'
                         ? 'bg-white'
                         : item?.changesPercentage >= 0
-                          ? 'bg-[#00FC50]'
-                          : 'bg-[#FF2F1F]'}"
+                          ? 'bg-green-600 dark:bg-[#00FC50]'
+                          : 'bg-red-600 dark:bg-[#FF2F1F]'}"
                     ></div>
                     <!-- Item Content -->
 
                     <div class="w-full h-full">
                       <div class="flex flex-col items-start">
                         <div class="flex flex-row items-start w-full">
-                          <span class="text-white text-sm"
+                          <span class=" text-sm"
                             >{formatDate(item?.date)}
                             <!--
                             &#183;
                             <a
                               href={item?.url}
-                              class="inline-block text-sm text-white sm:hover:underline sm:hover:underline-offset-4"
+                              class="inline-block text-sm  sm:hover:underline sm:hover:underline-offset-4"
                             >
                               Source
                             </a>
@@ -99,15 +99,14 @@
                           </span>
                           {#if latestInfoDate(item?.date)}
                             <label
-                              class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
+                              class="shadow bg-blue-100 border border-gray-200 dark:border-0 dark:bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
                               >New</label
                             >
                           {/if}
-                          <div
-                            class="text-white text-sm sm:text-[1rem] ml-auto"
-                          >
+                          <div class=" text-sm sm:text-[1rem] ml-auto">
                             {#if item?.changesPercentage >= 0}
-                              <span class="text-[#00FC50] inline-block"
+                              <span
+                                class="text-green-600 dark:text-[#00FC50] inline-block"
                                 >+{item?.changesPercentage}%</span
                               >
                               <svg
@@ -140,7 +139,8 @@
                                 </g></svg
                               >
                             {:else if item?.changesPercentage < 0}
-                              <span class="text-[#FF2F1F] inline-block"
+                              <span
+                                class="text-red-600 dark:text-[#FF2F1F] inline-block"
                                 >{item?.changesPercentage}%
                               </span>
                               <svg
@@ -195,7 +195,7 @@
                               >
                             </span>
                           {:else}
-                            <span class="text-white text-[1rem]">
+                            <span class=" text-[1rem]">
                               {item?.text}
                             </span>
                           {/if}
@@ -217,11 +217,13 @@
           class="cursor-pointer flex justify-center items-center mt-5"
         >
           <svg
-            class="w-10 h-10 transform {showFullHistory ? 'rotate-180' : ''} "
+            class="w-10 h-10 transform text-gray-400 dark:text-[#2A323C] {showFullHistory
+              ? 'rotate-180'
+              : ''} "
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             ><path
-              fill="#2A323C"
+              fill="currentColor"
               d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"
             /></svg
           >
diff --git a/src/lib/components/shadcn/card/card.svelte b/src/lib/components/shadcn/card/card.svelte
index 7d27508c..237c3894 100644
--- a/src/lib/components/shadcn/card/card.svelte
+++ b/src/lib/components/shadcn/card/card.svelte
@@ -10,7 +10,7 @@
 
 <div
   class={cn(
-    "rounded-md border border-gray-300 dark:border-gray-800 bg-white dark:bg-default text-muted dark:text-white shadow-xs",
+    "rounded-md border border-gray-300 dark:border-gray-800 bg-white dark:bg-default text-muted dark:text-white shadow",
     className,
   )}
   {...$$restProps}
diff --git a/src/routes/affiliate-program/+page.svelte b/src/routes/affiliate-program/+page.svelte
index 50220db5..7ec4353b 100644
--- a/src/routes/affiliate-program/+page.svelte
+++ b/src/routes/affiliate-program/+page.svelte
@@ -24,7 +24,7 @@
         "name": "How much can I earn?",
         "acceptedAnswer": {
           "@type": "Answer",
-          "text": "You can earn up to $24.00 commission on every referral that results in a successful sale. There's no limit to how much you can make by promoting us."
+          "text": "You can earn up to $119.8 commission on every referral that results in a successful sale. There's no limit to how much you can make by promoting us."
         }
       },
       {
@@ -184,7 +184,7 @@
             </p>
           </dt>
           <dd class="ml-16 mt-2">
-            You can earn up to <strong>$36.00</strong> commission on every referral
+            You can earn up to <strong>$119.8</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>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 76f7588c..8e611bc2 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -88,7 +88,7 @@
 </svelte:head>
 
 <section
-  class="bg-default min-h-screen mb-40 w-full max-w-3xl sm:max-w-5xl m-auto text-white"
+  class=" min-h-screen mb-40 w-full max-w-3xl sm:max-w-5xl m-auto text-muted dark:"
 >
   <div
     class="flex flex-col sm:flex-row w-full mx-auto justify-center items-center sm:space-x-8 text-sm relative pt-5 pb-20"
@@ -106,7 +106,7 @@
         ><path
           d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
         ></path></svg
-      ><span class="font-medium text-zinc-300"
+      ><span class="font-medium text-muted dark:text-zinc-300"
         >Trusted by <span>4,000</span>+ Traders</span
       >
     </div>
@@ -130,13 +130,14 @@
         ><path
           d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
         ></path></svg
-      ><span class="ml-1 mr-2 font-bold text-zinc-300"><span>4.3</span>/5</span
-      ><span class="font-medium text-zinc-300"
+      ><span class="ml-1 mr-2 font-bold text-muted dark:text-zinc-300"
+        ><span>4.3</span>/5</span
+      ><span class="font-medium text-muted dark:text-zinc-300"
         >Rated "Excellent" on <a
           rel="noopener noreferrer"
           target="_blank"
           href="https://www.trustpilot.com/review/stocknear.com"
-          class="sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+          class="sm:hover: sm:hover:underline sm:hover:underline-offset-4"
           >Trustpilot</a
         ></span
       >
@@ -145,9 +146,7 @@
 
   <div class="px-3">
     <div class="mx-auto text-center mb-8">
-      <h1
-        class="text-4xl sm:text-5xl font-bold text-white text-transparent pb-4"
-      >
+      <h1 class="text-4xl sm:text-5xl font-bold pb-4">
         Save Time & Maximize Profits
       </h1>
     </div>
@@ -155,7 +154,7 @@
     <!--<Discount/>-->
 
     <div class="flex flex-row items-center justify-end">
-      <span class="text-[1rem] font-semibold text-white mr-3"> Monthly </span>
+      <span class="text-[1rem] font-semibold mr-3"> Monthly </span>
 
       <label class="inline-flex cursor-pointer relative">
         <input
@@ -181,20 +180,22 @@
     >
       <div
         style="opacity: 1; transform: translateY(20px);"
-        class="flex flex-col relative bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate"
+        class="flex flex-col relative bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-300 dark:border-zinc-600 p-6 isolate"
       >
-        <h3 class="text-3xl font-bold text-white">Basic</h3>
-        <p class="text-zinc-300 text-sm mt-1">Ideal for Beginners</p>
+        <h3 class="text-3xl font-bold">Basic</h3>
+        <p class="text-muted dark:text-zinc-300 text-sm mt-1">
+          Ideal for Beginners
+        </p>
         <div class="mt-4">
-          <span class="text-4xl font-bold text-white">$0</span><span
-            class="text-white text-xl ml-1">/Month</span
+          <span class="text-4xl font-bold">$0</span><span class=" text-xl ml-1"
+            >/Month</span
           >
         </div>
 
         <ul class="mt-6 mb-6 space-y-2">
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -205,11 +206,11 @@
                 stroke-width="2"
                 d="M5 13l4 4L19 7"
               ></path></svg
-            ><span class="text-white">1 Watchlist</span>
+            ><span class="">1 Watchlist</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -220,11 +221,11 @@
                 stroke-width="2"
                 d="M5 13l4 4L19 7"
               ></path></svg
-            ><span class="text-white">3 Price Alerts</span>
+            ><span class="">3 Price Alerts</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -235,12 +236,12 @@
                 stroke-width="2"
                 d="M5 13l4 4L19 7"
               ></path></svg
-            ><span class="text-white">Realtime Notification</span>
+            ><span class="">Realtime Notification</span>
           </li>
 
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -297,11 +298,13 @@
               </g></svg
             >
 
-            <span class="text-gray-400">Hedge Fund Portfolio Access</span>
+            <span class="text-muted dark:text-gray-400"
+              >Hedge Fund Portfolio Access</span
+            >
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -358,11 +361,13 @@
               </g></svg
             >
 
-            <span class="text-gray-400">US Congress Portfolio Access</span>
+            <span class="text-muted dark:text-gray-400"
+              >US Congress Portfolio Access</span
+            >
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -419,12 +424,14 @@
               </g></svg
             >
 
-            <span class="text-gray-400">Financial History Access</span>
+            <span class="text-muted dark:text-gray-400"
+              >Financial History Access</span
+            >
           </li>
 
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -481,11 +488,11 @@
               </g></svg
             >
 
-            <span class="text-gray-400">Stock Screener</span>
+            <span class="text-muted dark:text-gray-400">Stock Screener</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -542,11 +549,13 @@
               </g></svg
             >
 
-            <span class="text-gray-400">Realtime Options Activity</span>
+            <span class="text-muted dark:text-gray-400"
+              >Realtime Options Activity</span
+            >
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -603,14 +612,16 @@
               </g></svg
             >
 
-            <span class="text-gray-400">Realtime Dark Pool Trades</span>
+            <span class="text-muted dark:text-gray-400"
+              >Realtime Dark Pool Trades</span
+            >
           </li>
         </ul>
         <div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
           {#if !data?.user}
             <label
               for="userLogin"
-              class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
+              class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
               >Get Registered Now<svg
                 class="w-5 h-5 ml-2"
                 fill="none"
@@ -630,23 +641,29 @@
       </div>
       <div
         style="opacity: 1; transform: translateY(20px);"
-        class="flex flex-col relative bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate"
+        class="flex flex-col relative bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-300 dark:border-zinc-600 p-6 isolate"
       >
-        <h3 class="text-3xl font-bold text-white">Plus</h3>
-        <p class="text-zinc-300 text-sm mt-1">Best for Intermediate Traders</p>
+        <h3 class="text-3xl font-bold">Plus</h3>
+        <p class="text-muted dark:text-zinc-300 text-sm mt-1">
+          Best for Intermediate Traders
+        </p>
         <div class="mt-4">
-          <span class="text-4xl font-bold text-white"
-            >{mode ? "$7.50" : "$10"}</span
-          ><span class="text-white text-xl ml-1">/Month</span>
+          <span class="text-4xl font-bold">{mode ? "$7.50" : "$10"}</span><span
+            class=" text-xl ml-1">/Month</span
+          >
         </div>
-        <p class="text-gray-400 text-sm mt-1 mx-4 {!mode ? 'hidden' : ''}">
+        <p
+          class="text-muted dark:text-gray-400 text-sm mt-1 mx-4 {!mode
+            ? 'hidden'
+            : ''}"
+        >
           (Billed Annually)
         </p>
 
         <ul class="mt-6 mb-6 space-y-2">
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -657,11 +674,11 @@
                 stroke-width="2"
                 d="M5 13l4 4L19 7"
               ></path></svg
-            ><span class="text-white">Unlimited Watchlist</span>
+            ><span class="">Unlimited Watchlist</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -672,11 +689,11 @@
                 stroke-width="2"
                 d="M5 13l4 4L19 7"
               ></path></svg
-            ><span class="text-white">Unlimited Price Alerts</span>
+            ><span class="">Unlimited Price Alerts</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -689,11 +706,11 @@
               ></path></svg
             >
 
-            <span class="text-white">Unlimited Stock Screener</span>
+            <span class="">Unlimited Stock Screener</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -704,12 +721,12 @@
                 stroke-width="2"
                 d="M5 13l4 4L19 7"
               ></path></svg
-            ><span class="text-white">Realtime Notification</span>
+            ><span class="">Realtime Notification</span>
           </li>
 
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -722,11 +739,11 @@
               ></path></svg
             >
 
-            <span class="text-white">Hedge Fund Portfolio Access</span>
+            <span class="">Hedge Fund Portfolio Access</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -739,11 +756,11 @@
               ></path></svg
             >
 
-            <span class="text-white">US Congress Portfolio Access</span>
+            <span class="">US Congress Portfolio Access</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -756,12 +773,12 @@
               ></path></svg
             >
 
-            <span class="text-white">Financial History Access</span>
+            <span class="">Financial History Access</span>
           </li>
 
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -818,11 +835,13 @@
               </g></svg
             >
 
-            <span class="text-gray-400">Realtime Options Activity</span>
+            <span class="text-muted dark:text-gray-400"
+              >Realtime Options Activity</span
+            >
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               viewBox="0 0 64 64"
               version="1.1"
               fill="currentColor"
@@ -879,14 +898,16 @@
               </g></svg
             >
 
-            <span class="text-gray-400">Realtime Dark Pool Trades</span>
+            <span class="text-muted dark:text-gray-400"
+              >Realtime Dark Pool Trades</span
+            >
           </li>
         </ul>
         <div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
           <label
             for={!data?.user ? "userLogin" : ""}
             on:click={() => purchasePlan("plus")}
-            class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
+            class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
             >Unlock Plus Access Now<svg
               class="w-5 h-5 ml-2"
               fill="none"
@@ -905,23 +926,29 @@
       </div>
       <div
         style="opacity: 1; transform: translateY(20px);"
-        class="flex flex-col relative bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate"
+        class="flex flex-col relative bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-300 dark:border-zinc-600 p-6 isolate"
       >
-        <h3 class="text-3xl font-bold text-white">Pro</h3>
-        <p class="text-zinc-300 text-sm mt-1">Best for Professional Traders</p>
+        <h3 class="text-3xl font-bold">Pro</h3>
+        <p class="text-muted dark:text-zinc-300 text-sm mt-1">
+          Best for Professional Traders
+        </p>
         <div class="mt-4">
-          <span class="text-4xl font-bold text-white"
-            >{mode ? "$15" : "$20"}</span
-          ><span class="text-white text-xl ml-1">/Month</span>
+          <span class="text-4xl font-bold">{mode ? "$15" : "$20"}</span><span
+            class=" text-xl ml-1">/Month</span
+          >
         </div>
-        <p class="text-gray-400 text-sm mt-1 mx-4 {!mode ? 'hidden' : ''}">
+        <p
+          class="text-muted dark:text-gray-400 text-sm mt-1 mx-4 {!mode
+            ? 'hidden'
+            : ''}"
+        >
           (Billed Annually)
         </p>
 
         <ul class="mt-6 mb-6 space-y-2">
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -932,12 +959,12 @@
                 stroke-width="2"
                 d="M5 13l4 4L19 7"
               ></path></svg
-            ><span class="text-white">Everything in Plus and ...</span>
+            ><span class="">Everything in Plus and ...</span>
           </li>
 
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -950,11 +977,11 @@
               ></path></svg
             >
 
-            <span class="text-white">Realtime Options Activity</span>
+            <span class="">Realtime Options Activity</span>
           </li>
           <li class="flex items-start">
             <svg
-              class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5"
+              class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -967,14 +994,14 @@
               ></path></svg
             >
 
-            <span class="text-white">Realtime Dark Pool Trades</span>
+            <span class="">Realtime Dark Pool Trades</span>
           </li>
         </ul>
         <div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
           <label
             for={!data?.user ? "userLogin" : ""}
             on:click={() => purchasePlan("pro")}
-            class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
+            class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
             >Unlock Pro Access Now<svg
               class="w-5 h-5 ml-2"
               fill="none"
@@ -993,17 +1020,17 @@
       </div>
 
       <div
-        class="text-left w-full col-span-1 lg:col-span-3 bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate translate-y-5 opacity-100 transition-all duration-300"
+        class="text-left w-full col-span-1 lg:col-span-3 bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-200 dark:border-zinc-600 p-6 isolate translate-y-5 opacity-100 transition-all duration-300"
       >
         <!-- Responsive header: stacks vertically on mobile, horizontal on md+ -->
         <div class="flex flex-row items-center justify-between">
-          <h3 class="text-2xl md:text-3xl font-bold text-white">Lifetime</h3>
+          <h3 class="text-2xl md:text-3xl font-bold">Lifetime</h3>
           <div>
-            <span class="text-3xl md:text-4xl font-bold text-white">$599</span>
+            <span class="text-3xl md:text-4xl font-bold">$599</span>
           </div>
         </div>
         <!-- Responsive paragraph text -->
-        <p class="text-white md:text-lg mt-2">
+        <p class=" md:text-lg mt-2">
           Everything in Pro, pay once, never again!
         </p>
         <!-- Button container: full width on mobile, 1/4 width on md+ -->
@@ -1011,7 +1038,7 @@
           <label
             for={!data?.user ? "userLogin" : ""}
             on:click={() => purchasePlan("lifeTime")}
-            class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
+            class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
           >
             Get Lifetime Now
             <svg
@@ -1036,9 +1063,7 @@
     <!--Feature Table-->
     <section class="py-8 md:py-12 mt-8 md:mt-10">
       <div class="max-w-6xl mx-auto">
-        <h2
-          class="text-3xl md:text-4xl font-bold text-white mb-6 md:mb-10 text-center"
-        >
+        <h2 class="text-3xl md:text-4xl font-bold mb-6 md:mb-10 text-center">
           Compare plans &amp; features
         </h2>
         <!-- Make sure the table can scroll horizontally on small screens -->
@@ -1052,29 +1077,27 @@
             </colgroup>
             <thead>
               <tr>
-                <th
-                  class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg text-white"
-                >
+                <th class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg">
                   Research company stocks
                 </th>
                 <th
-                  class="py-2 md:py-3 font-semibold text-white text-center text-sm sm:text-lg"
+                  class="py-2 md:py-3 font-semibold text-center text-sm sm:text-lg"
                 >
                   Free
                 </th>
                 <th
-                  class="py-2 md:py-3 font-semibold text-white text-center text-sm sm:text-lg"
+                  class="py-2 md:py-3 font-semibold text-center text-sm sm:text-lg"
                 >
                   Plus
                 </th>
                 <th
-                  class="py-2 md:py-3 font-semibold text-white text-center text-sm sm:text-lg"
+                  class="py-2 md:py-3 font-semibold text-center text-sm sm:text-lg"
                 >
                   Pro
                 </th>
               </tr>
             </thead>
-            <tbody class="text-sm md:text-white">
+            <tbody class="text-sm md:">
               <tr>
                 <td class="py-2 md:py-3">Full Market Access</td>
                 <td class="py-2 md:py-3 text-center">❌</td>
@@ -1102,7 +1125,7 @@
               <tr>
                 <td
                   colspan="4"
-                  class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg text-white"
+                  class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg"
                 >
                   Unusual Activity
                 </td>
@@ -1123,7 +1146,7 @@
               <tr>
                 <td
                   colspan="4"
-                  class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg text-white"
+                  class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg"
                 >
                   Trade Ideas
                 </td>
@@ -1162,14 +1185,12 @@
 
     <!--Start FAQ-->
 
-    <section class="bg-default">
+    <section class="">
       <div class="mx-auto">
         <div class="py-12 md:py-10">
           <!-- Section header -->
           <div class="max-w-3xl mx-auto text-center pb-12 md:pb-14">
-            <h2 class="text-4xl font-bold text-white">
-              Frequently Asked Questions
-            </h2>
+            <h2 class="text-4xl font-bold">Frequently Asked Questions</h2>
           </div>
 
           <!-- Faqs -->
@@ -1177,12 +1198,12 @@
             <li>
               <details class="collapse collapse-arrow">
                 <summary
-                  class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
+                  class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
                   >What are the advantages of Stocknear Service?</summary
                 >
                 <div class="collapse-content">
                   <p
-                    class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                    class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                   >
                     Stocknear Service provides simplified, actionable trading
                     data and an extensive tool suite for every trader, featuring
@@ -1198,19 +1219,19 @@
             <li>
               <details class="collapse collapse-arrow">
                 <summary
-                  class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
+                  class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
                 >
                   Can I change my plan at any time?
                 </summary>
                 <div class="collapse-content">
                   <p
-                    class="text-sm sm:text-[1rem] pb-5 text-gray-200 transition-all duration-300 ease-in-out"
+                    class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 transition-all duration-300 ease-in-out"
                   >
                     Yes! Simply reach out to us via email, and we’ll take care
                     of it for you.
                     <a
                       href={`mailto:${emailAddress}`}
-                      class="text-blue-400 underline"
+                      class="text-blue-500 dark:text-blue-400 underline"
                     >
                       {emailAddress}
                     </a>
@@ -1222,14 +1243,14 @@
             <li>
               <details class="collapse collapse-arrow">
                 <summary
-                  class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
+                  class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
                 >
                   Are there any commissions in addition to the subscription
                   plans?
                 </summary>
                 <div class="collapse-content">
                   <p
-                    class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                    class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                   >
                     No, we do not charge any additional commissions or hidden
                     fees beyond our subscription plans.
@@ -1240,18 +1261,19 @@
             <li>
               <details class="collapse collapse-arrow">
                 <summary
-                  class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
+                  class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
                 >
                   Can I request a refund?
                 </summary>
                 <div class="collapse-content">
                   <p
-                    class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                    class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                   >
                     We offer a 30 day money back guarantee, no questions asked.
                     Just send an email to <a
                       href={`mailto:${emailAddress}`}
-                      class="text-blue-400 underline">{emailAddress}</a
+                      class="text-blue-500 dark:text-blue-400 underline"
+                      >{emailAddress}</a
                     > and you will get a full refund.
                   </p>
                 </div>
@@ -1261,13 +1283,13 @@
             <li>
               <details class="collapse collapse-arrow">
                 <summary
-                  class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
+                  class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
                 >
                   What are my payment options?
                 </summary>
                 <div class="collapse-content">
                   <p
-                    class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                    class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                   >
                     We support Credit Card & Paypal payments.
                   </p>
@@ -1278,13 +1300,13 @@
             <li>
               <details class="collapse collapse-arrow">
                 <summary
-                  class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
+                  class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
                 >
                   Can I cancel at any time?
                 </summary>
                 <div class="collapse-content">
                   <p
-                    class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                    class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                   >
                     Of course. There is a "Cancel Subscription" button in your
                     account area that you get access to after signing up. You
@@ -1296,13 +1318,13 @@
             <li>
               <details class="collapse collapse-arrow">
                 <summary
-                  class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
+                  class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
                 >
                   Why is Stocknear so much cheaper than other platforms?
                 </summary>
                 <div class="collapse-content">
                   <p
-                    class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                    class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                   >
                     Stocknear is a solo project, which means I handle everything
                     myself—eliminating the need for a large team and costly
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 23fd256a..7764239e 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -391,201 +391,196 @@
         <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 sm:hidden">
-              <div class="navbar w-full px-4 py-2">
+            <div
+              class="fixed top-0 left-0 right-0 z-20 sm:hidden {isScrolled
+                ? 'border-b border-gray-300 dark:border-gray-800 ease-in shadow'
+                : 'ease-out'} m-auto w-full"
+            >
+              <div class="navbar h-full w-full px-4 bg-white dark:bg-default">
                 <div
-                  class="{isScrolled
-                    ? 'border-b border-gray-600 ease-in'
-                    : 'ease-out'} m-auto w-full"
+                  class="flex-1 shrink-0 flex flex-row items-center justify-between"
                 >
-                  <div
-                    class="flex-1 shrink-0 flex flex-row items-center justify-between -mt-2"
+                  <a
+                    href={/^\/(stocks|etf|index)/.test($previousPage || "")
+                      ? "/"
+                      : $previousPage || "/"}
                   >
-                    <a
-                      href={/^\/(stocks|etf|index)/.test($previousPage || "")
-                        ? "/"
-                        : $previousPage || "/"}
+                    <svg
+                      class="w-5 h-5 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 1024 1024"
+                      ><g transform="rotate(-90 512 512)"
+                        ><path
+                          fill="currentColor"
+                          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
                     >
-                      <svg
-                        class="w-5 h-5 inline-block"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 1024 1024"
-                        ><g transform="rotate(-90 512 512)"
-                          ><path
-                            fill="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
-                      >
-                    </a>
+                  </a>
 
-                    <div
-                      class={!isScrolled
-                        ? "hidden"
-                        : "flex flex-col items-center ml-6 transition-transform ease-in"}
+                  <div
+                    class={!isScrolled
+                      ? "hidden"
+                      : "flex flex-col items-center ml-6 transition-transform ease-in"}
+                  >
+                    <span class=" text-xs font-semibold">
+                      {$stockTicker}
+                    </span>
+                    <span class=" text-sm">
+                      {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
+                        {$currentPortfolioPrice}
+                      {:else}
+                        {data?.getStockQuote?.price}
+                      {/if}
+                    </span>
+                  </div>
+
+                  <!--Start Search Button-->
+                  <label class="ml-auto mr-4" for="searchBarModal">
+                    <svg
+                      class="w-6 h-6 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
+                      /></svg
                     >
-                      <span class=" text-xs font-semibold">
-                        {$stockTicker}
-                      </span>
-                      <span class=" text-sm">
-                        {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
-                          {$currentPortfolioPrice}
-                        {:else}
-                          {data?.getStockQuote?.price}
-                        {/if}
-                      </span>
+                  </label>
+                  <!--End Search Button-->
+
+                  <!--Start Share Button-->
+                  <label
+                    class="mr-4"
+                    on:click={() =>
+                      shareContent(
+                        "https://stocknear.com/stocks/" + $stockTicker,
+                      )}
+                  >
+                    <svg
+                      class="w-6 h-6 inline-block"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      stroke="currentColor"
+                      ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                        id="SVGRepo_tracerCarrier"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ></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"
+                        ></path>
+                      </g></svg
+                    >
+                  </label>
+                  <!--End Share Button-->
+
+                  <!--Start Watchlist-->
+
+                  {#if data?.user}
+                    <div class="flex flex-col mr-4">
+                      {#if userWatchList?.length !== 0}
+                        <label
+                          for="addWatchListModal"
+                          class="cursor-pointer shrink-0"
+                        >
+                          {#if isTickerIncluded}
+                            <svg
+                              class="w-6 h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill="currentColor"
+                                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
+                            >
+                          {:else}
+                            <svg
+                              class="w-6 h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill="currentColor"
+                                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
+                            >
+                          {/if}
+                        </label>
+                      {:else if userWatchList?.length === 0}
+                        <label
+                          on:click={() => toggleUserWatchlist("firstList")}
+                          class="cursor-pointer shrink-0"
+                        >
+                          {#if isTickerIncluded}
+                            <svg
+                              class="w-6 h-6 inline-block text-muted dark:text-white"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill="currentColor"
+                                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
+                            >
+                          {:else}
+                            <svg
+                              class="w-6 h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill="currentColor"
+                                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
+                            >
+                          {/if}
+                        </label>
+                      {/if}
                     </div>
-
-                    <!--Start Search Button-->
-                    <label class="ml-auto mr-4" for="searchBarModal">
+                  {:else}
+                    <label for="userLogin" class="cursor-pointer shrink-0 mr-4">
                       <svg
                         class="w-6 h-6 inline-block"
                         xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
+                        viewBox="0 0 16 16"
                         ><path
-                          fill="none"
-                          stroke="white"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                          d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
+                          fill="currentColor"
+                          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
                       >
                     </label>
-                    <!--End Search Button-->
+                  {/if}
+                  <!--End Watchlist-->
 
-                    <!--Start Share Button-->
-                    <label
-                      class="mr-4"
-                      on:click={() =>
-                        shareContent(
-                          "https://stocknear.com/stocks/" + $stockTicker,
-                        )}
-                    >
-                      <svg
-                        class="w-6 h-6 inline-block"
-                        viewBox="0 0 24 24"
+                  <!--Start Price Alert-->
+                  <label
+                    on:click={() => ($openPriceAlert = true)}
+                    for={data?.user ? "priceAlertModal" : "userLogin"}
+                    class="mr-2"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="w-7 h-7 inline-block mt-1"
+                      viewBox="0 0 24 24"
+                      ><g
                         fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        stroke="#fff"
-                        ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-                          id="SVGRepo_tracerCarrier"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        ></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="#fff"
-                          ></path>
-                        </g></svg
-                      >
-                    </label>
-                    <!--End Share Button-->
-
-                    <!--Start Watchlist-->
-
-                    {#if data?.user}
-                      <div class="flex flex-col mr-4">
-                        {#if userWatchList?.length !== 0}
-                          <label
-                            for="addWatchListModal"
-                            class="cursor-pointer shrink-0"
-                          >
-                            {#if isTickerIncluded}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="#fff"
-                                  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
-                              >
-                            {:else}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="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
-                              >
-                            {/if}
-                          </label>
-                        {:else if userWatchList?.length === 0}
-                          <label
-                            on:click={() => toggleUserWatchlist("firstList")}
-                            class="cursor-pointer shrink-0"
-                          >
-                            {#if isTickerIncluded}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="#fff"
-                                  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
-                              >
-                            {:else}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="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
-                              >
-                            {/if}
-                          </label>
-                        {/if}
-                      </div>
-                    {:else}
-                      <label
-                        for="userLogin"
-                        class="cursor-pointer shrink-0 mr-4"
-                      >
-                        <svg
-                          class="w-6 h-6 inline-block"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 16 16"
-                          ><path
-                            fill="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
-                        >
-                      </label>
-                    {/if}
-                    <!--End Watchlist-->
-
-                    <!--Start Price Alert-->
-                    <label
-                      on:click={() => ($openPriceAlert = true)}
-                      for={data?.user ? "priceAlertModal" : "userLogin"}
-                      class="mr-2"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        ><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
+                          cx="12"
+                          cy="13"
+                          r="8"
+                        /><path d="M9.5 13h5M12 10.5v5" /></g
+                      ></svg
                     >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="w-7 h-7 inline-block mt-1"
-                        viewBox="0 0 24 24"
-                        ><g
-                          fill="none"
-                          stroke="white"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                          ><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
-                            cx="12"
-                            cy="13"
-                            r="8"
-                          /><path d="M9.5 13h5M12 10.5v5" /></g
-                        ></svg
-                      >
-                    </label>
-                    <!--End Price Alert -->
-                  </div>
+                  </label>
+                  <!--End Price Alert -->
                 </div>
               </div>
             </div>
@@ -794,15 +789,15 @@
                                 >
                                   <span
                                     class={displayLegend?.change >= 0
-                                      ? "before:content-['+'] text-[#00FC50]"
-                                      : "text-[#FF2F1F]"}
+                                      ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
+                                      : "text-red-600 dark:text-[#FF2F1F]"}
                                   >
                                     {displayLegend?.change}
                                   </span>
                                   <span
                                     class={displayLegend?.changesPercentage >= 0
-                                      ? "text-[#00FC50]"
-                                      : "text-[#FF2F1F]"}
+                                      ? "text-green-600 dark:text-[#00FC50]"
+                                      : "text-red-600 dark:text-[#FF2F1F]"}
                                   >
                                     ({displayLegend?.changesPercentage}%)
                                   </span>
@@ -838,8 +833,8 @@
                                   <div
                                     class="mt-1.5 block text-sm xs:text-base sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
                                     0
-                                      ? "before:content-['+'] text-[#00FC50]"
-                                      : 'text-[#FF2F1F]'}"
+                                      ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
+                                      : 'text-red-600 dark:text-[#FF2F1F]'}"
                                   >
                                     {prePostData?.changesPercentage?.toFixed(
                                       2,
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 0acad41d..dccac055 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
   import {
     getCache,
@@ -85,13 +86,17 @@
         ? data?.getStockQuote?.changesPercentage < 0
         : change < 0;
 
-    const lineColor = isNegative ? "#CC261A" : "#00FC50";
+    const lineColor = isNegative
+      ? "#CC261A"
+      : $mode === "light"
+        ? "#047857"
+        : "#00FC50";
     const fillColorStart = isNegative
       ? "rgba(204, 38, 26, 0.3)"
-      : "rgba(0, 252, 80, 0.3)";
+      : "rgb(4, 120, 87, 0.3)"; //"rgba(0, 252, 80, 0.3)";
     const fillColorEnd = isNegative
       ? "rgba(204, 38, 26, 0.004)"
-      : "rgba(0, 252, 80, 0.004)";
+      : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
 
     const baseDate =
       rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date();
@@ -114,8 +119,9 @@
 
     const options = {
       chart: {
-        backgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
+        animation: false,
         events: {
           // Add touch event handling to hide tooltip on mobile
           load: function () {
@@ -150,7 +156,7 @@
         borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
         borderWidth: 1,
         style: {
-          color: "#fff",
+          color: $mode === "light" ? "black" : "white",
           fontSize: "16px",
           padding: "10px",
         },
@@ -201,12 +207,12 @@
         tickLength: 0,
         categories: displayData === "1D" ? null : dateList,
         crosshair: {
-          color: "#fff",
+          color: $mode === "light" ? "black" : "white",
           width: 1,
           dashStyle: "Solid",
         },
         labels: {
-          style: { color: "#fff" },
+          style: { color: $mode === "light" ? "black" : "white" },
           distance: 20,
           formatter: function () {
             const date = new Date(this?.value);
@@ -251,10 +257,10 @@
         startOnTick: false,
         endOnTick: false,
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         title: { text: null },
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "black" : "white" },
         },
         opposite: true,
         // Add a dashed plot line at the previous close value
@@ -636,7 +642,7 @@
   }
 
   $: {
-    if ($stockTicker) {
+    if ($stockTicker || $mode) {
       // add a check to see if running on client-side
       shouldUpdatePriceChart.set(false);
       oneDayPrice = [];
@@ -690,7 +696,8 @@
                             <span
                               class="block {displayData === interval
                                 ? 'text-muted dark:text-white'
-                                : 'text-gray-400'}">{interval}</span
+                                : 'text-muted dark:text-gray-400'}"
+                              >{interval}</span
                             >
                             <div
                               class="{displayData === interval
@@ -731,7 +738,8 @@
                             <span
                               class="block {displayData === interval
                                 ? 'text-muted dark:text-white'
-                                : 'text-gray-400'}">{interval}</span
+                                : 'text-muted dark:text-gray-400'}"
+                              >{interval}</span
                             >
                             <div
                               class="{displayData === interval