diff --git a/src/lib/components/RatingsChart.svelte b/src/lib/components/RatingsChart.svelte
index 6e524e0b..8f9d986b 100644
--- a/src/lib/components/RatingsChart.svelte
+++ b/src/lib/components/RatingsChart.svelte
@@ -159,9 +159,7 @@
         type: "line",
         smooth: true,
         showSymbol: false,
-        areaStyle: {
-          color: "rgba(255, 255, 255, 0.08)",
-        },
+
         lineStyle: {
           color: "#fff",
           width: 1,
diff --git a/src/lib/components/Table/OptionsFlowTable.svelte b/src/lib/components/Table/OptionsFlowTable.svelte
index 95b98a1d..552f0f05 100644
--- a/src/lib/components/Table/OptionsFlowTable.svelte
+++ b/src/lib/components/Table/OptionsFlowTable.svelte
@@ -241,11 +241,14 @@
       itemCount={displayedData.length}
       itemSize={40}
     >
-      <div slot="header" class="tr th sticky z-40 top-0">
+      <div
+        slot="header"
+        class="tr th sticky z-40 top-0 border-b border-gray-800 shadow-xl"
+      >
         <!-- Table headers -->
         <div
           on:click={() => sortData("time")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Time
           <svg
@@ -265,7 +268,7 @@
         </div>
         <div
           on:click={() => sortData("ticker")}
-          class="td cursor-pointer select-none bg-[#1E222D] font-bold text-slate-300 text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] font-bold text-slate-300 text-xs text-start uppercase"
         >
           Symbol
           <svg
@@ -286,13 +289,13 @@
           >
         </div>
         <div
-          class="td select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Save
         </div>
         <div
           on:click={() => sortData("expiry")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Expiry
           <svg
@@ -314,7 +317,7 @@
         </div>
         <div
           on:click={() => sortData("dte")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           DTE
           <svg
@@ -336,7 +339,7 @@
         </div>
         <div
           on:click={() => sortData("strike")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Strike
           <svg
@@ -358,7 +361,7 @@
         </div>
         <div
           on:click={() => sortData("callPut")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           C/P
           <svg
@@ -380,7 +383,7 @@
         </div>
         <div
           on:click={() => sortData("sentiment")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Sent.
           <svg
@@ -403,7 +406,7 @@
         </div>
         <div
           on:click={() => sortData("spot")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Spot
           <svg
@@ -425,7 +428,7 @@
         </div>
         <div
           on:click={() => sortData("price")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Price
           <svg
@@ -447,7 +450,7 @@
         </div>
         <div
           on:click={() => sortData("premium")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Prem
           <svg
@@ -469,7 +472,7 @@
         </div>
         <div
           on:click={() => sortData("type")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Type
           <svg
@@ -491,7 +494,7 @@
         </div>
         <div
           on:click={() => sortData("exec")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Exec
           <svg
@@ -513,7 +516,7 @@
         </div>
         <div
           on:click={() => sortData("size")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Size
           <svg
@@ -535,7 +538,7 @@
         </div>
         <div
           on:click={() => sortData("vol")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           Vol
           <svg
@@ -557,7 +560,7 @@
         </div>
         <div
           on:click={() => sortData("oi")}
-          class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
+          class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
         >
           OI
           <svg
@@ -584,7 +587,7 @@
         let:index
         let:style
         {style}
-        class="tr {index % 2 === 0 ? 'bg-secondary' : 'bg-[#09090B]'}"
+        class="tr {index % 2 === 0 ? 'bg-odd' : 'bg-[#17171D]'}"
       >
         <!-- Row data -->
 
@@ -690,13 +693,13 @@
 
         <div
           style="justify-content: center;"
-          class="td text-sm sm:text-[1rem] text-start font-semibold {displayedData[
-            index
-          ]?.put_call === 'Puts'
-            ? 'text-[#CB281C]'
-            : 'text-[#0FB307]'}"
+          class="td text-sm sm:text-[1rem] text-start text-white"
         >
-          {abbreviateNumber(displayedData[index]?.cost_basis)}
+          {@html abbreviateNumber(
+            displayedData[index]?.cost_basis,
+            false,
+            true,
+          )}
         </div>
 
         <div
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 3f2c67ba..20f9bec0 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -885,7 +885,7 @@
         </div>
       {/if}
 
-      <div class="rounded-md border border-gray-700 bg-[#1E222D] p-2">
+      <div class="rounded-md border border-gray-700 bg-odd 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"
         >
@@ -963,13 +963,13 @@
           <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-[#2A2E39] 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-[#19191F] rounded-md border border-gray-600"
               >
                 <label class="flex flex-row items-center">
                   <input
                     id="modal-search"
                     type="search"
-                    class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-inherit"
+                    class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-[inherit]"
                     placeholder="Stock or ETF symbol..."
                     bind:value={filterQuery}
                     on:input={debouncedHandleInput}
@@ -1466,7 +1466,7 @@
           <div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3">
             <!--Start Flow Sentiment-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@@ -1487,7 +1487,7 @@
             <!--End Flow Sentiment-->
             <!--Start Put/Call-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@@ -1543,7 +1543,7 @@
             <!--End Put/Call-->
             <!--Start Call Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@@ -1600,7 +1600,7 @@
             <!--End Call Flow-->
             <!--Start Put Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index 1cd86d1d..e193041b 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -136,7 +136,7 @@
                           <thead>
                             <tr class="bg-[#09090B] border-b border-[#27272A]">
                               <th
-                                class="bg-[#09090B] text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold"
+                                class=" text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold"
                               >
                                 Person
                               </th>
@@ -165,7 +165,7 @@
                           <tbody>
                             {#each displayList as item, index}
                               <tr
-                                class="odd:bg-odd border-b-[#09090B] {index +
+                                class="odd:bg-odd border-b border-gray-800 {index +
                                   1 ===
                                   rawData?.length && data?.user?.tier !== 'Pro'
                                   ? 'opacity-[0.1]'
@@ -174,7 +174,7 @@
                                 <th
                                   class="{index % 2
                                     ? 'bg-[#09090B]'
-                                    : 'bg-secondary'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
+                                    : 'bg-odd'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   <div class="flex flex-row items-center">
                                     <div
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 39427af5..3cb52ba5 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -1545,7 +1545,11 @@
                                 >
                                   {#if item?.[row?.rule] !== undefined && item?.[row?.rule] !== null}
                                     {#if row?.type === "int"}
-                                      {abbreviateNumber(item[row?.rule])}
+                                      {@html abbreviateNumber(
+                                        item[row?.rule],
+                                        false,
+                                        true,
+                                      )}
                                     {:else if row?.type === "str"}
                                       {item[row?.rule] !== null
                                         ? item[row?.rule]