diff --git a/src/lib/components/DarkPool/HistoricalVolume.svelte b/src/lib/components/DarkPool/HistoricalVolume.svelte
index a782d5e2..c0857e19 100644
--- a/src/lib/components/DarkPool/HistoricalVolume.svelte
+++ b/src/lib/components/DarkPool/HistoricalVolume.svelte
@@ -4,6 +4,7 @@
   import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
   import highcharts from "$lib/highcharts.ts";
   import { goto } from "$app/navigation";
+  import { mode } from "mode-watcher";
 
   export let data;
   export let rawData = [];
@@ -75,8 +76,8 @@
       },
       chart: {
         type: "line",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
         spacingTop: 5,
         animation: false,
@@ -84,7 +85,7 @@
       title: {
         text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
         style: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
         },
         useHTML: true,
       },
@@ -96,13 +97,13 @@
         endOnTick: false,
         categories: dates,
         crosshair: {
-          color: "#fff", // Set the color of the crosshair line
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
           },
           distance: 20, // Increases space between label and axis
           formatter: function () {
@@ -118,7 +119,7 @@
       yAxis: [
         {
           gridLineWidth: 1,
-          gridLineColor: "#111827",
+          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
           labels: {
             enabled: false,
           },
@@ -149,8 +150,8 @@
         },
         borderRadius: 4,
         formatter: function () {
-          // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
+          // 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",
@@ -160,10 +161,10 @@
 
           // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
-            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
-            point.y,
-          )}</span><br>`;
+            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;
@@ -185,7 +186,7 @@
           name: "Total Volume",
           data: totalVolumeList,
           type: "line",
-          color: "#fff",
+          color: $mode === "light" ? "#2C6288" : "white",
         },
         {
           name: "Short Volume",
@@ -236,17 +237,17 @@
     });
   }
 
-  $: if ($stockTicker || $etfTicker) {
+  $: if ($stockTicker || $etfTicker || $mode) {
     config = getPlotOptions() || null;
   }
 </script>
 
-<section class="overflow-hidden text-white h-full pb-8">
+<section class="overflow-hidden h-full pb-8">
   <main class="overflow-hidden">
     <div class="flex flex-row items-center">
       <label
         for="historicalDataInfo"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+        class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
       >
         Historical Chart
       </label>
@@ -259,7 +260,7 @@
 
     {#if rawData?.length !== 0}
       <div class="w-full flex flex-col items-start">
-        <div class="text-white text-[1rem] mt-2 mb-2 w-full">
+        <div class=" text-[1rem] mt-2 mb-2 w-full">
           Over the past 12 months, {$displayCompanyName} has experienced an average
           dark pool trading volume of
           <span class="font-semibold">{abbreviateNumber(avgVolume)}</span>
@@ -273,14 +274,14 @@
       </div>
 
       <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 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-800 sm:pt-2 sm:pb-2"
+        class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-300 dark:border-gray-800 sm:pt-2 sm:pb-2"
       >
-        <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">
           Dark Pool Table
         </h3>
 
@@ -288,7 +289,7 @@
           class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
         >
           <div
-            class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
+            class="bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
           >
             {#each tabs as item, i}
               {#if data?.user?.tier !== "Pro" && i > 0}
@@ -303,7 +304,7 @@
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24"
                       ><path
-                        fill="#A3A3A3"
+                        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
                     >
@@ -324,7 +325,7 @@
                     class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
                     i
                       ? 'text-black'
-                      : 'text-white'}"
+                      : ''}"
                   >
                     {item.title}
                   </span>
@@ -337,18 +338,14 @@
 
       <div class="w-full overflow-x-auto">
         <table
-          class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto mt-4"
+          class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
         >
-          <thead class="bg-default">
+          <thead class="text-muted dark:text-white">
             <tr>
-              <th class="text-white font-semibold text-start text-sm">Date</th>
-              <th class="text-white font-semibold text-end text-sm"
-                >Total Volume</th
-              >
-              <th class="text-white font-semibold text-end text-sm"
-                >Short Volume</th
-              >
-              <th class="text-white font-semibold text-end text-sm"
+              <th class=" font-semibold text-start text-sm">Date</th>
+              <th class=" font-semibold text-end text-sm">Total Volume</th>
+              <th class=" font-semibold text-end text-sm">Short Volume</th>
+              <th class=" font-semibold text-end text-sm"
                 >% Short Volume Change</th
               >
             </tr>
@@ -357,9 +354,9 @@
             {#each tableList as item, index}
               <!-- row -->
               <tr
-                class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
+                class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
               >
-                <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
+                <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                   {new Date(item?.date)?.toLocaleDateString("en-US", {
                     day: "2-digit", // Include day number
                     month: "short", // Display short month name
@@ -368,20 +365,18 @@
                 </td>
 
                 <td
-                  class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                  class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
                 >
                   {abbreviateNumber(item?.totalVolume)}
                 </td>
 
                 <td
-                  class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                  class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
                 >
                   {abbreviateNumber(item?.shortVolume)}
                 </td>
 
-                <td
-                  class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-end"
-                >
+                <td class=" text-sm sm:text-[1rem] whitespace-nowrap text-end">
                   {#if index === tableList?.length - 1}
                     n/a
                   {:else if item?.shortVolume > tableList[index + 1]?.shortVolume}
diff --git a/src/lib/components/DarkPool/HottestTrades.svelte b/src/lib/components/DarkPool/HottestTrades.svelte
index c7ed1cdc..47ac1f2b 100644
--- a/src/lib/components/DarkPool/HottestTrades.svelte
+++ b/src/lib/components/DarkPool/HottestTrades.svelte
@@ -2,7 +2,7 @@
   import InfoModal from "$lib/components/InfoModal.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
-  import { abbreviateNumberWithColor } from "$lib/utils";
+  import { abbreviateNumber } from "$lib/utils";
 
   export let data;
   export let rawData = [];
@@ -120,12 +120,12 @@
   };
 </script>
 
-<section class="overflow-hidden text-white h-full pb-8">
+<section class="overflow-hidden h-full pb-8">
   <main class="overflow-hidden">
     <div class="flex flex-row items-center">
       <label
         for="hottestDPTrade"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+        class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
       >
         Hottest Trades
       </label>
@@ -138,7 +138,7 @@
 
     {#if rawData?.length !== 0}
       <div class="w-full flex flex-col items-start">
-        <div class="text-white text-[1rem] mt-2 mb-2 w-full">
+        <div class=" text-[1rem] mt-2 mb-2 w-full">
           Get in realtime the latest hottest trades based on premium.
         </div>
       </div>
@@ -147,7 +147,7 @@
         class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
       >
         <table
-          class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border 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"
         >
           <thead>
             <TableHeader {columns} {sortOrders} {sortData} />
@@ -155,36 +155,30 @@
           <tbody>
             {#each stockList as item, index}
               <tr
-                class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
+                class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                   1 ===
                   rawData?.length && !['Pro']?.includes(data?.user?.tier)
                   ? 'opacity-[0.1]'
                   : ''}"
               >
-                <td
-                  class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                >
+                <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
                   {item?.rank}
                 </td>
 
-                <td
-                  class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                >
+                <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
                   {formatToNewYorkTime(item?.date)}
                 </td>
 
-                <td
-                  class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                >
+                <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                   {item?.price}
                 </td>
 
                 <td class="text-sm sm:text-[1rem] text-end">
-                  {@html abbreviateNumberWithColor(item?.size, false, true)}
+                  {abbreviateNumber(item?.size, false, true)}
                 </td>
 
                 <td class="text-sm sm:text-[1rem] text-end">
-                  {@html abbreviateNumberWithColor(item?.volume, false, true)}
+                  {abbreviateNumber(item?.volume, false, true)}
                 </td>
 
                 <td class="text-sm sm:text-[1rem] text-end">
@@ -195,7 +189,7 @@
                 </td>
 
                 <td class="text-sm sm:text-[1rem] text-end">
-                  {@html abbreviateNumberWithColor(item?.premium, false, true)}
+                  {abbreviateNumber(item?.premium, false, true)}
                 </td>
               </tr>
             {/each}
diff --git a/src/lib/components/DarkPool/PriceLevel.svelte b/src/lib/components/DarkPool/PriceLevel.svelte
index aa6eccfe..961505a2 100644
--- a/src/lib/components/DarkPool/PriceLevel.svelte
+++ b/src/lib/components/DarkPool/PriceLevel.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
-  import { abbreviateNumber, abbreviateNumberWithColor } from "$lib/utils";
+  import { abbreviateNumber } from "$lib/utils";
   import highcharts from "$lib/highcharts.ts";
   import RealtimeTrade from "$lib/components/DarkPool/RealtimeTrade.svelte";
+  import { mode } from "mode-watcher";
 
   let category = "Today's Trend";
 
@@ -21,13 +22,17 @@
 
     // Create colors array with highlighted bar
     const colors = xAxis?.map((value, index) =>
-      index === maxValueIndex ? "#3BA272" : "#e2e8f0",
+      index === maxValueIndex
+        ? "#3BA272"
+        : $mode === "light"
+          ? "#2C6288"
+          : "#e2e8f0",
     );
 
     const options = {
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
         animation: false,
         height: 360,
       },
@@ -36,19 +41,19 @@
       title: {
         text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Dark Pool Price Levels</h3>`,
         useHTML: true,
-        style: { color: "white" },
+        style: { color: $mode === "light" ? "black" : "white" },
       },
       xAxis: {
         endonTick: false,
         categories: yAxis,
         crosshair: {
-          color: "#fff", // Set the color of the crosshair line
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
           },
           distance: 10, // Increases space between label and axis
           formatter: function () {
@@ -62,7 +67,7 @@
         },
         opposite: true,
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         tickPositioner: function () {
           const positions = [];
           const info = this.getExtremes();
@@ -97,12 +102,12 @@
         borderRadius: 4,
         formatter: function () {
           // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">Price Level ${this?.x}</span><br>`;
+          let tooltipContent = `<span class=" m-auto  text-[1rem] font-[501]">Price Level ${this?.x}</span><br>`;
 
           // Loop through each point in the shared tooltip
           this.points?.forEach((point) => {
-            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+            tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span> 
+          <span class=" font-normal text-sm ">${abbreviateNumber(
             point.y,
           )}</span><br>`;
           });
@@ -135,25 +140,25 @@
     return options;
   }
 
-  $: if (($stockTicker || $etfTicker) && category) {
+  $: if ((($stockTicker || $etfTicker) && category) || $mode) {
     config = getBarChart() || null;
   }
 </script>
 
-<section class="overflow-hidden text-white h-full pb-8 pt-3">
+<section class="overflow-hidden h-full pb-8 pt-3">
   <main class="overflow-hidden">
     {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
       <div class="w-full flex flex-col items-start">
-        <div class="text-white text-[1rem] mt-2 w-full">
-          {$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor(
+        <div class=" text-[1rem] mt-2 w-full">
+          {$displayCompanyName} has seen an average dark pool trade size of {abbreviateNumber(
             metrics?.avgTradeSize,
             false,
             true,
-          )} and an average premium per trade of {@html abbreviateNumberWithColor(
+          )} and an average premium per trade of {abbreviateNumber(
             metrics?.avgPremTrade,
             false,
             true,
-          )}, with a total premium of {@html abbreviateNumberWithColor(
+          )}, with a total premium of {abbreviateNumber(
             metrics?.totalPrem,
             false,
             true,
@@ -161,25 +166,26 @@
         </div>
       </div>
 
-      <div class=" rounded-md bg-default mt-5 sm:mt-0">
+      <div class=" rounded-md mt-5 sm:mt-0">
         <div class="flex justify-end mb-2 space-x-2 z-10 text-sm">
           {#each ["Today's Trend", "Price Level"] as item, index}
             {#if data?.user?.tier === "Pro" || index === 0}
               <label
                 on:click={() => (category = item)}
-                class="px-3 py-1 text-sm {category === item
-                  ? 'bg-white text-black '
-                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+                class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-700 {category ===
+                item
+                  ? 'bg-gray-300 shadow-sm dark:bg-white text-black '
+                  : ' shadow-sm bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded cursor-pointer"
               >
                 {item}
               </label>
             {:else if data?.user?.tier !== "Pro"}
               <a
                 href="/pricing"
-                class="px-3 py-1 text-sm flex flex-row items-center border border-gray-700 {category ===
+                class="px-3 py-1 text-sm flex flex-row items-center border border-gray-300 dark:border-gray-700 {category ===
                 item
-                  ? 'bg-white text-black '
-                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+                  ? 'bg-gray-300 shadow-sm dark:bg-white text-black '
+                  : ' shadow-sm bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded cursor-pointer"
               >
                 {item}
                 <svg
@@ -198,7 +204,7 @@
 
         {#if category === "Price Level"}
           <div
-            class="border border-gray-800 rounded w-full"
+            class="border border-gray-300 dark:border-gray-800 rounded w-full"
             use:highcharts={config}
           ></div>
         {:else}
diff --git a/src/lib/components/DarkPool/RealtimeTrade.svelte b/src/lib/components/DarkPool/RealtimeTrade.svelte
index d7a042d0..506a4130 100644
--- a/src/lib/components/DarkPool/RealtimeTrade.svelte
+++ b/src/lib/components/DarkPool/RealtimeTrade.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { stockTicker, etfTicker } from "$lib/store";
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
   export let data;
 
@@ -68,7 +69,7 @@
 
     const options = {
       chart: {
-        backgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
         animation: false,
         height: 360,
       },
@@ -77,7 +78,7 @@
       title: {
         text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Realtime Dark Pool Trades Impact</h3>`,
         useHTML: true,
-        style: { color: "white" },
+        style: { color: $mode === "light" ? "black" : "white" },
       },
       xAxis: {
         type: "datetime",
@@ -85,12 +86,12 @@
         max: endTime,
         tickLength: 0,
         crosshair: {
-          color: "#fff",
+          color: $mode === "light" ? "black" : "white",
           width: 1,
           dashStyle: "Solid",
         },
         labels: {
-          style: { color: "#fff" },
+          style: { color: $mode === "light" ? "black" : "white" },
           distance: 20,
           formatter: function () {
             const date = new Date(this?.value);
@@ -107,14 +108,17 @@
           min: yMin ?? null,
           max: yMax ?? null,
           title: { text: null },
-          labels: { style: { color: "white" } },
+          labels: { style: { color: $mode === "light" ? "black" : "white" } },
           gridLineWidth: 1,
-          gridLineColor: "#111827",
+          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
           opposite: true,
         },
         {
-          title: { text: "Total Trades", style: { color: "#fff" } },
-          labels: { style: { color: "#fff" } },
+          title: {
+            text: "Total Trades",
+            style: { color: $mode === "light" ? "black" : "white" },
+          },
+          labels: { style: { color: $mode === "light" ? "black" : "white" } },
           gridLineWidth: 0,
           opposite: false,
         },
@@ -125,27 +129,36 @@
         backgroundColor: "rgba(0, 0, 0, 0.8)",
         borderColor: "rgba(255, 255, 255, 0.2)",
         borderWidth: 1,
-        style: { color: "#fff", fontSize: "16px", padding: "10px" },
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
         borderRadius: 4,
         formatter: function () {
+          // Create a Date object from the x value and format it as time
           const date = new Date(this?.x);
-          let formattedDate = date.toLocaleTimeString("en-US", {
+          let formattedTime = date.toLocaleTimeString("en-US", {
             hour: "2-digit",
             minute: "2-digit",
           });
 
-          let tooltipContent = `<span class="text-white m-auto text-sm">${formattedDate}</span><br>`;
+          // Build the tooltip content starting with the formatted time
+          let tooltipContent = `<span class="m-auto text-sm text-white">${formattedTime}</span><br>`;
 
+          // Loop through each point and add its details, excluding "Dark Pool Volume"
           this.points?.forEach((point) => {
-            // Exclude the column series from the tooltip
             if (point.series.name !== "Dark Pool Volume") {
-              tooltipContent += `<span style="color:${point.color}">${point.series.name}: <b>${point.y}</b></span><br>`;
+              tooltipContent += `
+          <span class="font-semibold text-sm">${point.series.name}:</span> 
+          <span class="font-normal text-sm"><b>${point.y}</b></span><br>`;
             }
           });
 
           return tooltipContent;
         },
       },
+
       plotOptions: {
         series: {
           animation: false,
@@ -174,7 +187,7 @@
           name: "Price",
           type: "line",
           data: seriesData,
-          color: "#fff",
+          color: $mode === "light" ? "blue" : "white",
           lineWidth: 1.3,
           yAxis: 0, // Use primary yAxis
           animation: false,
@@ -194,13 +207,13 @@
     return options;
   }
 
-  $: if ($stockTicker || $etfTicker) {
+  $: if ($stockTicker || $etfTicker || $mode) {
     config = null;
     config = getPlotChart() || null;
   }
 </script>
 
 <div
-  class="border border-gray-800 rounded w-full"
+  class="border border-gray-300 dark:border-gray-800 rounded w-full"
   use:highcharts={config}
 ></div>
diff --git a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
index ed997e7b..7f6fc16b 100644
--- a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
@@ -19,7 +19,7 @@
   description={`Explore exclusive dark pool trading data for ${$displayCompanyName} (${$stockTicker}). Get insights into hidden market activity, stock price movements, institutional trades, financials, and key statistics.`}
 />
 
-<section class="w-full bg-default overflow-hidden 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"
@@ -34,7 +34,7 @@
             <div class="flex flex-row items-center mb-4 sm:mb-0">
               <label
                 for="darkPoolInfo"
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+                class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
               >
                 Dark Pool Data
               </label>