diff --git a/src/routes/etf/[tickerID]/options/+layout.svelte b/src/routes/etf/[tickerID]/options/+layout.svelte
index 9d55ca88..d741182e 100644
--- a/src/routes/etf/[tickerID]/options/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/+layout.svelte
@@ -64,13 +64,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/etf/${$etfTicker}/options`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Overview
               </a>
@@ -79,8 +79,8 @@
                 on:click={() => changeSubSection("unusual-activity")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'unusual-activity'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Unusual Activity
               </a>
@@ -89,8 +89,8 @@
                 on:click={() => changeSubSection("hottest-contracts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'hottest-contracts'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Hottest Contracts
               </a>
@@ -99,8 +99,8 @@
                 on:click={() => changeSubSection("volatility")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'volatility'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Volatility
               </a>
@@ -108,8 +108,8 @@
                 href={`/etf/${$etfTicker}/options/oi`}
                 on:click={() => changeSubSection("oi")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 OI
               </a>
@@ -118,8 +118,8 @@
                 href={`/etf/${$etfTicker}/options/gex`}
                 on:click={() => changeSubSection("gex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 GEX
               </a>
@@ -127,8 +127,8 @@
                 href={`/etf/${$etfTicker}/options/dex`}
                 on:click={() => changeSubSection("dex")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 DEX
               </a>
diff --git a/src/routes/etf/[tickerID]/options/dex/+layout.svelte b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
index c92a44a3..e4445444 100644
--- a/src/routes/etf/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
@@ -53,13 +53,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/etf/${$etfTicker}/options/dex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/etf/[tickerID]/options/dex/+page.svelte b/src/routes/etf/[tickerID]/options/dex/+page.svelte
index a65c590b..09685ef6 100644
--- a/src/routes/etf/[tickerID]/options/dex/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/+page.svelte
@@ -12,9 +12,7 @@
   description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
index ec6cac90..2a4d6f73 100644
--- a/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze delta exposure for ${$displayCompanyName} (${$etfTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte b/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
index ce86f21e..110e3eba 100644
--- a/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze delta exposure for ${$displayCompanyName} (${$etfTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/gex/+layout.svelte b/src/routes/etf/[tickerID]/options/gex/+layout.svelte
index 032610e1..2e554c43 100644
--- a/src/routes/etf/[tickerID]/options/gex/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/+layout.svelte
@@ -53,13 +53,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/etf/${$etfTicker}/options/gex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/etf/[tickerID]/options/gex/+page.svelte b/src/routes/etf/[tickerID]/options/gex/+page.svelte
index 7914189f..bb0bfaa9 100644
--- a/src/routes/etf/[tickerID]/options/gex/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/+page.svelte
@@ -11,9 +11,7 @@
   title="Daily Gamma Exposure"
   description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
index 3aecea83..8c4a8f9c 100644
--- a/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze gamma exposure for ${$displayCompanyName} (${$etfTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte b/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
index 79b65e7e..550a2ff4 100644
--- a/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze gamma exposure for ${$displayCompanyName} (${$etfTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
index 5a8bf37f..3514af85 100644
--- a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
@@ -13,9 +13,7 @@
   description={`Analyze historical volume, open interest, and trends in option chains for ${$displayCompanyName} (${$etfTicker}). Discover actionable insights for trading decisions.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/oi/+layout.svelte b/src/routes/etf/[tickerID]/options/oi/+layout.svelte
index 857bf20f..0fcc5960 100644
--- a/src/routes/etf/[tickerID]/options/oi/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/+layout.svelte
@@ -51,13 +51,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/etf/${$etfTicker}/options/oi`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/etf/[tickerID]/options/oi/+page.svelte b/src/routes/etf/[tickerID]/options/oi/+page.svelte
index 266e052b..7ed77814 100644
--- a/src/routes/etf/[tickerID]/options/oi/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/+page.svelte
@@ -14,9 +14,7 @@
   description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
index 84fee2ba..96b0abda 100644
--- a/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/unusual-activity/+page.svelte b/src/routes/etf/[tickerID]/options/unusual-activity/+page.svelte
index 8f0ffbd8..e8daec92 100644
--- a/src/routes/etf/[tickerID]/options/unusual-activity/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/unusual-activity/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze historical unusual option trades with a minimum of 1 million dollar premium for ${$displayCompanyName} (${$etfTicker}).`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/etf/[tickerID]/options/volatility/+page.svelte b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
index 239f8db6..42bb84a6 100644
--- a/src/routes/etf/[tickerID]/options/volatility/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
@@ -14,9 +14,7 @@
   description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/+layout.svelte b/src/routes/index/[tickerID]/options/+layout.svelte
index c36f3a8c..d2c5d8b4 100644
--- a/src/routes/index/[tickerID]/options/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/+layout.svelte
@@ -60,13 +60,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/index/${$indexTicker}/options`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Hottest Contracts
               </a>
@@ -85,8 +85,8 @@
                 on:click={() => changeSubSection("volatility")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'volatility'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 DEX
               </a>
diff --git a/src/routes/index/[tickerID]/options/dex/+layout.svelte b/src/routes/index/[tickerID]/options/dex/+layout.svelte
index eecc5fdc..dabcaf4d 100644
--- a/src/routes/index/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/dex/+layout.svelte
@@ -51,13 +51,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/index/${$indexTicker}/options/dex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/index/[tickerID]/options/dex/+page.svelte b/src/routes/index/[tickerID]/options/dex/+page.svelte
index d50f5895..1c023264 100644
--- a/src/routes/index/[tickerID]/options/dex/+page.svelte
+++ b/src/routes/index/[tickerID]/options/dex/+page.svelte
@@ -12,9 +12,7 @@
   description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$indexTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/dex/expiry/+page.svelte b/src/routes/index/[tickerID]/options/dex/expiry/+page.svelte
index 70297d66..2844a44c 100644
--- a/src/routes/index/[tickerID]/options/dex/expiry/+page.svelte
+++ b/src/routes/index/[tickerID]/options/dex/expiry/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze delta exposure for ${$displayCompanyName} (${$indexTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/dex/strike/+page.svelte b/src/routes/index/[tickerID]/options/dex/strike/+page.svelte
index 526ee6f6..86ed4ebf 100644
--- a/src/routes/index/[tickerID]/options/dex/strike/+page.svelte
+++ b/src/routes/index/[tickerID]/options/dex/strike/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze delta exposure for ${$displayCompanyName} (${$indexTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/gex/+layout.svelte b/src/routes/index/[tickerID]/options/gex/+layout.svelte
index 59699036..41a26330 100644
--- a/src/routes/index/[tickerID]/options/gex/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/gex/+layout.svelte
@@ -51,13 +51,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/index/${$indexTicker}/options/gex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/index/[tickerID]/options/gex/+page.svelte b/src/routes/index/[tickerID]/options/gex/+page.svelte
index 7914189f..bb0bfaa9 100644
--- a/src/routes/index/[tickerID]/options/gex/+page.svelte
+++ b/src/routes/index/[tickerID]/options/gex/+page.svelte
@@ -11,9 +11,7 @@
   title="Daily Gamma Exposure"
   description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/gex/expiry/+page.svelte b/src/routes/index/[tickerID]/options/gex/expiry/+page.svelte
index fb48086b..79c55821 100644
--- a/src/routes/index/[tickerID]/options/gex/expiry/+page.svelte
+++ b/src/routes/index/[tickerID]/options/gex/expiry/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze gamma exposure for ${$displayCompanyName} (${$indexTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/gex/strike/+page.svelte b/src/routes/index/[tickerID]/options/gex/strike/+page.svelte
index 999647f8..b8425b6c 100644
--- a/src/routes/index/[tickerID]/options/gex/strike/+page.svelte
+++ b/src/routes/index/[tickerID]/options/gex/strike/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze gamma exposure for ${$displayCompanyName} (${$indexTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/index/[tickerID]/options/hottest-contracts/+page.svelte
index da8323dd..f95a1cc0 100644
--- a/src/routes/index/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/index/[tickerID]/options/hottest-contracts/+page.svelte
@@ -13,9 +13,7 @@
   description={`Analyze historical volume, open interest, and trends in option chains for ${$displayCompanyName} (${$indexTicker}). Discover actionable insights for trading decisions.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/oi/+layout.svelte b/src/routes/index/[tickerID]/options/oi/+layout.svelte
index 8c9852c3..6c3af7fc 100644
--- a/src/routes/index/[tickerID]/options/oi/+layout.svelte
+++ b/src/routes/index/[tickerID]/options/oi/+layout.svelte
@@ -49,13 +49,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/index/${$indexTicker}/options/oi`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/index/[tickerID]/options/oi/+page.svelte b/src/routes/index/[tickerID]/options/oi/+page.svelte
index b28cafb7..6f47a93f 100644
--- a/src/routes/index/[tickerID]/options/oi/+page.svelte
+++ b/src/routes/index/[tickerID]/options/oi/+page.svelte
@@ -14,9 +14,7 @@
   description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/oi/expiry/+page.svelte b/src/routes/index/[tickerID]/options/oi/expiry/+page.svelte
index 5725cad2..4a6477dc 100644
--- a/src/routes/index/[tickerID]/options/oi/expiry/+page.svelte
+++ b/src/routes/index/[tickerID]/options/oi/expiry/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$indexTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/index/[tickerID]/options/volatility/+page.svelte b/src/routes/index/[tickerID]/options/volatility/+page.svelte
index a8631211..ab966d9b 100644
--- a/src/routes/index/[tickerID]/options/volatility/+page.svelte
+++ b/src/routes/index/[tickerID]/options/volatility/+page.svelte
@@ -14,9 +14,7 @@
   description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index fae41810..1addc6ac 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -56,7 +56,7 @@
             <nav
               class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
             >
-              <ul class="flex flex-row items-center w-full text-white">
+              <ul class="flex flex-row items-center w-full">
                 <a
                   href={`/stocks/${$stockTicker}/financials`}
                   on:click={() => changeSubSection("income")}
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
index 6dc42e8e..4b999a27 100644
--- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -60,7 +60,7 @@
         <nav
           class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
         >
-          <ul class="flex flex-row items-center w-full text-white">
+          <ul class="flex flex-row items-center w-full">
             <a
               href={`/stocks/${$stockTicker}/forecast`}
               on:click={() => changeSubSection("overview")}
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index f0a5b487..3ee72de3 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -81,7 +81,7 @@
           <nav
             class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/stocks/${$stockTicker}/insider`}
                 on:click={() => changeSubSection("insider")}
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index d13de29f..8cccd369 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -63,7 +63,7 @@
           <nav
             class="sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               {#each subsectionTitles as title}
                 {@const sectionKey = title
                   ?.toLowerCase()
diff --git a/src/routes/stocks/[tickerID]/options/dex/+layout.svelte b/src/routes/stocks/[tickerID]/options/dex/+layout.svelte
index 171177af..c1edb08c 100644
--- a/src/routes/stocks/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/dex/+layout.svelte
@@ -53,13 +53,13 @@
           <nav
             class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul class="flex flex-row items-center w-full text-white">
+            <ul class="flex flex-row items-center w-full">
               <a
                 href={`/stocks/${$stockTicker}/options/dex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                  ? 'text-white bg-primary/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 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/90'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 By Expiry
               </a>
diff --git a/src/routes/stocks/[tickerID]/options/dex/+page.svelte b/src/routes/stocks/[tickerID]/options/dex/+page.svelte
index df9ffb27..cb8942e5 100644
--- a/src/routes/stocks/[tickerID]/options/dex/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/dex/+page.svelte
@@ -10,9 +10,7 @@
   title="Daily Delta Exposure"
   description="Analyze daily delta exposure with historic options volume and open interest data. Save individual contracts for future reference and optimize your trading strategy."
 />
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/options/dex/expiry/+page.svelte b/src/routes/stocks/[tickerID]/options/dex/expiry/+page.svelte
index 0a28bfe3..41cff9be 100644
--- a/src/routes/stocks/[tickerID]/options/dex/expiry/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/dex/expiry/+page.svelte
@@ -14,9 +14,7 @@
   description={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/options/dex/strike/+page.svelte b/src/routes/stocks/[tickerID]/options/dex/strike/+page.svelte
index 1a4d70f2..e15a32a9 100644
--- a/src/routes/stocks/[tickerID]/options/dex/strike/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/dex/strike/+page.svelte
@@ -50,9 +50,7 @@
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/profile/+layout.svelte b/src/routes/stocks/[tickerID]/profile/+layout.svelte
index e30c65a2..49ebd5ea 100644
--- a/src/routes/stocks/[tickerID]/profile/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/profile/+layout.svelte
@@ -35,14 +35,14 @@
   }
 </script>
 
-<section class="w-auto overflow-hidden text-muted dark:text-white h-full">
+<section class="w-auto overflow-hidden h-full">
   <div class="m-auto h-full overflow-hidden">
     <main class="w-full">
       <div class="m-auto">
         <nav
           class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
         >
-          <ul class="flex flex-row items-center w-full text-white">
+          <ul class="flex flex-row items-center w-full">
             <a
               href={`/stocks/${$stockTicker}/profile`}
               on:click={() => changeSubSection("overview")}
diff --git a/src/routes/stocks/[tickerID]/profile/+page.svelte b/src/routes/stocks/[tickerID]/profile/+page.svelte
index a09c6ee3..de291a1f 100644
--- a/src/routes/stocks/[tickerID]/profile/+page.svelte
+++ b/src/routes/stocks/[tickerID]/profile/+page.svelte
@@ -45,7 +45,7 @@ ${paragraphs.join("\n")}
   description={`Company profile for ${$displayCompanyName} (${$stockTicker}) with a description, list of executives, contact details and other key facts.`}
 />
 
-<section class="w-full overflow-hidden text-muted dark:text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/profile/employees/+layout.svelte b/src/routes/stocks/[tickerID]/profile/employees/+layout.svelte
index e3e2dd2a..e4ec21b3 100644
--- a/src/routes/stocks/[tickerID]/profile/employees/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/profile/employees/+layout.svelte
@@ -54,18 +54,18 @@
         <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 bg-inherit text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
-              <table class="table table-sm table-compact w-full text-white">
-                <thead class="text-white"
+              <table class="table table-sm table-compact w-full">
+                <thead class="text-muted dark:text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
+                      class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-left px-2"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
+                      class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-right px-2"
                       >Employees</th
                     ></tr
                   ></thead
@@ -74,14 +74,14 @@
                   {#each similarStocks?.slice(0, 8) as item, index}
                     {#if item?.name}
                       <tr
-                        class="border-gray-800 {index !==
+                        class="border-gray-300 dark:border-gray-800 {index !==
                         similarStocks?.slice(0, 8).length - 1
                           ? 'border-b'
                           : ''}"
                         ><td class="text-left px-2"
                           ><a
                             href={`/stocks/${item?.symbol}/profile/employees`}
-                            class="text-[1rem] sm:hover:text-white text-blue-400"
+                            class="text-[1rem] text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
                             >{item?.name?.length > 30
                               ? item?.name?.slice(0, 30) + "..."
                               : item?.name}</a
@@ -107,7 +107,7 @@
               <div class="px-2">
                 <a
                   href={`/list/most-employees`}
-                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
                 >
                   Employee Rankings
                 </a>
@@ -117,18 +117,18 @@
 
           {#if newsList?.length !== 0}
             <div
-              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
             >
               <div class="p-4 text-sm">
-                <h3 class="text-lg text-white font-semibold mb-3">
+                <h3 class="text-lg font-semibold mb-3">
                   {$stockTicker} News
                 </h3>
-                <ul class="text-white mb-3">
+                <ul class=" mb-3">
                   {#each newsList?.slice(0, 10) as item}
                     <li class="mb-3 last:mb-1">
                       {formatDate(item?.publishedDate)} ago -
                       <a
-                        class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
+                        class="text-blue-500 sm:hover:text-muted dark:sm:hover: dark:text-blue-400"
                         href={item?.url}
                         target="_blank"
                         rel="noopener noreferrer nofollow">{item?.title}</a
@@ -139,7 +139,7 @@
                 </ul>
                 <a
                   href={`/stocks/${$stockTicker}`}
-                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 -mb-3 mt-6 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
                 >
                   More News
                 </a>
diff --git a/src/routes/stocks/[tickerID]/profile/employees/+page.svelte b/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
index b0e2d889..58d1015b 100644
--- a/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { displayCompanyName, screenWidth, stockTicker } from "$lib/store";
+  import { displayCompanyName, stockTicker } from "$lib/store";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   import { goto } from "$app/navigation";
+  import { mode } from "mode-watcher";
 
   import highcharts from "$lib/highcharts.ts";
 
@@ -87,15 +88,15 @@
       },
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
         animation: false,
       },
       title: {
         text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Employees</h3>`,
         style: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
         },
         useHTML: true,
       },
@@ -103,7 +104,7 @@
         categories: dateList,
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
             fontSize: "12px",
           },
           rotation: 45,
@@ -112,9 +113,9 @@
       },
       yAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "black" : "white" },
           formatter: function () {
             if (sortBy === "Growth") {
               return this.value + "%";
@@ -138,26 +139,31 @@
         },
         borderRadius: 4,
         formatter: function () {
-          let value;
-          if (sortBy === "Growth") {
-            value = `${this.y >= 0 ? "+" : ""}${this.y.toFixed(2)}%`;
-          } else if (sortBy === "Change") {
-            value = (this.y >= 0 ? "+" : "") + this.y.toLocaleString("en-US");
-          } else {
-            value = this.y.toLocaleString("en-US");
-          }
+          // Format the x value to display time in a custom format
+          let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
+            this?.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span><br>`;
 
-          return (
-            `<span class="m-auto text-white text-[1rem] font-[501]">${this.x}</span><br>` +
-            `<span class="text-white font-normal text-sm">Employees ${value}</span>`
-          );
+          // Loop through each point in the shared tooltip
+          this.points.forEach((point) => {
+            tooltipContent += `
+        <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
+        <span class="font-semibold text-sm">${point.series.name}:</span> 
+        <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
+          });
+
+          return tooltipContent;
         },
       },
       series: [
         {
           name: sortBy,
           data: valueList,
-          color: "#FFFFFF",
+          color: $mode === "light" ? "#2C6288" : "#fff",
           animation: false,
         },
       ],
@@ -318,7 +324,7 @@
   let htmlOutput = generateEmployeeInfoHTML();
 
   $: {
-    if (sortBy) {
+    if (sortBy || $mode) {
       config = plotData() || null;
     }
   }
@@ -329,14 +335,14 @@
   description={`Current and historical number of employees for ${$displayCompanyName} (${$stockTicker}) with related statistics, a chart and a data table.`}
 />
 
-<section class="bg-default w-full overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex justify-center m-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
         <div class="mb-6">
-          <h2 class="text-xl sm:text-2xl text-white font-bold mb-4">
+          <h2 class="text-xl sm:text-2xl font-bold mb-4">
             {removeCompanyStrings($displayCompanyName)} Employees
           </h2>
 
@@ -424,7 +430,7 @@
           class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-10 mb-4"
         >
           <h1
-            class="text-xl sm:text-2xl text-white font-bold text-start mr-auto mb-4 sm:mb-0"
+            class="text-xl sm:text-2xl font-bold text-start mr-auto mb-4 sm:mb-0"
           >
             Employees Chart
           </h1>
@@ -435,9 +441,9 @@
                   <DropdownMenu.Trigger asChild let:builder>
                     <Button
                       builders={[builder]}
-                      class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                      class="w-full border-gray-300 shadow-sm dark:border-gray-600 border sm:hover:bg-gray-100 dark:bg-default dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                     >
-                      <span class="truncate text-white">{sortBy}</span>
+                      <span class="truncate">{sortBy}</span>
                       <svg
                         class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                         viewBox="0 0 20 20"
@@ -456,26 +462,26 @@
                   <DropdownMenu.Content
                     class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                   >
-                    <DropdownMenu.Label class="text-gray-400">
+                    <DropdownMenu.Label class="text-muted dark:text-gray-400">
                       Select Type
                     </DropdownMenu.Label>
                     <DropdownMenu.Separator />
                     <DropdownMenu.Group>
                       <DropdownMenu.Item
                         on:click={() => (sortBy = "Total")}
-                        class="cursor-pointer hover:bg-primary"
+                        class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                       >
                         Total
                       </DropdownMenu.Item>
                       <DropdownMenu.Item
                         on:click={() => (sortBy = "Change")}
-                        class="cursor-pointer hover:bg-primary"
+                        class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                       >
                         Change
                       </DropdownMenu.Item>
                       <DropdownMenu.Item
                         on:click={() => (sortBy = "Growth")}
-                        class="cursor-pointer hover:bg-primary"
+                        class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                       >
                         Growth
                       </DropdownMenu.Item>
@@ -485,9 +491,9 @@
               </div>
               <Button
                 on:click={() => exportData("csv")}
-                class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                class="ml-2 w-fit border-gray-300 shadow-sm dark:border-gray-600 border sm:hover:bg-gray-100 dark:bg-default dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
               >
-                <span class="truncate text-white">Download</span>
+                <span class="truncate">Download</span>
                 <svg
                   class="{['Pro', 'Plus']?.includes(data?.user?.tier)
                     ? 'hidden'
@@ -506,38 +512,38 @@
 
         {#if historyList?.length !== 0}
           <div
-            class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
+            class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
             use:highcharts={config}
           ></div>
 
           <div class="mt-5">
-            <h3 class=" text-xl sm:text-2xl text-white font-bold mb-2 sm:mb-0">
+            <h3 class=" text-xl sm:text-2xl font-bold mb-2 sm:mb-0">
               Employees History
             </h3>
 
-            <div class="mt-5 w-full overflow-x-auto">
+            <div class=" w-full overflow-x-auto">
               <table
-                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
               >
-                <thead class="bg-default">
+                <thead class="text-muted dark:text-white dark:bg-default">
                   <tr>
                     <th
-                      class="text-start text-white text-sm whitespace-nowrap font-semibold"
+                      class="text-start text-sm whitespace-nowrap font-semibold"
                     >
                       Date
                     </th>
                     <th
-                      class="text-end text-white text-sm whitespace-nowrap font-semibold"
+                      class="text-end text-sm whitespace-nowrap font-semibold"
                     >
                       Employees
                     </th>
                     <th
-                      class="text-end text-white text-sm whitespace-nowrap font-semibold"
+                      class="text-end text-sm whitespace-nowrap font-semibold"
                     >
                       Change
                     </th>
                     <th
-                      class="text-end text-white text-sm whitespace-nowrap font-semibold"
+                      class="text-end text-sm whitespace-nowrap font-semibold"
                     >
                       Growth
                     </th>
@@ -545,9 +551,11 @@
                 </thead>
                 <tbody class="">
                   {#each historyList as item, index}
-                    <tr class="text-white odd:bg-odd border-b border-gray-800">
+                    <tr
+                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
+                    >
                       <td
-                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {new Date(item?.filingDate)?.toLocaleString("en-US", {
                           month: "short",
@@ -557,14 +565,14 @@
                         })}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {new Intl.NumberFormat("en").format(
                           item?.employeeCount,
                         )}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {#if Number(item?.employeeCount - historyList[index + 1]?.employeeCount)}
                           {new Intl.NumberFormat("en").format(
@@ -576,7 +584,7 @@
                         {/if}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-end"
                       >
                         {#if index === historyList?.length - 1}
                           n/a
@@ -612,7 +620,7 @@
           </div>
         {:else}
           <h1
-            class="text-xl m-auto flex justify-center text-white font-semibold mb-4 mt-10"
+            class="text-xl m-auto flex justify-center font-semibold mb-4 mt-10"
           >
             No history found
           </h1>
diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
index 31727ddd..0424028d 100644
--- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
@@ -48,7 +48,7 @@
         <nav
           class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
         >
-          <ul class="flex flex-row items-center w-full text-white">
+          <ul class="flex flex-row items-center w-full">
             <a
               href={`/stocks/${$stockTicker}/statistics`}
               on:click={() => changeSubSection("overview")}