diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte
index 37ed6f84..33923c63 100644
--- a/src/lib/components/DCF.svelte
+++ b/src/lib/components/DCF.svelte
@@ -282,7 +282,7 @@
                   Sell
                 </span>
               {:else}
-                <span class="text-[#FF2F1F]">
+                <span class="text-red-600 dark:text-[#FF2F1F]">
                   <svg
                     class="w-6 h-6 sm:w-7 sm:h-7 inline-block"
                     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/DarkPool/HistoricalVolume.svelte b/src/lib/components/DarkPool/HistoricalVolume.svelte
index 8eee55cc..a782d5e2 100644
--- a/src/lib/components/DarkPool/HistoricalVolume.svelte
+++ b/src/lib/components/DarkPool/HistoricalVolume.svelte
@@ -394,7 +394,7 @@
                       )?.toFixed(2)}%
                     </span>
                   {:else if item?.shortVolume < tableList[index + 1]?.shortVolume}
-                    <span class="text-[#FF2F1F]">
+                    <span class="text-red-600 dark:text-[#FF2F1F]">
                       -{(
                         Math.abs(
                           (item?.shortVolume -
diff --git a/src/lib/components/Options/GreekByExpiry.svelte b/src/lib/components/Options/GreekByExpiry.svelte
index 5df8f402..067fd399 100644
--- a/src/lib/components/Options/GreekByExpiry.svelte
+++ b/src/lib/components/Options/GreekByExpiry.svelte
@@ -392,7 +392,7 @@
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else if item?.put_call_ratio > 1 && item?.put_call_ratio !== null}
-                <span class="text-[#FF2F1F]"
+                <span class="text-red-600 dark:text-[#FF2F1F]"
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else}
diff --git a/src/lib/components/Options/GreekByStrike.svelte b/src/lib/components/Options/GreekByStrike.svelte
index 767d435a..582a4922 100644
--- a/src/lib/components/Options/GreekByStrike.svelte
+++ b/src/lib/components/Options/GreekByStrike.svelte
@@ -368,7 +368,7 @@
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else if item?.put_call_ratio > 1 && item?.put_call_ratio !== null}
-                <span class="text-[#FF2F1F]"
+                <span class="text-red-600 dark:text-[#FF2F1F]"
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else}
diff --git a/src/lib/components/Options/GreekExposure.svelte b/src/lib/components/Options/GreekExposure.svelte
index c6eb202e..fed9ec37 100644
--- a/src/lib/components/Options/GreekExposure.svelte
+++ b/src/lib/components/Options/GreekExposure.svelte
@@ -485,7 +485,7 @@
                   >{item?.putCallRatio?.toFixed(2)}</span
                 >
               {:else if item?.putCallRatio >= 0 && item?.putCallRatio !== null}
-                <span class="text-[#FF2F1F]"
+                <span class="text-red-600 dark:text-[#FF2F1F]"
                   >{item?.putCallRatio?.toFixed(2)}</span
                 >
               {:else}
diff --git a/src/lib/components/Options/HottestContracts.svelte b/src/lib/components/Options/HottestContracts.svelte
index 35375ab1..1cc50c8f 100644
--- a/src/lib/components/Options/HottestContracts.svelte
+++ b/src/lib/components/Options/HottestContracts.svelte
@@ -672,7 +672,7 @@
                         >+{item?.changeOI?.toLocaleString("en-US")}</span
                       >
                     {:else if item?.changeOI < 0}
-                      <span class="text-[#FF2F1F]"
+                      <span class="text-red-600 dark:text-[#FF2F1F]"
                         >{item?.changeOI?.toLocaleString("en-US")}</span
                       >
                     {:else}
@@ -792,7 +792,7 @@
                         >+{item?.changeOI?.toLocaleString("en-US")}</span
                       >
                     {:else if item?.changeOI < 0}
-                      <span class="text-[#FF2F1F]"
+                      <span class="text-red-600 dark:text-[#FF2F1F]"
                         >{item?.changeOI?.toLocaleString("en-US")}</span
                       >
                     {:else}
@@ -975,7 +975,7 @@
                           >+{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else if item?.changeOI < 0 && item?.changeOI !== null}
-                        <span class="text-[#FF2F1F]"
+                        <span class="text-red-600 dark:text-[#FF2F1F]"
                           >{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else}
@@ -989,7 +989,7 @@
                           >+{item?.changesPercentageOI + "%"}</span
                         >
                       {:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI !== undefined}
-                        <span class="text-[#FF2F1F]"
+                        <span class="text-red-600 dark:text-[#FF2F1F]"
                           >{item?.changesPercentageOI + "%"}</span
                         >
                       {:else if item?.changesPercentageOI === 0 && item?.changesPercentageOI !== undefined}
diff --git a/src/lib/components/Options/OpenInterestByExpiry.svelte b/src/lib/components/Options/OpenInterestByExpiry.svelte
index 3b528942..cf9a9a7d 100644
--- a/src/lib/components/Options/OpenInterestByExpiry.svelte
+++ b/src/lib/components/Options/OpenInterestByExpiry.svelte
@@ -344,7 +344,7 @@
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else if item?.put_call_ratio > 1 && item?.put_call_ratio !== null}
-                <span class="text-[#FF2F1F]"
+                <span class="text-red-600 dark:text-[#FF2F1F]"
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else}
diff --git a/src/lib/components/Options/OpenInterestByStrike.svelte b/src/lib/components/Options/OpenInterestByStrike.svelte
index a3b58c5e..0ec67b18 100644
--- a/src/lib/components/Options/OpenInterestByStrike.svelte
+++ b/src/lib/components/Options/OpenInterestByStrike.svelte
@@ -313,7 +313,7 @@
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else if item?.put_call_ratio > 1 && item?.put_call_ratio !== null}
-                <span class="text-[#FF2F1F]"
+                <span class="text-red-600 dark:text-[#FF2F1F]"
                   >{item?.put_call_ratio?.toFixed(2)}</span
                 >
               {:else}
diff --git a/src/lib/components/Options/UnusualActivity.svelte b/src/lib/components/Options/UnusualActivity.svelte
index 96434356..be70db0f 100644
--- a/src/lib/components/Options/UnusualActivity.svelte
+++ b/src/lib/components/Options/UnusualActivity.svelte
@@ -1006,7 +1006,7 @@
                           >+{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else if item?.changeOI < 0 && item?.changeOI !== null}
-                        <span class="text-[#FF2F1F]"
+                        <span class="text-red-600 dark:text-[#FF2F1F]"
                           >{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else}
@@ -1020,7 +1020,7 @@
                           >+{item?.changesPercentageOI + "%"}</span
                         >
                       {:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI !== undefined}
-                        <span class="text-[#FF2F1F]"
+                        <span class="text-red-600 dark:text-[#FF2F1F]"
                           >{item?.changesPercentageOI + "%"}</span
                         >
                       {:else if item?.changesPercentageOI === 0 && item?.changesPercentageOI !== undefined}
diff --git a/src/lib/components/Options/Volatility.svelte b/src/lib/components/Options/Volatility.svelte
index 13f4cb29..2d086aea 100644
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@@ -500,7 +500,7 @@
                     : item?.changesPercentage?.toFixed(2)}%</span
                 >
               {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
-                <span class="text-[#FF2F1F]"
+                <span class="text-red-600 dark:text-[#FF2F1F]"
                   >{item?.changesPercentage <= -1000
                     ? abbreviateNumberWithColor(item?.changesPercentage)
                     : item?.changesPercentage?.toFixed(2)}%
@@ -530,7 +530,7 @@
                     : item?.changesPercentageOI?.toFixed(2)}%</span
                 >
               {:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI !== null}
-                <span class="text-[#FF2F1F]"
+                <span class="text-red-600 dark:text-[#FF2F1F]"
                   >{item?.changesPercentageOI <= -1000
                     ? abbreviateNumberWithColor(item?.changesPercentageOI)
                     : item?.changesPercentageOI?.toFixed(2)}%
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index 9b939fc4..7e99dbda 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -224,7 +224,7 @@
                   {signal}
                 </span>
               {:else}
-                <span class="text-[#FF2F1F]">
+                <span class="text-red-600 dark:text-[#FF2F1F]">
                   <svg
                     class="w-6 h-6 sm:w-7 sm:h-7 inline-block"
                     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index 6f5c521b..d0c7749e 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -559,7 +559,7 @@
                         )}%</span
                       >
                     {:else if item?.changeInSharesNumberPercentage < 0}
-                      <span class="text-[#FF2F1F]"
+                      <span class="text-red-600 dark:text-[#FF2F1F]"
                         >{abbreviateNumber(
                           item?.changeInSharesNumberPercentage?.toFixed(2),
                         )}%</span
diff --git a/src/lib/components/WatchListCard.svelte b/src/lib/components/WatchListCard.svelte
index f8b46fe5..789e6386 100644
--- a/src/lib/components/WatchListCard.svelte
+++ b/src/lib/components/WatchListCard.svelte
@@ -132,7 +132,7 @@
                         >+{item?.changesPercentage?.toFixed(2)}%</span
                       >
                     {:else}
-                      <span class="text-[#FF2F1F]"
+                      <span class="text-red-600 dark:text-[#FF2F1F]"
                         >{item?.changesPercentage?.toFixed(2)}%
                       </span>
                     {/if}
diff --git a/src/routes/corporate-lobbying-tracker/+page.svelte b/src/routes/corporate-lobbying-tracker/+page.svelte
index 83225176..5552030e 100644
--- a/src/routes/corporate-lobbying-tracker/+page.svelte
+++ b/src/routes/corporate-lobbying-tracker/+page.svelte
@@ -236,7 +236,7 @@
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
                         {:else}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
                               ? item?.changesPercentage
                               : item?.changesPercentage?.toFixed(2)}%
diff --git a/src/routes/etf/[tickerID]/insider/+page.svelte b/src/routes/etf/[tickerID]/insider/+page.svelte
index 20f253f2..55b1ad87 100644
--- a/src/routes/etf/[tickerID]/insider/+page.svelte
+++ b/src/routes/etf/[tickerID]/insider/+page.svelte
@@ -414,7 +414,9 @@
                               >Bought</span
                             >
                           {:else if item?.type === "Sold"}
-                            <span class="text-[#FF2F1F]">Sold</span>
+                            <span class="text-red-600 dark:text-[#FF2F1F]"
+                              >Sold</span
+                            >
                           {:else if item?.type === "Exchange"}
                             <span class="text-[#C6A755]">Exchange</span>
                           {/if}
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 483b9c27..30ff9ee9 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -432,7 +432,7 @@
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
                               ? abbreviateNumberWithColor(
                                   item?.changesPercentage,
@@ -556,7 +556,7 @@
                             >+{item?.changeOI?.toLocaleString("en-US")}</span
                           >
                         {:else if item?.changeOI < 0}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changeOI?.toLocaleString("en-US")}
                           </span>
                         {:else}
@@ -574,7 +574,7 @@
                               : item?.changesPercentageOI?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentageOI < 0}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentageOI <= -1000
                               ? abbreviateNumberWithColor(
                                   item?.changesPercentageOI,
diff --git a/src/routes/hedge-funds/+page.svelte b/src/routes/hedge-funds/+page.svelte
index 8b67bc2f..d40e687c 100644
--- a/src/routes/hedge-funds/+page.svelte
+++ b/src/routes/hedge-funds/+page.svelte
@@ -213,7 +213,7 @@
                                   )}%</span
                                 >
                               {:else}
-                                <span class="text-[#FF2F1F]"
+                                <span class="text-red-600 dark:text-[#FF2F1F]"
                                   >{abbreviateNumber(
                                     item?.performancePercentage3Year?.toFixed(
                                       2,
@@ -236,7 +236,7 @@
                                   )}%</span
                                 >
                               {:else}
-                                <span class="text-[#FF2F1F]"
+                                <span class="text-red-600 dark:text-[#FF2F1F]"
                                   >{abbreviateNumber(
                                     item?.winRate?.toFixed(2),
                                   )}%
diff --git a/src/routes/index/[tickerID]/options/+page.svelte b/src/routes/index/[tickerID]/options/+page.svelte
index 56e02c26..234f346e 100644
--- a/src/routes/index/[tickerID]/options/+page.svelte
+++ b/src/routes/index/[tickerID]/options/+page.svelte
@@ -440,7 +440,7 @@
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
                               ? abbreviateNumberWithColor(
                                   item?.changesPercentage,
@@ -564,7 +564,7 @@
                             >+{item?.changeOI?.toLocaleString("en-US")}</span
                           >
                         {:else if item?.changeOI < 0}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changeOI?.toLocaleString("en-US")}
                           </span>
                         {:else}
@@ -582,7 +582,7 @@
                               : item?.changesPercentageOI?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentageOI < 0}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentageOI <= -1000
                               ? abbreviateNumberWithColor(
                                   item?.changesPercentageOI,
diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte
index 3cf1cabc..5f2dbfc0 100644
--- a/src/routes/politicians/+page.svelte
+++ b/src/routes/politicians/+page.svelte
@@ -165,22 +165,22 @@
             class="relative flex justify-center items-center overflow-hidden w-full"
           >
             <main class="w-full">
-              <h1 class="mb-3 text-white text-2xl sm:text-3xl font-bold">
+              <h1 class="mb-3 text-2xl sm:text-3xl font-bold">
                 All US Politicians
               </h1>
               <div class="w-full pb-3">
-                <div class="relative right-0 bg-default">
+                <div class="relative right-0">
                   <ul
                     class="relative grid grid-cols-1 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]"
                   >
                     <li
-                      class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"
+                      class="pl-3 py-1.5 flex-auto text-center shadow-sm bg-gray-100 dark:bg-[#2E3238] rounded-[3px]"
                     >
                       <label class="flex flex-row items-center">
                         <input
                           id="modal-search"
                           type="search"
-                          class="text-white ml-2 text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
+                          class=" ml-2 text-[1rem] dark:placeholder-gray-400 bg-inherit border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1"
                           placeholder="Find by name"
                           bind:value={filterQuery}
                           on:input={handleInput}
@@ -191,7 +191,7 @@
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           ><path
-                            fill="#fff"
+                            fill="currentColor"
                             d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"
                           /></svg
                         >
@@ -233,7 +233,7 @@
                   {#each displayList as item}
                     <a
                       href={`/politicians/${item?.id}`}
-                      class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out {item?.party ===
+                      class="w-full cursor-pointer bg-gray-300 dark:bg-[#141417] sm:hover:bg-gray-400 dark:sm:hover:bg-[#000] transition-colors ease-in-out border dark:sm:hover:border-[#000] sm:hover:shadow-[#8C5F1B] border-gray-300 dark:border-gray-800 shadow-md rounded-md h-auto pb-4 pt-4 mb-7 {item?.party ===
                       'Republican'
                         ? 'sm:hover:shadow-[#80000D]'
                         : item?.party === 'Democratic'
@@ -247,7 +247,7 @@
                             addToFavorite(event, item?.id)}
                           class=" {favoriteList?.includes(item?.id)
                             ? 'text-[#FBCE3C]'
-                            : 'text-white'} absolute top-0 right-5 z-20"
+                            : ''} absolute top-0 right-5 z-20"
                         >
                           <svg
                             class="{item?.id === animationId
@@ -295,10 +295,10 @@
                               loading="lazy"
                             />
                           </div>
-                          <span class="text-white text-lg mt-2 mb-2">
+                          <span class=" text-lg mt-2 mb-2">
                             {item?.representative}
                           </span>
-                          <span class="text-white text-md mb-8">
+                          <span class=" text-md mb-8">
                             {item?.party ?? "n/a"}
                             {#if item?.district !== undefined && item?.district?.length !== 0}
                               / {item?.district}
@@ -312,18 +312,18 @@
                           <label
                             class="cursor-pointer flex flex-col items-center"
                           >
-                            <span class="text-white text-[1rem] font-semibold"
+                            <span class=" text-[1rem] font-semibold"
                               >{item?.totalTrades?.toLocaleString(
                                 "en-US",
                               )}</span
                             >
-                            <span class="text-slate-300 text-sm"
+                            <span class="text-muted dark:text-slate-300 text-sm"
                               >Total Trades</span
                             >
                           </label>
 
                           <div class="flex flex-col items-center">
-                            <span class="text-white text-[1rem] font-semibold">
+                            <span class=" text-[1rem] font-semibold">
                               {item?.lastTrade?.length !== undefined
                                 ? new Date(item?.lastTrade)?.toLocaleString(
                                     "en-US",
@@ -336,7 +336,7 @@
                                   )
                                 : "n/a"}
                             </span>
-                            <span class="text-slate-300 text-sm"
+                            <span class="text-muted dark:text-slate-300 text-sm"
                               >Last Traded</span
                             >
                           </div>
diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte
index fb836842..5bcf832c 100644
--- a/src/routes/politicians/[slug]/+page.svelte
+++ b/src/routes/politicians/[slug]/+page.svelte
@@ -152,10 +152,12 @@
                   </div>
                 </div>
                 <div class="mt-0 pt-0.5 text-left">
-                  <h1 class="mb-0 text-xl sm:text-2xl font-bold text-white">
+                  <h1 class="mb-0 text-xl sm:text-2xl font-bold">
                     {formatString(name)}
                   </h1>
-                  <p class="mb-0.5 text-sm font-semibold text-gray-300">
+                  <p
+                    class="mb-0.5 text-sm font-semibold text-muted dark:text-gray-300"
+                  >
                     {politicianParty ?? "n/a"} / {politicianCongress}
                     {#if politicianDistrict !== undefined && politicianDistrict?.length !== 0}
                       / {politicianDistrict}
@@ -164,41 +166,39 @@
                 </div>
               </div>
               <div
-                class="mt-4 grid grid-cols-2 overflow-hidden rounded border border-gray-800 py-2 text-center md:grid-cols-4 md:p-0 lg:mt-0 lg:border-none"
+                class="mt-4 grid grid-cols-2 overflow-hidden rounded border border-gray-300 dark:border-gray-800 py-2 text-center md:grid-cols-4 md:p-0 lg:mt-0 lg:border-none"
               >
                 <div class="flex flex-col px-4 py-2 bp:px-6 md:py-6">
-                  <div
-                    class="text-xl sm:text-2xl font-bold tracking-tight text-white"
-                  >
+                  <div class="text-xl sm:text-2xl font-bold tracking-tight">
                     ${new Intl.NumberFormat("en", {
                       minimumFractionDigits: 0,
                       maximumFractionDigits: 0,
                     }).format(totalAmountTraded)}
                   </div>
-                  <div class="text-sm font-semibold leading-6 text-gray-300">
+                  <div
+                    class="text-sm font-semibold leading-6 text-muted dark:text-gray-300"
+                  >
                     Total Amount
                   </div>
                 </div>
 
                 <div
-                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-800 md:py-6"
+                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l border-gray-300 dark:sm:border-gray-800 md:py-6"
                 >
-                  <div
-                    class="text-xl sm:text-2xl font-semibold tracking-tight text-white"
-                  >
+                  <div class="text-xl sm:text-2xl font-semibold tracking-tight">
                     {numOfTrades?.toLocaleString("en-US")}
                   </div>
-                  <div class="text-sm font-semibold leading-6 text-gray-300">
+                  <div
+                    class="text-sm font-semibold leading-6 text-muted dark:text-gray-300"
+                  >
                     Transaction
                   </div>
                 </div>
 
                 <div
-                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-800 md:py-6"
+                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l border-gray-300 dark:sm:border-gray-800 md:py-6"
                 >
-                  <div
-                    class="text-xl sm:text-2xl font-semibold tracking-tight text-white"
-                  >
+                  <div class="text-xl sm:text-2xl font-semibold tracking-tight">
                     {lastTradedDate?.length !== undefined
                       ? new Date(lastTradedDate)?.toLocaleString("en-US", {
                           month: "short",
@@ -208,19 +208,21 @@
                         })
                       : "n/a"}
                   </div>
-                  <div class="text-sm font-semibold leading-6 text-gray-300">
+                  <div
+                    class="text-sm font-semibold leading-6 text-muted dark:text-gray-300"
+                  >
                     Last Transaction
                   </div>
                 </div>
                 <div
-                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-800 md:py-6"
+                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l border-gray-300 dark:sm:border-gray-800 md:py-6"
                 >
-                  <div
-                    class="text-xl sm:text-2xl font-bold tracking-tight text-white"
-                  >
+                  <div class="text-xl sm:text-2xl font-bold tracking-tight">
                     {buySellRatio?.toFixed(2)}
                   </div>
-                  <div class="text-sm font-semibold leading-6 text-gray-300">
+                  <div
+                    class="text-sm font-semibold leading-6 text-muted dark:text-gray-300"
+                  >
                     Buy/Sell
                   </div>
                 </div>
@@ -228,9 +230,9 @@
             </div>
 
             {#if mainSectors?.length !== 0}
-              <div class="mb-10 mt-10 text-white">
+              <div class="mb-10 mt-10">
                 <div
-                  class="relative my-3 space-y-2 rounded border border-gray-800 sm:my-6 p-4"
+                  class="relative my-3 space-y-2 rounded border border-gray-300 dark:border-gray-800 sm:my-6 p-4"
                 >
                   <div class="flex flex-col sm:flex-row">
                     <div class="mb-2 font-semibold sm:mb-0">Main Sectors:</div>
@@ -240,7 +242,7 @@
                           href={sectorNavigation?.find(
                             (listItem) => listItem?.title === item,
                           )?.link}
-                          class="px-3 text-sm py-1 sm:text-[1rem] rounded-md bg-white/10 sm:hover:bg-white/20 ml-0"
+                          class="inline-block badge bg-blue-50 dark:bg-primary duration-0 rounded-sm ml-1 px-3 m-auto text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted text-[1rem]"
                         >
                           {item}
                         </a>
@@ -255,7 +257,7 @@
                       {#each mainIndustries as item}
                         <a
                           href={`/list/industry/${item?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
-                          class="px-3 text-sm py-1 sm:text-[1rem] rounded-md bg-white/10 sm:hover:bg-white/20 ml-0"
+                          class="inline-block badge bg-blue-50 dark:bg-primary duration-0 rounded-sm ml-1 px-3 m-auto text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted text-[1rem]"
                         >
                           {item}
                         </a>
@@ -266,60 +268,36 @@
               </div>
             {/if}
 
-            <h3 class="text-xl text-white font-bold mt-10">Trading History</h3>
+            <h3 class="text-xl font-bold mt-10">Trading History</h3>
 
             <div class="w-full overflow-x-auto">
               <table
-                class=" table table-sm table-compact rounded-none sm:rounded-md w-full bg-default m-auto mt-5 border border-gray-800"
+                class="mt-5 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"
               >
                 <!-- head -->
-                <thead>
-                  <tr class="bg-default">
+                <thead class="text-muted dark:text-white">
+                  <tr class="">
                     <th
-                      class="hidden lg:table-cell text-start bg-default text-white text-sm font-semibold"
+                      class="hidden lg:table-cell text-start text-sm font-semibold"
                     >
                     </th>
-                    <th
-                      class="text-start bg-default text-white text-sm font-semibold"
-                    >
-                      Symbol
-                    </th>
-                    <th
-                      class="text-start bg-default text-white text-sm font-semibold"
-                    >
-                      Name
-                    </th>
-                    <th
-                      class="text-end bg-default text-white text-sm font-semibold"
-                    >
+                    <th class="text-start text-sm font-semibold"> Symbol </th>
+                    <th class="text-start text-sm font-semibold"> Name </th>
+                    <th class="text-end text-sm font-semibold">
                       Transaction Type
                     </th>
-                    <th
-                      class="text-end bg-default text-white text-sm font-semibold"
-                    >
-                      Amount
-                    </th>
-                    <th
-                      class="text-end bg-default text-white text-sm font-semibold"
-                    >
+                    <th class="text-end text-sm font-semibold"> Amount </th>
+                    <th class="text-end text-sm font-semibold">
                       Transaction
                     </th>
-                    <th
-                      class="text-end bg-default text-white text-sm font-semibold"
-                    >
-                      Last Trade
-                    </th>
-                    <th
-                      class="text-end bg-default text-white text-sm font-semibold"
-                    >
-                      Filed
-                    </th>
+                    <th class="text-end text-sm font-semibold"> Last Trade </th>
+                    <th class="text-end text-sm font-semibold"> Filed </th>
                   </tr>
                 </thead>
                 <tbody class="p-0">
                   {#each tableData as item}
                     <tr
-                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b-[#27272A] text-white"
+                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
                     >
                       <td class="hidden lg:table-cell"
                         ><button
@@ -331,7 +309,7 @@
                               ? 'rotate-180'
                               : ''}"
                             viewBox="0 0 20 20"
-                            fill="white"
+                            fill="currentColor"
                             style="max-width:40px"
                             ><path
                               fill-rule="evenodd"
@@ -343,7 +321,7 @@
                       >
 
                       <td
-                        class="text-start text-sm sm:text-[1rem] border-b border-b-[#27272A] whitespace-nowrap"
+                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         <HoverStockChart
                           symbol={item?.symbol ?? item?.ticker}
@@ -351,16 +329,14 @@
                         />
                       </td>
 
-                      <td
-                        class="text-sm sm:text-[1rem] border-b border-b-[#27272A] whitespace-nowrap"
-                      >
+                      <td class="text-sm sm:text-[1rem] whitespace-nowrap">
                         {item?.name?.length > 20
                           ? item?.name?.slice(0, 20) + "..."
                           : item?.name}
                       </td>
 
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#27272A]"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         <span class="">
                           {#if item?.type === "Bought"}
@@ -368,7 +344,9 @@
                               >{item?.type}</span
                             >
                           {:else if item?.type === "Sold"}
-                            <span class="text-[#FF2F1F]">{item?.type}</span>
+                            <span class="text-red-600 dark:text-[#FF2F1F]"
+                              >{item?.type}</span
+                            >
                           {:else if item?.type === "Exchange"}
                             <span class="text-[#C6A755]">Exchange</span>
                           {/if}
@@ -376,19 +354,19 @@
                       >
 
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#27272A]"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.amount}</td
                       >
 
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#27272A]"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.transaction?.toLocaleString("en-US")}</td
                       >
 
                       <td
-                        class="text-end text-sm sm:text-[1rem] text-white border-b border-b-[#27272A] whitespace-nowrap"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {new Date(item?.transactionDate)?.toLocaleString(
                           "en-US",
@@ -402,7 +380,7 @@
                       </td>
 
                       <td
-                        class="text-end text-sm sm:text-[1rem] text-white border-b border-b-[#27272A] whitespace-nowrap"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {new Date(item?.disclosureDate)?.toLocaleString(
                           "en-US",
@@ -463,20 +441,7 @@
   .scroller {
     scrollbar-width: thin;
   }
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
 
-  @media (max-width: 640px) {
-    .app {
-      height: 230px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
   .republican-striped {
     background-image: repeating-linear-gradient(
       -45deg,
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index 8002bc61..a0494eb2 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { formatString } from "$lib/utils";
-  import { screenWidth, numberOfUnreadNotification } from "$lib/store";
+  import { screenWidth } from "$lib/store";
   import { onMount } from "svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
@@ -83,7 +83,7 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
           <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">
               Latest Trades of Politicians
             </h1>
           </div>
@@ -104,33 +104,24 @@
                         class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto sm:overflow-hidden"
                       >
                         <table
-                          class="table table-sm table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-default border border-gray-800 m-auto"
+                          class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
                         >
-                          <thead class="bg-default">
+                          <thead class="text-muted dark:text-white">
                             <tr class="">
-                              <th
-                                class=" text-start bg-default text-white text-sm sm:font-semibold"
-                              >
+                              <th class=" text-start text-sm sm:font-semibold">
                                 Person
                               </th>
-                              <td
-                                class="text-start bg-default text-white text-sm sm:font-semibold"
-                              >
+                              <td class="text-start text-sm sm:font-semibold">
                                 Company
                               </td>
 
-                              <td
-                                class="text-end bg-default text-white text-sm sm:font-semibold"
-                              >
+                              <td class="text-end text-sm sm:font-semibold">
                                 Date
                               </td>
-                              <td
-                                class="text-center bg-default text-white text-sm sm:font-semibold"
-                              >
+                              <td class="text-center text-sm sm:font-semibold">
                                 Amount
                               </td>
-                              <td
-                                class="text-white text-end text-sm sm:font-semibold"
+                              <td class=" text-end text-sm sm:font-semibold"
                                 >Type</td
                               >
                             </tr>
@@ -138,7 +129,7 @@
                           <tbody>
                             {#each displayList as item, index}
                               <tr
-                                class="bg-table odd:bg-odd border-bborder-gray-800 {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)
@@ -146,13 +137,11 @@
                                   : ''}"
                               >
                                 <th
-                                  class="{index % 2
-                                    ? 'bg-table'
-                                    : 'bg-odd'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
+                                  class="text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   <div class="flex flex-row items-center">
                                     <div
-                                      class="shrink-0 rounded-full border border-slate-700 w-9 h-9 relative {item?.party ===
+                                      class="shrink-0 rounded-full w-9 h-9 relative {item?.party ===
                                       'Republican'
                                         ? 'bg-[#98272B]'
                                         : item?.party === 'Democratic'
@@ -177,16 +166,14 @@
                                           ),
                                         )}</a
                                       >
-                                      <span class="text-white"
-                                        >{item?.party}</span
-                                      >
+                                      <span class="">{item?.party}</span>
                                     </div>
                                   </div>
                                   <!--{item?.firstName} {item?.lastName}-->
                                 </th>
 
                                 <td
-                                  class="text-start whitespace-nowrap text-sm sm:text-[1rem] text-blue-400"
+                                  class="text-start whitespace-nowrap text-sm sm:text-[1rem]"
                                 >
                                   <div class="flex flex-col items-start">
                                     <HoverStockChart
@@ -194,7 +181,7 @@
                                       assetType={item?.assetType}
                                     />
 
-                                    <span class="text-white"
+                                    <span class=""
                                       >{item?.assetDescription.length >
                                       charNumber
                                         ? formatString(
@@ -211,7 +198,7 @@
                                 </td>
 
                                 <td
-                                  class="text-end text-sm sm:text-[1rem] text-white whitespace-nowrap"
+                                  class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   {new Date(
                                     item?.disclosureDate,
@@ -224,23 +211,24 @@
                                 </td>
 
                                 <td
-                                  class="text-center text-sm sm:text-[1rem] text-white whitespace-nowrap"
+                                  class="text-center text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   {item?.amount?.replace(
                                     "$1,000,001 - $5,000,000",
                                     "$1Mio - $5Mio",
                                   )}
                                 </td>
-                                <td
-                                  class="text-sm sm:text-[1rem] text-end text-white"
-                                >
+                                <td class="text-sm sm:text-[1rem] text-end">
                                   {#if item?.type === "Bought"}
                                     <span
                                       class="text-green-600 dark:text-[#00FC50]"
                                       >Bought</span
                                     >
                                   {:else if item?.type === "Sold"}
-                                    <span class="text-[#FF2F1F]">Sold</span>
+                                    <span
+                                      class="text-red-600 dark:text-[#FF2F1F]"
+                                      >Sold</span
+                                    >
                                   {/if}
                                 </td>
                               </tr>
@@ -273,7 +261,7 @@
                     Pro Subscription
                   </h2>
                   <ArrowLogo
-                    class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                    class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:"
                   />
                 </div>
                 <span class="p-3 ml-3 mr-3">
@@ -294,9 +282,7 @@
                 <h2 class="text-start text-xl font-semibold ml-3">
                   Top Analyst
                 </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">
                 Get the latest top Wall Street analyst ratings
@@ -315,9 +301,7 @@
                 <h2 class="text-start text-xl font-semibold ml-3">
                   Congress Trading
                 </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">
                 Get the latest top Congress trading insights.
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index abc17d28..1242ac4b 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -3377,7 +3377,7 @@ const handleKeyDown = (event) => {
                           : item?.changesPercentage?.toFixed(2)}%</span
                       >
                     {:else}
-                      <span class="text-[#FF2F1F]"
+                      <span class="text-red-600 dark:text-[#FF2F1F]"
                         >{item?.changesPercentage <= -1000
                           ? abbreviateNumber(item?.changesPercentage)
                           : item?.changesPercentage?.toFixed(2)}%
@@ -3484,7 +3484,7 @@ const handleKeyDown = (event) => {
                           )}%</span
                         >
                       {:else if item[row?.rule] < 0}
-                        <span class="text-[#FF2F1F]"
+                        <span class="text-red-600 dark:text-[#FF2F1F]"
                           >{abbreviateNumber(
                             item[row?.rule]?.toFixed(2),
                           )}%</span
@@ -3541,7 +3541,7 @@ const handleKeyDown = (event) => {
                             >+{item[row?.rule]?.toFixed(2)}%</span
                           >
                         {:else if item[row?.rule] < 0}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item[row?.rule]?.toFixed(2)}%</span
                           >
                         {:else}
@@ -3553,7 +3553,9 @@ const handleKeyDown = (event) => {
                             >{item[row?.rule]}</span
                           >
                         {:else if ["Strong Sell", "Sell"].includes(item[row?.rule])}
-                          <span class="text-[#FF2F1F]">{item[row?.rule]}</span>
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
+                            >{item[row?.rule]}</span
+                          >
                         {:else if item[row?.rule] === "Hold"}
                           <span class="text-[#FFA838]">{item[row?.rule]}</span>
                         {:else}
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index fd0e24c4..51ee9fa5 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -409,7 +409,9 @@
                             >Bought</span
                           >
                         {:else if item?.type === "Sold"}
-                          <span class="text-[#FF2F1F]">Sold</span>
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
+                            >Sold</span
+                          >
                         {:else if item?.type === "Exchange"}
                           <span class="text-[#C6A755]">Exchange</span>
                         {/if}
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index df7e50f6..c31dff9b 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -280,7 +280,7 @@
                             +{item?.valueGrowth?.toFixed(2)}%
                           </span>
                         {:else if item?.valueGrowth < 0}
-                          <span class="text-[#FF2F1F]">
+                          <span class="text-red-600 dark:text-[#FF2F1F]">
                             {item?.valueGrowth?.toFixed(2)}%
                           </span>
                         {:else}
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 753d9d78..702fd00e 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -432,7 +432,7 @@
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
                               ? abbreviateNumberWithColor(
                                   item?.changesPercentage,
@@ -556,7 +556,7 @@
                             >+{item?.changeOI?.toLocaleString("en-US")}</span
                           >
                         {:else if item?.changeOI < 0}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changeOI?.toLocaleString("en-US")}
                           </span>
                         {:else}
@@ -574,7 +574,7 @@
                               : item?.changesPercentageOI?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentageOI < 0}
-                          <span class="text-[#FF2F1F]"
+                          <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentageOI <= -1000
                               ? abbreviateNumberWithColor(
                                   item?.changesPercentageOI,
diff --git a/src/routes/stocks/[tickerID]/profile/employees/+page.svelte b/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
index 1c79bc5b..b0e2d889 100644
--- a/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
@@ -590,7 +590,7 @@
                             ).toFixed(2)}%
                           </span>
                         {:else if item?.employeeCount < historyList[index + 1]?.employeeCount}
-                          <span class="text-[#FF2F1F]">
+                          <span class="text-red-600 dark:text-[#FF2F1F]">
                             -{(
                               (Math.abs(
                                 item?.employeeCount -
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 618ccdf7..04675537 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -1613,7 +1613,8 @@
                                           >+{item[row?.rule]?.toFixed(2)}%</span
                                         >
                                       {:else}
-                                        <span class="text-[#FF2F1F]"
+                                        <span
+                                          class="text-red-600 dark:text-[#FF2F1F]"
                                           >{item[row?.rule]?.toFixed(2)}%</span
                                         >
                                       {/if}
@@ -1624,7 +1625,8 @@
                                           >{item[row?.rule]}</span
                                         >
                                       {:else if ["Strong Sell", "Sell"].includes(item[row?.rule])}
-                                        <span class="text-[#FF2F1F]"
+                                        <span
+                                          class="text-red-600 dark:text-[#FF2F1F]"
                                           >{item[row?.rule]}</span
                                         >
                                       {:else if item[row?.rule] === "Hold"}