From dc74fb0d3820f9ad756286debac9e9683a490bdc Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 10 Mar 2025 12:16:37 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/DownloadData.svelte        |   6 +-
 src/lib/components/NextEarnings.svelte        |   4 +-
 src/lib/components/Table/Table.svelte         |  64 +++----
 src/lib/components/WIIM.svelte                |   4 +-
 .../shadcn/calendar/calendar-grid-body.svelte |  17 +-
 .../shadcn/calendar/calendar-grid-head.svelte |  17 +-
 .../shadcn/calendar/calendar-grid-row.svelte  |  17 +-
 .../shadcn/calendar/calendar-grid.svelte      |  17 +-
 .../shadcn/calendar/calendar-head-cell.svelte |  19 +-
 .../shadcn/calendar/calendar-header.svelte    |  19 +-
 .../shadcn/calendar/calendar-heading.svelte   |   2 +-
 .../shadcn/calendar/calendar-months.svelte    |  19 +-
 .../calendar/calendar-next-button.svelte      |  38 ++--
 .../calendar/calendar-prev-button.svelte      |  38 ++--
 .../shadcn/calendar/calendar.svelte           |  99 ++++++-----
 src/routes/+layout.svelte                     |   2 +-
 src/routes/etf/+page.svelte                   |  44 ++---
 src/routes/market-mover/+layout.svelte        |  20 +--
 .../market-mover/gainers/+layout.svelte       |  34 ++--
 src/routes/options-flow/+page.svelte          |  22 +--
 src/routes/stocks/+page.svelte                |  42 +++--
 src/routes/stocks/[tickerID]/+page.svelte     |  64 +++----
 .../stocks/[tickerID]/profile/+layout.svelte  |  10 +-
 .../stocks/[tickerID]/profile/+page.svelte    | 162 +++++++++---------
 24 files changed, 407 insertions(+), 373 deletions(-)

diff --git a/src/lib/components/DownloadData.svelte b/src/lib/components/DownloadData.svelte
index 44189489..eac1579f 100644
--- a/src/lib/components/DownloadData.svelte
+++ b/src/lib/components/DownloadData.svelte
@@ -54,9 +54,9 @@
 
 <Button
   on:click={() => exportData("csv")}
-  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: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'
@@ -64,7 +64,7 @@
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     ><path
-      fill="#fff"
+      fill="currentColor"
       d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
     /></svg
   >
diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
index 2e6e2c94..cd72a208 100644
--- a/src/lib/components/NextEarnings.svelte
+++ b/src/lib/components/NextEarnings.svelte
@@ -69,10 +69,10 @@
         {#if !["Pro", "Plus"]?.includes(data?.user?.tier)}
           ... Unlock content with
           <a
-            class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+            class="inline-block ml-0.5 text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
             href="/pricing"
             >Pro Subscription <svg
-              class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+              class="w-4 h-4 mb-1 inline-block"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
               ><path
diff --git a/src/lib/components/Table/Table.svelte b/src/lib/components/Table/Table.svelte
index 6d0c5232..4539072c 100644
--- a/src/lib/components/Table/Table.svelte
+++ b/src/lib/components/Table/Table.svelte
@@ -694,16 +694,18 @@
 
 <!-- Content area -->
 
-<div class="flex flex-row items-end justify-end w-fit ml-auto mt-5 mb-2">
+<div
+  class="flex flex-row items-end justify-end w-fit ml-auto mt-5 text-muted dark:text-white"
+>
   <DownloadData {data} {rawData} title={data?.getParams ?? "data"} />
 
   <DropdownMenu.Root>
     <DropdownMenu.Trigger asChild let:builder>
       <Button
         builders={[builder]}
-        class=" min-w-[110px] w-fit ml-3 border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md"
+        class="shadow-sm min-w-[110px] w-fit ml-3 border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2.5  rounded-md"
       >
-        <span class="w-fit text-white text-sm sm:text-[1rem]">Indicators</span>
+        <span class="w-fit text-sm sm:text-[1rem]">Indicators</span>
         <svg
           class="ml-0.5 mt-1 h-5 w-5 inline-block shrink-0"
           viewBox="0 0 20 20"
@@ -725,7 +727,7 @@
     >
       <!-- Search Input -->
       <div
-        class="sticky fixed -top-1 z-40 bg-default p-2 border-b border-gray-600"
+        class="sticky fixed -top-1 z-40 bg-white dark:bg-default p-2 border-b border-gray-300 dark:border-gray-600"
       >
         <div class="relative w-full">
           <!-- Input Field -->
@@ -734,7 +736,7 @@
             on:input={handleInput}
             autocomplete="off"
             autofocus=""
-            class="text-sm w-full border-0 bg-default focus:border-gray-200 focus:ring-0 text-white placeholder:text-gray-300 pr-8"
+            class="text-sm w-full border-0 bg-white dark:bg-default focus:border-gray-200 focus:ring-0 placeholder:text-muted dark:text-gray-300 pr-8"
             type="text"
             placeholder=""
           />
@@ -769,14 +771,16 @@
       <DropdownMenu.Group class="pb-2">
         <!-- Added padding to avoid overlapping with Reset button -->
         {#each searchQuery?.length !== 0 ? testList : allRows as item}
-          <DropdownMenu.Item class="sm:hover:bg-primary">
+          <DropdownMenu.Item
+            class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary"
+          >
             <div class="flex items-center">
               {#if defaultRules?.includes(item?.rule)}
                 <label
                   on:click|capture={(event) => {
                     event.preventDefault();
                   }}
-                  class="text-white"
+                  class=""
                 >
                   <input
                     disabled={defaultRules?.includes(item?.rule) ? true : false}
@@ -794,7 +798,7 @@
                     event.preventDefault();
                     handleChangeValue(item?.name);
                   }}
-                  class="cursor-pointer text-white"
+                  class="cursor-pointer"
                   for={item?.name}
                 >
                   <input
@@ -808,7 +812,7 @@
                   <span class="ml-2">{item?.name}</span>
                 </label>
               {:else}
-                <a href="/pricing" class="cursor-pointer text-white">
+                <a href="/pricing" class="cursor-pointer">
                   <svg
                     class="h-[18px] w-[18px] inline-block text-icon group-hover:text-dark-400"
                     viewBox="0 0 20 20"
@@ -830,17 +834,17 @@
       </DropdownMenu.Group>
       <!-- Reset Selection button -->
       <div
-        class="sticky -bottom-1 bg-default z-50 p-2 border-t border-gray-600 w-full flex justify-between items-center"
+        class="sticky -bottom-1 bg-white dark:bg-default z-50 p-2 border-t border-gray-300 dark:border-gray-600 w-full flex justify-between items-center"
       >
         <label
           on:click={handleResetAll}
-          class="w-full sm:hover:text-white text-gray-300 bg-default text-start text-sm cursor-pointer"
+          class="w-full dark:sm:hover:text-white text-muted dark:text-gray-300 bg-white dark:bg-default text-start text-sm cursor-pointer"
         >
           Reset Selection
         </label>
         <label
           on:click={handleSelectAll}
-          class="w-full flex justify-end sm:hover:text-white text-gray-300 bg-default text-start text-sm cursor-pointer"
+          class="w-full flex justify-end dark:sm:hover:text-white text-muted dark:text-gray-300 bg-white dark:bg-default text-start text-sm cursor-pointer"
         >
           Select All
         </label>
@@ -849,9 +853,9 @@
   </DropdownMenu.Root>
 </div>
 
-<div class="w-full overflow-x-auto text-white">
+<div class="w-full overflow-x-auto text-muted dark:text-white">
   <table
-    class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
+    class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-2"
   >
     <thead>
       <TableHeader {columns} {sortOrders} {sortData} />
@@ -859,7 +863,7 @@
     <tbody>
       {#each stockList as item, index}
         <tr
-          class="sm:hover:bg-[#245073]/10 odd:bg-odd border-b border-gray-800 {index +
+          class="sdark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
             1 ===
             rawData?.length &&
           !['Pro', 'Plus']?.includes(data?.user?.tier) &&
@@ -869,7 +873,7 @@
         >
           {#each columns as column}
             <td
-              class="text-sm sm:text-[1rem] whitespace-nowrap border-b border-gray-800"
+              class="text-sm sm:text-[1rem] whitespace-nowrap"
               class:text-left={column.align === "left"}
               class:text-right={column.align === "right"}
             >
@@ -897,11 +901,11 @@
                 {item[column.key]?.toLocaleString("en-US")}
               {:else if column?.type === "decimalSign"}
                 {#if item[column.key] >= 0}
-                  <span class="text-[#00FC50]"
+                  <span class="text-green-600 dark:text-[#00FC50]"
                     >+{item[column.key]?.toLocaleString("en-US")}</span
                   >
                 {:else if item[column.key] < 0}
-                  <span class="text-[#FF2F1F]"
+                  <span class="text-red-600 dark:text-[#FF2F1F]"
                     >{item[column.key]?.toLocaleString("en-US")}</span
                   >
                 {/if}
@@ -918,8 +922,8 @@
                       <span
                         class="inline-flex rounded-full h-1 w-1 {item?.previous >
                         item[column?.key]
-                          ? 'bg-[#FF2F1F]'
-                          : 'bg-[#00FC50]'} pulse-animation"
+                          ? 'bg-red-600 dark:bg-[#FF2F1F]'
+                          : 'bg-green-600 dark:bg-[#00FC50]'} pulse-animation"
                       ></span>
                     </span>
                   {/if}
@@ -933,23 +937,25 @@
                   : "< 0.01%"}
               {:else if column.type === "percentSign"}
                 {#if item[column.key] > 0}
-                  <span class="text-[#00FC50]"
+                  <span class="text-green-600 dark:text-[#00FC50]"
                     >+{abbreviateNumber(item[column.key]?.toFixed(2))}%</span
                   >
                 {:else if item[column.key] < 0}
-                  <span class="text-[#FF2F1F]"
+                  <span class="text-red-600 dark:text-[#FF2F1F]"
                     >{abbreviateNumber(item[column.key]?.toFixed(2))}%</span
                   >
                 {:else}
-                  <span class="text-[#fff]"
-                    >{item[column.key]?.toFixed(2)}%</span
-                  >
+                  <span>{item[column.key]?.toFixed(2)}%</span>
                 {/if}
               {:else if column?.type === "rating"}
                 {#if ["Strong Buy", "Buy"].includes(item[column.key])}
-                  <span class="text-[#00FC50]">{item[column.key]}</span>
+                  <span class="text-green-600 dark:text-[#00FC50]"
+                    >{item[column.key]}</span
+                  >
                 {:else if ["Strong Sell", "Sell"].includes(item[column.key])}
-                  <span class="text-[#FF2F1F]">{item[column.key]}</span>
+                  <span class="text-red-600 dark:text-[#FF2F1F]"
+                    >{item[column.key]}</span
+                  >
                 {:else if item[column.key] === "Hold"}
                   <span class="text-[#FFA838]">{item[column.key]}</span>
                 {:else}
@@ -958,10 +964,10 @@
               {:else if column.type === "sentiment"}
                 <div
                   class={item[column.key] >= 55
-                    ? "text-[#00FC50]"
+                    ? "text-green-600 dark:text-[#00FC50]"
                     : item[column.key] >= 50
                       ? "text-[#E57C34]"
-                      : "text-[#FF2F1F]"}
+                      : "text-red-600 dark:text-[#FF2F1F]"}
                 >
                   <div class="flex flex-row items-center justify-end">
                     <div class="">
diff --git a/src/lib/components/WIIM.svelte b/src/lib/components/WIIM.svelte
index 41482433..ffac538b 100644
--- a/src/lib/components/WIIM.svelte
+++ b/src/lib/components/WIIM.svelte
@@ -181,10 +181,10 @@
                               {item?.text?.slice(0, 50) + "..."}
                               Unlock content with
                               <a
-                                class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+                                class="inline-block ml-0.5 text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
                                 href="/pricing"
                                 >Pro Subscription <svg
-                                  class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+                                  class="w-4 h-4 mb-1 inline-block"
                                   xmlns="http://www.w3.org/2000/svg"
                                   viewBox="0 0 24 24"
                                   ><path
diff --git a/src/lib/components/shadcn/calendar/calendar-grid-body.svelte b/src/lib/components/shadcn/calendar/calendar-grid-body.svelte
index 80b6f84a..666ba54f 100644
--- a/src/lib/components/shadcn/calendar/calendar-grid-body.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-grid-body.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.GridBodyProps;
+  type $$Props = CalendarPrimitive.GridBodyProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
-<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
-	<slot />
+<CalendarPrimitive.GridBody
+  class={cn("bg-white dark:bg-[#000]", className)}
+  {...$$restProps}
+>
+  <slot />
 </CalendarPrimitive.GridBody>
diff --git a/src/lib/components/shadcn/calendar/calendar-grid-head.svelte b/src/lib/components/shadcn/calendar/calendar-grid-head.svelte
index dbe3e8e8..5dc957ed 100644
--- a/src/lib/components/shadcn/calendar/calendar-grid-head.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-grid-head.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.GridHeadProps;
+  type $$Props = CalendarPrimitive.GridHeadProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
-<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
-	<slot />
+<CalendarPrimitive.GridHead
+  class={cn("bg-white dark:bg-[#000]", className)}
+  {...$$restProps}
+>
+  <slot />
 </CalendarPrimitive.GridHead>
diff --git a/src/lib/components/shadcn/calendar/calendar-grid-row.svelte b/src/lib/components/shadcn/calendar/calendar-grid-row.svelte
index 3a1473c7..bf0b1948 100644
--- a/src/lib/components/shadcn/calendar/calendar-grid-row.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-grid-row.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.GridRowProps;
+  type $$Props = CalendarPrimitive.GridRowProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
-<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
-	<slot />
+<CalendarPrimitive.GridRow
+  class={cn("bg-white dark:bg-[#000] flex", className)}
+  {...$$restProps}
+>
+  <slot />
 </CalendarPrimitive.GridRow>
diff --git a/src/lib/components/shadcn/calendar/calendar-grid.svelte b/src/lib/components/shadcn/calendar/calendar-grid.svelte
index 981ec0e5..c82d10ec 100644
--- a/src/lib/components/shadcn/calendar/calendar-grid.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-grid.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.GridProps;
+  type $$Props = CalendarPrimitive.GridProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
-<CalendarPrimitive.Grid class={cn("w-full border-none space-y-1", className)} {...$$restProps}>
-	<slot />
+<CalendarPrimitive.Grid
+  class={cn("w-full bg-white dark:bg-[#000] border-none space-y-1", className)}
+  {...$$restProps}
+>
+  <slot />
 </CalendarPrimitive.Grid>
diff --git a/src/lib/components/shadcn/calendar/calendar-head-cell.svelte b/src/lib/components/shadcn/calendar/calendar-head-cell.svelte
index bd35c184..a75cc5f1 100644
--- a/src/lib/components/shadcn/calendar/calendar-head-cell.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-head-cell.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.HeadCellProps;
+  type $$Props = CalendarPrimitive.HeadCellProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
 <CalendarPrimitive.HeadCell
-	class={cn("text-white w-9 rounded-md text-[0.8rem] font-normal", className)}
-	{...$$restProps}
+  class={cn(
+    "bg-white dark:bg-[#000] text-muted dark:text-white w-9 rounded-md text-[0.8rem] font-normal",
+    className,
+  )}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </CalendarPrimitive.HeadCell>
diff --git a/src/lib/components/shadcn/calendar/calendar-header.svelte b/src/lib/components/shadcn/calendar/calendar-header.svelte
index 014ff28b..d2986086 100644
--- a/src/lib/components/shadcn/calendar/calendar-header.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-header.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.HeaderProps;
+  type $$Props = CalendarPrimitive.HeaderProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
 <CalendarPrimitive.Header
-	class={cn("relative flex w-full items-center justify-between pt-1", className)}
-	{...$$restProps}
+  class={cn(
+    "bg-white dark:bg-[#000] relative flex w-full items-center justify-between pt-1",
+    className,
+  )}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </CalendarPrimitive.Header>
diff --git a/src/lib/components/shadcn/calendar/calendar-heading.svelte b/src/lib/components/shadcn/calendar/calendar-heading.svelte
index 72ee7bb3..f2286b5f 100644
--- a/src/lib/components/shadcn/calendar/calendar-heading.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-heading.svelte
@@ -10,7 +10,7 @@
 
 <CalendarPrimitive.Heading
   let:headingValue
-  class={cn("text-sm ", className)}
+  class={cn("text-sm  bg-white dark:bg-[#000]", className)}
   {...$$restProps}
 >
   <slot {headingValue}>
diff --git a/src/lib/components/shadcn/calendar/calendar-months.svelte b/src/lib/components/shadcn/calendar/calendar-months.svelte
index 828e0fc8..966c5d8e 100644
--- a/src/lib/components/shadcn/calendar/calendar-months.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-months.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
 <div
-	class={cn("mt-4 text-white flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
-	{...$$restProps}
+  class={cn(
+    "bg-white dark:bg-[#000] mt-4 text-muted dark:text-white flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0",
+    className,
+  )}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </div>
diff --git a/src/lib/components/shadcn/calendar/calendar-next-button.svelte b/src/lib/components/shadcn/calendar/calendar-next-button.svelte
index 334bc1a8..e0b53a2b 100644
--- a/src/lib/components/shadcn/calendar/calendar-next-button.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-next-button.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { buttonVariants } from "$lib/components/shadcn/button/index.js";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import { buttonVariants } from "$lib/components/shadcn/button/index.js";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.NextButtonProps;
-	type $$Events = CalendarPrimitive.NextButtonEvents;
+  type $$Props = CalendarPrimitive.NextButtonProps;
+  type $$Events = CalendarPrimitive.NextButtonEvents;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
 <CalendarPrimitive.NextButton
-	on:click
-	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
-		className
-	)}
-	{...$$restProps}
-	let:builder
+  on:click
+  class={cn(
+    buttonVariants({ variant: "outline" }),
+    "h-7 w-7  p-0 opacity-80 hover:opacity-100",
+    className,
+  )}
+  {...$$restProps}
+  let:builder
 >
-	<slot {builder}>
-		<ChevronRight class="h-4 w-4" />
-	</slot>
+  <slot {builder}>
+    <ChevronRight class="h-4 w-4" />
+  </slot>
 </CalendarPrimitive.NextButton>
diff --git a/src/lib/components/shadcn/calendar/calendar-prev-button.svelte b/src/lib/components/shadcn/calendar/calendar-prev-button.svelte
index d39bd751..15b84340 100644
--- a/src/lib/components/shadcn/calendar/calendar-prev-button.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-prev-button.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "lucide-svelte/icons/chevron-left";
-	import { buttonVariants } from "$lib/components/shadcn/button/index.js";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronLeft from "lucide-svelte/icons/chevron-left";
+  import { buttonVariants } from "$lib/components/shadcn/button/index.js";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.PrevButtonProps;
-	type $$Events = CalendarPrimitive.PrevButtonEvents;
+  type $$Props = CalendarPrimitive.PrevButtonProps;
+  type $$Events = CalendarPrimitive.PrevButtonEvents;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
 <CalendarPrimitive.PrevButton
-	on:click
-	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
-		className
-	)}
-	{...$$restProps}
-	let:builder
+  on:click
+  class={cn(
+    buttonVariants({ variant: "outline" }),
+    "h-7 w-7  p-0 opacity-80 hover:opacity-100",
+    className,
+  )}
+  {...$$restProps}
+  let:builder
 >
-	<slot {builder}>
-		<ChevronLeft class="h-4 w-4" />
-	</slot>
+  <slot {builder}>
+    <ChevronLeft class="h-4 w-4" />
+  </slot>
 </CalendarPrimitive.PrevButton>
diff --git a/src/lib/components/shadcn/calendar/calendar.svelte b/src/lib/components/shadcn/calendar/calendar.svelte
index beeae592..2d0421c8 100644
--- a/src/lib/components/shadcn/calendar/calendar.svelte
+++ b/src/lib/components/shadcn/calendar/calendar.svelte
@@ -1,60 +1,59 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import * as Calendar from "./index.js";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = CalendarPrimitive.Props;
+  type $$Props = CalendarPrimitive.Props;
 
-	type $$Events = CalendarPrimitive.Events;
+  type $$Events = CalendarPrimitive.Events;
 
-	export let value: $$Props["value"] = undefined;
-	export let placeholder: $$Props["placeholder"] = undefined;
-	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  export let value: $$Props["value"] = undefined;
+  export let placeholder: $$Props["placeholder"] = undefined;
+  export let weekdayFormat: $$Props["weekdayFormat"] = "short";
 
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
 <CalendarPrimitive.Root
-	bind:value
-	bind:placeholder
-	{weekdayFormat}
-	class={cn("p-3", className)}
-	{...$$restProps}
-	on:keydown
-	let:months
-	let:weekdays
+  bind:value
+  bind:placeholder
+  {weekdayFormat}
+  class={cn("p-3 ", className)}
+  {...$$restProps}
+  on:keydown
+  let:months
+  let:weekdays
 >
-	<Calendar.Header>
-		<Calendar.PrevButton />
-		<Calendar.Heading />
-		<Calendar.NextButton />
-	</Calendar.Header>
-	<Calendar.Months >
-		{#each months as month}
-			<Calendar.Grid>
-				<Calendar.GridHead >
-					<Calendar.GridRow class="flex">
-						{#each weekdays as weekday}
-							<Calendar.HeadCell class="text-white">
-								{weekday.slice(0, 2)}
-							</Calendar.HeadCell>
-						{/each}
-					</Calendar.GridRow>
-				</Calendar.GridHead>
-				<Calendar.GridBody>
-					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="mt-2 w-full">
-							{#each weekDates as date}
-								<Calendar.Cell {date}>
-									<Calendar.Day {date} month={month.value} />
-								</Calendar.Cell>
-							{/each}
-						</Calendar.GridRow>
-					{/each}
-				</Calendar.GridBody>
-			</Calendar.Grid>
-		{/each}
-	</Calendar.Months>
+  <Calendar.Header>
+    <Calendar.PrevButton />
+    <Calendar.Heading />
+    <Calendar.NextButton />
+  </Calendar.Header>
+  <Calendar.Months>
+    {#each months as month}
+      <Calendar.Grid>
+        <Calendar.GridHead class="">
+          <Calendar.GridRow class="flex ">
+            {#each weekdays as weekday}
+              <Calendar.HeadCell class="text-muted dark:text-white ">
+                {weekday.slice(0, 2)}
+              </Calendar.HeadCell>
+            {/each}
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody>
+          {#each month.weeks as weekDates}
+            <Calendar.GridRow class="mt-2 w-full ">
+              {#each weekDates as date}
+                <Calendar.Cell {date}>
+                  <Calendar.Day {date} month={month.value} />
+                </Calendar.Cell>
+              {/each}
+            </Calendar.GridRow>
+          {/each}
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    {/each}
+  </Calendar.Months>
 </CalendarPrimitive.Root>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 316a702c..a9948574 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -275,7 +275,7 @@
   </script>
 </svelte:head>
 
-<div class="app {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}">
+<div class="app text-muted dark:text-white {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}">
   <div class="flex min-h-screen w-full flex-col bg-white dark:bg-default">
     <div class="w-full">
       <div
diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index a2ddeded..5f4cea1c 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -19,8 +19,8 @@
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li>
-      <li class="text-gray-300">All ETFs</li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+      <li class="text-muted dark:text-gray-300">All ETFs</li>
     </ul>
   </div>
 
@@ -30,16 +30,14 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
-              All ETF Symbols
-            </h1>
-            <p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
+          <div class=" border-b-[2px]">
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">All ETF Symbols</h1>
+            <p class="mb-3 px-1 font-semibold sm:px-0">
               List of all {rawData?.length} ETF symbols we support
             </p>
           </div>
 
-          <div class="w-full m-auto mb-10 bg-default">
+          <div class="w-full m-auto">
             <!--Start Top Winners/Losers-->
             <div class="flex flex-col justify-center items-center">
               <Table {data} {rawData} />
@@ -49,19 +47,21 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  <h2 class="text-start text-xl font-semibold e ml-3">
                     Pro Subscription
                   </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                  <ArrowLogo
+                    class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                  />
                 </div>
-                <span class="text-white p-3 ml-3 mr-3">
+                <span class="e p-3 ml-3 mr-3">
                   Upgrade now for unlimited access to all data and tools
                 </span>
               </a>
@@ -69,38 +69,42 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/analysts"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold e ml-3">
                   Top Analyst
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class="e p-3 ml-3 mr-3">
                 Get the latest top Wall Street analyst ratings
               </span>
             </a>
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/analysts/top-stocks"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold e ml-3">
                   Top Stocks Picks
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class="e p-3 ml-3 mr-3">
                 Get the latest top Wall Street analyst ratings.
               </span>
             </a>
diff --git a/src/routes/market-mover/+layout.svelte b/src/routes/market-mover/+layout.svelte
index e0aaed4f..d67c7ba2 100644
--- a/src/routes/market-mover/+layout.svelte
+++ b/src/routes/market-mover/+layout.svelte
@@ -45,12 +45,12 @@
 </script>
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden pb-20 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden pb-20 pt-5 px-4 lg:px-3 text-muted dark:text-white"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li>
-      <li class="text-gray-300">Market Mover</li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+      <li class="text-muted dark:text-gray-300">Market Mover</li>
     </ul>
   </div>
 
@@ -60,20 +60,20 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:pr-5">
-          <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
-            Market Mover
-          </h1>
+          <h1 class="mb-6 text-2xl sm:text-3xl font-bold">Market Mover</h1>
 
-          <nav class="border-b-[2px] overflow-x-auto whitespace-nowrap">
+          <nav
+            class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
+          >
             <ul
-              class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
+              class="flex flex-row items-center w-full text-[1rem] sm:text-lg"
             >
               {#each tabs as item, index}
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === index
-                    ? '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'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/market-mover/gainers/+layout.svelte b/src/routes/market-mover/gainers/+layout.svelte
index 9d089bc4..5070ed30 100644
--- a/src/routes/market-mover/gainers/+layout.svelte
+++ b/src/routes/market-mover/gainers/+layout.svelte
@@ -40,7 +40,9 @@
   description="A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more."
 />
 
-<section class="w-full overflow-hidden m-auto min-h-screen">
+<section
+  class="w-full overflow-hidden m-auto min-h-screen text-muted dark:text-white"
+>
   <div class="flex justify-center w-full m-auto overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -48,55 +50,55 @@
       <main class="w-full">
         <!--Start Top Winners/Losers-->
 
-        <nav class=" pt-1 overflow-x-auto whitespace-nowrap">
+        <nav class="overflow-x-auto whitespace-nowrap">
           <ul
             class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
           >
             <a
               href="/market-mover/gainers"
               class="p-2 px-5 cursor-pointer {timePeriod === 'gainers'
-                ? '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'}"
             >
               Today
             </a>
             <a
               href="/market-mover/gainers/week"
               class="p-2 px-5 cursor-pointer {timePeriod === 'week'
-                ? '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'}"
             >
               Week
             </a>
             <a
               href="/market-mover/gainers/month"
               class="p-2 px-5 cursor-pointer {timePeriod === 'month'
-                ? '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'}"
             >
               Month
             </a>
             <a
               href="/market-mover/gainers/year"
               class="p-2 px-5 cursor-pointer {timePeriod === 'year'
-                ? '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'}"
             >
               Year
             </a>
             <a
               href="/market-mover/gainers/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
-                ? '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'}"
             >
               3 Years
             </a>
             <a
               href="/market-mover/gainers/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
-                ? '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'}"
             >
               5 Years
             </a>
@@ -110,7 +112,7 @@
             <div
               class="title-group flex flex-row items-center justify-start mb-3"
             >
-              <h1 class="text-white text-xl sm:text-2xl font-semibold">
+              <h1 class="text-xl sm:text-2xl font-semibold">
                 {displayTitle[timePeriod]?.replace("title", title)}
               </h1>
               {#if timePeriod === "1D" && ["Gainers", "Losers"]?.includes(title)}
@@ -122,7 +124,7 @@
               {/if}
 
               <div
-                class="mb-0 ml-5 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+                class="mb-0 ml-5 mt-1 whitespace-nowrap text-sm font-semibold"
               >
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 29d97e60..569fc8f0 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -778,7 +778,7 @@
         }
       }
     } else {
-      toast.error("Only for Pro Members", {
+      toast.error("Unlock Feature with Pro Tier 🔥", {
         style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`,
       });
     }
@@ -869,7 +869,7 @@
               class="xl:tooltip xl:tooltip-bottom flex flex-col items-center mr-3 cursor-pointer"
             >
               <div
-                class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
+                class="rounded-full w-10 h-10 relative bg-gray-400 dark:bg-[#000] flex items-center justify-center"
               >
                 {#if !muted}
                   <svg
@@ -877,7 +877,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 16 16"
                     ><path
-                      fill="#fff"
+                      fill="currentColor"
                       d="M9 2.5a.5.5 0 0 0-.849-.358l-2.927 2.85H3.5a1.5 1.5 0 0 0-1.5 1.5v2.99a1.5 1.5 0 0 0 1.5 1.5h1.723l2.927 2.875A.5.5 0 0 0 9 13.5zm1.111 2.689a.5.5 0 0 1 .703-.08l.002.001l.002.002l.005.004l.015.013l.046.04c.036.034.085.08.142.142c.113.123.26.302.405.54c.291.48.573 1.193.573 2.148c0 .954-.282 1.668-.573 2.148a3.394 3.394 0 0 1-.405.541a2.495 2.495 0 0 1-.202.196l-.008.007h-.001s-.447.243-.703-.078a.5.5 0 0 1 .075-.7l.002-.002l-.001.001l.002-.001h-.001l.018-.016c.018-.017.048-.045.085-.085a2.4 2.4 0 0 0 .284-.382c.21-.345.428-.882.428-1.63c0-.747-.218-1.283-.428-1.627a2.382 2.382 0 0 0-.368-.465a.5.5 0 0 1-.096-.717m1.702-2.08a.5.5 0 1 0-.623.782l.011.01l.052.045c.047.042.116.107.201.195c.17.177.4.443.63.794c.46.701.92 1.733.92 3.069a5.522 5.522 0 0 1-.92 3.065c-.23.35-.46.614-.63.79a3.922 3.922 0 0 1-.252.24l-.011.01h-.001a.5.5 0 0 0 .623.782l.033-.027l.075-.065c.063-.057.15-.138.253-.245a6.44 6.44 0 0 0 .746-.936a6.522 6.522 0 0 0 1.083-3.614a6.542 6.542 0 0 0-1.083-3.618a6.517 6.517 0 0 0-.745-.938a4.935 4.935 0 0 0-.328-.311l-.023-.019l-.007-.006l-.002-.002zM10.19 5.89l-.002-.001Z"
                     /></svg
                   >
@@ -887,7 +887,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
                     ><path
-                      fill="#fff"
+                      fill="currentColor"
                       d="M3.28 2.22a.75.75 0 1 0-1.06 1.06L6.438 7.5H4.25A2.25 2.25 0 0 0 2 9.749v4.497a2.25 2.25 0 0 0 2.25 2.25h3.68a.75.75 0 0 1 .498.19l4.491 3.994c.806.716 2.081.144 2.081-.934V16.06l5.72 5.72a.75.75 0 0 0 1.06-1.061zm13.861 11.74l1.138 1.137A6.974 6.974 0 0 0 19 12a6.973 6.973 0 0 0-.84-3.328a.75.75 0 0 0-1.32.714c.42.777.66 1.666.66 2.614c0 .691-.127 1.351-.359 1.96m2.247 2.246l1.093 1.094A9.956 9.956 0 0 0 22 12a9.959 9.959 0 0 0-1.96-5.946a.75.75 0 0 0-1.205.892A8.459 8.459 0 0 1 20.5 12a8.458 8.458 0 0 1-1.112 4.206M9.52 6.338l5.48 5.48V4.25c0-1.079-1.274-1.65-2.08-.934z"
                     /></svg
                   >
@@ -934,7 +934,7 @@
           <div class="sm:ml-auto w-full sm:w-fit pt-5">
             <div class="relative flex flex-col sm:flex-row items-center">
               <div
-                class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-white dark:bg-secondary rounded-md border border-gray-300 dark:border-gray-600"
+                class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center shadow-sm bg-white dark:bg-secondary rounded-md border border-gray-300 dark:border-gray-600"
               >
                 <label class="flex flex-row items-center">
                   <input
@@ -989,8 +989,8 @@
                 <Popover.Trigger asChild let:builder>
                   <Button
                     class={cn(
-                      "w-full sm:w-[160px] truncate sm:mr-3 py-3 bg-[#000] sm:hover:bg-[#000] sm:hover:  justify-center sm:justify-start text-center sm:text-left font-normal border-none rounded-md",
-                      !selectedDate && "text-gray-300",
+                      "w-full sm:w-[160px] truncate sm:mr-3 py-3 shadow-sm border-gray-300 justify-center sm:justify-start text-center sm:text-left font-normal border-none rounded-md",
+                      !selectedDate && "text-muted dark:text-gray-300",
                     )}
                     builders={[builder]}
                   >
@@ -1000,9 +1000,11 @@
                       : "Pick a date"}
                   </Button>
                 </Popover.Trigger>
-                <Popover.Content class="w-auto p-0 border-gray-500">
+                <Popover.Content
+                  class="w-auto p-0 border-gray-500 bg-white dark:bg-[#000]"
+                >
                   <Calendar
-                    class="bg-default "
+                    class=" "
                     bind:value={selectedDate}
                     initialFocus
                     onValueChange={getHistoricalFlow}
@@ -1043,7 +1045,7 @@
           >
             <label
               for="ruleModal"
-              class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none py-2 pl-3 pr-4 text-base font-semibold shadow-sm bg-gray-300 sm:hover:bg-gray-400 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+              class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none py-2 pl-3 pr-4 text-base font-semibold shadow-sm bg-white sm:hover:bg-gray-100 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
             >
               <svg
                 class="h-5 w-5"
diff --git a/src/routes/stocks/+page.svelte b/src/routes/stocks/+page.svelte
index 8ac8f255..b2cdf646 100644
--- a/src/routes/stocks/+page.svelte
+++ b/src/routes/stocks/+page.svelte
@@ -18,8 +18,8 @@
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li>
-      <li class="text-gray-300">All Stocks</li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+      <li class="text-muted dark:text-gray-300">All Stocks</li>
     </ul>
   </div>
 
@@ -29,16 +29,16 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+          <div class="mb-2 border-b-[2px]">
+            <h1 class="mb-1 e text-2xl sm:text-3xl font-bold">
               All Stock Symbols
             </h1>
-            <p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
+            <p class="mb-3 px-1 font-semibold sm:px-0">
               List of all {rawData?.length} stock symbols we support
             </p>
           </div>
 
-          <div class="w-full m-auto mb-10 bg-default">
+          <div class="w-full m-auto">
             <!--Start Top Winners/Losers-->
             <div class="flex flex-col justify-center items-center">
               <Table {data} {rawData} />
@@ -48,19 +48,21 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  <h2 class="text-start text-xl font-semibold e ml-3">
                     Pro Subscription
                   </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                  <ArrowLogo
+                    class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                  />
                 </div>
-                <span class="text-white p-3 ml-3 mr-3">
+                <span class="e p-3 ml-3 mr-3">
                   Upgrade now for unlimited access to all data and tools
                 </span>
               </a>
@@ -68,38 +70,42 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/analysts"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold e ml-3">
                   Top Analyst
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class="e p-3 ml-3 mr-3">
                 Get the latest top Wall Street analyst ratings
               </span>
             </a>
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/analysts/top-stocks"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold e ml-3">
                   Top Stocks Picks
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class="e p-3 ml-3 mr-3">
                 Get the latest top Wall Street analyst ratings.
               </span>
             </a>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index dccac055..ff39b8c1 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -796,11 +796,11 @@
                   ><tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Bid</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{$wsBidPrice !== 0 && $wsBidPrice !== null
                         ? $wsBidPrice
                         : ((data?.getStockQuote?.bid !== 0
@@ -811,7 +811,7 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       ><a
                         href={`/stocks/${$stockTicker}/statistics/market-cap`}
                         class="sm:hover:text-blue-400 underline underline-offset-4"
@@ -819,7 +819,7 @@
                       ></td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{@html abbreviateNumber(
                         data?.getStockQuote?.marketCap,
                         false,
@@ -830,11 +830,11 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Revenue (ttm)</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{@html stockDeck?.revenueTTM !== null &&
                       stockDeck?.revenueTTM !== 0
                         ? abbreviateNumber(stockDeck?.revenueTTM, false, true)
@@ -844,11 +844,11 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Net Income (ttm)</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{@html stockDeck?.netIncomeTTM !== null
                         ? abbreviateNumber(stockDeck?.netIncomeTTM, false, true)
                         : "n/a"}</td
@@ -858,40 +858,40 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >EPS (ttm)</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.eps ?? "n/a"}</td
                     ></tr
                   >
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >PE Ratio (ttm)</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.pe ?? "n/a"}</td
                     ></tr
                   >
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Forward PE</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{stockDeck?.forwardPE ?? "n/a"}</td
                     ></tr
                   >
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       ><a
                         href={data?.getAnalystSummary?.consensusRating !==
                         undefined
@@ -904,7 +904,7 @@
                       >
                     </td>
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getAnalystSummary?.consensusRating !== null &&
                       data?.getAnalystSummary?.consensusRating !== "n/a" &&
                       data?.getAnalystSummary?.consensusRating !== undefined
@@ -919,11 +919,11 @@
                   ><tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Ask</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{$wsAskPrice !== 0 && $wsAskPrice !== null
                         ? $wsAskPrice
                         : ((data?.getStockQuote?.ask !== 0
@@ -934,11 +934,11 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Volume</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.volume?.toLocaleString(
                         "en-us",
                       )}</td
@@ -947,11 +947,11 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Avg. Volume (20D)</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.avgVolume !== undefined
                         ? data?.getStockQuote?.avgVolume?.toLocaleString(
                             "en-us",
@@ -962,33 +962,33 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Open</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.open?.toFixed(2)}</td
                     ></tr
                   >
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Previous Close</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.previousClose?.toFixed(2)}</td
                     ></tr
                   >
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Day's Range</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
                         2,
                       )}</td
@@ -997,11 +997,11 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >52-Week Range</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
                         2,
                       )}</td
@@ -1010,11 +1010,11 @@
                   <tr
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
-                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm"
                       >Beta</td
                     >
                     <td
-                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
                       >{stockDeck?.beta?.toFixed(2)}</td
                     ></tr
                   >
diff --git a/src/routes/stocks/[tickerID]/profile/+layout.svelte b/src/routes/stocks/[tickerID]/profile/+layout.svelte
index 9981c483..879bea4a 100644
--- a/src/routes/stocks/[tickerID]/profile/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/profile/+layout.svelte
@@ -35,7 +35,7 @@
   }
 </script>
 
-<section class="w-auto bg-default overflow-hidden text-black h-full">
+<section class="w-auto overflow-hidden text-muted dark:text-white h-full">
   <div class="m-auto h-full overflow-hidden">
     <main class="w-full">
       <div class="m-auto">
@@ -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/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>
@@ -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/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'}"
             >
               Employees
             </a>
diff --git a/src/routes/stocks/[tickerID]/profile/+page.svelte b/src/routes/stocks/[tickerID]/profile/+page.svelte
index 4c7c4b48..c6f57545 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 bg-default overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden text-muted dark:text-white h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -62,7 +62,7 @@ ${paragraphs.join("\n")}
           </div>
           <div class="lg:-mr-6 shrink-0 lg:float-right lg:w-[336px]">
             <div
-              class="mt-7 rounded border border-gray-600 bg-primary px-3 pb-2 pt-3 xs:px-4 xs:pt-4 lg:mt-1"
+              class="mt-7 rounded border border-gray-300 dark:border-gray-600 bg-gray-200 shadow-sm dark:bg-primary px-3 pb-2 pt-3 xs:px-4 xs:pt-4 lg:mt-1"
             >
               <div class="text-center text-2xl font-semibold">
                 {$displayCompanyName}
@@ -76,7 +76,8 @@ ${paragraphs.join("\n")}
               </div>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-b border-gray-600 last:border-0"
+                  ><tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td
                       class="px-1 py-1.5 font-semibold lg:py-2"
                       data-svelte-h="svelte-bpivlp">Country</td
@@ -88,7 +89,8 @@ ${paragraphs.join("\n")}
                     ></tr
                   >
 
-                  <tr class="border-b border-gray-600 last:border-0"
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td
                       class="px-1 py-1.5 font-semibold lg:py-2"
                       data-svelte-h="svelte-pqn7mx">IPO Date</td
@@ -105,19 +107,21 @@ ${paragraphs.join("\n")}
                         : "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td class="px-1 py-1.5 font-semibold lg:py-2">Industry</td>
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       ><a
                         href={rawData?.industry
                           ? getIndustryHref(rawData?.industry)
                           : "#"}
-                        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+                        class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
                         >{rawData?.industry ?? "n/a"}</a
                       ></td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td
                       class="px-1 py-1.5 font-semibold lg:py-2"
                       data-svelte-h="svelte-5e1uzt">Sector</td
@@ -127,17 +131,18 @@ ${paragraphs.join("\n")}
                         href={sectorNavigation?.find(
                           (item) => item?.title === rawData?.sector,
                         )?.link}
-                        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+                        class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
                         >{rawData?.sector ? rawData?.sector : "n/a"}</a
                       ></td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td class="px-1 py-1.5 font-semibold lg:py-2">Employees</td
                     >
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       ><a
-                        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+                        class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
                         href={`/stocks/${$stockTicker}/profile/employees`}
                         >{rawData?.fullTimeEmployees
                           ? new Intl.NumberFormat("en")?.format(
@@ -147,7 +152,8 @@ ${paragraphs.join("\n")}
                       ></td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td
                       class="px-1 py-1.5 font-semibold lg:py-2"
                       data-svelte-h="svelte-1qhfmvo">CEO</td
@@ -163,18 +169,14 @@ ${paragraphs.join("\n")}
               Contact Details
             </h2>
             <div
-              class="rounded border border-gray-600 bg-primary px-4 pb-2 pt-4"
+              class="rounded border border-gray-300 dark:border-gray-600 bg-gray-200 shadow-sm dark:bg-primary px-4 pb-2 pt-4"
             >
               <table class="w-full">
                 <tbody
-                  ><tr class="border-b border-gray-600 last:border-0"
+                  ><tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td colspan="2" class="pb-3"
-                      ><div
-                        class="mb-2 text-lg font-bold"
-                        data-svelte-h="svelte-4u53xl"
-                      >
-                        Address:
-                      </div>
+                      ><div class="mb-2 text-lg font-bold">Address:</div>
                       <div>
                         {rawData?.address
                           ? rawData?.address
@@ -187,12 +189,13 @@ ${paragraphs.join("\n")}
                     ></tr
                   >
 
-                  <tr class="border-b border-gray-600 last:border-0"
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
                     ><td class="px-0.5 py-2 font-semibold">Website</td>
                     <td class="px-0.5 py-2 text-right">
                       <a
                         href={rawData?.website}
-                        class="sm:hover:text-white truncate text-blue-400"
+                        class="sm:hover:text-muted dark:sm:hover:text-white truncate text-blue-500 dark:text-blue-400"
                         target="_blank">{rawData?.website ?? "n/a"}</a
                       ></td
                     ></tr
@@ -202,87 +205,81 @@ ${paragraphs.join("\n")}
             </div>
             <h2 class="mt-6 xs:mt-8 font-bold text-2xl mb-2">Stock Details</h2>
             <div
-              class="rounded border border-gray-600 bg-primary px-2 pb-2 pt-2 xs:px-4 xs:pt-2.5"
+              class="rounded border border-gray-300 dark:border-gray-600 bg-gray-200 shadow-sm dark:bg-primary px-2 pb-2 pt-2 xs:px-4 xs:pt-2.5"
             >
               <table class="w-full">
                 <tbody
-                  ><tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-lmvnpx">Ticker Symbol</td
+                  ><tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2"
+                      >Ticker Symbol</td
                     >
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.symbol ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-h7dsem">Exchange</td
-                    >
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2">Exchange</td>
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.exchange ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-q9yzrm">Fiscal Year</td
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2"
+                      >Fiscal Year</td
                     >
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.fiscalYearRange ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-1tbczfa">Reporting Currency</td
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2"
+                      >Reporting Currency</td
                     >
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.currency ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-ucpcs9">CIK Code</td
-                    >
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2">CIK Code</td>
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.cik ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-1fdyovu">CUSIP Number</td
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2"
+                      >CUSIP Number</td
                     >
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.cusip ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-t5u2mr">ISIN Number</td
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2"
+                      >ISIN Number</td
                     >
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.isin ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-x8apyl">Employer ID</td
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2"
+                      >Employer ID</td
                     >
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.taxIdentificationNumber ?? "n/a"}</td
                     ></tr
                   >
-                  <tr class="border-b border-gray-600 last:border-0"
-                    ><td
-                      class="px-1 py-1.5 font-semibold lg:py-2"
-                      data-svelte-h="svelte-1o4kelt">SIC Code</td
-                    >
+                  <tr
+                    class="border-b border-gray-300 dark:border-gray-600 last:border-0"
+                    ><td class="px-1 py-1.5 font-semibold lg:py-2">SIC Code</td>
                     <td class="px-1 py-1.5 text-right lg:py-2"
                       >{rawData?.sicCode ?? "n/a"}</td
                     ></tr
@@ -298,27 +295,27 @@ ${paragraphs.join("\n")}
             </h2>
             {#if rawData?.executives?.length > 0}
               <table class="mb-6 w-full text-base xs:mb-8">
-                <thead class="bg-primary"
-                  ><tr class="border-y border-gray-600"
+                <thead class="bg-gray-200 shadow-sm dark:bg-primary"
+                  ><tr class="border-y border-gray-300 dark:border-gray-600"
                     ><th
-                      class="px-2 py-2.5 text-left font-semibold text-white xs:px-3 xs:py-3 sm:px-4"
+                      class="px-2 py-2.5 text-left font-semibold xs:px-3 xs:py-3 sm:px-4"
                       >Name</th
                     >
                     <th
-                      class="px-2 py-2.5 text-left font-semibold text-white xs:px-3 xs:py-3 sm:px-4"
+                      class="px-2 py-2.5 text-left font-semibold xs:px-3 xs:py-3 sm:px-4"
                       >Position</th
                     ></tr
                   ></thead
                 >
                 <tbody>
                   {#each rawData?.executives as item}
-                    <tr class="border-b border-gray-600 text-sm sm:text-[1rem]"
+                    <tr
+                      class="border-b border-gray-300 dark:border-gray-600 text-sm sm:text-[1rem]"
                       ><td
-                        class="px-2 py-2.5 align-top font-semibold text-white xs:px-3 xs:py-3 sm:px-4"
+                        class="px-2 py-2.5 align-top font-semibold xs:px-3 xs:py-3 sm:px-4"
                         >{item?.name}</td
                       >
-                      <td
-                        class="px-2 py-2.5 align-top text-white xs:px-3 xs:py-3 sm:px-4"
+                      <td class="px-2 py-2.5 align-top xs:px-3 xs:py-3 sm:px-4"
                         >{item?.position}</td
                       >
                     </tr>
@@ -334,27 +331,24 @@ ${paragraphs.join("\n")}
             {#if rawData?.filings?.length > 0}
               <table class="w-full">
                 <thead
-                  ><tr class="border-b border-t border-gray-600 bg-primary"
-                    ><th class="px-1 py-2 text-left text-white xs:px-2">Date</th
-                    >
-                    <th class="px-1 py-2 text-left text-white xs:px-2">Type</th>
-                    <th class="px-1 py-2 text-left text-white xs:px-2">Title</th
-                    ></tr
+                  ><tr
+                    class="border-b border-t border-gray-300 dark:border-gray-600 bg-gray-200 shadow-sm dark:bg-primary"
+                    ><th class="px-1 py-2 text-left xs:px-2">Date</th>
+                    <th class="px-1 py-2 text-left xs:px-2">Type</th>
+                    <th class="px-1 py-2 text-left xs:px-2">Title</th></tr
                   ></thead
                 >
                 <tbody>
                   {#each rawData?.filings as item}
-                    <tr class="border-b border-gray-600 text-sm sm:text-[1rem]"
-                      ><td
-                        class="whitespace-nowrap py-3 pr-1 align-top text-white xs:px-2"
+                    <tr
+                      class="border-b border-gray-300 dark:border-gray-600 text-sm sm:text-[1rem]"
+                      ><td class="whitespace-nowrap py-3 pr-1 align-top xs:px-2"
                         >{item?.date}</td
                       >
-                      <td class="px-1 py-3 align-top text-white xs:px-2"
-                        >{item?.type}</td
-                      >
+                      <td class="px-1 py-3 align-top xs:px-2">{item?.type}</td>
                       <td class="py-3 pl-1 align-top xs:px-2"
                         ><a
-                          class="text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                          class="text-blue-500 dark:text-blue-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
                           href={item?.link}
                           target="_blank"
                           rel="noopener noreferrer"
@@ -371,10 +365,10 @@ ${paragraphs.join("\n")}
               No SEC filings available.
             {/if}
             <div
-              class="border-b border-gray-600 py-3 text-lg sm:text-xl font-semibold"
+              class="border-b border-gray-300 dark:border-gray-600 py-3 text-lg sm:text-xl font-semibold"
             >
               <a
-                class="text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                class="text-blue-500 dark:text-blue-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
                 href={`https://www.sec.gov/cgi-bin/browse-edgar?CIK=${rawData?.cik}&amp;count=100`}
                 target="_blank"
                 rel="noopener noreferrer">View All SEC Filings</a