From a9c381f39d41d909cc926cb198d625856186a145 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 3 Mar 2025 16:46:01 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/PriceAlert.svelte          |  2 +-
 src/routes/etf/[tickerID]/+layout.svelte      | 34 ++++++-------
 .../etf/[tickerID]/options/+layout.svelte     | 28 +++++------
 .../etf/[tickerID]/options/dex/+layout.svelte | 12 ++---
 .../etf/[tickerID]/options/gex/+layout.svelte | 12 ++---
 .../etf/[tickerID]/options/oi/+layout.svelte  |  8 +--
 src/routes/index/[tickerID]/+layout.svelte    | 22 ++++----
 .../index/[tickerID]/options/+layout.svelte   | 24 ++++-----
 .../[tickerID]/options/dex/+layout.svelte     | 12 ++---
 .../[tickerID]/options/gex/+layout.svelte     | 12 ++---
 .../[tickerID]/options/oi/+layout.svelte      |  8 +--
 src/routes/industry/+layout.svelte            |  4 +-
 src/routes/ipos/+layout.svelte                | 12 ++---
 src/routes/market-flow/+layout.svelte         |  4 +-
 src/routes/market-mover/+layout.svelte        |  4 +-
 src/routes/market-mover/active/+layout.svelte | 24 ++++-----
 .../market-mover/afterhours/+layout.svelte    |  8 +--
 .../market-mover/gainers/+layout.svelte       | 24 ++++-----
 src/routes/market-mover/losers/+layout.svelte | 24 ++++-----
 .../market-mover/premarket/+layout.svelte     |  8 +--
 src/routes/market-news/+layout.svelte         |  4 +-
 src/routes/potus-tracker/+page.svelte         |  4 +-
 src/routes/price-alert/+page.svelte           |  2 +-
 src/routes/reddit-tracker/+page.svelte        |  8 +--
 src/routes/stocks/[tickerID]/+layout.svelte   | 50 +++++++++----------
 .../[tickerID]/financials/+layout.svelte      | 16 +++---
 .../stocks/[tickerID]/forecast/+layout.svelte | 12 ++---
 .../stocks/[tickerID]/insider/+layout.svelte  | 16 +++---
 .../stocks/[tickerID]/metrics/+layout.svelte  |  4 +-
 .../stocks/[tickerID]/options/+layout.svelte  | 28 +++++------
 .../[tickerID]/options/dex/+layout.svelte     | 12 ++---
 .../[tickerID]/options/gex/+layout.svelte     | 12 ++---
 .../[tickerID]/options/oi/+layout.svelte      |  8 +--
 .../stocks/[tickerID]/profile/+layout.svelte  |  8 +--
 .../[tickerID]/statistics/+layout.svelte      | 20 ++++----
 src/routes/watchlist/+layout.svelte           |  4 +-
 36 files changed, 247 insertions(+), 247 deletions(-)

diff --git a/src/lib/components/PriceAlert.svelte b/src/lib/components/PriceAlert.svelte
index cb4af31f..4d463d49 100644
--- a/src/lib/components/PriceAlert.svelte
+++ b/src/lib/components/PriceAlert.svelte
@@ -123,7 +123,7 @@
 <dialog id="priceAlertModal" class="modal modal-middle p-2 sm:p-0">
   <label
     for="priceAlertModal"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.3]"
+    class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <div
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 6e1a5604..194d9443 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -617,7 +617,7 @@
                               </div>
                             {:else if userWatchList?.length === 0}
                               <div
-                                class="shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                               >
                                 <label
                                   on:click={() =>
@@ -651,7 +651,7 @@
                           </div>
                         {:else}
                           <div
-                            class="shrink-0 ml-auto mr-2 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                           >
                             <label
                               for="userLogin"
@@ -674,7 +674,7 @@
                         <!--Start Price Alert -->
 
                         <div
-                          class="shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                         >
                           <label
                             on:click={() => ($openPriceAlert = true)}
@@ -864,8 +864,8 @@
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Overview
                         </a>
@@ -875,8 +875,8 @@
                           on:click={() => changeSection("holdings")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'holdings'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Holdings
                         </a>
@@ -886,8 +886,8 @@
                           on:click={() => changeSection("dark-pool")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dark-pool'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Dark Pool
                         </a>
@@ -896,8 +896,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Options
                         </a>
@@ -907,8 +907,8 @@
                           on:click={() => changeSection("insider")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'insider'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Insider
                         </a>
@@ -917,8 +917,8 @@
                           on:click={() => changeSection("dividends")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dividends'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Dividends
                         </a>
@@ -927,8 +927,8 @@
                           on:click={() => changeSection("history")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'history'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           History
                         </a>
diff --git a/src/routes/etf/[tickerID]/options/+layout.svelte b/src/routes/etf/[tickerID]/options/+layout.svelte
index c6171513..7216963f 100644
--- a/src/routes/etf/[tickerID]/options/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/+layout.svelte
@@ -67,8 +67,8 @@
                 href={`/etf/${$etfTicker}/options`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -77,8 +77,8 @@
                 on:click={() => changeSubSection("unusual-activity")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'unusual-activity'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Unusual Activity
               </a>
@@ -87,8 +87,8 @@
                 on:click={() => changeSubSection("hottest-contracts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'hottest-contracts'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Hottest Contracts
               </a>
@@ -97,8 +97,8 @@
                 on:click={() => changeSubSection("volatility")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'volatility'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Volatility
               </a>
@@ -106,8 +106,8 @@
                 href={`/etf/${$etfTicker}/options/oi`}
                 on:click={() => changeSubSection("oi")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 OI
               </a>
@@ -116,8 +116,8 @@
                 href={`/etf/${$etfTicker}/options/gex`}
                 on:click={() => changeSubSection("gex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 GEX
               </a>
@@ -125,8 +125,8 @@
                 href={`/etf/${$etfTicker}/options/dex`}
                 on:click={() => changeSubSection("dex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 DEX
               </a>
diff --git a/src/routes/etf/[tickerID]/options/dex/+layout.svelte b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
index ade6f7db..c92a44a3 100644
--- a/src/routes/etf/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
@@ -58,8 +58,8 @@
                 href={`/etf/${$etfTicker}/options/dex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -68,8 +68,8 @@
                 href={`/etf/${$etfTicker}/options/dex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -77,8 +77,8 @@
                 href={`/etf/${$etfTicker}/options/dex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/etf/[tickerID]/options/gex/+layout.svelte b/src/routes/etf/[tickerID]/options/gex/+layout.svelte
index a04be890..032610e1 100644
--- a/src/routes/etf/[tickerID]/options/gex/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/+layout.svelte
@@ -58,8 +58,8 @@
                 href={`/etf/${$etfTicker}/options/gex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -68,8 +68,8 @@
                 href={`/etf/${$etfTicker}/options/gex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -77,8 +77,8 @@
                 href={`/etf/${$etfTicker}/options/gex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/etf/[tickerID]/options/oi/+layout.svelte b/src/routes/etf/[tickerID]/options/oi/+layout.svelte
index e458856f..857bf20f 100644
--- a/src/routes/etf/[tickerID]/options/oi/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/+layout.svelte
@@ -56,8 +56,8 @@
                 href={`/etf/${$etfTicker}/options/oi`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -66,8 +66,8 @@
                 href={`/etf/${$etfTicker}/options/oi/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/index/[tickerID]/+layout.svelte b/src/routes/index/[tickerID]/+layout.svelte
index d5862ad3..298c81ec 100644
--- a/src/routes/index/[tickerID]/+layout.svelte
+++ b/src/routes/index/[tickerID]/+layout.svelte
@@ -620,7 +620,7 @@
                               </div>
                             {:else if userWatchList?.length === 0}
                               <div
-                                class="shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                               >
                                 <label
                                   on:click={() =>
@@ -654,7 +654,7 @@
                           </div>
                         {:else}
                           <div
-                            class="shrink-0 ml-auto mr-2 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                           >
                             <label
                               for="userLogin"
@@ -677,7 +677,7 @@
                         <!--Start Price Alert -->
 
                         <div
-                          class="shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                         >
                           <label
                             on:click={() => ($openPriceAlert = true)}
@@ -867,8 +867,8 @@
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Overview
                         </a>
@@ -878,8 +878,8 @@
                           on:click={() => changeSection("holdings")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'holdings'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Holdings
                         </a>
@@ -888,8 +888,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Options
                         </a>
@@ -899,8 +899,8 @@
                           on:click={() => changeSection("history")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'history'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           History
                         </a>
diff --git a/src/routes/index/[tickerID]/options/+layout.svelte b/src/routes/index/[tickerID]/options/+layout.svelte
index 6275babb..91e3e707 100644
--- a/src/routes/index/[tickerID]/options/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/+layout.svelte
@@ -65,8 +65,8 @@
                 href={`/index/${$indexTicker}/options`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -75,8 +75,8 @@
                 on:click={() => changeSubSection("hottest-contracts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'hottest-contracts'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Hottest Contracts
               </a>
@@ -85,8 +85,8 @@
                 on:click={() => changeSubSection("volatility")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'volatility'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Volatility
               </a>
@@ -94,8 +94,8 @@
                 href={`/index/${$indexTicker}/options/oi`}
                 on:click={() => changeSubSection("oi")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 OI
               </a>
@@ -104,8 +104,8 @@
                 href={`/index/${$indexTicker}/options/gex`}
                 on:click={() => changeSubSection("gex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 GEX
               </a>
@@ -113,8 +113,8 @@
                 href={`/index/${$indexTicker}/options/dex`}
                 on:click={() => changeSubSection("dex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 DEX
               </a>
diff --git a/src/routes/index/[tickerID]/options/dex/+layout.svelte b/src/routes/index/[tickerID]/options/dex/+layout.svelte
index dc4dae20..eecc5fdc 100644
--- a/src/routes/index/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/dex/+layout.svelte
@@ -56,8 +56,8 @@
                 href={`/index/${$indexTicker}/options/dex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -66,8 +66,8 @@
                 href={`/index/${$indexTicker}/options/dex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -75,8 +75,8 @@
                 href={`/index/${$indexTicker}/options/dex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/index/[tickerID]/options/gex/+layout.svelte b/src/routes/index/[tickerID]/options/gex/+layout.svelte
index d7b1066c..59699036 100644
--- a/src/routes/index/[tickerID]/options/gex/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/gex/+layout.svelte
@@ -56,8 +56,8 @@
                 href={`/index/${$indexTicker}/options/gex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -66,8 +66,8 @@
                 href={`/index/${$indexTicker}/options/gex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -75,8 +75,8 @@
                 href={`/index/${$indexTicker}/options/gex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/index/[tickerID]/options/oi/+layout.svelte b/src/routes/index/[tickerID]/options/oi/+layout.svelte
index b633729b..8c9852c3 100644
--- a/src/routes/index/[tickerID]/options/oi/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/oi/+layout.svelte
@@ -54,8 +54,8 @@
                 href={`/index/${$indexTicker}/options/oi`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -64,8 +64,8 @@
                 href={`/index/${$indexTicker}/options/oi/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/industry/+layout.svelte b/src/routes/industry/+layout.svelte
index b18ea660..898f09e2 100644
--- a/src/routes/industry/+layout.svelte
+++ b/src/routes/industry/+layout.svelte
@@ -62,8 +62,8 @@
                 : "/industry/all"}
             on:click={() => handleMode(i)}
             class="p-2 px-5 cursor-pointer {activeIdx === i
-              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+              ? 'text-white bg-primary/90'
+              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
           >
             {item.title}
           </a>
diff --git a/src/routes/ipos/+layout.svelte b/src/routes/ipos/+layout.svelte
index f30bf8fa..3877e980 100644
--- a/src/routes/ipos/+layout.svelte
+++ b/src/routes/ipos/+layout.svelte
@@ -77,8 +77,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90 font-semibold'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>
@@ -97,8 +97,8 @@
                       href={`/ipos/${item}`}
                       on:click={() => (displaySection = item)}
                       class="p-2 px-5 cursor-pointer {displaySection === item
-                        ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                        : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                        ? 'text-white bg-primary/90'
+                        : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                     >
                       {item}
                     </a>
@@ -107,8 +107,8 @@
                       href={`/ipos`}
                       on:click={() => (displaySection = item)}
                       class="p-2 px-5 cursor-pointer {displaySection === item
-                        ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                        : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                        ? 'text-white bg-primary/90'
+                        : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                     >
                       {item}
                     </a>
diff --git a/src/routes/market-flow/+layout.svelte b/src/routes/market-flow/+layout.svelte
index 566e1487..1bb3525a 100644
--- a/src/routes/market-flow/+layout.svelte
+++ b/src/routes/market-flow/+layout.svelte
@@ -52,8 +52,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90 font-semibold'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/market-mover/+layout.svelte b/src/routes/market-mover/+layout.svelte
index c60346ec..e0aaed4f 100644
--- a/src/routes/market-mover/+layout.svelte
+++ b/src/routes/market-mover/+layout.svelte
@@ -72,8 +72,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === index
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/market-mover/active/+layout.svelte b/src/routes/market-mover/active/+layout.svelte
index b376bab4..b4a04169 100644
--- a/src/routes/market-mover/active/+layout.svelte
+++ b/src/routes/market-mover/active/+layout.svelte
@@ -55,48 +55,48 @@
             <a
               href="/market-mover/active"
               class="p-2 px-5 cursor-pointer {timePeriod === 'active'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Today
             </a>
             <a
               href="/market-mover/active/week"
               class="p-2 px-5 cursor-pointer {timePeriod === 'week'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Week
             </a>
             <a
               href="/market-mover/active/month"
               class="p-2 px-5 cursor-pointer {timePeriod === 'month'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Month
             </a>
             <a
               href="/market-mover/active/year"
               class="p-2 px-5 cursor-pointer {timePeriod === 'year'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Year
             </a>
             <a
               href="/market-mover/active/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               3 Years
             </a>
             <a
               href="/market-mover/active/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               5 Years
             </a>
diff --git a/src/routes/market-mover/afterhours/+layout.svelte b/src/routes/market-mover/afterhours/+layout.svelte
index e71226c3..68539030 100644
--- a/src/routes/market-mover/afterhours/+layout.svelte
+++ b/src/routes/market-mover/afterhours/+layout.svelte
@@ -37,16 +37,16 @@
             <a
               href="/market-mover/afterhours/gainers"
               class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Gainers
             </a>
             <a
               href="/market-mover/afterhours/losers"
               class="p-2 px-5 cursor-pointer {categoryType === 'losers'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Losers
             </a>
diff --git a/src/routes/market-mover/gainers/+layout.svelte b/src/routes/market-mover/gainers/+layout.svelte
index e0c21da9..9d089bc4 100644
--- a/src/routes/market-mover/gainers/+layout.svelte
+++ b/src/routes/market-mover/gainers/+layout.svelte
@@ -55,48 +55,48 @@
             <a
               href="/market-mover/gainers"
               class="p-2 px-5 cursor-pointer {timePeriod === 'gainers'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Today
             </a>
             <a
               href="/market-mover/gainers/week"
               class="p-2 px-5 cursor-pointer {timePeriod === 'week'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Week
             </a>
             <a
               href="/market-mover/gainers/month"
               class="p-2 px-5 cursor-pointer {timePeriod === 'month'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Month
             </a>
             <a
               href="/market-mover/gainers/year"
               class="p-2 px-5 cursor-pointer {timePeriod === 'year'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Year
             </a>
             <a
               href="/market-mover/gainers/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               3 Years
             </a>
             <a
               href="/market-mover/gainers/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               5 Years
             </a>
diff --git a/src/routes/market-mover/losers/+layout.svelte b/src/routes/market-mover/losers/+layout.svelte
index 5d34bae1..445ac4a4 100644
--- a/src/routes/market-mover/losers/+layout.svelte
+++ b/src/routes/market-mover/losers/+layout.svelte
@@ -55,48 +55,48 @@
             <a
               href="/market-mover/losers"
               class="p-2 px-5 cursor-pointer {timePeriod === 'losers'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Today
             </a>
             <a
               href="/market-mover/losers/week"
               class="p-2 px-5 cursor-pointer {timePeriod === 'week'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Week
             </a>
             <a
               href="/market-mover/losers/month"
               class="p-2 px-5 cursor-pointer {timePeriod === 'month'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Month
             </a>
             <a
               href="/market-mover/losers/year"
               class="p-2 px-5 cursor-pointer {timePeriod === 'year'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Year
             </a>
             <a
               href="/market-mover/losers/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               3 Years
             </a>
             <a
               href="/market-mover/losers/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               5 Years
             </a>
diff --git a/src/routes/market-mover/premarket/+layout.svelte b/src/routes/market-mover/premarket/+layout.svelte
index 245f6861..ed49bfba 100644
--- a/src/routes/market-mover/premarket/+layout.svelte
+++ b/src/routes/market-mover/premarket/+layout.svelte
@@ -37,16 +37,16 @@
             <a
               href="/market-mover/premarket/gainers"
               class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Gainers
             </a>
             <a
               href="/market-mover/premarket/losers"
               class="p-2 px-5 cursor-pointer {categoryType === 'losers'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Losers
             </a>
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index f9a888e9..658e1335 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -61,8 +61,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90 font-semibold'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte
index d3148923..e3e3461f 100644
--- a/src/routes/potus-tracker/+page.svelte
+++ b/src/routes/potus-tracker/+page.svelte
@@ -324,8 +324,8 @@
                   <button
                     on:click={() => (activeIdx = i)}
                     class="p-2 px-5 cursor-pointer {activeIdx === i
-                      ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                      : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                      ? 'text-white bg-primary/90 font-semibold'
+                      : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                   >
                     {item.title}
                   </button>
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index e8374ab0..f858449d 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -301,7 +301,7 @@
                   {#if editMode}
                     <label
                       on:click={handleDeleteTickers}
-                      class="border text-sm border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white bg-default sm:hover:bg-default/60 ease-out sm:hover:text-red-500"
+                      class="border text-sm border-gray-600 mr-2 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 pl-3 pr-4 font-semibold text-white bg-default sm:hover:bg-default/60 ease-out sm:hover:text-red-500"
                     >
                       <svg
                         class="inline-block w-5 h-5"
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index e949a941..72b18a52 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -487,8 +487,8 @@
                           <label
                             on:click={() => changeTimePeriod(index)}
                             class="p-2 px-5 cursor-pointer {activeIdx === index
-                              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-primary/90'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                           >
                             {item.title}
                           </label>
@@ -497,8 +497,8 @@
                             href="/pricing"
                             class="flex flex-row items-center p-2 px-5 cursor-pointer {activeIdx ===
                             index
-                              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-primary/90'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                           >
                             <span class="">{item.title}</span>
                             <svg
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index c370300e..4daf9861 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -636,7 +636,7 @@
                               </div>
                             {:else if userWatchList?.length === 0}
                               <div
-                                class="shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                               >
                                 <label
                                   on:click={() =>
@@ -670,7 +670,7 @@
                           </div>
                         {:else}
                           <div
-                            class="shrink-0 ml-auto mr-2 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                           >
                             <label
                               for="userLogin"
@@ -693,7 +693,7 @@
                         <!--Start Price Alert -->
 
                         <div
-                          class="shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
                         >
                           <label
                             on:click={() => ($openPriceAlert = true)}
@@ -906,8 +906,8 @@
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Overview
                         </a>
@@ -916,8 +916,8 @@
                           on:click={() => changeSection("financials")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'financials'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Financials
                         </a>
@@ -926,8 +926,8 @@
                           on:click={() => changeSection("statistics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'statistics'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                           >Statistics</a
                         >
 
@@ -936,8 +936,8 @@
                           on:click={() => changeSection("metrics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'metrics'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                           >Metrics</a
                         >
 
@@ -947,8 +947,8 @@
                             on:click={() => changeSection("forecast")}
                             class="p-2 px-5 cursor-pointer {displaySection ===
                             'forecast'
-                              ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-secondary font-semibold'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                           >
                             Forecast
                           </a>
@@ -958,8 +958,8 @@
                           on:click={() => changeSection("dark-pool")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dark-pool'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Dark Pool
                         </a>
@@ -968,8 +968,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Options
                         </a>
@@ -979,8 +979,8 @@
                           on:click={() => changeSection("insider")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'insider'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Insider
                         </a>
@@ -989,8 +989,8 @@
                           on:click={() => changeSection("dividends")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dividends'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Dividends
                         </a>
@@ -999,8 +999,8 @@
                           on:click={() => changeSection("history")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'history'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           History
                         </a>
@@ -1009,8 +1009,8 @@
                           on:click={() => changeSection("profile")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'profile'
-                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
                         >
                           Profile
                         </a>
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index b7f32901..f7b62165 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -61,8 +61,8 @@
                   href={`/stocks/${$stockTicker}/financials`}
                   on:click={() => changeSubSection("income")}
                   class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   Income
                 </a>
@@ -72,8 +72,8 @@
                   on:click={() => changeSubSection("balance-sheet")}
                   class="p-2 px-5 cursor-pointer {displaySubSection ===
                   'balance-sheet'
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   Balance Sheet
                 </a>
@@ -82,8 +82,8 @@
                   on:click={() => changeSubSection("cash-flow")}
                   class="p-2 px-5 cursor-pointer {displaySubSection ===
                   'cash-flow'
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   Cashflow
                 </a>
@@ -91,8 +91,8 @@
                   href={`/stocks/${$stockTicker}/financials/ratios`}
                   on:click={() => changeSubSection("ratios")}
                   class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   Ratios
                 </a>
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
index 7161d800..6bbad5d4 100644
--- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -65,8 +65,8 @@
               href={`/stocks/${$stockTicker}/forecast`}
               on:click={() => changeSubSection("overview")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Overview
             </a>
@@ -75,8 +75,8 @@
               href={`/stocks/${$stockTicker}/forecast/analyst`}
               on:click={() => changeSubSection("analyst")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Analysts Ratings
             </a>
@@ -84,8 +84,8 @@
               href={`/stocks/${$stockTicker}/forecast/ai`}
               on:click={() => changeSubSection("ai")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'ai'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               AI Forecast
             </a>
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index a2056357..e88a472f 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -86,8 +86,8 @@
                 href={`/stocks/${$stockTicker}/insider`}
                 on:click={() => changeSubSection("insider")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
-                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
               >
                 Insider Trading
               </a>
@@ -97,8 +97,8 @@
                 on:click={() => changeSubSection("institute")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'institute'
-                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
               >
                 13F Institute
               </a>
@@ -108,8 +108,8 @@
                 on:click={() => changeSubSection("congress-trading")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'congress-trading'
-                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
               >
                 Congress Trading
               </a>
@@ -118,8 +118,8 @@
                 on:click={() => changeSubSection("transcripts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'transcripts'
-                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
               >
                 Transcripts
               </a>
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index 216da5a2..459661f4 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -77,8 +77,8 @@
                   on:click={() => changeSubSection(sectionKey)}
                   class="p-2 px-5 cursor-pointer {displaySubSection ===
                   sectionKey
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   {title}
                 </a>
diff --git a/src/routes/stocks/[tickerID]/options/+layout.svelte b/src/routes/stocks/[tickerID]/options/+layout.svelte
index 674e1b1c..dd7bb7fa 100644
--- a/src/routes/stocks/[tickerID]/options/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/+layout.svelte
@@ -67,8 +67,8 @@
                 href={`/stocks/${$stockTicker}/options`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -77,8 +77,8 @@
                 on:click={() => changeSubSection("unusual-activity")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'unusual-activity'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Unusual Activity
               </a>
@@ -87,8 +87,8 @@
                 on:click={() => changeSubSection("hottest-contracts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'hottest-contracts'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Hottest Contracts
               </a>
@@ -97,8 +97,8 @@
                 on:click={() => changeSubSection("volatility")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'volatility'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Volatility
               </a>
@@ -106,8 +106,8 @@
                 href={`/stocks/${$stockTicker}/options/oi`}
                 on:click={() => changeSubSection("oi")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 OI
               </a>
@@ -116,8 +116,8 @@
                 href={`/stocks/${$stockTicker}/options/gex`}
                 on:click={() => changeSubSection("gex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 GEX
               </a>
@@ -125,8 +125,8 @@
                 href={`/stocks/${$stockTicker}/options/dex`}
                 on:click={() => changeSubSection("dex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 DEX
               </a>
diff --git a/src/routes/stocks/[tickerID]/options/dex/+layout.svelte b/src/routes/stocks/[tickerID]/options/dex/+layout.svelte
index a7109e19..171177af 100644
--- a/src/routes/stocks/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/dex/+layout.svelte
@@ -58,8 +58,8 @@
                 href={`/stocks/${$stockTicker}/options/dex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -68,8 +68,8 @@
                 href={`/stocks/${$stockTicker}/options/dex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -77,8 +77,8 @@
                 href={`/stocks/${$stockTicker}/options/dex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/stocks/[tickerID]/options/gex/+layout.svelte b/src/routes/stocks/[tickerID]/options/gex/+layout.svelte
index d7f2cc36..2cab6523 100644
--- a/src/routes/stocks/[tickerID]/options/gex/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/gex/+layout.svelte
@@ -59,8 +59,8 @@
                 href={`/stocks/${$stockTicker}/options/gex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -69,8 +69,8 @@
                 href={`/stocks/${$stockTicker}/options/gex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -78,8 +78,8 @@
                 href={`/stocks/${$stockTicker}/options/gex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/stocks/[tickerID]/options/oi/+layout.svelte b/src/routes/stocks/[tickerID]/options/oi/+layout.svelte
index b7a67921..102eb9ff 100644
--- a/src/routes/stocks/[tickerID]/options/oi/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/oi/+layout.svelte
@@ -56,8 +56,8 @@
                 href={`/stocks/${$stockTicker}/options/oi`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Strike
               </a>
@@ -66,8 +66,8 @@
                 href={`/stocks/${$stockTicker}/options/oi/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary/90'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/stocks/[tickerID]/profile/+layout.svelte b/src/routes/stocks/[tickerID]/profile/+layout.svelte
index dcb50e12..9981c483 100644
--- a/src/routes/stocks/[tickerID]/profile/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/profile/+layout.svelte
@@ -47,8 +47,8 @@
               href={`/stocks/${$stockTicker}/profile`}
               on:click={() => changeSubSection("overview")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Overview
             </a>
@@ -57,8 +57,8 @@
               href={`/stocks/${$stockTicker}/profile/employees`}
               on:click={() => changeSubSection("employees")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'employees'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Employees
             </a>
diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
index 29442f85..46dc9afc 100644
--- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
@@ -53,8 +53,8 @@
               href={`/stocks/${$stockTicker}/statistics`}
               on:click={() => changeSubSection("overview")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Overview
             </a>
@@ -63,8 +63,8 @@
               href={`/stocks/${$stockTicker}/statistics/market-cap`}
               on:click={() => changeSubSection("market-cap")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Market Cap
             </a>
@@ -73,8 +73,8 @@
               href={`/stocks/${$stockTicker}/statistics/revenue`}
               on:click={() => changeSubSection("revenue")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'revenue'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Revenue
             </a>
@@ -84,8 +84,8 @@
               on:click={() => changeSubSection("price-reaction")}
               class="p-2 px-5 cursor-pointer {displaySubSection ===
               'price-reaction'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Price Reaction
             </a>
@@ -95,8 +95,8 @@
               on:click={() => changeSubSection("fail-to-deliver")}
               class="p-2 px-5 cursor-pointer {displaySubSection ===
               'fail-to-deliver'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary/90'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
             >
               Fail-to-Deliver
             </a>
diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte
index 49216523..3827f0c8 100644
--- a/src/routes/watchlist/+layout.svelte
+++ b/src/routes/watchlist/+layout.svelte
@@ -53,8 +53,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary/90'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>