ui fix

src/routes/etf/[tickerID]/dividends/+page.svelte

@@ -84,7 +84,7 @@
 
         {#if rawData?.history?.length !== 0}
           <div
-            class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-600 rounded-md border border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
+            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"
           >
             <div class="p-4 bp:p-5 sm:p-6">
               <label

src/routes/etf/etf-providers/[slug]/+page.svelte

@@ -147,13 +147,13 @@
   {/if}
 
   <div
-    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Listed Funds</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {rawData?.length}
         </div>
@@ -163,7 +163,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Total Assets</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalAssets)}
         </div>
@@ -173,7 +173,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Average Cost</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {avgExpenseRatio?.toFixed(2)}%
         </div>

src/routes/list/+layout.svelte

@@ -303,15 +303,19 @@
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
       {#if $page.url.pathname.startsWith("/list/industry")}
-        <li><a href="/industry" class="text-gray-300">Industry</a></li>
+        <li>
+          <a href="/industry" class="text-muted dark:text-gray-300">Industry</a>
+        </li>
       {:else}
-        <li><a href="/list/" class="text-gray-300">Lists</a></li>
+        <li>
+          <a href="/list/" class="text-muted dark:text-gray-300">Lists</a>
+        </li>
       {/if}
       {#if $page.url.pathname.startsWith("/list/")}
         <li>
-          <span class="text-gray-300">
+          <span class="text-muted dark:text-gray-300">
             {combinedNavigation?.find(
               (item) => item?.link === $page.url.pathname,
             )?.title}
@@ -321,10 +325,10 @@
     </ul>
   </div>
 
-  <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-default overflow-hidden">
+  <div class="mt-10 sm:mt-5 w-full m-auto mb-10 overflow-hidden">
     <!--Start Top Winners/Losers-->
     <div class="flex flex-col justify-center items-center">
-      <div class="ml-2 text-start w-full text-white mb-2">
+      <div class="ml-2 text-start w-full mb-2">
         {#each navigation as item}
           {#if item?.link === $page.url.pathname}
             <h1 class="font-bold text-2xl">
@@ -343,38 +347,40 @@
 
         <aside class="hidden lg:block relative fixed w-1/4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit 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={"/watchlist/stocks"}
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Watchlist
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <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"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class="p-3 ml-3 mr-3">
                 Build your watchlist to keep track of their performance.
               </span>
             </a>
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit 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={"/stock-screener"}
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold ml-3">
                   Stock Screener
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class="p-3 ml-3 mr-3">
                 Build your Stock Screener to find profitable stocks.
               </span>
             </a>

src/routes/list/+page.svelte

@@ -9,80 +9,83 @@
 
 <!--Start Market Cap Group-->
 
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold">Popular Lists</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/top-rated-dividend-stocks">Top-Rated Dividend Stocks</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/highest-revenue"
-        >U.S. Companies With The Most Revenue</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/highest-revenue">U.S. Companies With The Most Revenue</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/highest-income-tax"
         >U.S. Companies That Pay The Highest Taxes</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/most-employees"
-        >U.S. Companies With The Most Employees</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/most-employees">U.S. Companies With The Most Employees</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/most-ftd-shares"
-        >U.S. Companies With The Most FTD Shares</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/most-ftd-shares">U.S. Companies With The Most FTD Shares</a
       >
     </li>
   </ul>
 </div>
 
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">Market Cap Groups</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/market-cap/mega-cap-stocks">Mega-Cap Stocks</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/market-cap/large-cap-stocks">Large-Cap Stocks</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/market-cap/mid-cap-stocks">Mid-Cap Stocks</a
       >
     </li>
     <li class="">
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/market-cap/small-cap-stocks">Small-Cap Stocks</a
       >
     </li>
     <li class="">
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/market-cap/micro-cap-stocks">Micro-Cap Stocks</a
       >
     </li>
     <li class="">
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/market-cap/nano-cap-stocks">Nano-Cap Stocks</a
       >
     </li>
@@ -91,24 +94,27 @@
 
 <!--End Market Cap Group-->
 
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">Exchange Groups</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/exchange/nasdaq"
-        >Listed on NASDAQ</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/exchange/nasdaq">Listed on NASDAQ</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/exchange/nyse"
-        >Listed on NYSE</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/exchange/nyse">Listed on NYSE</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/exchange/amex"
-        >Listed on AMEX</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/exchange/amex">Listed on AMEX</a
       >
     </li>
   </ul>
@@ -116,24 +122,27 @@
 
 <!--Start Index Group-->
 
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">Index Groups</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/index/dowjones"
-        >Listed on Dow Jones</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/index/dowjones">Listed on Dow Jones</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/index/nasdaq100"
-        >Listed on NASDAQ 100</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/index/nasdaq100">Listed on NASDAQ 100</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/index/sp500"
-        >Listed on S&P 500</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/index/sp500">Listed on S&P 500</a
       >
     </li>
   </ul>
@@ -141,33 +150,33 @@
 
 <!--End Index Group-->
 
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">Options Lists</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/highest-open-interest">Companies with Highest OI</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/highest-open-interest-change"
         >Companies with Highest OI Change</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/highest-option-iv-rank">Companies with Highest IV Rank</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/highest-option-premium">Companies with Highest Premium</a
       >
     </li>
@@ -175,66 +184,73 @@
 </div>
 
 <!--Start Other Lists-->
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">Other Lists</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/faang">FAANG</a>
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/faang">FAANG</a
+      >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/magnificent-seven">Magnificent Seven</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/dividend/dividend-kings">Dividend Kings</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/dividend/dividend-aristocrats">Dividend Aristocrats</a
       >
     </li>
 
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/penny-stocks"
-        >Penny Stocks</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/penny-stocks">Penny Stocks</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/most-shorted-stocks">Most Shorted Stocks</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/oversold-stocks/"
-        >Oversold Stocks</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/oversold-stocks/">Oversold Stocks</a
       >
     </li>
 
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/overbought-stocks/">Overbought Stocks</a
       >
     </li>
 
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/most-buybacks/"
-        >Biggest Buybacks</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/most-buybacks/">Biggest Buybacks</a
       >
     </li>
 
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/reit-stocks"
-        >All REITs</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/reit-stocks">All REITs</a
       >
     </li>
   </ul>
@@ -242,7 +258,7 @@
 
 <!--End Other Lists-->
 
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">
     Category of Stocks Ranked by Market Cap
   </h2>
@@ -250,90 +266,100 @@
     class="list-outside list-disc space-y-1 p-1 pl-6 text-base md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/mobile-games/"
-        >Mobile Games</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/mobile-games/">Mobile Games</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/social-media-stocks/">Social Media</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/clean-energy/"
-        >Clean Energy</a
-      >
-    </li>
-    <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/esports/"
-        >E-Sports</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/clean-energy/">Clean Energy</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/esports/">E-Sports</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/car-company-stocks/">Car Companies</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/ai-stocks/"
-        >Artificial Intelligence</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/ai-stocks/">Artificial Intelligence</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/electric-vehicles/">Electric Vehicles</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/online-gambling/"
-        >Online Gambling</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/online-gambling/">Online Gambling</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/augmented-reality/">Augmented Reality</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/gaming-stocks/"
-        >Gaming</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/gaming-stocks/">Gaming</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/pharmaceutical-stocks/">Pharmaceuticals</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/online-dating/"
-        >Online Dating</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/online-dating/">Online Dating</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/virtual-reality/"
-        >Virtual Reality</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/virtual-reality/">Virtual Reality</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/sports-betting/"
-        >Sports Betting</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/sports-betting/">Sports Betting</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/metaverse/"
-        >Metaverse</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/metaverse/">Metaverse</a
       >
     </li>
   </ul>
 </div>
 
 <!--Start Non-US Stocks Listed on US Exchanges-->
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">
     Non-US Stocks Listed on US Exchanges
   </h2>
@@ -341,38 +367,45 @@
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/country/ca"
-        >Canada</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/country/ca">Canada</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/country/cn"
-        >China</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/country/cn">China</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/country/in"
-        >India</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/country/in">India</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/country/jp"
-        >Japan</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/country/jp">Japan</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/country/de"
-        >Germany</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/country/de">Germany</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/country/il"
-        >Israel</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/country/il">Israel</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/country/gb"
-        >United Kingdom</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/country/gb">United Kingdom</a
       >
     </li>
   </ul>
@@ -381,71 +414,74 @@
 <!--End Non-US Stocks Listed on US Exchanges-->
 
 <!--Start Sector Group-->
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">Sector Groups</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/sector/financial"
-        >Financials</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/sector/financial">Financials</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/healthcare">Healthcare</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/technology">Technology</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/industrials">Industrials</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/sector/energy"
-        >Energy</a
-      >
-    </li>
-    <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/sector/utilities"
-        >Utilities</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/sector/energy">Energy</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/sector/utilities">Utilities</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/consumer-cyclical">Consumer Cyclical</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/real-estate">Real Estate</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/basic-materials">Basic Materials</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/communication-services">Communication Services</a
       >
     </li>
     <li>
       <a
-        class="text-blue-400 sm:hover:text-white"
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
         href="/list/sector/consumer-defensive">Consumer Defensive</a
       >
     </li>
@@ -456,24 +492,27 @@
 
 <!--Start ETF Lists-->
 
-<div class="text-white">
+<div>
   <h2 class="mb-2 text-xl font-bold pt-10">ETF Lists</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/etf/new-launches"
-        >New Launches</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/etf/new-launches">New Launches</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/etf/etf-providers"
-        >ETF Providers</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/etf/etf-providers">ETF Providers</a
       >
     </li>
     <li>
-      <a class="text-blue-400 sm:hover:text-white" href="/list/bitcoin-etfs"
-        >Bitcoin ETFs</a
+      <a
+        class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
+        href="/list/bitcoin-etfs">Bitcoin ETFs</a
       >
     </li>
   </ul>

src/routes/list/[slug]/+page.svelte

@@ -109,13 +109,13 @@
   {/if}
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -123,9 +123,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -133,9 +133,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/bitcoin-etfs/+page.svelte

@@ -113,13 +113,13 @@
   />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total ETFs</div>
+        <div class="text-[1rem] font-semibold">Total ETFs</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -127,9 +127,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Assets</div>
+        <div class="text-[1rem] font-semibold">Total Assets</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalAssets)}
         </div>
@@ -137,9 +137,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Avg. Cost</div>
+        <div class="text-[1rem] font-semibold">Avg. Cost</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {avgExpenseRatio?.toFixed(2)}%
         </div>
@@ -160,7 +160,7 @@
     <!-- Content area -->
     <div class="w-full overflow-x-auto">
       <table
-        class="table 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"
       >
         <thead>
           <TableHeader {columns} {sortOrders} {sortData} />
@@ -169,10 +169,10 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073]/10 odd:bg-odd border-b border-gray-800"
+              class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
             >
               <td
-                class="text-white font-semibold sm:font-normal text-center text-sm sm:text-[1rem]"
+                class=" font-semibold sm:font-normal text-center text-sm sm:text-[1rem]"
               >
                 {item?.rank}
               </td>
@@ -181,35 +181,33 @@
                 <HoverStockChart symbol={item?.symbol} assetType="etf" />
               </td>
 
-              <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
+              <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                 {item?.name?.length > charNumber
                   ? item?.name?.slice(0, charNumber) + "..."
                   : item?.name}
               </td>
 
-              <td class="text-white text-end text-sm sm:text-[1rem]">
+              <td class=" text-end text-sm sm:text-[1rem]">
                 {item?.price}
               </td>
 
-              <td class="text-white text-end text-sm sm:text-[1rem]">
+              <td class=" text-end text-sm sm:text-[1rem]">
                 {#if item?.changesPercentage >= 0}
-                  <span class="text-[#00FC50]"
+                  <span class="text-green-600 dark:text-[#00FC50]"
                     >+{item.changesPercentage?.toFixed(2)}%</span
                   >
                 {:else}
-                  <span class="text-[#FF2F1F]"
+                  <span class="text-red-600 dark:text-[#FF2F1F]"
                     >{item.changesPercentage?.toFixed(2)}%
                   </span>
                 {/if}
               </td>
 
-              <td class="text-white text-end text-sm sm:text-[1rem]">
+              <td class=" text-end text-sm sm:text-[1rem]">
                 {item?.expenseRatio}%
               </td>
 
-              <td
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
                 {abbreviateNumber(item?.totalAssets)}
               </td>
             </tr>

src/routes/list/car-company-stocks/+page.svelte

@@ -24,13 +24,13 @@
   />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -38,9 +38,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -48,9 +48,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/clean-energy/+page.svelte

@@ -19,13 +19,13 @@
 
 <section class="w-full overflow-hidden m-auto">
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -33,9 +33,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -43,9 +43,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/country/[slug]/+page.svelte

@@ -40,13 +40,13 @@
   />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -54,9 +54,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -64,9 +64,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/electric-vehicles/+page.svelte

@@ -19,13 +19,13 @@
 
 <section class="w-full overflow-hidden m-auto">
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -33,9 +33,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -43,9 +43,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/esports/+page.svelte

@@ -21,13 +21,13 @@
   />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -35,9 +35,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -45,9 +45,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/exchange/[slug]/+page.svelte

@@ -36,13 +36,13 @@
   />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -50,9 +50,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -60,9 +60,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/index/[slug]/+page.svelte

@@ -42,13 +42,13 @@
   <Infobox text={`${indexNavigation[data?.getParams?.toLowerCase()]}`} />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -56,9 +56,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -66,9 +66,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/industry/[slug]/+page.svelte

@@ -26,13 +26,13 @@
   </div>
 
   <div
-    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -40,9 +40,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -50,9 +50,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/market-cap/[slug]/+page.svelte

@@ -72,9 +72,6 @@
   // Get current category from URL params
   $: currentCategory = data?.getParams?.replace("-stocks", "");
   // Filter out current category
-  $: otherCategories = marketCapNavigation.filter(
-    (cat) => !cat.link.includes(currentCategory),
-  );
 
   // Format number to billions/millions
   function formatThreshold(value) {
@@ -122,13 +119,13 @@
   />
 
   <div
-    class="mt-5 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-5 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -136,9 +133,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -146,9 +143,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/mobile-games/+page.svelte

@@ -16,13 +16,13 @@
 
 <section class="w-full overflow-hidden m-auto">
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -30,9 +30,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -40,9 +40,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/sector/[slug]/+page.svelte

@@ -33,13 +33,13 @@
   />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -47,9 +47,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -57,9 +57,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/social-media-stocks/+page.svelte

@@ -21,13 +21,13 @@
   />
 
   <div
-    class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-6 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -35,9 +35,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -45,9 +45,9 @@
     </div>
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/stocks/[tickerID]/dividends/+page.svelte

@@ -84,7 +84,7 @@
 
         {#if rawData?.history?.length !== 0}
           <div
-            class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-600 rounded-md border border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
+            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"
           >
             <div class="p-4 bp:p-5 sm:p-6">
               <label

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -281,7 +281,7 @@
             <div class="text-[1rem] font-normal text-white">Total Analysts</div>
 
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+              class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
             >
               {numOfAnalyst}
             </div>
@@ -291,7 +291,7 @@
               Consensus Rating
             </div>
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+              class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
             >
               {consensusRating}
             </div>
@@ -301,7 +301,7 @@
           >
             <div class="text-[1rem] font-normal text-white">Price Target</div>
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+              class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
             >
               {priceTarget !== null && priceTarget !== undefined
                 ? priceTarget