From 7af34469f4d9277335bc2accf9b8169ec8c4f614 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 23 Nov 2024 17:24:58 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/AnalystCard.svelte         |  2 +-
 src/lib/components/AnalystEstimate.svelte     | 54 +++++++----
 src/lib/components/CryptoProfileCard.svelte   |  4 +-
 src/lib/components/DCF.svelte                 |  2 +-
 src/lib/components/DividendCard.svelte        |  2 +-
 src/lib/components/ESGCard.svelte             |  2 +-
 src/lib/components/ETFProfileCard.svelte      |  4 +-
 src/lib/components/Footer.svelte              |  2 +-
 src/lib/components/Markdown.svelte            |  2 +-
 src/lib/components/OptionsData.svelte         |  2 +-
 src/lib/components/RuleControl.svelte         |  8 +-
 src/lib/components/Searchbar.svelte           |  2 +-
 src/lib/components/ShareStatistics.svelte     |  2 +-
 src/lib/components/SimilarETFCard.svelte      |  2 +-
 src/lib/components/SimilarTickerCard.svelte   |  2 +-
 src/lib/components/SkeletonLoading.svelte     | 66 +++++++------
 src/lib/components/TagSearchbar.svelte        |  4 +-
 src/lib/components/TickerInfoCard.svelte      |  4 +-
 src/lib/components/TopETFTickerHolder.svelte  |  2 +-
 src/lib/components/TopHoldingCard.svelte      |  2 +-
 src/lib/components/WatchListCard.svelte       |  2 +-
 src/routes/+page.svelte                       |  6 +-
 src/routes/contact/+page.svelte               |  2 +-
 src/routes/crypto/[tickerID]/+layout.svelte   |  8 +-
 src/routes/crypto/[tickerID]/+page.svelte     |  2 +-
 .../[tickerID]/congress-trading/+page.svelte  | 10 +-
 .../crypto/[tickerID]/stats/+page.svelte      |  4 +-
 src/routes/dividends-calendar/+page.svelte    |  2 +-
 src/routes/earnings-calendar/+page.svelte     |  2 +-
 src/routes/economic-calendar/+page.svelte     |  2 +-
 src/routes/economic-indicator/+page.svelte    |  2 +-
 src/routes/etf/[tickerID]/+layout.svelte      |  2 +-
 .../etf/[tickerID]/holdings/+page.svelte      |  2 +-
 .../etf/[tickerID]/insider/+page.svelte       |  2 +-
 .../etf/[tickerID]/options/+page.svelte       |  6 +-
 src/routes/etf/[tickerID]/stats/+page.svelte  |  4 +-
 src/routes/heatmaps/+page.svelte              |  4 +-
 src/routes/ipos/[slug]/+page.svelte           |  2 +-
 src/routes/newsletter/+page.svelte            |  2 +-
 src/routes/options-flow/+page.svelte          |  6 +-
 src/routes/politicians/+page.svelte           |  4 +-
 src/routes/stock-screener/+page.svelte        | 10 +-
 src/routes/stocks/[tickerID]/+layout.svelte   |  2 +-
 .../stocks/[tickerID]/financials/+page.svelte | 94 +++++++++---------
 .../financials/balance-sheet/+page.svelte     | 94 +++++++++---------
 .../financials/cash-flow/+page.svelte         | 96 +++++++++---------
 .../[tickerID]/financials/ratios/+page.svelte | 92 +++++++++---------
 .../stocks/[tickerID]/forecast/+page.svelte   | 97 +++++++++++--------
 .../[tickerID]/forecast/analyst/+page.svelte  | 73 +++++++++++---
 .../stocks/[tickerID]/insider/+page.svelte    |  4 +-
 .../insider/congress-trading/+page.svelte     |  2 +-
 .../stocks/[tickerID]/metrics/+page.svelte    |  2 +-
 .../[tickerID]/metrics/[slug]/+page.svelte    |  2 +-
 .../stocks/[tickerID]/options/+page.svelte    |  6 +-
 src/routes/watchlist/stocks/+page.svelte      |  2 +-
 55 files changed, 442 insertions(+), 380 deletions(-)

diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 66feacb0..3703993b 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -49,7 +49,7 @@
     : 'hidden'}"
 >
   <div
-    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth <
+    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600 h-auto {$screenWidth <
     640
       ? 'w-screen pt-16'
       : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0"
diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index c0937920..5b48bf00 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -323,7 +323,7 @@
                       {item?.val === "0.00" ||
                       item?.val === null ||
                       item?.val === 0
-                        ? "-"
+                        ? "n/a"
                         : abbreviateNumber(item?.val.toFixed(2))}
                     </td>
                   {/each}
@@ -340,30 +340,42 @@
                       class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]"
                     >
                       {#if index === 0 || tableActualRevenue?.length === 0}
-                        -
+                        n/a
                       {:else if item?.val === null}
                         {#if tableForecastRevenue[index]?.val - tableForecastRevenue[index - 1]?.val > 0}
                           <span class="text-orange-400">
-                            {(
-                              ((tableForecastRevenue[index]?.val -
-                                tableForecastRevenue[index - 1]?.val) /
-                                Math.abs(
-                                  tableForecastRevenue[index - 1]?.val,
-                                )) *
-                              100
-                            )?.toFixed(2)}%&#42;
+                            {(() => {
+                              const previousVal =
+                                tableForecastRevenue[index - 1]?.val ?? 0;
+                              const currentVal =
+                                tableForecastRevenue[index]?.val ?? 0;
+                              const change =
+                                ((currentVal - previousVal) /
+                                  Math.abs(previousVal)) *
+                                100;
+                              return isFinite(change)
+                                ? `${change.toFixed(2)}%*`
+                                : "n/a";
+                            })()}
                           </span>
                         {:else if tableForecastRevenue[index]?.val - tableForecastRevenue[index - 1]?.val < 0}
                           <span class="text-orange-400">
-                            {(
-                              ((tableForecastRevenue[index]?.val -
-                                tableForecastRevenue[index - 1]?.val) /
-                                Math.abs(
-                                  tableForecastRevenue[index - 1]?.val,
-                                )) *
-                              100
-                            )?.toFixed(2)}%&#42;
+                            {(() => {
+                              const previousVal =
+                                tableForecastRevenue[index - 1]?.val ?? 0;
+                              const currentVal =
+                                tableForecastRevenue[index]?.val ?? 0;
+                              const change =
+                                ((currentVal - previousVal) /
+                                  Math.abs(previousVal)) *
+                                100;
+                              return isFinite(change)
+                                ? `${change.toFixed(2)}%*`
+                                : "n/a";
+                            })()}
                           </span>
+                        {:else}
+                          n/a
                         {/if}
                       {:else if item?.val - tableActualRevenue[index - 1]?.val > 0}
                         <span class="text-[#00FC50]">
@@ -418,7 +430,7 @@
                       class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]"
                     >
                       {#if index === 0 || tableActualEPS?.length === 0}
-                        -
+                        n/a
                       {:else if item?.val === null}
                         {#if tableForecastEPS[index]?.val - tableForecastEPS[index - 1]?.val > 0}
                           <span class="text-orange-400">
@@ -491,7 +503,7 @@
                       class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#27272A] bg-[#09090B]"
                     >
                       {item?.numOfAnalysts === (null || 0)
-                        ? "-"
+                        ? "n/a"
                         : item?.numOfAnalysts}
                     </td>
                   {/each}
@@ -504,7 +516,7 @@
             &#42; This value depends on the forecast
           </div>
           <!--
-            <div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-slate-800 p-4">
+            <div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4">
               <svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
                 ><path fill="#fff" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16" /></svg
               >
diff --git a/src/lib/components/CryptoProfileCard.svelte b/src/lib/components/CryptoProfileCard.svelte
index e243c12c..ad8fa796 100644
--- a/src/lib/components/CryptoProfileCard.svelte
+++ b/src/lib/components/CryptoProfileCard.svelte
@@ -49,7 +49,7 @@
 
 <div class="sm:space-y-3">
   <div
-    class="lg:rounded-md shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
+    class="lg:rounded-md shadow-lg sm:border sm:border-gray-600 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
   >
     <!--Start Header-->
     <div
@@ -80,7 +80,7 @@
     <!--End Header-->
 
     <!--Start Content-->
-    <div class="w-full flex flex-wrap border-t border-slate-800">
+    <div class="w-full flex flex-wrap border-t border-gray-600">
       <h2 class="text-start ml-4 text-2xl font-bold text-white pb-2 mt-3">
         Crypto Info
       </h2>
diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte
index da49c126..a629e74f 100644
--- a/src/lib/components/DCF.svelte
+++ b/src/lib/components/DCF.svelte
@@ -340,7 +340,7 @@
 
             {#if Math?.abs(change) > 30}
               <div
-                class=" mb-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-slate-800 p-4"
+                class=" mb-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
               >
                 <svg
                   class="w-5 h-5 inline-block mr-0.5 flex-shrink-0"
diff --git a/src/lib/components/DividendCard.svelte b/src/lib/components/DividendCard.svelte
index a200323c..ba2c19bf 100644
--- a/src/lib/components/DividendCard.svelte
+++ b/src/lib/components/DividendCard.svelte
@@ -24,7 +24,7 @@
     : 'hidden'}"
 >
   <div
-    class="sm:rounded-md shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <=
+    class="sm:rounded-md shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-gray-600 h-auto {$screenWidth <=
     800
       ? 'w-screen pt-16'
       : ''} md:w-[420px] xl:w-[450px]"
diff --git a/src/lib/components/ESGCard.svelte b/src/lib/components/ESGCard.svelte
index bd08f359..2c429683 100644
--- a/src/lib/components/ESGCard.svelte
+++ b/src/lib/components/ESGCard.svelte
@@ -51,7 +51,7 @@
     : 'hidden'}"
 >
   <div
-    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth <
+    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600 h-auto sm:h-[470px] {$screenWidth <
     640
       ? 'w-screen pt-16'
       : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0"
diff --git a/src/lib/components/ETFProfileCard.svelte b/src/lib/components/ETFProfileCard.svelte
index fb1a7926..86ac55a5 100644
--- a/src/lib/components/ETFProfileCard.svelte
+++ b/src/lib/components/ETFProfileCard.svelte
@@ -77,7 +77,7 @@
 
 <div class="sm:space-y-3">
   <div
-    class="sm:rounded-md shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
+    class="sm:rounded-md shadow-lg sm:border sm:border-gray-600 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
   >
     <!--Start Header-->
     <div
@@ -114,7 +114,7 @@
     <!--End Header-->
 
     <!--Start Content-->
-    <div class="w-full flex flex-wrap border-t border-slate-800">
+    <div class="w-full flex flex-wrap border-t border-gray-600">
       <h2 class="text-start ml-4 text-2xl font-bold text-white pb-2 mt-3">
         ETF Info
       </h2>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 95d9e94d..b2ef6a22 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -4,7 +4,7 @@
 
 <!--Footer-->
 <footer
-  class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto"
+  class="bg-[#09090B] border-t border-gray-600 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto"
 >
   <div class="container mx-auto px-5 sm:px-3">
     <div class="w-full flex flex-col md:flex-row py-6">
diff --git a/src/lib/components/Markdown.svelte b/src/lib/components/Markdown.svelte
index 65a46b59..fd72a2ea 100644
--- a/src/lib/components/Markdown.svelte
+++ b/src/lib/components/Markdown.svelte
@@ -180,7 +180,7 @@
       {#if mk?.id === id}
         <div class="flex flex-col">
           <span class="text-gray-400 mb-4">[{outputCounter}] : </span>
-          <div class="border-b border-slate-800 rounded-md">
+          <div class="border-b border-gray-600 rounded-md">
             {#if hasContent(value)}
               {@html value}
             {:else}
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index c2fd5ba6..3beefd7e 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -250,7 +250,7 @@
       {:else}
         <div class="flex justify-center items-center m-auto mt-16 mb-6">
           <div
-            class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-slate-800 p-4"
+            class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
           >
             <svg
               class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
diff --git a/src/lib/components/RuleControl.svelte b/src/lib/components/RuleControl.svelte
index 8a7303e6..72627f37 100644
--- a/src/lib/components/RuleControl.svelte
+++ b/src/lib/components/RuleControl.svelte
@@ -27,12 +27,12 @@
   {title?.replace('[%]','')} {condition} {value} {unit}
 
   <label on:click={() => changeRuleCondition('under')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
-    <input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2" 
+    <input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2" 
            checked={condition === 'under'} name={ruleName} />
     <span class="label-text text-white">Under</span> 
   </label>
   <label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
-    <input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2" 
+    <input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2" 
            checked={condition === 'over'} name={ruleName} />
     <span class="label-text text-white">Over</span> 
   </label>
@@ -114,7 +114,7 @@
                 >
                   <input
                     type="radio"
-                    class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                    class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2"
                     checked={condition === "under"}
                     name={ruleName}
                   />
@@ -126,7 +126,7 @@
                 >
                   <input
                     type="radio"
-                    class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                    class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2"
                     checked={condition === "over"}
                     name={ruleName}
                   />
diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index 09556cb4..b60e847e 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -469,7 +469,7 @@
             <label for="modal-search" class="sr-only">Search</label>
             <input
               id="modal-search"
-              class="rounded-md w-full text-white bg-[#09090B] border border-slate-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
+              class="rounded-md w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
               type="search"
               placeholder="Search Anything…"
               bind:value={searchQuery}
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index a87b17f0..1fd90023 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -78,7 +78,7 @@
           </div>
         {:else}
           <div
-            class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-slate-800 p-4"
+            class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
           >
             <svg
               class="w-5 h-5 inline-block mr-0.5 flex-shrink-0"
diff --git a/src/lib/components/SimilarETFCard.svelte b/src/lib/components/SimilarETFCard.svelte
index 5df2d5c7..35235664 100644
--- a/src/lib/components/SimilarETFCard.svelte
+++ b/src/lib/components/SimilarETFCard.svelte
@@ -21,7 +21,7 @@
     : 'hidden'}"
 >
   <div
-    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth <
+    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600 h-auto {$screenWidth <
     640
       ? 'w-screen pt-16'
       : ''} md:w-[420px] xl:w-[450px]"
diff --git a/src/lib/components/SimilarTickerCard.svelte b/src/lib/components/SimilarTickerCard.svelte
index 3037901a..c73219cb 100644
--- a/src/lib/components/SimilarTickerCard.svelte
+++ b/src/lib/components/SimilarTickerCard.svelte
@@ -21,7 +21,7 @@
     : 'hidden'}"
 >
   <div
-    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth <
+    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600 h-auto {$screenWidth <
     640
       ? 'w-screen pt-16'
       : ''} md:w-[420px] xl:w-[450px]"
diff --git a/src/lib/components/SkeletonLoading.svelte b/src/lib/components/SkeletonLoading.svelte
index 99b1bb5c..9fac4640 100644
--- a/src/lib/components/SkeletonLoading.svelte
+++ b/src/lib/components/SkeletonLoading.svelte
@@ -1,35 +1,39 @@
-
-
-
-  <!-- Skeleton Post -->
-  <div class=" mt-5 shadow-lg">
-    <!-- List container -->                  
-    <div class="flex flex-col">
-        <!-- Item -->
-        <div class="border border-slate-800 rounded-md bg-[#09090B]">
-          <div class="flex h-auto justify-between items-center">
-            
-
-
-            <div role="status" class="animate-pulse space-x-8 md:flex md:items-center mb-4">
-                <div class="flex items-center justify-center w-48 h-28 sm:w-48  sm:h-48 bg-[#09090B] rounded ">
-                    <svg class="w-12 h-12 text-gray-200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512"><path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"/></svg>
-                </div>
-                <div class="w-full md:w-96 ">
-                    <div class="h-2.5 bg-gray-100 rounded-full w-48 mb-4"></div>
-                    <div class="h-2 bg-gray-100 rounded-full w-80 mb-2.5"></div>
-                    <div class="h-2 bg-gray-100 rounded-full w-56 mb-2.5"></div>
-                    <div class="h-2 bg-gray-100 rounded-full w-80 mb-2.5"></div>
-                    <div class="h-2 bg-gray-100 rounded-full w-56 mb-2.5"></div>
-                    <div class="h-2 bg-gray-100 rounded-full w-48"></div>
-                </div>
-                <span class="sr-only">Loading...</span>
-            </div>
-
-            
+<!-- Skeleton Post -->
+<div class=" mt-5 shadow-lg">
+  <!-- List container -->
+  <div class="flex flex-col">
+    <!-- Item -->
+    <div class="border border-gray-600 rounded-md bg-[#09090B]">
+      <div class="flex h-auto justify-between items-center">
+        <div
+          role="status"
+          class="animate-pulse space-x-8 md:flex md:items-center mb-4"
+        >
+          <div
+            class="flex items-center justify-center w-48 h-28 sm:w-48 sm:h-48 bg-[#09090B] rounded"
+          >
+            <svg
+              class="w-12 h-12 text-gray-200"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              fill="currentColor"
+              viewBox="0 0 640 512"
+              ><path
+                d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"
+              /></svg
+            >
           </div>
+          <div class="w-full md:w-96">
+            <div class="h-2.5 bg-gray-100 rounded-full w-48 mb-4"></div>
+            <div class="h-2 bg-gray-100 rounded-full w-80 mb-2.5"></div>
+            <div class="h-2 bg-gray-100 rounded-full w-56 mb-2.5"></div>
+            <div class="h-2 bg-gray-100 rounded-full w-80 mb-2.5"></div>
+            <div class="h-2 bg-gray-100 rounded-full w-56 mb-2.5"></div>
+            <div class="h-2 bg-gray-100 rounded-full w-48"></div>
+          </div>
+          <span class="sr-only">Loading...</span>
         </div>
-        
+      </div>
     </div>
+  </div>
 </div>
-
diff --git a/src/lib/components/TagSearchbar.svelte b/src/lib/components/TagSearchbar.svelte
index 427ba1f9..777de382 100644
--- a/src/lib/components/TagSearchbar.svelte
+++ b/src/lib/components/TagSearchbar.svelte
@@ -305,7 +305,7 @@
           <label for="modal-search" class="sr-only">Search</label>
           <input
             id="modal-search"
-            class="rounded-md w-full text-white bg-[#09090B] border border-slate-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
+            class="rounded-md w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
             type="search"
             placeholder="Search Anything…"
             bind:value={searchQuery}
@@ -484,7 +484,7 @@
             <label for="modal-search" class="sr-only">Search</label>
             <input
               id="modal-search"
-              class="rounded-md w-full text-white bg-[#09090B] border border-slate-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
+              class="rounded-md w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
               type="search"
               placeholder="Search Anything…"
               bind:value={searchQuery}
diff --git a/src/lib/components/TickerInfoCard.svelte b/src/lib/components/TickerInfoCard.svelte
index faab0505..a30e42a4 100644
--- a/src/lib/components/TickerInfoCard.svelte
+++ b/src/lib/components/TickerInfoCard.svelte
@@ -81,7 +81,7 @@
 
 <div class="sm:space-y-3">
   <div
-    class="sm:rounded-md lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
+    class="sm:rounded-md lg:border lg:border-gray-600 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
   >
     <!--Start Header-->
     <div
@@ -112,7 +112,7 @@
     </div>
     <!--End Header-->
     <!--Start Content-->
-    <div class="w-full flex flex-wrap border-t border-slate-800 px-2">
+    <div class="w-full flex flex-wrap border-t border-gray-600 px-2">
       <h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">
         Company Info
       </h2>
diff --git a/src/lib/components/TopETFTickerHolder.svelte b/src/lib/components/TopETFTickerHolder.svelte
index e1fa5511..97f16cfd 100644
--- a/src/lib/components/TopETFTickerHolder.svelte
+++ b/src/lib/components/TopETFTickerHolder.svelte
@@ -19,7 +19,7 @@
     : 'hidden'}"
 >
   <div
-    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth <
+    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600 h-auto {$screenWidth <
     640
       ? 'w-screen pt-16'
       : ''} md:w-[420px] xl:w-[450px]"
diff --git a/src/lib/components/TopHoldingCard.svelte b/src/lib/components/TopHoldingCard.svelte
index 44c9bec3..a3544be4 100644
--- a/src/lib/components/TopHoldingCard.svelte
+++ b/src/lib/components/TopHoldingCard.svelte
@@ -41,7 +41,7 @@
   class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}"
 >
   <div
-    class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <=
+    class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-gray-600 h-auto {$screenWidth <=
     800
       ? 'w-screen pt-16'
       : ''} md:w-[420px] xl:w-[450px]"
diff --git a/src/lib/components/WatchListCard.svelte b/src/lib/components/WatchListCard.svelte
index f42452b6..6404144a 100644
--- a/src/lib/components/WatchListCard.svelte
+++ b/src/lib/components/WatchListCard.svelte
@@ -143,7 +143,7 @@
           </table>
         </div>
 
-        <div class="w-full m-auto border-b border-slate-800 mt-16 mb-16"></div>
+        <div class="w-full m-auto border-b border-gray-600 mt-16 mb-16"></div>
 
         <h2
           class="text-start text-white ml-2 text-xl font-bold text-black mb-3"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3eb113f3..4c7b160a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -633,7 +633,7 @@
                 </ul>
               {:else}
                 <div
-                  class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-slate-800 text-[1rem]"
+                  class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
                 >
                   <svg
                     class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
@@ -719,7 +719,7 @@
                 </ul>
               {:else}
                 <div
-                  class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-slate-800 text-[1rem]"
+                  class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
                 >
                   <svg
                     class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
@@ -798,7 +798,7 @@
                 </ul>
               {:else}
                 <div
-                  class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-slate-800 text-[1rem]"
+                  class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
                 >
                   <svg
                     class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index c44aefa1..7b522a1f 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -109,7 +109,7 @@
           </div>
 
           <div
-            class="card w-full rounded-none sm:rounded-xl border-t border-slate-800 sm:border sm:border-slate-800 m-auto"
+            class="card w-full rounded-none sm:rounded-xl border-t border-gray-600 sm:border sm:border-gray-600 m-auto"
           >
             <div class="card-body">
               <h2 class="card-title text-2xl mb-5 text-white">Support</h2>
diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index c27e6c72..d556d237 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -357,7 +357,7 @@
               <div class="navbar w-full px-4 py-2">
                 <div
                   class="{isScrolled
-                    ? 'border-b border-slate-800 ease-in'
+                    ? 'border-b border-gray-600 ease-in'
                     : 'ease-out'} m-auto w-full"
                 >
                   <div
@@ -699,7 +699,7 @@
                         >
                           <!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
                           <div
-                            class="rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800"
+                            class="rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-gray-600"
                           >
                             <img
                               style="clip-path: circle(50%);"
@@ -729,14 +729,14 @@
                                         <div class="hidden sm:flex ml-auto">
                                         {#if holdingShares !== 0 && data?.user}
                                         
-                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
+                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-gray-600 normal-case cursor-pointer items-center">
                                           <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
                                           <span class="text-white font-medium">
                                             Portfolio
                                           </span>
                                         </label>
                                         {:else}
-                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case  cursor-pointer items-center">
+                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-gray-600 normal-case  cursor-pointer items-center">
                                           <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
                                           <span class="text-white font-medium">
                                             Portfolio
diff --git a/src/routes/crypto/[tickerID]/+page.svelte b/src/routes/crypto/[tickerID]/+page.svelte
index 6527d670..9c01160e 100644
--- a/src/routes/crypto/[tickerID]/+page.svelte
+++ b/src/routes/crypto/[tickerID]/+page.svelte
@@ -1250,7 +1250,7 @@ afterUpdate(async () => {
 
             <label
               on:click={changeChartType}
-              class="ml-auto mr-5 -mt-1 sm:hidden border border-slate-800 px-2.5 py-1 rounded-xl"
+              class="ml-auto mr-5 -mt-1 sm:hidden border border-gray-600 px-2.5 py-1 rounded-xl"
             >
               {#if displayChartType === "line"}
                 <svg
diff --git a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
index a057aadf..d27a172c 100644
--- a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
@@ -166,7 +166,7 @@
           </h1>
 
           <div
-            class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+            class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
           >
             <svg
               class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -433,7 +433,7 @@
               <div class="relative w-full mt-10">
                 {#each senateTradingList as item}
                   <div
-                    class="w-full bg-[#09090B] border border-slate-800 shadow-lg h-auto pb-4 pt-4 mb-7"
+                    class="w-full bg-[#09090B] border border-gray-600 shadow-lg h-auto pb-4 pt-4 mb-7"
                   >
                     <div class="flex flex-col relative">
                       {#if item?.party === "Republican"}
@@ -492,7 +492,7 @@
                       </div>
 
                       <div
-                        class="border-1 border-b border-slate-800 w-full mt-5 mb-5"
+                        class="border-1 border-b border-gray-600 w-full mt-5 mb-5"
                       />
 
                       <div class="flex flex-row items-center pr-4 pl-4">
@@ -536,7 +536,7 @@
                       </div>
 
                       <div
-                        class="border-1 border-b border-slate-800 w-full mt-5 mb-5"
+                        class="border-1 border-b border-gray-600 w-full mt-5 mb-5"
                       />
 
                       <div class="flex flex-row items-center pr-4 pl-4">
@@ -575,7 +575,7 @@
               {#if rawData?.length >= 20}
                 <label
                   on:click={backToTop}
-                  class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+                  class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
                 >
                   Back to top
                 </label>
diff --git a/src/routes/crypto/[tickerID]/stats/+page.svelte b/src/routes/crypto/[tickerID]/stats/+page.svelte
index 3bf429d1..df2ea80c 100644
--- a/src/routes/crypto/[tickerID]/stats/+page.svelte
+++ b/src/routes/crypto/[tickerID]/stats/+page.svelte
@@ -123,7 +123,7 @@ updateYearRange()
       </h1>
 
       <div
-        class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+        class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
       >
         <svg
           class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -319,7 +319,7 @@ updateYearRange()
               >
                 <thead>
                   <tr
-                    class="bg-[#09090B] border-slate-800 rounded text-white font-semibold"
+                    class="bg-[#09090B] border-gray-600 rounded text-white font-semibold"
                   >
                     <th class="text-start text-sm sm:text-[1rem]">Started</th>
                     <th class="text-sm sm:text-[1rem] text-end">Recovered</th>
diff --git a/src/routes/dividends-calendar/+page.svelte b/src/routes/dividends-calendar/+page.svelte
index c1bab993..5538de7c 100644
--- a/src/routes/dividends-calendar/+page.svelte
+++ b/src/routes/dividends-calendar/+page.svelte
@@ -540,7 +540,7 @@
                     </div>
                   {:else}
                     <div
-                      class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
+                      class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-[1rem]"
                     >
                       <svg
                         class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index 71950d9f..b37219c2 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -606,7 +606,7 @@
                     </div>
                   {:else}
                     <div
-                      class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
+                      class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-[1rem]"
                     >
                       <svg
                         class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index 61565276..822df817 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -755,7 +755,7 @@
                       </div>
                     {:else}
                       <div
-                        class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
+                        class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-[1rem]"
                       >
                         <svg
                           class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
index 8d6f5262..4e1c37b3 100644
--- a/src/routes/economic-indicator/+page.svelte
+++ b/src/routes/economic-indicator/+page.svelte
@@ -848,7 +848,7 @@
                   class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
                 >
                   <thead>
-                    <tr class="border border-slate-800">
+                    <tr class="border border-gray-600">
                       <th
                         class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                         >Date</th
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index d4e7d3f0..50fda981 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -312,7 +312,7 @@
               <div class="navbar w-full px-4 py-2">
                 <div
                   class="{isScrolled
-                    ? 'border-b border-slate-800 ease-in'
+                    ? 'border-b border-gray-600 ease-in'
                     : 'ease-out'} m-auto w-full"
                 >
                   <div
diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index f5130f23..61e781e7 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -80,7 +80,7 @@
       <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
         <div class="mb-6">
           <div
-            class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+            class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
           >
             <svg
               class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/etf/[tickerID]/insider/+page.svelte b/src/routes/etf/[tickerID]/insider/+page.svelte
index 3ca8df33..39769562 100644
--- a/src/routes/etf/[tickerID]/insider/+page.svelte
+++ b/src/routes/etf/[tickerID]/insider/+page.svelte
@@ -395,7 +395,7 @@
               {#if rawData?.length >= 20}
                 <label
                   on:click={backToTop}
-                  class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+                  class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
                 >
                   Back to top
                 </label>
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index ed419c45..e595adc3 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -588,7 +588,7 @@
           </div>
 
           <div
-            class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+            class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
           >
             <svg
               class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -725,7 +725,7 @@
                 class="text-xl text-white m-auto flex justify-center items-center h-full"
               >
                 <div
-                  class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-slate-800 p-4"
+                  class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
                 >
                   <svg
                     class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
@@ -1130,7 +1130,7 @@
           {:else}
             <div class="flex justify-center items-center m-auto mt-16 mb-6">
               <div
-                class="text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-slate-800 p-4"
+                class="text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4"
               >
                 <svg
                   class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
diff --git a/src/routes/etf/[tickerID]/stats/+page.svelte b/src/routes/etf/[tickerID]/stats/+page.svelte
index 86619ab3..89be051d 100644
--- a/src/routes/etf/[tickerID]/stats/+page.svelte
+++ b/src/routes/etf/[tickerID]/stats/+page.svelte
@@ -123,7 +123,7 @@ updateYearRange()
       </h1>
 
       <div
-        class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+        class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
       >
         <svg
           class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -319,7 +319,7 @@ updateYearRange()
               >
                 <thead>
                   <tr
-                    class="bg-[#09090B] border-slate-800 rounded text-white font-semibold"
+                    class="bg-[#09090B] border-gray-600 rounded text-white font-semibold"
                   >
                     <th class="text-start text-sm sm:text-[1rem]">Started</th>
                     <th class="text-sm sm:text-[1rem] text-end">Recovered</th>
diff --git a/src/routes/heatmaps/+page.svelte b/src/routes/heatmaps/+page.svelte
index 428c5f75..895fa844 100644
--- a/src/routes/heatmaps/+page.svelte
+++ b/src/routes/heatmaps/+page.svelte
@@ -491,7 +491,7 @@ async function exportTreemap() {
   ></label>
 
   <div
-    class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800"
+    class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600"
   >
     <label
       for="indexModal"
@@ -566,7 +566,7 @@ async function exportTreemap() {
   ></label>
 
   <div
-    class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800"
+    class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600"
   >
     <label
       for="exportDataModal"
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index b705b033..cfc40c1c 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -232,7 +232,7 @@
       {:else}
         <div class="flex justify-center items-center m-auto mt-10 mb-6">
           <div
-            class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-md h-auto border border-slate-800 p-4"
+            class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4"
           >
             <svg
               class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
diff --git a/src/routes/newsletter/+page.svelte b/src/routes/newsletter/+page.svelte
index 4c0da37c..425afb86 100644
--- a/src/routes/newsletter/+page.svelte
+++ b/src/routes/newsletter/+page.svelte
@@ -123,7 +123,7 @@
   </div>
 
   <div
-    class="bg-[#09090B] sm:mt-10 sm:rounded-xl border-t sm:border hover:border-slate-700 border-slate-800 pb-10"
+    class="bg-[#09090B] sm:mt-10 sm:rounded-xl border-t sm:border hover:border-slate-700 border-gray-600 pb-10"
   >
     <div
       class="text-white w-5/6 sm:w-full m-auto sm:m-0 text-center sm:text-start font-bold text-2xl flex justify-center sm:justify-start items-center pt-10 sm:ml-10"
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 50a7e118..77c8bd7b 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -1316,7 +1316,7 @@ function sendMessage(message) {
                                   >
                                     <input
                                       type="radio"
-                                      class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                                      class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2"
                                       checked={ruleCondition[row?.rule] ===
                                         "under"}
                                       name={row?.rule}
@@ -1332,7 +1332,7 @@ function sendMessage(message) {
                                   >
                                     <input
                                       type="radio"
-                                      class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                                      class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2"
                                       checked={ruleCondition[row?.rule] ===
                                         "over"}
                                       name={row?.rule}
@@ -2086,7 +2086,7 @@ function sendMessage(message) {
             </div>
           {:else}
             <div
-              class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+              class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
             >
               <svg
                 class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte
index c42af1ae..7bb68f8b 100644
--- a/src/routes/politicians/+page.svelte
+++ b/src/routes/politicians/+page.svelte
@@ -273,7 +273,7 @@
                         ? 'sm:hover:shadow-[#80000D]'
                         : item?.party === 'Democratic'
                           ? 'sm:hover:shadow-[#1358C3]'
-                          : 'sm:hover:shadow-[#636465]'} border-slate-800 shadow-md rounded-md h-auto pb-4 pt-4 mb-7"
+                          : 'sm:hover:shadow-[#636465]'} border-gray-600 shadow-md rounded-md h-auto pb-4 pt-4 mb-7"
                     >
                       <div class="flex flex-col relative">
                         {#if item?.party === "Republican"}
@@ -394,7 +394,7 @@
     ></label>
 
     <div
-      class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800 max-h-[600px] overflow-y-scroll"
+      class="modal-box w-full bg-[#09090B] sm:border sm:border-gray-600 max-h-[600px] overflow-y-scroll"
     >
       <label
         for="filterList"
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index 3cdfd34b..ac92f1a1 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -2639,7 +2639,7 @@ const handleKeyDown = (event) => {
                                 >
                                   <input
                                     type="radio"
-                                    class="radio ring-0 checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                                    class="radio ring-0 checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2"
                                     checked={ruleCondition[row?.rule] ===
                                       "under"}
                                     name={row?.rule}
@@ -2655,7 +2655,7 @@ const handleKeyDown = (event) => {
                                 >
                                   <input
                                     type="radio"
-                                    class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                                    class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2"
                                     checked={ruleCondition[row?.rule] ===
                                       "over"}
                                     name={row?.rule}
@@ -2779,12 +2779,12 @@ const handleKeyDown = (event) => {
     <!--Start Rules Preview -->
 
     <!--
-                  <div id="step-3" class="m-auto w-5/6 bg-[#09090B] sm:ml-10 h-auto max-h-[400px] no-scrollbar overflow-hidden overflow-y-scroll p-5 sm:rounded-md border-b sm:border sm:hover:border-slate-700 border-slate-800 pb-10">
+                  <div id="step-3" class="m-auto w-5/6 bg-[#09090B] sm:ml-10 h-auto max-h-[400px] no-scrollbar overflow-hidden overflow-y-scroll p-5 sm:rounded-md border-b sm:border sm:hover:border-slate-700 border-gray-600 pb-10">
                     <div class="flex flex-row items-center pb-5 sm:pb-0">
                       <div class="text-white font-bold text-xl sm:text-2xl flex justify-start items-center">
                         {ruleOfList.length} Rules Preview
                       </div>
-                      <label on:click={handleResetAll} class="ml-auto cursor-pointer transition  bg-[#fff] sm:hover:bg-gray-300 border border-slate-800 py-2 px-3 rounded-md text-white text-sm">
+                      <label on:click={handleResetAll} class="ml-auto cursor-pointer transition  bg-[#fff] sm:hover:bg-gray-300 border border-gray-600 py-2 px-3 rounded-md text-white text-sm">
                         Reset All
                       </label>
                     </div>
@@ -3084,7 +3084,7 @@ const handleKeyDown = (event) => {
       {/if}
     {:else}
       <div
-        class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+        class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
       >
         <svg
           class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 86c80fcf..6b68cba9 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -380,7 +380,7 @@
               <div class="navbar w-full px-4 py-2">
                 <div
                   class="{isScrolled
-                    ? 'border-b border-slate-800 ease-in'
+                    ? 'border-b border-gray-600 ease-in'
                     : 'ease-out'} m-auto w-full"
                 >
                   <div
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index 8c41bcdc..58f1ff00 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -31,6 +31,16 @@
 
   $coolMode = false;
   let timeFrame = "10Y";
+  let activeIdx = 0;
+
+  const tabs = [
+    {
+      title: "Annual",
+    },
+    {
+      title: "Quarterly",
+    },
+  ];
 
   const statementConfig = [
     {
@@ -322,10 +332,12 @@
   };
 
   $: {
-    if (timeFrame || displayStatement || filterRule) {
-      if (filterRule === "annual") {
+    if (timeFrame || displayStatement || activeIdx) {
+      if (activeIdx === 0) {
+        filterRule = "annual";
         fullStatement = data?.getIncomeStatement?.annual;
       } else {
+        filterRule = "quarterly";
         fullStatement = data?.getIncomeStatement?.quarter;
       }
       income = filterStatement(fullStatement, timeFrame);
@@ -370,7 +382,9 @@
 </svelte:head>
 
 <section class="bg-[#09090B] w-full overflow-hidden text-white h-full">
-  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
+  <div
+    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
+  >
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
@@ -393,7 +407,7 @@
 
             <div class="grid grid-cols-1 gap-2">
               <div
-                class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+                class="text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
               >
                 <svg
                   class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -416,51 +430,37 @@
                 {/if}
               </div>
 
-              <ul
-                class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
+              <div
+                class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
               >
-                <li class="w-full">
-                  <label
-                    on:click={() => (filterRule = "annual")}
-                    class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
-                    'annual'
-                      ? 'bg-[#fff] text-black'
-                      : 'bg-[#313131] text-white'} font-semibold"
-                    aria-current="page"
-                  >
-                    Annual
-                  </label>
-                </li>
-                <li class="w-full">
-                  {#if data?.user?.tier === "Pro"}
-                    <label
-                      on:click={() => (filterRule = "quartely")}
-                      class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
-                      'quartely'
-                        ? 'bg-[#fff] text-black'
-                        : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
+                <div
+                  class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                >
+                  {#each tabs as item, i}
+                    <button
+                      on:click={() => (activeIdx = i)}
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                      i
+                        ? 'z-0'
+                        : ''} "
                     >
-                      Quartely
-                    </label>
-                  {:else}
-                    <a
-                      href="/pricing"
-                      class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
-                    >
-                      <span class="">Quarterly</span>
-                      <svg
-                        class="ml-1 -mt-0.5 w-3.5 h-3.5"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        ><path
-                          fill="#A3A3A3"
-                          d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                        /></svg
+                      {#if activeIdx === i}
+                        <div
+                          class="absolute inset-0 rounded-md bg-[#fff]"
+                        ></div>
+                      {/if}
+                      <span
+                        class="relative text-sm block font-semibold {activeIdx ===
+                        i
+                          ? 'text-black'
+                          : 'text-white'}"
                       >
-                    </a>
-                  {/if}
-                </li>
-              </ul>
+                        {item.title}
+                      </span>
+                    </button>
+                  {/each}
+                </div>
+              </div>
 
               <div
                 class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
@@ -621,7 +621,7 @@
                     class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
                   >
                     <thead>
-                      <tr class="border border-slate-800">
+                      <tr class="border border-gray-600">
                         <th
                           class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                           >{filterRule === "annual"
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
index 4737c37d..f6c7e7df 100644
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
@@ -31,6 +31,17 @@
   $: $coolMode = false;
   let timeFrame = "10Y";
 
+  let activeIdx = 0;
+
+  const tabs = [
+    {
+      title: "Annual",
+    },
+    {
+      title: "Quarterly",
+    },
+  ];
+
   const statementConfig = [
     {
       propertyName: "cashAndCashEquivalents",
@@ -401,13 +412,14 @@
   };
 
   $: {
-    if (timeFrame || displayStatement || filterRule) {
-      if (filterRule === "annual") {
+    if (timeFrame || displayStatement || activeIdx) {
+      if (activeIdx === 0) {
+        filterRule = "annual";
         fullStatement = data?.getBalanceSheetStatement?.annual;
       } else {
+        filterRule = "quarterly";
         fullStatement = data?.getBalanceSheetStatement?.quarter;
       }
-
       balanceSheet = filterStatement(fullStatement, timeFrame);
 
       if ($coolMode === true) {
@@ -455,7 +467,9 @@
 </svelte:head>
 
 <section class="bg-[#09090B] overflow-hidden text-white h-full w-full">
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+  <div
+    class="flex justify-center w-full m-auto h-full overflow-hidden mt-4 sm:mt-0"
+  >
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
     >
@@ -477,7 +491,7 @@
 
           <div class="grid grid-cols-1 gap-2">
             <div
-              class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+              class="text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
             >
               <svg
                 class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -500,51 +514,35 @@
               {/if}
             </div>
 
-            <ul
-              class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
+            <div
+              class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
             >
-              <li class="w-full">
-                <label
-                  on:click={() => (filterRule = "annual")}
-                  class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
-                  'annual'
-                    ? 'bg-[#fff] text-black'
-                    : 'bg-[#313131] text-white'} font-semibold"
-                  aria-current="page"
-                >
-                  Annual
-                </label>
-              </li>
-              <li class="w-full">
-                {#if data?.user?.tier === "Pro"}
-                  <label
-                    on:click={() => (filterRule = "quartely")}
-                    class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
-                    'quartely'
-                      ? 'bg-[#fff] text-black'
-                      : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
+              <div
+                class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+              >
+                {#each tabs as item, i}
+                  <button
+                    on:click={() => (activeIdx = i)}
+                    class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                    i
+                      ? 'z-0'
+                      : ''} "
                   >
-                    Quartely
-                  </label>
-                {:else}
-                  <a
-                    href="/pricing"
-                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
-                  >
-                    <span class="">Quarterly</span>
-                    <svg
-                      class="ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="#A3A3A3"
-                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                      /></svg
+                    {#if activeIdx === i}
+                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
+                    {/if}
+                    <span
+                      class="relative text-sm block font-semibold {activeIdx ===
+                      i
+                        ? 'text-black'
+                        : 'text-white'}"
                     >
-                  </a>
-                {/if}
-              </li>
-            </ul>
+                      {item.title}
+                    </span>
+                  </button>
+                {/each}
+              </div>
+            </div>
 
             <div
               class="mb-6 sm:mb-3 flex flex-row items-center w-full justify-end sm:justify-center mt-3 sm:mt-0"
@@ -733,7 +731,7 @@
                   class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
                 >
                   <thead>
-                    <tr class="border border-slate-800">
+                    <tr class="border border-gray-600">
                       <th class="text-white font-semibold text-start text-sm"
                         >{filterRule === "annual"
                           ? "Fiscal Year End"
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
index 69ee4916..7c14057a 100644
--- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
@@ -30,7 +30,16 @@
   let tableList = [];
 
   let timeFrame = "10Y";
+  let activeIdx = 0;
 
+  const tabs = [
+    {
+      title: "Annual",
+    },
+    {
+      title: "Quarterly",
+    },
+  ];
   const statementConfig = [
     {
       propertyName: "netIncome",
@@ -346,13 +355,14 @@
   };
 
   $: {
-    if (timeFrame || displayStatement || filterRule) {
-      if (filterRule === "annual") {
+    if (timeFrame || displayStatement || activeIdx) {
+      if (activeIdx === 0) {
+        filterRule = "annual";
         fullStatement = data?.getCashFlowStatement?.annual;
       } else {
+        filterRule = "quarterly";
         fullStatement = data?.getCashFlowStatement?.quarter;
       }
-
       cashFlow = filterStatement(fullStatement, timeFrame);
 
       if ($coolMode === true) {
@@ -400,7 +410,9 @@
 </svelte:head>
 
 <section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+  <div
+    class="flex justify-center w-full m-auto h-full overflow-hidden mt-4 sm:mt-0"
+  >
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
     >
@@ -420,7 +432,7 @@
 
           <div class="grid grid-cols-1 gap-2 w-full">
             <div
-              class="w-full text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+              class="w-full text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
             >
               <svg
                 class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -443,51 +455,35 @@
               {/if}
             </div>
 
-            <ul
-              class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
+            <div
+              class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
             >
-              <li class="w-full">
-                <label
-                  on:click={() => (filterRule = "annual")}
-                  class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
-                  'annual'
-                    ? 'bg-[#fff] text-black'
-                    : 'bg-[#313131] text-white'} font-semibold"
-                  aria-current="page"
-                >
-                  Annual
-                </label>
-              </li>
-              <li class="w-full">
-                {#if data?.user?.tier === "Pro"}
-                  <label
-                    on:click={() => (filterRule = "quartely")}
-                    class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
-                    'quartely'
-                      ? 'bg-[#fff] text-black'
-                      : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
+              <div
+                class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+              >
+                {#each tabs as item, i}
+                  <button
+                    on:click={() => (activeIdx = i)}
+                    class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                    i
+                      ? 'z-0'
+                      : ''} "
                   >
-                    Quartely
-                  </label>
-                {:else}
-                  <a
-                    href="/pricing"
-                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
-                  >
-                    <span class="">Quarterly</span>
-                    <svg
-                      class="ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="#A3A3A3"
-                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                      /></svg
+                    {#if activeIdx === i}
+                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
+                    {/if}
+                    <span
+                      class="relative text-sm block font-semibold {activeIdx ===
+                      i
+                        ? 'text-black'
+                        : 'text-white'}"
                     >
-                  </a>
-                {/if}
-              </li>
-            </ul>
+                      {item.title}
+                    </span>
+                  </button>
+                {/each}
+              </div>
+            </div>
 
             <div
               class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
@@ -664,7 +660,7 @@
                   class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
                 >
                   <thead>
-                    <tr class="border border-slate-800">
+                    <tr class="border border-gray-600">
                       <th
                         class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                         >{filterRule === "annual"
@@ -1050,7 +1046,7 @@
     class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"
   ></label>
 
-  <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
+  <div class="modal-box w-full bg-[#09090B] sm:border sm:border-gray-600">
     <label
       for="timeFrameModal"
       class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white"
@@ -1246,7 +1242,7 @@
     <label id="exportDataModal" for="exportDataModal"  class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
     
     
-    <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
+    <div class="modal-box w-full bg-[#09090B] sm:border sm:border-gray-600">
   
   
   
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
index a4a5c0e1..bd65954a 100644
--- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
@@ -30,7 +30,16 @@
 
   $coolMode = false;
   let timeFrame = "10Y";
+  let activeIdx = 0;
 
+  const tabs = [
+    {
+      title: "Annual",
+    },
+    {
+      title: "Quarterly",
+    },
+  ];
   const statementConfig = [
     {
       propertyName: "priceEarningsRatio",
@@ -309,13 +318,14 @@
   };
 
   $: {
-    if (timeFrame || displayStatement || filterRule) {
-      if (filterRule === "annual") {
+    if (timeFrame || displayStatement || activeIdx) {
+      if (activeIdx === 0) {
+        filterRule = "annual";
         fullStatement = data?.getRatiosStatement?.annual;
       } else {
+        filterRule = "quarterly";
         fullStatement = data?.getRatiosStatement?.quarter;
       }
-
       ratios = filterStatement(fullStatement, timeFrame);
 
       if ($coolMode === true) {
@@ -364,7 +374,9 @@
 </svelte:head>
 
 <section class="bg-[#09090B] overflow-hidden text-white h-full">
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+  <div
+    class="flex justify-center w-full m-auto h-full overflow-hidden mt-4 sm:mt-0"
+  >
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
@@ -384,7 +396,7 @@
 
           <div class="grid grid-cols-1 gap-2">
             <div
-              class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+              class="text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
             >
               <svg
                 class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -407,51 +419,35 @@
               {/if}
             </div>
 
-            <ul
-              class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
+            <div
+              class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
             >
-              <li class="w-full">
-                <label
-                  on:click={() => (filterRule = "annual")}
-                  class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
-                  'annual'
-                    ? 'bg-[#fff] text-black'
-                    : 'bg-[#313131] text-white'} font-semibold"
-                  aria-current="page"
-                >
-                  Annual
-                </label>
-              </li>
-              <li class="w-full">
-                {#if data?.user?.tier === "Pro"}
-                  <label
-                    on:click={() => (filterRule = "quartely")}
-                    class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
-                    'quartely'
-                      ? 'bg-[#fff] text-black'
-                      : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
+              <div
+                class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+              >
+                {#each tabs as item, i}
+                  <button
+                    on:click={() => (activeIdx = i)}
+                    class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                    i
+                      ? 'z-0'
+                      : ''} "
                   >
-                    Quartely
-                  </label>
-                {:else}
-                  <a
-                    href="/pricing"
-                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
-                  >
-                    <span class="">Quarterly</span>
-                    <svg
-                      class="ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="#A3A3A3"
-                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                      /></svg
+                    {#if activeIdx === i}
+                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
+                    {/if}
+                    <span
+                      class="relative text-sm block font-semibold {activeIdx ===
+                      i
+                        ? 'text-black'
+                        : 'text-white'}"
                     >
-                  </a>
-                {/if}
-              </li>
-            </ul>
+                      {item.title}
+                    </span>
+                  </button>
+                {/each}
+              </div>
+            </div>
 
             <div
               class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
@@ -610,7 +606,7 @@
                   class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
                 >
                   <thead>
-                    <tr class="border border-slate-800">
+                    <tr class="border border-gray-600">
                       <th
                         class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                         >{filterRule === "annual"
diff --git a/src/routes/stocks/[tickerID]/forecast/+page.svelte b/src/routes/stocks/[tickerID]/forecast/+page.svelte
index 37935bf1..3c00c977 100644
--- a/src/routes/stocks/[tickerID]/forecast/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+page.svelte
@@ -51,7 +51,6 @@
     rawAnalystList?.length > 5 ? rawAnalystList?.slice(-6) : rawAnalystList;
   const categories = ["Strong Buy", "Buy", "Hold", "Sell", "Strong Sell"];
 
-  console.log(rawAnalystList);
   function findIndex(data) {
     const currentYear = new Date().getFullYear();
 
@@ -718,50 +717,62 @@
                   <div
                     class="flex items-baseline text-2xl font-semibold text-white"
                   >
-                    {abbreviateNumber(
-                      data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg,
-                    )}
-                    <div
-                      class="ml-2 block text-sm font-semibold text-white lg:hidden"
-                    >
-                      from {abbreviateNumber(
-                        data?.getAnalystEstimate[index - 2]?.revenue,
-                      )}
-                    </div>
-                  </div>
-                  <div
-                    class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 {changeRevenue >
-                    0
-                      ? 'bg-[#00FC50]'
-                      : 'bg-[#FF2F1F]'} text-black"
-                  >
-                    <svg
-                      class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center text-black {changeRevenue >
+                    {data?.getAnalystEstimate[index - 1]
+                      ?.estimatedRevenueAvg !== null &&
+                    data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg !==
                       0
-                        ? ''
-                        : 'rotate-180 '}"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      style="max-width:40px"
-                      aria-hidden="true"
-                      ><path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M7 11l5-5m0 0l5 5m-5-5v12"
-                      ></path></svg
-                    > <span class="sr-only">Increased by</span>
-                    {abbreviateNumber(changeRevenue?.toFixed(1))}%
+                      ? abbreviateNumber(
+                          data?.getAnalystEstimate[index - 1]
+                            ?.estimatedRevenueAvg,
+                        )
+                      : "n/a"}
+                    {#if data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg !== 0}
+                      <div
+                        class="ml-2 block text-sm font-semibold text-white lg:hidden"
+                      >
+                        from {abbreviateNumber(
+                          data?.getAnalystEstimate[index - 2]?.revenue,
+                        )}
+                      </div>
+                    {/if}
                   </div>
+                  {#if data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg !== 0}
+                    <div
+                      class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 {changeRevenue >
+                      0
+                        ? 'bg-[#00FC50]'
+                        : 'bg-[#FF2F1F]'} text-black"
+                    >
+                      <svg
+                        class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center text-black {changeRevenue >
+                        0
+                          ? ''
+                          : 'rotate-180 '}"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        style="max-width:40px"
+                        aria-hidden="true"
+                        ><path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M7 11l5-5m0 0l5 5m-5-5v12"
+                        ></path></svg
+                      > <span class="sr-only">Increased by</span>
+                      {abbreviateNumber(changeRevenue?.toFixed(1))}%
+                    </div>
+                  {/if}
                 </div>
-                <div
-                  class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
-                >
-                  from {abbreviateNumber(
-                    data?.getAnalystEstimate[index - 2]?.revenue,
-                  )}
-                </div>
+                {#if data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg !== 0}
+                  <div
+                    class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
+                  >
+                    from {abbreviateNumber(
+                      data?.getAnalystEstimate[index - 2]?.revenue,
+                    )}
+                  </div>
+                {/if}
               </div>
               <div
                 class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b md:border-l lg:border-b-0"
@@ -942,7 +953,7 @@
             </div>
           {:else}
             <div
-              class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+              class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
             >
               <svg
                 class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
index adc06909..b8ce6ac3 100644
--- a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
@@ -52,6 +52,31 @@
           : "-";
     }
 
+    function filterLatestEntries(data) {
+      const latestEntries = {};
+
+      data?.forEach((entry) => {
+        try {
+          // Create a unique key by combining 'analyst' and 'name'
+          const key = `${entry.analyst}-${entry.name}`;
+
+          // Convert date and time to a Date object
+          const dateTimeStr = `${entry.date} ${entry.time}`;
+          const dateTime = new Date(dateTimeStr);
+
+          // Check if this entry is the latest for the given key
+          if (!latestEntries[key] || dateTime > latestEntries[key].dateTime) {
+            latestEntries[key] = { dateTime, entry };
+          }
+        } catch (e) {
+          console.error(`Error processing entry: ${e}`);
+        }
+      });
+
+      // Return only the latest entries
+      return Object?.values(latestEntries)?.map(({ entry }) => entry);
+    }
+
     const now = new Date();
     const oneYearAgo = new Date(now);
     oneYearAgo.setFullYear(now.getFullYear() - 1);
@@ -60,6 +85,7 @@
       data?.getAnalystTickerHistory?.filter(
         (item) => item?.analystScore >= 4,
       ) ?? [];
+    rawData = filterLatestEntries(rawData);
 
     if (activeIdx === 1) {
       const recentData = rawData
@@ -292,7 +318,7 @@
               class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
             >
               {priceTarget !== null && priceTarget !== undefined
-                ? "$" + priceTarget
+                ? priceTarget
                 : "n/a"}
             </div>
           </div>
@@ -316,6 +342,24 @@
         </div>
 
         {#if rawData?.length !== 0}
+          {#if activeIdx === 1}
+            <div
+              class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
+            >
+              <svg
+                class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+                ><path
+                  fill="#fff"
+                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+                /></svg
+              >
+              Considering only the latest rating within the past 12 months from each
+              unique analyst with a 4-star or higher rating.
+            </div>
+          {/if}
+
           <div
             class="mt-10 mb-5 items-center justify-between py-0 md:mt-8 md:flex md:py-2"
           >
@@ -422,13 +466,12 @@
                     </td>
 
                     <td
-                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white"
+                      class="text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end text-white"
                     >
                       <span
-                        class="text-[1rem] font-medium {[
-                          'Strong Buy',
-                          'Buy',
-                        ]?.includes(item?.rating_current)
+                        class=" {['Strong Buy', 'Buy']?.includes(
+                          item?.rating_current,
+                        )
                           ? 'text-[#00FC50]'
                           : item?.rating_current === 'Hold'
                             ? 'text-[#FF7070]'
@@ -452,13 +495,13 @@
                     </td>
 
                     <td
-                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white"
+                      class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white font-semibold"
                     >
                       <div class="flex flex-col items-end">
                         <div class="flex flex-row items-center">
                           {#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
                             <span class="text-gray-100 font-normal"
-                              >${Math?.ceil(item?.adjusted_pt_prior)}</span
+                              >{Math?.ceil(item?.adjusted_pt_prior)}</span
                             >
                             <svg
                               class="w-3 h-3 ml-1 mr-1 inline-block"
@@ -469,17 +512,19 @@
                                 stroke="white"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
-                                stroke-width="1.5"
+                                stroke-width="2.5"
                                 d="M4 12h16m0 0l-6-6m6 6l-6 6"
                               /></svg
                             >
-                            <span class="text-white font-semibold"
-                              >${Math?.ceil(item?.adjusted_pt_current)}</span
+                            <span class=""
+                              >{Math?.ceil(item?.adjusted_pt_current)}</span
                             >
                           {:else if Math?.ceil(item?.adjusted_pt_current) !== 0}
-                            <span class="text-white font-semibold"
-                              >${Math?.ceil(item?.adjusted_pt_current)}</span
+                            <span class=""
+                              >{Math?.ceil(item?.adjusted_pt_current)}</span
                             >
+                          {:else}
+                            <span class="">n/a</span>
                           {/if}
                         </div>
                       </div>
@@ -512,7 +557,7 @@
         {:else if activeIdx === 1}
           <div class="w-full flex justify-start items-center m-auto mt-10 mb-6">
             <div
-              class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-slate-800 p-4"
+              class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4"
             >
               <svg
                 class="w-5 h-5 inline-block sm:mr-1 flex-shrink-0"
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 9a399d90..09a2b094 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -272,7 +272,7 @@
           </h1>
           {#if insiderTradingList?.length === 0}
             <div
-              class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+              class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
             >
               <svg
                 class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -680,7 +680,7 @@
             {#if rawData?.length > 5 && rawData?.length === insiderTradingList?.length && data?.user?.tier === "Pro"}
               <label
                 on:click={backToTop}
-                class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+                class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
               >
                 Back to top
               </label>
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index 4eaa1707..78568d7a 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -395,7 +395,7 @@
               {#if rawData?.length >= 20}
                 <label
                   on:click={backToTop}
-                  class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+                  class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
                 >
                   Back to top
                 </label>
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index 61a1145d..e17749eb 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -251,7 +251,7 @@
           {/if}
         {:else}
           <div
-            class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+            class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
           >
             <svg
               class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index 11db2ac3..ad01845a 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -181,7 +181,7 @@
                   class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
                 >
                   <thead>
-                    <tr class="border border-slate-800">
+                    <tr class="border border-gray-600">
                       <th
                         class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                         >Quarter</th
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 747eb44b..2f3740d5 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -588,7 +588,7 @@
           </div>
 
           <div
-            class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+            class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
           >
             <svg
               class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -725,7 +725,7 @@
                 class="text-xl text-white m-auto flex justify-center items-center h-full"
               >
                 <div
-                  class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-slate-800 p-4"
+                  class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
                 >
                   <svg
                     class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
@@ -1130,7 +1130,7 @@
           {:else}
             <div class="flex justify-center items-center m-auto mt-16 mb-6">
               <div
-                class="text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-slate-800 p-4"
+                class="text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4"
               >
                 <svg
                   class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 7a96edc0..4e03e9bc 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -1191,7 +1191,7 @@
                   </div>
 
                   <div
-                    class="w-full m-auto border-b border-slate-800 mt-16 mb-16"
+                    class="w-full m-auto border-b border-gray-600 mt-16 mb-16"
                   ></div>
 
                   <h2