diff --git a/src/lib/components/Table/DarkPoolTable.svelte b/src/lib/components/Table/DarkPoolTable.svelte
index b4a8aa4a..78b3a61b 100644
--- a/src/lib/components/Table/DarkPoolTable.svelte
+++ b/src/lib/components/Table/DarkPoolTable.svelte
@@ -167,12 +167,12 @@
     >
       <div
         slot="header"
-        class="tr th m-auto sticky z-40 top-0 border-b border-gray-800 shadow-xl"
+        class="tr th m-auto sticky z-40 top-0 border border-gray-800"
       >
         <!-- Table headers -->
         <div
           on:click={() => sortData("date")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Date
           <svg
@@ -192,7 +192,7 @@
         </div>
         <div
           on:click={() => sortData("ticker")}
-          class="td cursor-pointer select-none bg-[#121217] font-bold text-slate-300 text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default font-bold text-white text-xs text-start uppercase"
         >
           Symbol
           <svg
@@ -215,7 +215,7 @@
 
         <div
           on:click={() => sortData("price")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Price
           <svg
@@ -237,7 +237,7 @@
         </div>
         <div
           on:click={() => sortData("premium")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Premium
           <svg
@@ -260,7 +260,7 @@
 
         <div
           on:click={() => sortData("size")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Size
           <svg
@@ -282,7 +282,7 @@
         </div>
         <div
           on:click={() => sortData("volume")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Volume
           <svg
@@ -305,7 +305,7 @@
 
         <div
           on:click={() => sortData("sizeVolRatio")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           % Size / Vol
           <svg
@@ -329,7 +329,7 @@
 
         <div
           on:click={() => sortData("sizeAvgVolRatio")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           % Size / Avg Vol
           <svg
@@ -353,7 +353,7 @@
 
         <div
           on:click={() => sortData("sector")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Sector
           <svg
@@ -376,7 +376,7 @@
 
         <div
           on:click={() => sortData("assetType")}
-          class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Asset Type
           <svg
diff --git a/src/lib/components/Table/OptionsFlowTable.svelte b/src/lib/components/Table/OptionsFlowTable.svelte
index 246203e3..208cdaac 100644
--- a/src/lib/components/Table/OptionsFlowTable.svelte
+++ b/src/lib/components/Table/OptionsFlowTable.svelte
@@ -241,14 +241,11 @@
       itemCount={displayedData.length}
       itemSize={40}
     >
-      <div
-        slot="header"
-        class="tr th sticky z-40 top-0 border-b border-gray-800 shadow-xl"
-      >
+      <div slot="header" class="tr th sticky z-40 top-0 border border-gray-800">
         <!-- Table headers -->
         <div
           on:click={() => sortData("time")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Time
           <svg
@@ -268,7 +265,7 @@
         </div>
         <div
           on:click={() => sortData("ticker")}
-          class="td cursor-pointer select-none bg-[#17171D] font-bold text-slate-300 text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default font-bold text-white text-xs text-start uppercase"
         >
           Symbol
           <svg
@@ -289,13 +286,13 @@
           >
         </div>
         <div
-          class="td select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Save
         </div>
         <div
           on:click={() => sortData("expiry")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Expiry
           <svg
@@ -317,7 +314,7 @@
         </div>
         <div
           on:click={() => sortData("dte")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           DTE
           <svg
@@ -339,7 +336,7 @@
         </div>
         <div
           on:click={() => sortData("strike")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Strike
           <svg
@@ -361,7 +358,7 @@
         </div>
         <div
           on:click={() => sortData("callPut")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           C/P
           <svg
@@ -383,7 +380,7 @@
         </div>
         <div
           on:click={() => sortData("sentiment")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Sent.
           <svg
@@ -406,7 +403,7 @@
         </div>
         <div
           on:click={() => sortData("spot")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Spot
           <svg
@@ -428,7 +425,7 @@
         </div>
         <div
           on:click={() => sortData("price")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Price
           <svg
@@ -450,7 +447,7 @@
         </div>
         <div
           on:click={() => sortData("premium")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Prem
           <svg
@@ -472,7 +469,7 @@
         </div>
         <div
           on:click={() => sortData("type")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Type
           <svg
@@ -494,7 +491,7 @@
         </div>
         <div
           on:click={() => sortData("exec")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Exec
           <svg
@@ -516,7 +513,7 @@
         </div>
         <div
           on:click={() => sortData("size")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Size
           <svg
@@ -538,7 +535,7 @@
         </div>
         <div
           on:click={() => sortData("vol")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           Vol
           <svg
@@ -560,7 +557,7 @@
         </div>
         <div
           on:click={() => sortData("oi")}
-          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
         >
           OI
           <svg
diff --git a/src/routes/dark-pool-flow/+page.svelte b/src/routes/dark-pool-flow/+page.svelte
index 4cc5fd7c..c02b5075 100644
--- a/src/routes/dark-pool-flow/+page.svelte
+++ b/src/routes/dark-pool-flow/+page.svelte
@@ -761,7 +761,7 @@
             : nyseDate} (NYSE Time)
         </div>
       {/if}
-      <div class="rounded-md border border-gray-700 bg-[#121217] p-2">
+      <div class="rounded-md border border-gray-700 bg-primary p-2">
         <div
           class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600"
         >
@@ -842,7 +842,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-[#19191F] rounded-md border border-gray-600"
+                class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-secondary rounded-md border border-gray-600"
               >
                 <label class="flex flex-row items-center">
                   <input