diff --git a/src/lib/components/IndustryTable.svelte b/src/lib/components/IndustryTable.svelte
index 76377072..fba3c838 100644
--- a/src/lib/components/IndustryTable.svelte
+++ b/src/lib/components/IndustryTable.svelte
@@ -89,7 +89,9 @@
 </script>
 
 <div class="w-full overflow-x-scroll">
-  <table class="table rounded-none sm:rounded-md w-full m-auto mt-4">
+  <table
+    class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
+  >
     <thead>
       <TableHeader {columns} {sortOrders} {sortData} />
     </thead>
@@ -97,11 +99,9 @@
       {#each displayList as item}
         <!-- row -->
         <tr
-          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]"
+          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
         >
-          <td
-            class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-          >
+          <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap">
             <a
               href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
               class="sm:hover:underline sm:hover:underline-offset-4 text-white"
@@ -113,25 +113,25 @@
           </td>
 
           <td
-            class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+            class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {item?.numStocks}
           </td>
 
           <td
-            class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+            class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {abbreviateNumber(item?.totalMarketCap) ?? "-"}
           </td>
 
           <td
-            class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+            class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {item?.avgDividendYield?.toFixed(2) ?? "-"}%
           </td>
 
           <td
-            class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+            class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {item?.pe?.toFixed(2) ?? "-"}
           </td>
@@ -139,7 +139,7 @@
           <td
             class="{item?.profitMargin >= 0
               ? "before:content-['+'] text-[#00FC50]"
-              : 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+              : 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
           >
             {abbreviateNumber(item?.profitMargin)}%
           </td>
@@ -147,7 +147,7 @@
           <td
             class="{item?.avgChange1M >= 0
               ? "before:content-['+'] text-[#00FC50]"
-              : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {item?.avgChange1M?.toFixed(2) ?? "-"}%
           </td>
@@ -155,7 +155,7 @@
           <td
             class="{item?.avgChange1Y >= 0
               ? "before:content-['+']  text-[#00FC50]"
-              : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {item?.avgChange1Y?.toFixed(2) ?? "-"}%
           </td>
diff --git a/src/routes/industry/all/+page.svelte b/src/routes/industry/all/+page.svelte
index 6c8b0076..8971d1a8 100644
--- a/src/routes/industry/all/+page.svelte
+++ b/src/routes/industry/all/+page.svelte
@@ -96,7 +96,9 @@
   <div class="flex justify-center w-full m-auto h-full overflow-hidden">
     <!-- Content area -->
     <div class="w-full overflow-x-scroll">
-      <table class="table rounded-none sm:rounded-md w-full m-auto mt-4">
+      <table
+        class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
+      >
         <thead>
           <TableHeader {columns} {sortOrders} {sortData} />
         </thead>
@@ -104,11 +106,9 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
             >
-              <td
-                class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
+              <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                 <a
                   href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
                   class="sm:hover:underline sm:hover:underline-offset-4 text-white"
@@ -120,25 +120,25 @@
               </td>
 
               <td
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.numStocks}
               </td>
 
               <td
-                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {abbreviateNumber(item?.totalMarketCap) ?? "-"}
               </td>
 
               <td
-                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgDividendYield?.toFixed(2) ?? "-"}%
               </td>
 
               <td
-                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.pe?.toFixed(2) ?? "-"}
               </td>
@@ -146,7 +146,7 @@
               <td
                 class=" {item?.profitMargin >= 0
                   ? "before:content-['+'] text-[#00FC50]"
-                  : 'text-[#FF2F1F]'}  font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                  : 'text-[#FF2F1F]'}  font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
               >
                 {abbreviateNumber(item?.profitMargin)}%
               </td>
@@ -154,7 +154,7 @@
               <td
                 class="{item?.avgChange1M >= 0
                   ? "before:content-['+']  text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1M?.toFixed(2) ?? "-"}%
               </td>
@@ -162,7 +162,7 @@
               <td
                 class="{item?.avgChange1Y >= 0
                   ? "before:content-['+']  text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1Y?.toFixed(2) ?? "-"}%
               </td>
diff --git a/src/routes/industry/sectors/+page.svelte b/src/routes/industry/sectors/+page.svelte
index 0167e2b4..30e43cbb 100644
--- a/src/routes/industry/sectors/+page.svelte
+++ b/src/routes/industry/sectors/+page.svelte
@@ -95,7 +95,9 @@
   <div class="flex justify-center w-full m-auto h-full overflow-hidden">
     <!-- Content area -->
     <div class="w-full overflow-x-scroll">
-      <table class="table rounded-none sm:rounded-md w-full m-auto mt-4">
+      <table
+        class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
+      >
         <thead>
           <TableHeader {columns} {sortOrders} {sortData} />
         </thead>
@@ -103,11 +105,9 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
             >
-              <td
-                class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
+              <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                 <a
                   href={sectorNavigation?.find(
                     (listItem) => listItem?.title === item?.sector,
@@ -121,25 +121,25 @@
               </td>
 
               <td
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.numStocks}
               </td>
 
               <td
-                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {abbreviateNumber(item?.totalMarketCap) ?? "-"}
               </td>
 
               <td
-                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgDividendYield?.toFixed(2) ?? "-"}%
               </td>
 
               <td
-                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.pe?.toFixed(2) ?? "-"}
               </td>
@@ -147,7 +147,7 @@
               <td
                 class=" {item?.profitMargin >= 0
                   ? "before:content-['+'] text-[#00FC50]"
-                  : 'text-[#FF2F1F]'}  font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                  : 'text-[#FF2F1F]'}  font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
               >
                 {abbreviateNumber(item?.profitMargin)}%
               </td>
@@ -155,7 +155,7 @@
               <td
                 class="{item?.avgChange1M >= 0
                   ? "before:content-['+']  text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1M?.toFixed(2) ?? "-"}%
               </td>
@@ -163,7 +163,7 @@
               <td
                 class="{item?.avgChange1Y >= 0
                   ? "before:content-['+']  text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1Y?.toFixed(2) ?? "-"}%
               </td>
diff --git a/src/routes/sector-flow/+page.svelte b/src/routes/sector-flow/+page.svelte
index d63e7a50..2f01d7c0 100644
--- a/src/routes/sector-flow/+page.svelte
+++ b/src/routes/sector-flow/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { numberOfUnreadNotification } from "$lib/store";
-  import { onMount } from "svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-  import { abbreviateNumberWithColor } from "$lib/utils";
+  import { abbreviateNumberWithColor, sectorNavigation } from "$lib/utils";
   import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
 
   export let data;
@@ -112,19 +111,21 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Jim
-    Carmer Tracker · Stocknear
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Live
+    Sector Flow · Stocknear
   </title>
   <meta
     name="description"
-    content={`Track the stock recommendations and performance of CNBC's Jim Cramer`}
+    content={`Track and compare historical and current options activity
+              performances of sectors`}
   />
 
   <!-- Other meta tags -->
   <meta property="og:title" content={`Jim Carmer Tracker · Stocknear`} />
   <meta
     property="og:description"
-    content={`Track the stock recommendations and performance of CNBC's Jim Cramer`}
+    content={`Track and compare historical and current options activity
+              performances of sectors`}
   />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
@@ -134,7 +135,8 @@
   <meta name="twitter:title" content={`Jim Carmer Tracker · Stocknear`} />
   <meta
     name="twitter:description"
-    content={`Track the stock recommendations and performance of CNBC's Jim Cramer`}
+    content={`Track and compare historical and current options activity
+              performances of sectors`}
   />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
@@ -196,9 +198,14 @@
                       <td
                         class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
                       >
-                        {item?.name?.length > charNumber
-                          ? item?.name?.slice(0, charNumber) + "..."
-                          : item?.name}
+                        <a
+                          href={sectorNavigation?.find(
+                            (listItem) => listItem?.title === item?.name,
+                          )?.link}
+                          class="sm:hover:underline sm:hover:underline-offset-4 text-white"
+                        >
+                          {item?.name}
+                        </a>
                       </td>
 
                       <td
@@ -270,7 +277,7 @@
 
                                 <!-- Neutral -->
                                 <div
-                                  class="bg-gray-100 h-full"
+                                  class="bg-gray-300 h-full"
                                   style="width: calc(({item
                                     ?.premium_ratio[1]} / ({item
                                     ?.premium_ratio[0]} + {item