diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 3bb27687..1f768f24 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -486,7 +486,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/pricing"}
@@ -506,7 +506,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/analysts/top-stocks"}
@@ -525,7 +525,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/most-shorted-stocks"}
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index e1f8701d..39dcca09 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -135,7 +135,7 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/pricing"
@@ -154,7 +154,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/donation"
@@ -173,7 +173,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/contact"
diff --git a/src/routes/corporate-lobbying-tracker/+page.svelte b/src/routes/corporate-lobbying-tracker/+page.svelte
index 29e1807e..f56e1d75 100644
--- a/src/routes/corporate-lobbying-tracker/+page.svelte
+++ b/src/routes/corporate-lobbying-tracker/+page.svelte
@@ -263,7 +263,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/pricing"}
@@ -283,7 +283,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/analysts"}
@@ -302,7 +302,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/politicians"}
diff --git a/src/routes/crypto/+page.svelte b/src/routes/crypto/+page.svelte
index 27a4af97..16e14412 100644
--- a/src/routes/crypto/+page.svelte
+++ b/src/routes/crypto/+page.svelte
@@ -225,7 +225,7 @@
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
               on:click={() => goto("/pricing")}
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <div
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
@@ -245,7 +245,7 @@
 
           <div
             on:click={() => goto("/analysts")}
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
               <div class="w-full flex justify-between items-center p-3 mt-3">
@@ -262,7 +262,7 @@
 
           <div
             on:click={() => goto("/analysts/top-stocks")}
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
               <div class="w-full flex justify-between items-center p-3 mt-3">
diff --git a/src/routes/dividends-calendar/+page.svelte b/src/routes/dividends-calendar/+page.svelte
index 5cc9891d..ca86064c 100644
--- a/src/routes/dividends-calendar/+page.svelte
+++ b/src/routes/dividends-calendar/+page.svelte
@@ -390,7 +390,7 @@
                       on:click={() => toggleDate(index)}
                       class=" m-auto w-full cursor-pointer h-16 {index ===
                       selectedWeekday
-                        ? 'bg-[#fff] text-black font-semibold'
+                        ? 'bg-white text-black font-semibold'
                         : ''} rounded-md sm:rounded-none flex bg-default border border-gray-600 mb-3"
                     >
                       <div
@@ -469,7 +469,7 @@
 
                     <div class="w-full overflow-x-scroll no-scrollbar">
                       <table
-                        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4"
+                        class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
                       >
                         <thead>
                           <TableHeader {columns} {sortOrders} {sortData} />
diff --git a/src/routes/donation/+page.svelte b/src/routes/donation/+page.svelte
index 38184f0c..4785b61d 100644
--- a/src/routes/donation/+page.svelte
+++ b/src/routes/donation/+page.svelte
@@ -148,7 +148,7 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/pricing"
@@ -167,7 +167,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/about"
@@ -186,7 +186,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/contact"
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index 86d7703e..100191c4 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -390,7 +390,7 @@
                       on:click={() => toggleDate(index)}
                       class=" m-auto w-full cursor-pointer h-16 {index ===
                       selectedWeekday
-                        ? 'bg-[#fff] text-black font-semibold'
+                        ? 'bg-white text-black font-semibold'
                         : ''} rounded-md sm:rounded-none flex bg-default border border-gray-600 mb-3"
                     >
                       <div
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index c93aba50..8a37a9b3 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -398,7 +398,7 @@
                       on:click={() => toggleDate(index)}
                       class=" m-auto w-full cursor-pointer h-16 {index ===
                       selectedWeekday
-                        ? 'bg-[#fff] text-black font-semibold'
+                        ? 'bg-white text-black font-semibold'
                         : ''} rounded sm:rounded-none flex bg-default border border-gray-600 mb-3"
                     >
                       <div
@@ -674,7 +674,7 @@
 
                       <div class="w-full overflow-x-scroll no-scrollbar">
                         <table
-                          class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-default m-auto mt-4"
+                          class="table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
                         >
                           <thead>
                             <TableHeader {columns} {sortOrders} {sortData} />
@@ -683,11 +683,9 @@
                             {#each day as item}
                               <!-- row -->
                               <tr
-                                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd"
+                                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border border-gray-800"
                               >
-                                <td
-                                  class="text-white text-sm sm:text-[1rem] border-b-[#09090B]"
-                                >
+                                <td class="text-white text-sm sm:text-[1rem]">
                                   <label class="p-1.5 rounded-md">
                                     {item?.time}
                                   </label>
@@ -758,7 +756,7 @@
                                 </td>
 
                                 <td
-                                  class="text-start text-white border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                                  class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   {item?.event?.length > 40
                                     ? item?.event?.slice(0, 40) + "..."
@@ -766,7 +764,7 @@
                                 </td>
 
                                 <td
-                                  class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                                  class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   {item?.actual !== (null || "")
                                     ? abbreviateNumber(item?.actual)
@@ -774,7 +772,7 @@
                                 </td>
 
                                 <td
-                                  class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                                  class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   {item?.consensus !== (null || "")
                                     ? abbreviateNumber(item?.consensus)
@@ -782,7 +780,7 @@
                                 </td>
 
                                 <td
-                                  class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                                  class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   {item?.prior !== (null || "")
                                     ? abbreviateNumber(item?.prior)
@@ -790,7 +788,7 @@
                                 </td>
 
                                 <td
-                                  class="text-white text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                                  class="text-white text-start text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   <div
                                     class="flex flex-row items-center justify-end"
@@ -874,7 +872,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/pricing"}
@@ -894,7 +892,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/earnings-calendar"}
@@ -913,7 +911,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/dividends-calendar"}
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
index 0f43d17c..16ea1bf5 100644
--- a/src/routes/economic-indicator/+page.svelte
+++ b/src/routes/economic-indicator/+page.svelte
@@ -3,6 +3,7 @@
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { Chart } from "svelte-echarts";
   import Lazy from "$lib/components/Lazy.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   import { init, use } from "echarts/core";
   import { LineChart, BarChart } from "echarts/charts";
@@ -23,7 +24,6 @@
   let optionsInflation;
   let optionsFedFundRate;
 
-  let filterRule = "annual";
   let activeIdx = 0;
 
   const tabs = [
@@ -323,7 +323,7 @@
         name: "CPI",
         data: valueList,
         type: "line",
-        areaStyle: { opacity: 0.2 },
+        areaStyle: { opacity: 0.02 },
         smooth: true,
         symbol: "none",
         itemStyle: {
@@ -577,7 +577,7 @@
         name: "Fed Fund Rate",
         data: valueList,
         type: "line",
-        areaStyle: { opacity: 0.2 },
+        areaStyle: { opacity: 0.02 },
         smooth: true,
         symbol: "none",
         itemStyle: {
@@ -672,22 +672,11 @@
           </div>
 
           {#if isLoaded}
-            <div
-              class="mb-8 w-full text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5"
-            >
-              <svg
-                class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 256 256"
-                ><path
-                  fill="#fff"
-                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                /></svg
-              >
-              Real-time and historical data on key economic indicators like GDP,
+            <Infobox
+              text="Real-time and historical data on key economic indicators like GDP,
               unemployment, and inflation, essential for tracking economic performance
-              and growth trends.
-            </div>
+              and growth trends."
+            />
 
             <div class="w-full m-auto mt-10">
               <h2 class="text-xl sm:text-2xl text-gray-200 font-bold">
@@ -845,10 +834,10 @@
 
               <div class="w-full overflow-x-scroll">
                 <table
-                  class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-default m-auto mt-4"
+                  class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
                 >
-                  <thead>
-                    <tr class="border border-gray-600">
+                  <thead class="bg-default">
+                    <tr class="">
                       <th
                         class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                         >Date</th
@@ -907,70 +896,70 @@
                     {#each tableList as item}
                       <!-- row -->
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B] shake-ticker cursor-pointer"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border border-gray-800"
                       >
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.date}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.month1}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.month2 !== null ? item?.month2 : "-"}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.month3}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.month6}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year1}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year2}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year3}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year5}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year7}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year10}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year20}
                         </td>
                         <td
-                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
+                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap"
                         >
                           {item?.year30}
                         </td>
@@ -996,7 +985,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -1016,7 +1005,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/economic-calendar"
@@ -1035,7 +1024,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/earnings-calendar"
diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index 128ef5af..a4bf1808 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -233,7 +233,7 @@
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
               on:click={() => goto("/pricing")}
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <div
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
@@ -253,7 +253,7 @@
 
           <div
             on:click={() => goto("/analysts")}
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
               <div class="w-full flex justify-between items-center p-3 mt-3">
@@ -270,7 +270,7 @@
 
           <div
             on:click={() => goto("/analysts/top-stocks")}
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
               <div class="w-full flex justify-between items-center p-3 mt-3">
diff --git a/src/routes/etf/etf-providers/+layout.svelte b/src/routes/etf/etf-providers/+layout.svelte
index 8c8c7500..77d67524 100644
--- a/src/routes/etf/etf-providers/+layout.svelte
+++ b/src/routes/etf/etf-providers/+layout.svelte
@@ -93,7 +93,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/pricing"}
@@ -113,7 +113,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/analysts"}
@@ -132,7 +132,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/politicians"}
diff --git a/src/routes/etf/etf-providers/+page.svelte b/src/routes/etf/etf-providers/+page.svelte
index 9d0e0887..7c9761c1 100644
--- a/src/routes/etf/etf-providers/+page.svelte
+++ b/src/routes/etf/etf-providers/+page.svelte
@@ -131,7 +131,7 @@
     <div class="w-full">
       <div class="w-full overflow-x-scroll">
         <table
-          class="table rounded-none sm:rounded-md w-full border-bg-default m-auto mt-4"
+          class="table rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
         >
           <thead>
             <TableHeader {columns} {sortOrders} {sortData} />
@@ -140,14 +140,14 @@
             {#each etfProviderList as item, index}
               <!-- row -->
               <tr
-                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B] {index +
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
                   1 ===
                   etfProviderList?.length && data?.user?.tier !== 'Pro'
                   ? 'opacity-[0.1]'
                   : ''}"
               >
                 <td
-                  class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]"
+                  class="text-sm sm:text-[1rem] whitespace-nowrap font-medium"
                 >
                   <a
                     href={"/etf/etf-providers/" + item?.etfProvider}
@@ -158,25 +158,25 @@
                 </td>
 
                 <td
-                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
                 >
                   {abbreviateNumber(item?.totalAssets)}
                 </td>
 
                 <td
-                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
                 >
                   {item?.funds}
                 </td>
 
                 <td
-                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
                 >
                   {item?.avgExpenseRatio}%
                 </td>
 
                 <td
-                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
                 >
                   {item?.avgHoldings}
                 </td>
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index b205f114..fb50733a 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -220,20 +220,20 @@
               {#each etfProviderData as item, index}
                 <!-- row -->
                 <tr
-                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B] {index +
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
                     1 ===
                     etfProviderData?.length && data?.user?.tier !== 'Pro'
                     ? 'opacity-[0.1]'
                     : ''}"
                 >
                   <td
-                    class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                    class="font-medium text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     <HoverStockChart symbol={item?.symbol} assetType={"etf"} />
                   </td>
 
                   <td
-                    class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                    class="text-gray-200 text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {item?.name?.length > charNumber
                       ? item?.name?.slice(0, charNumber) + "..."
@@ -267,19 +267,19 @@
                   </td>
 
                   <td
-                    class="text-white font-medium border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                    class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {abbreviateNumber(item?.totalAssets)}
                   </td>
 
                   <td
-                    class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                    class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {item?.numberOfHoldings}
                   </td>
 
                   <td
-                    class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                    class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {item?.expenseRatio}%
                   </td>
diff --git a/src/routes/etf/new-launches/+page.svelte b/src/routes/etf/new-launches/+page.svelte
index c471b057..6deea6ea 100644
--- a/src/routes/etf/new-launches/+page.svelte
+++ b/src/routes/etf/new-launches/+page.svelte
@@ -220,7 +220,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/pricing"}
@@ -240,7 +240,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/analysts"}
@@ -259,7 +259,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/politicians"}
diff --git a/src/routes/imprint/+page.svelte b/src/routes/imprint/+page.svelte
index f19c92f1..9cab641b 100644
--- a/src/routes/imprint/+page.svelte
+++ b/src/routes/imprint/+page.svelte
@@ -196,7 +196,7 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/pricing"
@@ -215,7 +215,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/donation"
@@ -234,7 +234,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/contact"
diff --git a/src/routes/ipos/+layout.svelte b/src/routes/ipos/+layout.svelte
index 6f0d1c0e..90f9a579 100644
--- a/src/routes/ipos/+layout.svelte
+++ b/src/routes/ipos/+layout.svelte
@@ -138,7 +138,7 @@
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
               on:click={() => goto("/pricing")}
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <div
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
@@ -158,7 +158,7 @@
 
           <div
             on:click={() => goto("/analysts")}
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
               <div class="w-full flex justify-between items-center p-3 mt-3">
@@ -175,7 +175,7 @@
 
           <div
             on:click={() => goto("/politicians")}
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
               <div class="w-full flex justify-between items-center p-3 mt-3">
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index 44e82f3f..3084c5b7 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -123,8 +123,8 @@
           <table
             class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto overflow-hidden"
           >
-            <thead>
-              <tr class="border-b border-[#27272A]">
+            <thead class="bg-default">
+              <tr>
                 <th class="text-white font-semibold text-sm text-start"
                   >IPO Date</th
                 >
diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index 45c68336..bffb7e66 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -286,7 +286,7 @@
         {/each}
       </div>
 
-      <div class="border-b-[2px] mt-2 w-full mb-7" />
+      <div class="border-b-[2px] w-full mb-7" />
 
       <div class="flex justify-center w-full m-auto overflow-hidden">
         <main class="w-full lg:w-3/4 lg:pr-10">
@@ -296,7 +296,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 -mt-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/pricing"}
@@ -316,7 +316,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/watchlist/stocks"}
@@ -335,7 +335,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/stock-screener"}
diff --git a/src/routes/list/bitcoin-etfs/+page.svelte b/src/routes/list/bitcoin-etfs/+page.svelte
index fb5b6458..84271fce 100644
--- a/src/routes/list/bitcoin-etfs/+page.svelte
+++ b/src/routes/list/bitcoin-etfs/+page.svelte
@@ -165,7 +165,7 @@
     <!-- Content area -->
     <div class="w-full overflow-x-scroll">
       <table
-        class="table rounded-none sm:rounded-md w-full border-bg-default m-auto mt-4"
+        class="table rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
       >
         <thead>
           <TableHeader {columns} {sortOrders} {sortData} />
@@ -174,35 +174,29 @@
           {#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="text-white font-semibold sm:font-normal text-center text-sm sm:text-[1rem] border-b-[#09090B]"
+                class="text-white font-semibold sm:font-normal text-center text-sm sm:text-[1rem]"
               >
                 {item?.rank}
               </td>
 
-              <td class="text-[1rem] border-b-[#09090B]">
+              <td class="text-[1rem]">
                 <HoverStockChart symbol={item?.symbol} assetType="etf" />
               </td>
 
-              <td
-                class="text-white border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
-              >
+              <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
                 {item?.name?.length > charNumber
                   ? item?.name?.slice(0, charNumber) + "..."
                   : item?.name}
               </td>
 
-              <td
-                class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
-              >
+              <td class="text-white text-end text-sm sm:text-[1rem]">
                 {item?.price}
               </td>
 
-              <td
-                class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
-              >
+              <td class="text-white text-end text-sm sm:text-[1rem]">
                 {#if item?.changesPercentage >= 0}
                   <span class="text-[#00FC50]"
                     >+{item.changesPercentage?.toFixed(2)}%</span
@@ -214,14 +208,12 @@
                 {/if}
               </td>
 
-              <td
-                class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
-              >
+              <td class="text-white text-end text-sm sm:text-[1rem]">
                 {item?.expenseRatio}%
               </td>
 
               <td
-                class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {abbreviateNumber(item?.totalAssets)}
               </td>
diff --git a/src/routes/notifications/+page.svelte b/src/routes/notifications/+page.svelte
index cdf356c8..81ec818e 100644
--- a/src/routes/notifications/+page.svelte
+++ b/src/routes/notifications/+page.svelte
@@ -184,7 +184,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -204,7 +204,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="cramer-tracker"
@@ -223,7 +223,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/reddit-tracker"
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index 30e72398..de9907e8 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -290,7 +290,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro"}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/pricing"}
@@ -310,7 +310,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/analysts"}
@@ -329,7 +329,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/politicians"}
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index 62c7b062..e77b5876 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -798,7 +798,7 @@
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
               on:click={() => goto("/pricing")}
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <div
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
@@ -817,7 +817,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/watchlist/stocks"}
@@ -836,7 +836,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/stock-screener"}
diff --git a/src/routes/privacy-policy/+page.svelte b/src/routes/privacy-policy/+page.svelte
index 0e7878f2..97f34d14 100644
--- a/src/routes/privacy-policy/+page.svelte
+++ b/src/routes/privacy-policy/+page.svelte
@@ -269,7 +269,7 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/pricing"
@@ -288,7 +288,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/donation"
@@ -307,7 +307,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/contact"
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index 8daff967..55090cf7 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -666,7 +666,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -686,7 +686,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/sentiment-tracker"
@@ -705,7 +705,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/insider-tracker"
diff --git a/src/routes/sentiment-tracker/+page.svelte b/src/routes/sentiment-tracker/+page.svelte
index 3cdd1348..2ab43795 100644
--- a/src/routes/sentiment-tracker/+page.svelte
+++ b/src/routes/sentiment-tracker/+page.svelte
@@ -117,7 +117,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -137,7 +137,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="cramer-tracker"
@@ -156,7 +156,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/reddit-tracker"
diff --git a/src/routes/sitemap/+page.svelte b/src/routes/sitemap/+page.svelte
index ba370e1b..da51f02e 100644
--- a/src/routes/sitemap/+page.svelte
+++ b/src/routes/sitemap/+page.svelte
@@ -214,7 +214,7 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/pricing"
@@ -233,7 +233,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/donation"
@@ -252,7 +252,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/contact"
diff --git a/src/routes/stocks/+page.svelte b/src/routes/stocks/+page.svelte
index b8759e47..dfefb497 100644
--- a/src/routes/stocks/+page.svelte
+++ b/src/routes/stocks/+page.svelte
@@ -89,7 +89,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -109,7 +109,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/analysts"
@@ -128,7 +128,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/analysts/top-stocks"
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index 3a1bc07d..175e2978 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -106,7 +106,7 @@
           <aside class="hidden lg:block relative fixed w-1/4 ml-4">
             {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
               <div
-                class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+                class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
               >
                 <a
                   href="/pricing"
@@ -130,7 +130,7 @@
             {/if}
 
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/watchlist/stocks"}
@@ -149,7 +149,7 @@
             </div>
 
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/analysts/top-stocks"}
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
index 90dc8851..6eb99bd6 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
@@ -17,7 +17,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -37,7 +37,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/price-alert"}
@@ -56,7 +56,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/stock-screener"}
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
index ff8fb470..925f677c 100644
--- a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
@@ -20,7 +20,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
diff --git a/src/routes/terms-of-use/+page.svelte b/src/routes/terms-of-use/+page.svelte
index 9c4aa9c7..3813d5ef 100644
--- a/src/routes/terms-of-use/+page.svelte
+++ b/src/routes/terms-of-use/+page.svelte
@@ -380,7 +380,7 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/pricing"
@@ -399,7 +399,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/donation"
@@ -418,7 +418,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/contact"
diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte
index 69816ba9..31b29df0 100644
--- a/src/routes/watchlist/+layout.svelte
+++ b/src/routes/watchlist/+layout.svelte
@@ -74,7 +74,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -94,7 +94,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/price-alert"}
@@ -113,7 +113,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/stock-screener"}