diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dab77e72..9ada3094 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -852,7 +852,7 @@
                 <DropdownMenu.Content align="end">
                   <a href="/profile" class="cursor-pointer">
                     <DropdownMenu.Item
-                      class="sm:hover:bg-[#18181B] cursor-pointer"
+                      class="sm:hover:bg-gray-300 dark:sm:hover:bg-[#18181B] cursor-pointer"
                     >
                       My Account
                     </DropdownMenu.Item>
@@ -861,20 +861,20 @@
 
                   <a href="/watchlist/stocks" class="cursor-pointer">
                     <DropdownMenu.Item
-                      class="sm:hover:bg-[#18181B] cursor-pointer"
+                      class="sm:hover:bg-gray-300 dark:sm:hover:bg-[#18181B] cursor-pointer"
                     >
                       Watchlist
                     </DropdownMenu.Item>
                   </a>
                   <a href="/price-alert" class="cursor-pointer">
                     <DropdownMenu.Item
-                      class="sm:hover:bg-[#18181B] cursor-pointer"
+                      class="sm:hover:bg-gray-300 dark:sm:hover:bg-[#18181B] cursor-pointer"
                     >
                       Price Alert
                     </DropdownMenu.Item>
                   </a>
 
-                  <button on:click={handleModeChange} class="cursor-pointer w-full sm:hover:bg-[#18181B] relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none">
+                  <button on:click={handleModeChange} class="cursor-pointer w-full sm:hover:bg-gray-300 dark:sm:hover:bg-[#18181B] relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none">
  
                     <span>{$mode === 'light' ? 'Light' : 'Dark'} Mode</span>
                     <span class="sr-only">Toggle theme</span>
@@ -889,7 +889,7 @@
                       class="w-full text-start cursor-pointer"
                     >
                       <DropdownMenu.Item
-                        class="sm:hover:bg-[#18181B] cursor-pointer"
+                        class="sm:hover:bg-gray-300 dark:sm:hover:bg-[#18181B] cursor-pointer"
                       >
                       <svg class="lucide lucide-log-out mr-2 w-3.5 h-3.5 transform scale-x-[-1]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>
                         <span class="text-start">Logout</span>
diff --git a/src/routes/market-flow/+page.svelte b/src/routes/market-flow/+page.svelte
index dc734dc6..34d36c9a 100644
--- a/src/routes/market-flow/+page.svelte
+++ b/src/routes/market-flow/+page.svelte
@@ -553,7 +553,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 w-full bg-table border border-gray-300 dark: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
@@ -565,7 +565,7 @@
                   <tbody>
                     {#each displayPosTickers as item, index}
                       <tr
-                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                        class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalPosTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)
@@ -657,7 +657,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 w-full bg-table border border-gray-300 dark: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
@@ -669,7 +669,7 @@
                   <tbody>
                     {#each displayNegTickers as item, index}
                       <tr
-                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                        class=" dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalNegTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)
diff --git a/src/routes/market-flow/sector-flow/+page.svelte b/src/routes/market-flow/sector-flow/+page.svelte
index 4fd4a1e6..e9aa181b 100644
--- a/src/routes/market-flow/sector-flow/+page.svelte
+++ b/src/routes/market-flow/sector-flow/+page.svelte
@@ -656,7 +656,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 w-full bg-table border border-gray-300 dark:border-gray-300 dark: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
@@ -668,7 +668,7 @@
                   <tbody>
                     {#each displayPosTickers as item, index}
                       <tr
-                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                        class=" dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalPosTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)
@@ -761,7 +761,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 w-full bg-table border border-gray-300 dark:border-gray-300 dark: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
@@ -773,7 +773,7 @@
                   <tbody>
                     {#each displayNegTickers as item, index}
                       <tr
-                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                        class=" dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalNegTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)