diff --git a/src/lib/components/DarkPool/HottestTrades.svelte b/src/lib/components/DarkPool/HottestTrades.svelte
index 5a84c7f4..866c59ec 100644
--- a/src/lib/components/DarkPool/HottestTrades.svelte
+++ b/src/lib/components/DarkPool/HottestTrades.svelte
@@ -155,7 +155,7 @@
           <tbody>
             {#each stockList as item, index}
               <tr
-                class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                   1 ===
                   rawData?.length && data?.user?.tier !== 'Pro'
                   ? 'opacity-[0.1]'
diff --git a/src/lib/components/DownloadData.svelte b/src/lib/components/DownloadData.svelte
index 105ecb28..902bb6a3 100644
--- a/src/lib/components/DownloadData.svelte
+++ b/src/lib/components/DownloadData.svelte
@@ -18,7 +18,6 @@
             row["name"] = row["name"].replace(/,/g, "");
           }
         });
-        console.log(rawData);
         // Dynamically get the headers from the keys of the first object in rawData
         let headers = Object.keys(rawData[0]);
 
@@ -55,17 +54,15 @@
 
 <Button
   on:click={() => exportData("csv")}
-  class="ml-2 w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+  class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
 >
   <span class="truncate text-white">Download</span>
   <svg
-    class="{data?.user?.tier === 'Pro'
-      ? 'hidden'
-      : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+    class="{data?.user?.tier === 'Pro' ? 'hidden' : ''} ml-1 mt-0.5 w-3.5 h-3.5"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     ><path
-      fill="#A3A3A3"
+      fill="#fff"
       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
   >
diff --git a/src/routes/etf/[tickerID]/history/+page.svelte b/src/routes/etf/[tickerID]/history/+page.svelte
index 29d72953..fcc3f21d 100644
--- a/src/routes/etf/[tickerID]/history/+page.svelte
+++ b/src/routes/etf/[tickerID]/history/+page.svelte
@@ -420,7 +420,7 @@
                       <tbody>
                         {#each stockList as item, index}
                           <tr
-                            class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                            class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                               1 ===
                               rawData?.length && data?.user?.tier !== 'Pro'
                               ? 'opacity-[0.1]'
diff --git a/src/routes/index/[tickerID]/history/+page.svelte b/src/routes/index/[tickerID]/history/+page.svelte
index 6e801e36..b9a2182c 100644
--- a/src/routes/index/[tickerID]/history/+page.svelte
+++ b/src/routes/index/[tickerID]/history/+page.svelte
@@ -416,7 +416,7 @@
                       <tbody>
                         {#each stockList as item, index}
                           <tr
-                            class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                            class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                               1 ===
                               rawData?.length && data?.user?.tier !== 'Pro'
                               ? 'opacity-[0.1]'
diff --git a/src/routes/insider-tracker/+page.svelte b/src/routes/insider-tracker/+page.svelte
index 4a0a7a5b..14301b0e 100644
--- a/src/routes/insider-tracker/+page.svelte
+++ b/src/routes/insider-tracker/+page.svelte
@@ -228,7 +228,7 @@
                   <tbody>
                     {#each stockList as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                        class="sm:hover:bg-[#245073]/10 odd:bg-odd {index +
                           1 ===
                           stockList?.length && data?.user?.tier !== 'Pro'
                           ? 'opacity-[0.1]'
diff --git a/src/routes/market-flow/+page.svelte b/src/routes/market-flow/+page.svelte
index 156b0164..92481408 100644
--- a/src/routes/market-flow/+page.svelte
+++ b/src/routes/market-flow/+page.svelte
@@ -558,7 +558,7 @@
                   <tbody>
                     {#each displayPosTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                           1 ===
                           originalPosTickers?.length &&
                         data?.user?.tier !== 'Pro'
@@ -662,7 +662,7 @@
                   <tbody>
                     {#each displayNegTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                           1 ===
                           originalNegTickers?.length &&
                         data?.user?.tier !== 'Pro'
diff --git a/src/routes/market-flow/sector-flow/+page.svelte b/src/routes/market-flow/sector-flow/+page.svelte
index e1678a4e..0104bb6b 100644
--- a/src/routes/market-flow/sector-flow/+page.svelte
+++ b/src/routes/market-flow/sector-flow/+page.svelte
@@ -668,7 +668,7 @@
                   <tbody>
                     {#each displayPosTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                           1 ===
                           originalPosTickers?.length &&
                         data?.user?.tier !== 'Pro'
@@ -773,7 +773,7 @@
                   <tbody>
                     {#each displayNegTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                           1 ===
                           originalNegTickers?.length &&
                         data?.user?.tier !== 'Pro'
diff --git a/src/routes/newsletter/+page.svelte b/src/routes/newsletter/+page.svelte
index 4cfc6823..8fd9c0ca 100644
--- a/src/routes/newsletter/+page.svelte
+++ b/src/routes/newsletter/+page.svelte
@@ -57,7 +57,7 @@
       {#if !data?.user}
         <a
           href="/register"
-          class="mt-10 btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
+          class="mt-10 btn btn-lg w-full text-center bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 w-full rounded-md m-auto text-black font-semibold text-[1rem]"
         >
           <span class="text-[1rem] sm:text-lg">Sign Up for Free</span>
         </a>
diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte
index 604ae0c9..d3148923 100644
--- a/src/routes/potus-tracker/+page.svelte
+++ b/src/routes/potus-tracker/+page.svelte
@@ -761,7 +761,7 @@
 
           <div class="order-4 shrink-0 lg:float-right lg:w-[336px]">
             <div
-              class="w-full text-white border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={`/newsletter`}
@@ -780,7 +780,7 @@
             </div>
 
             <div
-              class="w-full text-white border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/stock-screener"}
@@ -797,7 +797,7 @@
               </a>
             </div>
             <div
-              class="w-full text-white border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/watchlist/stocks"}
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 1712dc92..9f26700b 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -611,7 +611,7 @@
 <dialog id="cancelSubscriptionModal" class="modal modal-bottom sm:modal-middle">
   <label
     for="cancelSubscriptionModal"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <!-- Desktop modal content -->
@@ -666,7 +666,7 @@
 >
   <label
     for="reactivateSubscriptionModal"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <!-- Desktop modal content -->
@@ -718,7 +718,7 @@
 <dialog id="changeSubscriptionModal" class="modal modal-bottom sm:modal-middle">
   <label
     for="changeSubscriptionModal"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <!-- Desktop modal content -->
@@ -769,7 +769,7 @@
 <dialog id="errorSubscriptionModal" class="modal modal-bottom sm:modal-middle">
   <label
     for="errorSubscriptionModal"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <!-- Desktop modal content -->
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index 241e53bd..e949a941 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -1,7 +1,5 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
-  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
+  import { screenWidth } from "$lib/store";
   import { onMount } from "svelte";
   import * as Card from "$lib/components/shadcn/card/index.ts";
   import * as Table from "$lib/components/shadcn/table/index.ts";
@@ -508,7 +506,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
                             >
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index b4bdd8ad..67d0eaf1 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -2545,7 +2545,7 @@ const handleKeyDown = (event) => {
 <svelte:window on:scroll={handleScroll} />
 
 <section
-  class="w-full max-w-3xl sm:max-w-(--breakpoint-xl) overflow-hidden min-h-screen pt-5 pb-40 px-5"
+  class="w-full max-w-3xl sm:max-w-(--breakpoint-xl) overflow-hidden min-h-screen pb-40 px-5"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -2555,7 +2555,7 @@ const handleKeyDown = (event) => {
   </div>
 
   <!--Start Build Strategy-->
-  <div class="mt-5 sm:rounded-md">
+  <div class="sm:rounded-md">
     <div class="flex flex-col md:flex-row items-start md:items-center mb-5">
       <div class="w-full flex flex-row items-center sm:mt-4">
         <h1 class="text-white text-3xl font-semibold">Stock Screener</h1>
@@ -3278,7 +3278,7 @@ const handleKeyDown = (event) => {
           <li>
             <button
               on:click={() => (displayTableTab = "general")}
-              class="text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab ===
+              class="cursor-pointer text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab ===
               'general'
                 ? 'font-semibold bg-primary'
                 : ''}"
@@ -3309,7 +3309,7 @@ const handleKeyDown = (event) => {
           <li>
             <button
               on:click={() => changeTab("performance")}
-              class="text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab ===
+              class="cursor-pointer text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab ===
               'performance'
                 ? 'font-semibold bg-primary'
                 : ''}"
@@ -3320,7 +3320,7 @@ const handleKeyDown = (event) => {
           <li>
             <button
               on:click={() => changeTab("analysts")}
-              class="text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab ===
+              class="cursor-pointer text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab ===
               'analysts'
                 ? 'font-semibold bg-primary'
                 : ''}"
@@ -3775,12 +3775,10 @@ const handleKeyDown = (event) => {
 <input type="checkbox" id="addStrategy" class="modal-toggle" />
 
 <dialog id="addStrategy" class="modal modal-bottom sm:modal-middle">
-  <label
-    for="addStrategy"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+  <label for="addStrategy" class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
-  <div class="modal-box w-full bg-primary border border-gray-600">
+  <div class="modal-box w-full bg-secondary border border-gray-600">
     <h1 class="text-white text-2xl font-bold">New Strategy</h1>
 
     <form
@@ -3798,7 +3796,7 @@ const handleKeyDown = (event) => {
 
       <button
         type="submit"
-        class="mt-10 btn bg-[#fff] sm:hover:bg-gray-300 duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-md"
+        class="cursor-pointer mt-2 py-2.5 bg-[#fff] sm:hover:bg-gray-300 duration-100 w-full rounded-md m-auto text-black font-semibold text-md"
       >
         Create Strategy
       </button>
@@ -3812,13 +3810,11 @@ const handleKeyDown = (event) => {
 <input type="checkbox" id="deleteStrategy" class="modal-toggle" />
 
 <dialog id="deleteStrategy" class="modal modal-bottom sm:modal-middle">
-  <label
-    for="deleteStrategy"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+  <label for="deleteStrategy" class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <div
-    class="modal-box w-full bg-primary border border-gray-600 overflow-hidden"
+    class="modal-box w-full bg-secondary border border-gray-600 overflow-hidden"
   >
     <h3
       class="font-bold text-md sm:text-lg flex justify-center items-center mt-10 text-white"
@@ -3832,7 +3828,7 @@ const handleKeyDown = (event) => {
       <label
         for="deleteStrategy"
         on:click={handleDeleteStrategy}
-        class="mt-5 btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-md m-auto text-black font-semibold text-md"
+        class="cursor-pointer py-2.5 text-center bg-[#fff] sm:hover:bg-gray-300 w-full rounded-md m-auto text-black font-semibold text-md"
       >
         Proceed
       </label>
diff --git a/src/routes/stocks/[tickerID]/history/+page.svelte b/src/routes/stocks/[tickerID]/history/+page.svelte
index 28f869ea..6778d9c2 100644
--- a/src/routes/stocks/[tickerID]/history/+page.svelte
+++ b/src/routes/stocks/[tickerID]/history/+page.svelte
@@ -415,7 +415,7 @@
                     <tbody>
                       {#each stockList as item, index}
                         <tr
-                          class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                          class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
                             1 ===
                             rawData?.length && data?.user?.tier !== 'Pro'
                             ? 'opacity-[0.1]'
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 2729f921..35f013e5 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -1909,9 +1909,7 @@
 
 <dialog id="addWatchlist" class="modal modal-bottom sm:modal-middle">
   <!-- Modal backdrop for desktop -->
-  <label
-    for="addWatchlist"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+  <label for="addWatchlist" class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <!-- Desktop modal content -->
@@ -1951,7 +1949,7 @@
 <dialog id="deleteWatchlist" class="modal modal-bottom sm:modal-middle">
   <label
     for="deleteWatchlist"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    class="cursor-pointer modal-backdrop bg-[#000]/40"
   ></label>
 
   <div