From a996c5dcf71f0d5655789b7dccc4e806716ef44f Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 11 Mar 2025 01:59:12 +0100
Subject: [PATCH] ui fix

---
 .../[tickerID]/dividends/+layout.svelte       |  6 +-
 .../stocks/[tickerID]/dividends/+page.svelte  | 90 ++++++++-----------
 .../stocks/[tickerID]/history/+page.svelte    | 60 ++++++-------
 .../stocks/[tickerID]/metrics/+layout.svelte  | 10 +--
 .../stocks/[tickerID]/metrics/+page.svelte    | 70 +++++++--------
 .../[tickerID]/metrics/[slug]/+page.svelte    | 77 +++++++---------
 .../statistics/market-cap/+page.svelte        | 13 +--
 .../statistics/revenue/+layout.svelte         |  2 +-
 .../statistics/revenue/+page.svelte           | 14 +--
 9 files changed, 157 insertions(+), 185 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/dividends/+layout.svelte b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
index 604d9012..4eba08af 100644
--- a/src/routes/stocks/[tickerID]/dividends/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
@@ -20,13 +20,13 @@
         <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if newsList?.length !== 0}
             <div
-              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
             >
               <div class="p-4 text-sm">
-                <h3 class="text-lg text-white font-semibold mb-3">
+                <h3 class="text-lg font-semibold mb-3">
                   {$stockTicker} News
                 </h3>
-                <ul class="text-white">
+                <ul class="">
                   {#each newsList?.slice(0, 10) as item}
                     <li class="mb-3 last:mb-1">
                       {formatDate(item?.publishedDate)} &#183;
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 026ff405..ce9e19fb 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -68,59 +68,53 @@
   description={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
         <div class="w-full mb-6">
-          <h1 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4 w-full">
-            Dividends
-          </h1>
+          <h1 class="text-xl sm:text-2xl font-bold mb-4 w-full">Dividends</h1>
 
           <Infobox text={htmlOutput} />
         </div>
 
         {#if rawData?.history?.length !== 0}
           <div
-            class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
+            class="shadow-sm mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
           >
             <div class="p-4 bp:p-5 sm:p-6">
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Dividend Yield
               </label>
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {dividendYield !== "0.00" ? dividendYield : "0"}%
               </div>
             </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-b border-gray-600">
+            <div
+              class="p-4 bp:p-5 sm:p-6 border-b border-gray-300 dark:border-gray-600"
+            >
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Annual Dividend
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {annualDividend !== "0.00" ? annualDividend : "0"}
               </div>
             </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-none">
+            <div class="p-4 bp:p-5 sm:p-6 border-t border-b sm:border-none">
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Ex-Dividend Date
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {new Date(exDividendDate)?.toLocaleString("en-US", {
                   month: "short",
                   day: "numeric",
@@ -132,53 +126,47 @@
 
             <div class="p-4 bp:p-5 sm:p-6 border-t">
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Payout Frequency
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {payoutFrequency ? payoutFrequency : "n/a"}
               </div>
             </div>
             <div class="p-4 bp:p-5 sm:p-6">
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Payout Ratio
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {payoutRatio !== "0.00" && payoutRatio !== null
                   ? payoutRatio + "%"
                   : "n/a"}
               </div>
             </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600">
+            <div
+              class="p-4 bp:p-5 sm:p-6 border-t border-gray-300 dark:border-gray-600"
+            >
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Dividend Growth
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {dividendGrowth ? dividendGrowth + "%" : "n/a"}
               </div>
             </div>
           </div>
 
           <div
-            class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-8"
+            class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-4"
           >
-            <h2 class="text-xl sm:text-2xl text-white font-bold">
-              Dividends History
-            </h2>
+            <h2 class="text-xl sm:text-2xl font-bold">Dividends History</h2>
           </div>
 
           {#if rawData?.history?.length !== 0}
@@ -186,32 +174,32 @@
               class="overflow-x-auto no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
             >
               <table
-                class="table table-sm table-compact bg-table border border-gray-800 flex justify-start items-center w-full m-auto"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
               >
-                <thead class="bg-default">
+                <thead class="text-muted dark:text-white">
                   <tr class="">
-                    <th class="text-start text-white text-sm font-semibold">
+                    <th class="text-start text-sm font-semibold">
                       Ex-Dividend Date
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
+                    <th class="text-end text-sm font-semibold">
                       Cash Amount
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
+                    <th class="text-end text-sm font-semibold">
                       Declaration Date
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
+                    <th class="text-end text-sm font-semibold">
                       Record Date
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
-                      Pay Date
-                    </th>
+                    <th class="text-end text-sm font-semibold"> Pay Date </th>
                   </tr>
                 </thead>
                 <tbody class="">
                   {#each rawData?.history as item}
-                    <tr class="text-white odd:bg-odd">
+                    <tr
+                      class=" dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
+                    >
                       <td
-                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {new Date(item?.date)?.toLocaleString("en-US", {
                           month: "short",
@@ -221,12 +209,12 @@
                         })}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         ${item?.adjDividend?.toFixed(3)}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.declarationDate?.length !== 0
                           ? new Date(item?.declarationDate)?.toLocaleString(
@@ -241,7 +229,7 @@
                           : "n/a"}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.recordDate?.length !== 0
                           ? new Date(item?.recordDate)?.toLocaleString(
@@ -256,7 +244,7 @@
                           : "n/a"}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.paymentDate?.length !== 0
                           ? new Date(item?.paymentDate)?.toLocaleString(
diff --git a/src/routes/stocks/[tickerID]/history/+page.svelte b/src/routes/stocks/[tickerID]/history/+page.svelte
index 9ffac874..58bc178c 100644
--- a/src/routes/stocks/[tickerID]/history/+page.svelte
+++ b/src/routes/stocks/[tickerID]/history/+page.svelte
@@ -275,7 +275,7 @@
 />
 
 <section
-  class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
+  class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
 >
   <div class="w-full overflow-hidden m-auto mt-5">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@@ -298,11 +298,9 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-fit sm:w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                        class="shadow-sm w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                       >
-                        <span class="truncate text-white px-1"
-                          >{timePeriod}</span
-                        >
+                        <span class="truncate px-1">{timePeriod}</span>
                         <svg
                           class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                           viewBox="0 0 20 20"
@@ -321,20 +319,20 @@
                     <DropdownMenu.Content
                       class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                     >
-                      <DropdownMenu.Label class="text-gray-400">
+                      <DropdownMenu.Label class="text-muted dark:text-gray-400">
                         Select time frame
                       </DropdownMenu.Label>
                       <DropdownMenu.Separator />
                       <DropdownMenu.Group>
                         <DropdownMenu.Item
                           on:click={() => (timePeriod = "Daily")}
-                          class="cursor-pointer hover:bg-primary"
+                          class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                         >
                           Daily
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                           on:click={() => (timePeriod = "Weekly")}
-                          class="cursor-pointer hover:bg-primary"
+                          class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                         >
                           Weekly
                         </DropdownMenu.Item>
@@ -342,7 +340,7 @@
                           {#each ["Monthly", "Quarterly", "Annual"] as entry}
                             <DropdownMenu.Item
                               on:click={() => goto("/pricing")}
-                              class="cursor-pointer hover:bg-primary"
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                             >
                               {entry}
                               <svg
@@ -350,7 +348,7 @@
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24"
                                 ><path
-                                  fill="#A3A3A3"
+                                  fill="currentColor"
                                   d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                                 /></svg
                               >
@@ -359,19 +357,19 @@
                         {:else}
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Monthly")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Monthly
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Quarterly")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Quarterly
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Annual")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Annual
                           </DropdownMenu.Item>
@@ -383,9 +381,9 @@
 
                 <Button
                   on:click={() => exportData()}
-                  class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                  class="shadow-sm ml-2 border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                 >
-                  <span class="truncate text-white">Download</span>
+                  <span class="truncate">Download</span>
                   <svg
                     class="{['Pro', 'Plus']?.includes(data?.user?.tier)
                       ? 'hidden'
@@ -393,7 +391,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
                     ><path
-                      fill="#A3A3A3"
+                      fill="currentColor"
                       d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                     /></svg
                   >
@@ -406,7 +404,7 @@
                   class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
                 >
                   <table
-                    class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
+                    class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
                   >
                     <thead>
                       <TableHeader {columns} {sortOrders} {sortData} />
@@ -415,7 +413,7 @@
                     <tbody>
                       {#each stockList as item, index}
                         <tr
-                          class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
+                          class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                             1 ===
                             rawData?.length &&
                           !['Pro', 'Plus']?.includes(data?.user?.tier)
@@ -423,7 +421,7 @@
                             : ''}"
                         >
                           <td
-                            class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                            class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             {#if timePeriod === "Weekly"}
                               Week of {new Date(item?.time).toLocaleString(
@@ -445,45 +443,45 @@
                             {/if}
                           </td>
                           <td
-                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             {item?.open?.toFixed(2)}
                           </td>
                           <td
-                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             {item?.high?.toFixed(2)}
                           </td>
                           <td
-                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             {item?.low?.toFixed(2)}
                           </td>
                           <td
-                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             {item?.close?.toFixed(2)}
                           </td>
                           <td
-                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             {item?.change !== null ? item?.change : "n/a"}
                           </td>
                           <td
                             class="text-sm sm:text-[1rem] {item?.changesPercentage >=
                               0 && item?.changesPercentage !== null
-                              ? "text-[#00FC50] before:content-['+'] "
+                              ? "text-green-600 dark:text-[#00FC50] before:content-['+'] "
                               : item?.changesPercentage < 0 &&
                                   item?.changesPercentage !== null
                                 ? 'text-red-600 dark:text-[#FF2F1F]'
-                                : 'text-white'} text-end"
+                                : ''} text-end"
                           >
                             {item?.changesPercentage !== null
                               ? item?.changesPercentage + "%"
                               : "n/a"}
                           </td>
                           <td
-                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             {item?.volume?.toLocaleString("en-US")}
                           </td>
@@ -512,9 +510,7 @@
                 <h2 class="text-start text-xl font-semibold ml-3">
                   Stock Screener
                 </h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
+                <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
               </div>
               <span class="p-3 ml-3 mr-3">
                 Filter, sort and analyze all stocks to find your next
@@ -532,9 +528,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
+                <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
               </div>
               <span class="p-3 ml-3 mr-3">
                 Keep track of your favorite stocks in real-time.
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index 459661f4..db7beca3 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -55,14 +55,12 @@
 
 <!-- Rest of the component remains the same -->
 
-<section class="w-full bg-default overflow-hidden h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="m-auto h-full overflow-hidden">
     <main class="w-full">
       <div class="m-auto">
         {#if names?.length > 0}
-          <nav
-            class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
-          >
+          <nav class="ml-4 overflow-x-auto whitespace-nowrap">
             <ul class="flex flex-row items-center w-full text-white">
               {#each subsectionTitles as title}
                 {@const sectionKey = title
@@ -77,8 +75,8 @@
                   on:click={() => changeSubSection(sectionKey)}
                   class="p-2 px-5 cursor-pointer {displaySubSection ===
                   sectionKey
-                    ? 'text-white bg-primary/90'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                    ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                    : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
                 >
                   {title}
                 </a>
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index 8185ee67..bd6903a3 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -72,14 +72,14 @@
   description={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`}
 />
 
-<section class="bg-default overflow-hidden text-white min-h-screen w-full">
+<section class=" overflow-hidden min-h-screen w-full">
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
     >
       <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
         {#if revenueNames?.length !== 0 || geographicNames?.length !== 0}
-          <h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+          <h2 class="mt-5 text-xl sm:text-2xl font-bold mb-4">
             {$displayCompanyName} Revenue Breakdown
           </h2>
 
@@ -87,17 +87,17 @@
             class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
           >
             <table
-              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800"
+              class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
             >
-              <thead class="bg-default">
+              <thead class="text-muted dark:text-white">
                 <tr>
                   <th
-                    class=" border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
+                    class=" border-b border-gray-300 dark:border-gray-800 font-semibold text-sm sm:text-[1rem] text-start"
                     >Quarter</th
                   >
                   {#each xData as item}
                     <th
-                      class="z-20 border-b border-gray-800 text-white font-semibold text-sm text-center"
+                      class="z-20 border-b border-gray-300 dark:border-gray-800 font-semibold text-sm text-center"
                       >{new Date(item ?? null)?.toLocaleString("en-US", {
                         month: "short",
                         day: "numeric",
@@ -109,20 +109,20 @@
               </thead>
               <tbody class="shadow-md">
                 {#each revenueNames as name, index}
-                  <tr class="bg-table odd:bg-odd">
+                  <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
                     <th
-                      class="whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-800"
+                      class="whitespace-nowrap odd:bg-[#F6F7F8] dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
                     >
                       <a
                         href={getHref(name)}
-                        class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
+                        class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
                       >
                         {name} Revenue
                       </a>
                     </th>
                     {#each categoryValues[index] as value}
                       <td
-                        class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800"
+                        class=" text-sm sm:text-[1rem] text-end border-b border-gray-300 dark:border-gray-800"
                       >
                         {@html value !== null && value !== undefined
                           ? abbreviateNumber(value, false, true)
@@ -130,9 +130,9 @@
                       </td>
                     {/each}
                   </tr>
-                  <tr class="bg-table border-b-[#09090B]">
+                  <tr class="">
                     <td
-                      class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start bg-table border-b border-gray-800"
+                      class=" whitespace-nowrap text-sm sm:text-[1rem] text-start border-b border-gray-300 dark:border-gray-800"
                     >
                       <span class="ml-2">{name} Revenue Growth</span>
                     </td>
@@ -142,7 +142,7 @@
                           ? 'text-green-600 dark:text-[#00FC50]'
                           : growthValue < 0
                             ? 'text-red-600 dark:text-[#FF2F1F]'
-                            : 'text-white'}  border-b border-gray-800"
+                            : ''}  border-b border-gray-300 dark:border-gray-800"
                       >
                         {growthValue > 0 ? "+" : ""}{growthValue !== null &&
                         growthValue !== undefined
@@ -157,7 +157,7 @@
           </div>
 
           {#if geographicNames?.length !== 0}
-            <h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+            <h2 class="mt-10 text-xl sm:text-2xl font-bold mb-4">
               Revenue by Geography
             </h2>
 
@@ -165,17 +165,17 @@
               class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
             >
               <table
-                class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
               >
-                <thead>
+                <thead class="text-muted dark:text-white">
                   <tr>
                     <th
-                      class="bg-default border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
+                      class="whitespace-nowrap dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
                       >Quarter</th
                     >
                     {#each geographicXData as item}
                       <th
-                        class="z-20 bg-default border-b border-gray-800 text-white font-semibold text-sm text-center bg-default"
+                        class="z-20 border-b border-gray-300 dark:border-gray-800 font-semibold text-sm text-center"
                         >{new Date(item ?? null)?.toLocaleString("en-US", {
                           month: "short",
                           day: "numeric",
@@ -187,14 +187,14 @@
                 </thead>
                 <tbody class="shadow-md">
                   {#each geographicNames as name, index}
-                    <tr class="bg-table border-b-[#09090B] odd:bg-odd">
+                    <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
                       <th
-                        class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-800"
+                        class="whitespace-nowrap dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
                         >{name} Revenue</th
                       >
                       {#each geographiCategoryValues[index] as value}
                         <td
-                          class="text-white text-sm sm:text-[1rem] text-center border-b border-gray-800"
+                          class="whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
                         >
                           {@html value !== null &&
                           value !== 0 &&
@@ -204,9 +204,9 @@
                         </td>
                       {/each}
                     </tr>
-                    <tr class="bg-table border-b-[#09090B]">
+                    <tr>
                       <td
-                        class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start bg-table border-b border-gray-800"
+                        class="whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
                       >
                         <span class="ml-2">{name} Revenue Growth</span>
                       </td>
@@ -217,7 +217,7 @@
                             ? 'text-green-600 dark:text-[#00FC50]'
                             : growthValue < 0
                               ? 'text-red-600 dark:text-[#FF2F1F]'
-                              : 'text-white'}  border-b border-gray-800"
+                              : ''}  border-b border-gray-300 dark:border-gray-800"
                         >
                           {growthValue > 0 ? "+" : ""}{growthValue !== null &&
                           growthValue !== 0 &&
@@ -234,7 +234,7 @@
           {/if}
 
           {#if operatingExpensesNames?.length !== 0}
-            <h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+            <h2 class="mt-10 text-xl sm:text-2xl font-bold mb-4">
               Operating Expense Breakdown
             </h2>
 
@@ -242,17 +242,17 @@
               class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
             >
               <table
-                class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
               >
-                <thead>
+                <thead class="text-muted dark:text-white">
                   <tr>
                     <th
-                      class="bg-default border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
+                      class=" border-b border-gray-300 dark:border-gray-800 font-semibold text-sm sm:text-[1rem] text-start"
                       >Quarter</th
                     >
                     {#each operatingExpensesXData as item}
                       <th
-                        class="z-20 bg-default border-b border-gray-800 text-white font-semibold text-sm text-center bg-default"
+                        class="z-20 border-b border-gray-300 dark:border-gray-800 font-semibold text-sm text-center"
                         >{new Date(item ?? null)?.toLocaleString("en-US", {
                           month: "short",
                           day: "numeric",
@@ -264,14 +264,14 @@
                 </thead>
                 <tbody class="shadow-md">
                   {#each operatingExpensesNames as name, index}
-                    <tr class="bg-table border-b-[#09090B] odd:bg-odd">
+                    <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
                       <th
-                        class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-800"
+                        class="whitespace-nowrap odd:bg-[#F6F7F8] dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
                         >{name} Revenue</th
                       >
                       {#each operatingExpensesCategoryValues[index] as value}
                         <td
-                          class="text-white text-sm sm:text-[1rem] text-center border-b border-gray-800"
+                          class=" whitespace-nowrap text-sm sm:text-[1rem] text-start border-b border-gray-300 dark:border-gray-800"
                         >
                           {@html value !== null &&
                           value !== 0 &&
@@ -281,9 +281,9 @@
                         </td>
                       {/each}
                     </tr>
-                    <tr class="bg-table border-b-[#09090B]">
+                    <tr class="">
                       <td
-                        class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start bg-table border-b border-gray-800"
+                        class="whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
                       >
                         <span class="ml-2">{name} Revenue Growth</span>
                       </td>
@@ -294,7 +294,7 @@
                             ? 'text-green-600 dark:text-[#00FC50]'
                             : growthValue < 0
                               ? 'text-red-600 dark:text-[#FF2F1F]'
-                              : 'text-white'}  border-b border-gray-800"
+                              : ''}  border-b border-gray-300 dark:border-gray-800"
                         >
                           {growthValue > 0 ? "+" : ""}{growthValue !== null &&
                           growthValue !== 0 &&
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index c31dff9b..1bd58eee 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -7,6 +7,7 @@
   } from "$lib/utils";
   import SEO from "$lib/components/SEO.svelte";
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
   export let data;
 
@@ -59,15 +60,15 @@
       },
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360, // Set the maximum height for the chart
         animation: false,
       },
       title: {
         text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Revenue by ${convertToTitleCase(data?.getParams)}</h3>`,
         style: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
           // Using inline CSS for margin-top and margin-bottom
         },
         useHTML: true, // Enable HTML to apply custom class styling
@@ -83,7 +84,7 @@
             return `${monthNames[monthIndex]} '${year}`;
           },
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
             fontSize: "12px",
           },
           rotation: 45, // Rotate labels for better readability
@@ -92,9 +93,9 @@
       },
       yAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "black" : "white" },
         },
         title: { text: null },
         opposite: true,
@@ -112,8 +113,8 @@
         },
         borderRadius: 4,
         formatter: function () {
-          // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
+          // Format the x value to display time in a custom format
+          let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
             this?.x,
           ).toLocaleDateString("en-US", {
             year: "numeric",
@@ -123,10 +124,10 @@
 
           // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
-            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
-            point.y,
-          )}</span><br>`;
+            tooltipContent += `
+        <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
+        <span class="font-semibold text-sm">${point.series.name}:</span> 
+        <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
           });
 
           return tooltipContent;
@@ -153,7 +154,7 @@
         {
           name: "Revenue",
           data: valueList,
-          color: "#fff",
+          color: $mode === "light" ? "#2C6288" : "white",
         },
       ],
       legend: {
@@ -165,7 +166,7 @@
   }
 
   $: {
-    if ($stockTicker && data?.getParams) {
+    if (($stockTicker && data?.getParams) || $mode) {
       dataset = [];
       tableList = [];
       // Find the index of the current getParams value in the names array
@@ -193,7 +194,7 @@
   description={`View unique business metrics for ${$displayCompanyName} (${$stockTicker}) stock, including revenue by segment, gross margin by type, gross profit by type.`}
 />
 
-<section class="bg-default w-full overflow-hidden text-white h-full">
+<section class=" w-full overflow-hidden h-full">
   <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -201,48 +202,38 @@
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
-            <h1 class="text-2xl text-gray-200 font-bold">
+            <h1 class="text-2xl font-bold">
               {convertToTitleCase(data?.getParams)} Revenue
             </h1>
           </div>
 
           {#if rawData?.length !== 0}
             <div
-              class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
+              class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
               use:highcharts={config}
             ></div>
 
-            <h2 class="mt-5 text-xl sm:text-2xl text-white font-bold">
-              History
-            </h2>
+            <h2 class="mt-5 text-xl sm:text-2xl font-bold">History</h2>
 
             <div class="w-full overflow-x-auto">
               <table
-                class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
               >
-                <thead class="bg-default">
-                  <tr class="border-b border-gray-800">
-                    <th class="text-white font-semibold text-start text-sm"
-                      >Quarter</th
-                    >
-                    <th class="text-white font-semibold text-end text-sm"
-                      >Value</th
-                    >
-                    <th class="text-white font-semibold text-end text-sm">
-                      Change
-                    </th>
-                    <th class="text-white font-semibold text-end text-sm"
-                      >Growth</th
-                    >
+                <thead class="text-muted dark:text-white">
+                  <tr class="border-b border-gray-300 dark:border-gray-800">
+                    <th class=" font-semibold text-start text-sm">Quarter</th>
+                    <th class=" font-semibold text-end text-sm">Value</th>
+                    <th class=" font-semibold text-end text-sm"> Change </th>
+                    <th class=" font-semibold text-end text-sm">Growth</th>
                   </tr>
                 </thead>
                 <tbody>
                   {#each tableList as item, index}
                     <!-- row -->
-                    <tr class=" odd:bg-odd border-b border-gray-800">
-                      <td
-                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap"
-                      >
+                    <tr
+                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
+                    >
+                      <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                         {new Date(item?.date ?? null)?.toLocaleString("en-US", {
                           month: "short",
                           day: "numeric",
@@ -251,7 +242,7 @@
                       </td>
 
                       <td
-                        class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                        class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
                       >
                         {@html item?.value !== null && item?.value !== undefined
                           ? abbreviateNumber(item?.value, false, true)
@@ -259,7 +250,7 @@
                       </td>
 
                       <td
-                        class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                        class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
                       >
                         {#if Number(item?.value - tableList[index + 1]?.value)}
                           {@html abbreviateNumber(
@@ -273,7 +264,7 @@
                       </td>
 
                       <td
-                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-end"
+                        class=" text-sm sm:text-[1rem] whitespace-nowrap text-end"
                       >
                         {#if item?.valueGrowth > 0}
                           <span class="text-green-600 dark:text-[#00FC50]">
@@ -294,7 +285,7 @@
             </div>
           {:else}
             <h2
-              class="mt-16 flex justify-center items-center text-2xl text-white mb-5 m-auto"
+              class="mt-16 flex justify-center items-center text-2xl mb-5 m-auto"
             >
               No data available
             </h2>
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index 442791fa..46b68622 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -326,8 +326,8 @@
         },
         borderRadius: 4,
         formatter: function () {
-          // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${new Date(
+          // Format the x value to display time in a custom format
+          let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
             this?.x,
           ).toLocaleDateString("en-US", {
             year: "numeric",
@@ -337,15 +337,16 @@
 
           // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
-            tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span> 
-          <span class=" font-normal text-sm">${abbreviateNumber(
-            point.y,
-          )}</span><br>`;
+            tooltipContent += `
+        <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
+        <span class="font-semibold text-sm">${point.series.name}:</span> 
+        <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
           });
 
           return tooltipContent;
         },
       },
+
       plotOptions: {
         series: {
           color: "white",
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte
index 74b8fadf..c4c2c121 100644
--- a/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte
@@ -49,7 +49,7 @@
         <aside class="inline-block relative w-full lg:w-1/4 mt-3">
           {#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial}
             <div
-              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
index eac95f4a..58ca05b6 100644
--- a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
@@ -142,8 +142,8 @@
         },
         borderRadius: 4,
         formatter: function () {
-          // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${new Date(
+          // Format the x value to display time in a custom format
+          let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
             this?.x,
           ).toLocaleDateString("en-US", {
             year: "numeric",
@@ -153,10 +153,10 @@
 
           // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
-            tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span> 
-          <span class=" font-normal text-sm">${abbreviateNumber(
-            point.y,
-          )}</span><br>`;
+            tooltipContent += `
+        <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
+        <span class="font-semibold text-sm">${point.series.name}:</span> 
+        <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
           });
 
           return tooltipContent;
@@ -196,7 +196,7 @@
   }
 
   $: {
-    if ($stockTicker) {
+    if ($stockTicker || $mode) {
       changeTablePeriod(0);
       changeTimePeriod(0);
     }