diff --git a/src/lib/components/AIScore.svelte b/src/lib/components/AIScore.svelte
index bd89ebd3..28114df9 100644
--- a/src/lib/components/AIScore.svelte
+++ b/src/lib/components/AIScore.svelte
@@ -26,7 +26,7 @@
 
           <label
             for="scoreInfo"
-            class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300"
+            class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-secondary duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300"
           >
             <svg
               class="h-[8px] w-[8px]"
@@ -192,7 +192,7 @@
     >
       <!-- head -->
       <thead>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <th class="bg-[#09090B] text-white text-sm font-semibold">
             Bullish Probability
           </th>
@@ -206,53 +206,53 @@
       </thead>
       <tbody>
         <!-- row 1 -->
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+80% </td>
           <td class="text-sm sm:text-[1rem]">Strong Buy</td>
           <td class="text-sm sm:text-[1rem] text-end">10</td>
         </tr>
         <!-- row 2 -->
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+75%</td>
           <td class="text-sm sm:text-[1rem]">Buy</td>
           <td class="text-sm sm:text-[1rem] text-end">9</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+70%</td>
           <td class="text-sm sm:text-[1rem]">Buy</td>
           <td class="text-sm sm:text-[1rem] text-end">8</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]"> +60% </td>
           <td class="text-sm sm:text-[1rem]">Buy</td>
           <td class="text-sm sm:text-[1rem] text-end">7</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+50%</td>
           <td class="text-sm sm:text-[1rem]">Hold</td>
           <td class="text-sm sm:text-[1rem] text-end">6</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+45%</td>
           <td class="text-sm sm:text-[1rem]">Hold</td>
           <td class="text-sm sm:text-[1rem] text-end">5</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+40%</td>
           <td class="text-sm sm:text-[1rem]">Hold</td>
           <td class="text-sm sm:text-[1rem] text-end">4</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+35%</td>
           <td class="text-sm sm:text-[1rem]">Sell</td>
           <td class="text-sm sm:text-[1rem] text-end">3</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+30%</td>
           <td class="text-sm sm:text-[1rem]">Sell</td>
           <td class="text-sm sm:text-[1rem] text-end">2</td>
         </tr>
-        <tr class="odd:bg-[#27272A]">
+        <tr class="odd:bg-secondary">
           <td class="text-sm sm:text-[1rem]">+20%</td>
           <td class="text-sm sm:text-[1rem]">Strong Sell</td>
           <td class="text-sm sm:text-[1rem] text-end">1</td>
diff --git a/src/lib/components/AddPortfolio.svelte b/src/lib/components/AddPortfolio.svelte
index 7fc4f101..e7783abe 100644
--- a/src/lib/components/AddPortfolio.svelte
+++ b/src/lib/components/AddPortfolio.svelte
@@ -98,7 +98,7 @@
         </div>
 
         <div
-          class="text-white text-sm border bg-[#313131] border-gray-800 p-3 rounded-md overflow-y-scroll h-56"
+          class="text-white text-sm border bg-secondary border-gray-800 p-3 rounded-md overflow-y-scroll h-56"
         >
           <ol class="text-white list-decimal ml-3 p-2">
             <li class="p-1">
diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index a818ebdf..8c7407b1 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -774,21 +774,21 @@
               <thead class="">
                 <tr class="">
                   <th
-                    class="bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm text-start"
+                    class="bg-primary border-b border-[#000] text-white font-semibold text-sm text-start"
                     >Fiscal Year</th
                   >
                   {#each xData as item}
                     <td
-                      class="z-20 bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm text-end bg-[#09090B]"
+                      class="z-20 bg-primary border-b border-[#000] text-white font-semibold text-sm text-end bg-[#09090B]"
                       >{"FY" + item}</td
                     >
                   {/each}
                 </tr>
               </thead>
               <tbody class="shadow-md">
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-primary border-b border-[#27272A]"
                   >
                     Revenue
                   </th>
@@ -805,9 +805,9 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="bg-[#27272A] whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
                   >
                     Revenue Growth
                   </th>
@@ -840,9 +840,9 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-[#27272A] border-b-[#09090B]">
+                <tr class="bg-primary border-b-[#09090B]">
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-primary border-b border-[#27272A]"
                   >
                     EPS
                   </th>
@@ -859,9 +859,9 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="bg-[#27272A] whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
                   >
                     EPS Growth
                   </th>
@@ -893,9 +893,9 @@
                     </td>
                   {/each}
                 </tr>
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-primary border-b border-[#27272A]"
                   >
                     Net Income
                   </th>
@@ -912,9 +912,9 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="bg-[#27272A] whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
                   >
                     Net Income Growth
                   </th>
@@ -947,9 +947,9 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-primary border-b border-[#27272A]"
                   >
                     EBITDA
                   </th>
@@ -966,9 +966,9 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="bg-[#27272A] whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
                   >
                     EBITDA Growth
                   </th>
@@ -1001,9 +1001,9 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-[#27272A] border-b-[#27272A]">
+                <tr class="bg-primary border-b-[#27272A]">
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-primary border-b border-[#27272A]"
                     >No. Analysts</th
                   >
                   {#each tableCombinedRevenue as item}
diff --git a/src/lib/components/AnalystInsight.svelte b/src/lib/components/AnalystInsight.svelte
index 852042f0..2db1222e 100644
--- a/src/lib/components/AnalystInsight.svelte
+++ b/src/lib/components/AnalystInsight.svelte
@@ -76,7 +76,7 @@
                     data?.getAnalystInsight?.date,
                   )
                     ? 'bg-[#F9AB00] bg-opacity-[0.1]'
-                    : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4"
+                    : 'bg-primary'} shadow-lg h-full pl-3 pt-2 pb-4"
                 >
                   <div class="flex flex-col items-start">
                     <div class="flex flex-row items-start w-full pt-2">
diff --git a/src/lib/components/BorrowedShare.svelte b/src/lib/components/BorrowedShare.svelte
index cd095d83..ec393447 100644
--- a/src/lib/components/BorrowedShare.svelte
+++ b/src/lib/components/BorrowedShare.svelte
@@ -80,7 +80,7 @@
         <div class="flex justify-start items-center w-full m-auto">
           <table class="w-full" data-test="statistics-table">
             <tbody>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Date</span>
                 </td>
@@ -90,7 +90,7 @@
                   {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Fee Range</span>
                 </td>
@@ -100,7 +100,7 @@
                   {lowestFee + "%" + "-" + highestFee + "%"}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Total Available Shares</span>
                 </td>
diff --git a/src/lib/components/BullBearSay.svelte b/src/lib/components/BullBearSay.svelte
index ba5901e3..5a6f4b94 100644
--- a/src/lib/components/BullBearSay.svelte
+++ b/src/lib/components/BullBearSay.svelte
@@ -76,7 +76,7 @@
         class="inline-flex justify-center sm:justify-start w-full rounded-md sm:w-auto"
       >
         <div
-          class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+          class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
         >
           {#each tabs as item, i}
             <button
diff --git a/src/lib/components/ClinicalTrial.svelte b/src/lib/components/ClinicalTrial.svelte
index 74d2b8be..d6801be8 100644
--- a/src/lib/components/ClinicalTrial.svelte
+++ b/src/lib/components/ClinicalTrial.svelte
@@ -53,7 +53,7 @@
             </thead>
             <tbody>
               {#each displayList as item,index}
-              <tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
+              <tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-secondary sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
                
                   <td class="text-white font-medium whitespace-nowrap">
                    {item["Interventions"]?.length === 0 ? '-' : item["Interventions"]?.length > charNumber ? formatString(item["Interventions"]?.slice(0,charNumber)) + "..." : formatString(item["Interventions"])}
@@ -130,11 +130,11 @@
 
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label
-    class="modal-box w-full relative bg-[#27272A] h-auto max-h-[900px] overflow-y-scroll"
+    class="modal-box w-full relative bg-primary h-auto max-h-[900px] overflow-y-scroll"
   >
     <label
       for="clinicalDesktopModal"
-      class="cursor-pointer absolute right-5 top-2 bg-[#27272A] text-2xl text-white"
+      class="cursor-pointer absolute right-5 top-2 bg-primary text-2xl text-white"
     >
       ✕
     </label>
@@ -142,70 +142,70 @@
     <h3 class="text-xl font-semibold text-white mt-10">
       Title: {trialTitle}
     </h3>
-    <p class="py-4 text-gray-200 bg-[#27272A] w-full">
+    <p class="py-4 text-gray-200 bg-primary w-full">
       <span class="font-semibold text-white">Brief Summary:</span>
       {trialSummary}
     </p>
 
     <table
-      class="table table-sm table-compact bg-[#27272A] w-full mt-5 mb-10 text-white"
+      class="table table-sm table-compact bg-primary w-full mt-5 mb-10 text-white"
     >
       <tbody>
         <!-- row 1 -->
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">NCT Number</td>
-          <td class="bg-[#27272A]">{trialId}</td>
+          <td class="bg-primary font-semibold">NCT Number</td>
+          <td class="bg-primary">{trialId}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Start Date</td>
-          <td class="bg-[#27272A]">{trialStart}</td>
+          <td class="bg-primary font-semibold">Start Date</td>
+          <td class="bg-primary">{trialStart}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">End Date</td>
-          <td class="bg-[#27272A]">{trialEnd}</td>
+          <td class="bg-primary font-semibold">End Date</td>
+          <td class="bg-primary">{trialEnd}</td>
         </tr>
         <!-- row 2 -->
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Study Status</td>
-          <td class="bg-[#27272A]">{trialStage}</td>
+          <td class="bg-primary font-semibold">Study Status</td>
+          <td class="bg-primary">{trialStage}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Phase Status</td>
-          <td class="bg-[#27272A]">{trialPhase}</td>
+          <td class="bg-primary font-semibold">Phase Status</td>
+          <td class="bg-primary">{trialPhase}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Study Results</td>
-          <td class="bg-[#27272A]">{trialResult}</td>
+          <td class="bg-primary font-semibold">Study Results</td>
+          <td class="bg-primary">{trialResult}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Sex</td>
-          <td class="bg-[#27272A]">{formatString(trialSex)}</td>
+          <td class="bg-primary font-semibold">Sex</td>
+          <td class="bg-primary">{formatString(trialSex)}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Age</td>
-          <td class="bg-[#27272A]"
+          <td class="bg-primary font-semibold">Age</td>
+          <td class="bg-primary"
             >{formatString(trialAge)?.replace("Older_adult", "Older Adult")}</td
           >
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Sponsor</td>
-          <td class="bg-[#27272A]">{trialSponsor}</td>
+          <td class="bg-primary font-semibold">Sponsor</td>
+          <td class="bg-primary">{trialSponsor}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Enrollment</td>
-          <td class="bg-[#27272A]">{trialEnrollment}</td>
+          <td class="bg-primary font-semibold">Enrollment</td>
+          <td class="bg-primary">{trialEnrollment}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Study Type</td>
-          <td class="bg-[#27272A]">{trialStudyType}</td>
+          <td class="bg-primary font-semibold">Study Type</td>
+          <td class="bg-primary">{trialStudyType}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Funder Type</td>
-          <td class="bg-[#27272A]">{trialFunderType}</td>
+          <td class="bg-primary font-semibold">Funder Type</td>
+          <td class="bg-primary">{trialFunderType}</td>
         </tr>
         <tr class="border-b border-slate-700">
-          <td class="bg-[#27272A] font-semibold">Website</td>
-          <td class="bg-[#27272A]"
+          <td class="bg-primary font-semibold">Website</td>
+          <td class="bg-primary"
             ><a
               class="text-blue-400 sm:hover:text-white"
               href={trialLink}
@@ -250,49 +250,49 @@
         >
           <tbody>
             <!-- row 1 -->
-            <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+            <tr class="border-b border-slate-700 odd:bg-secondary">
               <td class="font-semibold w-full">NCT Number</td>
               <td class="">{trialId}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Start Date</td>
               <td class="">{trialStart}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">End Date</td>
               <td class="">{trialEnd}</td>
             </tr>
             <!-- row 2 -->
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Study Status</td>
               <td class="">{trialStage}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Phase Status</td>
               <td class="">{trialPhase}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Study Results</td>
               <td class="">{trialResult}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Sex</td>
               <td class="">{formatString(trialSex)}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Age</td>
               <td class=""
@@ -303,31 +303,31 @@
               >
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Sponsor</td>
               <td class="">{trialSponsor}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Enrollment</td>
               <td class="">{trialEnrollment}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Study Type</td>
               <td class="">{trialStudyType}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Funder Type</td>
               <td class="">{trialFunderType}</td>
             </tr>
             <tr
-              class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
+              class="border-b border-slate-700 odd:bg-secondary even:bg-[#09090B]"
             >
               <td class="font-semibold">Website</td>
               <td class=""
diff --git a/src/lib/components/Correlation.svelte b/src/lib/components/Correlation.svelte
index 1d752269..51fdf37a 100644
--- a/src/lib/components/Correlation.svelte
+++ b/src/lib/components/Correlation.svelte
@@ -103,7 +103,7 @@
           >
             {#each showFullStats ? rawData : rawData?.slice(0, 3) as item, index}
               <div
-                class="shadow-lg bg-[#27272A] w-full rounded-md p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
+                class="shadow-lg bg-primary w-full rounded-md p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
                 0
                   ? 'mt-4'
                   : ''} {index === 2 && !showFullStats && rawData?.length > 2
diff --git a/src/lib/components/CountrySegmentation.svelte b/src/lib/components/CountrySegmentation.svelte
index 3b06566e..88a89f8c 100644
--- a/src/lib/components/CountrySegmentation.svelte
+++ b/src/lib/components/CountrySegmentation.svelte
@@ -72,7 +72,7 @@
               <!--Start Progress-->
               {#each showFullStats ? geographicList : geographicList?.slice(0, 3) as item, index}
                 <div
-                  class="shadow-lg bg-[#27272A] w-full rounded-md p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
+                  class="shadow-lg bg-primary w-full rounded-md p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
                   0
                     ? 'mt-4'
                     : ''} {index === 2 &&
diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte
index f4459352..96a4097c 100644
--- a/src/lib/components/DarkPool.svelte
+++ b/src/lib/components/DarkPool.svelte
@@ -87,7 +87,7 @@
         <div class="flex justify-start items-center w-full m-auto">
           <table class="w-full" data-test="statistics-table">
             <tbody>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Date</span>
                 </td>
@@ -98,7 +98,7 @@
                 </td>
               </tr>
               <tr
-                class="border-y border-gray-800 whitespace-nowrap odd:bg-[#27272A]"
+                class="border-y border-gray-800 whitespace-nowrap odd:bg-secondary"
               >
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Total Volume</span>
@@ -110,7 +110,7 @@
                 </td>
               </tr>
               <tr
-                class="border-y border-gray-800 whitespace-nowrap odd:bg-[#27272A]"
+                class="border-y border-gray-800 whitespace-nowrap odd:bg-secondary"
               >
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Avg. Short % of Volume</span>
diff --git a/src/lib/components/DownloadData.svelte b/src/lib/components/DownloadData.svelte
index b1235055..e42ebbbb 100644
--- a/src/lib/components/DownloadData.svelte
+++ b/src/lib/components/DownloadData.svelte
@@ -55,7 +55,7 @@
 
 <Button
   on:click={() => exportData("csv")}
-  class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+  class="ml-2 w-full border-gray-600 border bg-[#09090B] 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
diff --git a/src/lib/components/ESGCard.svelte b/src/lib/components/ESGCard.svelte
index 2c429683..db53fdbb 100644
--- a/src/lib/components/ESGCard.svelte
+++ b/src/lib/components/ESGCard.svelte
@@ -181,7 +181,7 @@
         class="mt-5 flex flex-col m-auto items-center rounded-md w-full mb-16 p-3"
       >
         <div
-          class="shadow-lg bg-[#27272A] w-full rounded-md p-4 mb-5 flex flex-row items-center"
+          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
         >
           <div class="flex flex-col -mt-2 w-full">
             <div class="flex flex-row items-center w-full">
@@ -205,7 +205,7 @@
         </div>
 
         <div
-          class="shadow-lg bg-[#27272A] w-full rounded-md p-4 mb-5 flex flex-row items-center"
+          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
         >
           <div class="flex flex-col -mt-2 w-full">
             <div class="flex flex-row items-center w-full">
@@ -229,7 +229,7 @@
         </div>
 
         <div
-          class="shadow-lg bg-[#27272A] w-full rounded-md p-4 mb-5 flex flex-row items-center"
+          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
         >
           <div class="flex flex-col -mt-2 w-full">
             <div class="flex flex-row items-center w-full">
@@ -253,7 +253,7 @@
         </div>
 
         <div
-          class="shadow-lg bg-[#27272A] w-full rounded-md p-4 mb-5 flex flex-row items-center"
+          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
         >
           <div class="flex flex-col -mt-2 w-full">
             <div class="flex flex-row items-center w-full">
diff --git a/src/lib/components/ExecutiveCard.svelte b/src/lib/components/ExecutiveCard.svelte
index 9f3ea863..09f45fa0 100644
--- a/src/lib/components/ExecutiveCard.svelte
+++ b/src/lib/components/ExecutiveCard.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {executiveClicked, stockTicker, clientSideCache, } from '$lib/store';
-	import { afterUpdate } from 'svelte';
+  import { executiveClicked, stockTicker, clientSideCache } from "$lib/store";
+  import { afterUpdate } from "svelte";
 
-  
   //export let executiveList;
   let executiveList = [];
 
@@ -11,170 +10,192 @@
 
   let numberOfFemales = 0;
   let numberOfMales = 0;
-  
-  
-async function fetchData() {
 
-  if($clientSideCache[$stockTicker]?.getExecutives)
-  {
-    executiveList = $clientSideCache[$stockTicker]?.getExecutives;
-  }
-  else {
-    const postData = { ticker: $stockTicker, path: 'get-executives'};
-    const response = await fetch('/api/ticker-data', {
-    method: 'POST',
-    headers: {
-        "Content-Type": "application/json"
-    },
-    body: JSON.stringify(postData)
-    });
-  
-    executiveList =  await response.json();
-    $clientSideCache[$stockTicker].getExecutives = executiveList;
-  }
-  
-};
+  async function fetchData() {
+    if ($clientSideCache[$stockTicker]?.getExecutives) {
+      executiveList = $clientSideCache[$stockTicker]?.getExecutives;
+    } else {
+      const postData = { ticker: $stockTicker, path: "get-executives" };
+      const response = await fetch("/api/ticker-data", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
 
-
-
-afterUpdate(async() => {
-  if($stockTicker && typeof window !== 'undefined' && $executiveClicked === true) {
-    $executiveClicked = false;
-    await fetchData()
-    for (const executive of executiveList) {
-      switch (executive?.gender) {
-        case 'female':
-          numberOfFemales++;
-          break;
-        case 'male':
-          numberOfMales++;
-          break;
-        // Handle other gender cases if needed
-        }
+      executiveList = await response.json();
+      $clientSideCache[$stockTicker].getExecutives = executiveList;
     }
+  }
+
+  afterUpdate(async () => {
+    if (
+      $stockTicker &&
+      typeof window !== "undefined" &&
+      $executiveClicked === true
+    ) {
+      $executiveClicked = false;
+      await fetchData();
+      for (const executive of executiveList) {
+        switch (executive?.gender) {
+          case "female":
+            numberOfFemales++;
+            break;
+          case "male":
+            numberOfMales++;
+            break;
+          // Handle other gender cases if needed
+        }
+      }
 
       isLoaded = true;
     }
-})
-
-
+  });
 </script>
 
-
-<div class="space-y-3 sm:pt-5">  
+<div class="space-y-3 sm:pt-5">
   <div class="bg-[#000] h-auto w-screen">
     <!--Start Header-->
-    <div class="w-full  p-1 flex flex-col items-center pb-5 h-auto">
+    <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
       <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
         Executives
       </h2>
 
-      <div class="{!isLoaded ? 'hidden' : ''} flex flex-col items-center mt-10 w-full">
-        <span class="text-white text-[1rem]">
-          Female/Total Ratio
-        </span>
+      <div
+        class="{!isLoaded
+          ? 'hidden'
+          : ''} flex flex-col items-center mt-10 w-full"
+      >
+        <span class="text-white text-[1rem]"> Female/Total Ratio </span>
 
         <div class="flex flex-row justify-center items-center w-full mt-5">
-
-
           <div class="flex flex-row items-center ml-5">
-            <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-            <div class="w-3 h-3 bg-[#0FC008] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+            <div
+              class="h-full bg-gray-800 transform -translate-x-1/2"
+              aria-hidden="true"
+            ></div>
+            <div
+              class="w-3 h-3 bg-[#0FC008] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2"
+              aria-hidden="true"
+            ></div>
             <span class="text-white text-sm font-medium inline-block">
-                Female <span class="font-medium text-[0.95rem]">({numberOfFemales})</span>
+              Female <span class="font-medium text-[0.95rem]"
+                >({numberOfFemales})</span
+              >
             </span>
           </div>
 
-
           <span class="text-white font-medium text-3xl m-auto">
-            {numberOfFemales === 0 ? 0 : (numberOfFemales/(numberOfFemales+numberOfMales) *100)?.toFixed(2)}%
+            {numberOfFemales === 0
+              ? 0
+              : (
+                  (numberOfFemales / (numberOfFemales + numberOfMales)) *
+                  100
+                )?.toFixed(2)}%
           </span>
 
           <div class="flex flex-row items-center mr-5">
-            <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-            <div class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+            <div
+              class="h-full bg-gray-800 transform -translate-x-1/2"
+              aria-hidden="true"
+            ></div>
+            <div
+              class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2"
+              aria-hidden="true"
+            ></div>
             <span class="text-white text-sm font-medium inline-block">
-              Male <span class="font-medium text-[0.95rem]">({numberOfMales})</span>
+              Male <span class="font-medium text-[0.95rem]"
+                >({numberOfMales})</span
+              >
             </span>
           </div>
-          
-          
         </div>
       </div>
     </div>
     <!--End Header-->
     {#if isLoaded}
-
-    {#if executiveList?.length !== 0}
-      <div class="mt-5 w-full">
+      {#if executiveList?.length !== 0}
+        <div class="mt-5 w-full">
           {#each executiveList as item}
-
-          <!--Start Item-->
-          <div class="flex flex-row items-center pl-4 pr-4 w-full mb-3">
-                
-            <div class="w-full rounded-md bg-[#27272A] h-auto pb-3 pl-3 pt-3">
-                <div class="flex flex-row items-center relative">  
-                    <div class="flex flex-col">
-                      <div class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-sm w-56">
-                        <span>
-                          {item?.name}
+            <!--Start Item-->
+            <div class="flex flex-row items-center pl-4 pr-4 w-full mb-3">
+              <div class="w-full rounded-md bg-primary h-auto pb-3 pl-3 pt-3">
+                <div class="flex flex-row items-center relative">
+                  <div class="flex flex-col">
+                    <div
+                      class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-sm w-56"
+                    >
+                      <span>
+                        {item?.name}
                         {#if item?.yearBorn !== null}
-                        , {(currentYear-item.yearBorn)}
+                          , {currentYear - item.yearBorn}
                         {/if}
                       </span>
-
-                      </div>
-                        <span class="text-gray-300 text-sm w-48">
-                        {item?.title}
-                        </span>
                     </div>
+                    <span class="text-gray-300 text-sm w-48">
+                      {item?.title}
+                    </span>
+                  </div>
 
-                    {#if item?.gender === 'male'}
-                    <div class="flex flex-row items-center ml-auto absolute right-3 top-0">
-                      <div class="h-full bg-[#27272A] transform -translate-x-1/2" aria-hidden="true"></div>
-                      <div class="w-2 h-2 bg-[#FF2F1F] box-content rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+                  {#if item?.gender === "male"}
+                    <div
+                      class="flex flex-row items-center ml-auto absolute right-3 top-0"
+                    >
+                      <div
+                        class="h-full bg-primary transform -translate-x-1/2"
+                        aria-hidden="true"
+                      ></div>
+                      <div
+                        class="w-2 h-2 bg-[#FF2F1F] box-content rounded-full transform -translate-x-1/2"
+                        aria-hidden="true"
+                      ></div>
                       <span class="text-white text-[0.85rem] inline-block">
                         Male
                       </span>
                     </div>
-                    {:else if item?.gender === 'female'}
-                    <div class="flex flex-row items-center ml-auto absolute right-3 top-0">
-                      <div class="h-full bg-[#27272A] transform -translate-x-1/2 " aria-hidden="true"></div>
-                      <div class="w-2 h-2 bg-[#0FC008] box-content rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+                  {:else if item?.gender === "female"}
+                    <div
+                      class="flex flex-row items-center ml-auto absolute right-3 top-0"
+                    >
+                      <div
+                        class="h-full bg-primary transform -translate-x-1/2"
+                        aria-hidden="true"
+                      ></div>
+                      <div
+                        class="w-2 h-2 bg-[#0FC008] box-content rounded-full transform -translate-x-1/2"
+                        aria-hidden="true"
+                      ></div>
                       <span class="text-white text-[0.85rem] inline-block">
                         Female
                       </span>
                     </div>
-                    {/if}
-
+                  {/if}
                 </div>
-
+              </div>
             </div>
-          </div>
-        <!--End Item-->
+            <!--End Item-->
           {/each}
-      </div>
+        </div>
       {:else}
-      <div class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto">
+        <div
+          class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto"
+        >
           No data available
         </div>
-
       {/if}
-      
     {:else}
-    <div class="flex justify-center items-center h-80">
-      <div class="relative">
-        <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <span class="loading loading-spinner loading-md text-gray-400"></span>
-        </label>
+      <div class="flex justify-center items-center h-80">
+        <div class="relative">
+          <label
+            class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          >
+            <span class="loading loading-spinner loading-md text-gray-400"
+            ></span>
+          </label>
+        </div>
       </div>
-    </div>
-    
-    
     {/if}
   </div>
-
-  </div>
-  <!--End Similar Stocks Card -->    
-  
-  
\ No newline at end of file
+</div>
+<!--End Similar Stocks Card -->
diff --git a/src/lib/components/FOMCImpact.svelte b/src/lib/components/FOMCImpact.svelte
index 915031d8..32611352 100644
--- a/src/lib/components/FOMCImpact.svelte
+++ b/src/lib/components/FOMCImpact.svelte
@@ -240,7 +240,7 @@
               <tbody>
                 {#each showFullStats ? tableList?.slice(0, 10) : tableList?.slice(0, 3) as item, index}
                   <tr
-                    class="border-y border-gray-800 odd:bg-[#27272A] {index ===
+                    class="border-y border-gray-800 odd:bg-secondary {index ===
                       2 &&
                     !showFullStats &&
                     tableList?.length > 3
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index 7b61beb3..4d015f3f 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -263,7 +263,7 @@
         <div class="flex justify-start items-center w-full m-auto">
           <table class="w-full" data-test="statistics-table">
             <tbody>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Date</span>
                 </td>
@@ -273,7 +273,7 @@
                   {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Price Range</span>
                 </td>
@@ -283,7 +283,7 @@
                   {lowestPrice + "-" + highestPrice}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Latest FTD</span>
                 </td>
diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index ef446e4b..4e8e5977 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -135,7 +135,7 @@
 
     <div class="p-2">
       <div
-        class="bg-[#313131] w-full min-w-24 sm:w-full relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+        class="bg-secondary w-full min-w-24 sm:w-full relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
       >
         {#each tabs as item, i}
           <button
@@ -162,7 +162,7 @@
 
     <div class="p-2 mt-5 w-full h-[200px] max-h-[1000px]">
       <textarea
-        class="max-h-[1000px] h-[200px] textarea textarea-bordered placeholder-gray-300 w-full bg-[#27272A] ring-1 text-white border border-gray-600"
+        class="max-h-[1000px] h-[200px] textarea textarea-bordered placeholder-gray-300 w-full bg-primary ring-1 text-white border border-gray-600"
         placeholder="Your feedback..."
         value={inputValue}
         on:input={handleInput}
diff --git a/src/lib/components/FinancialTable.svelte b/src/lib/components/FinancialTable.svelte
index c77a6a08..b7730cf0 100644
--- a/src/lib/components/FinancialTable.svelte
+++ b/src/lib/components/FinancialTable.svelte
@@ -5,7 +5,7 @@
 </script>
 
 {#each fields as { label, key }}
-  <tr class="text-white odd:bg-[#27272A] whitespace-nowrap">
+  <tr class="text-white odd:bg-secondary whitespace-nowrap">
     <td
       class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
     >
diff --git a/src/lib/components/FundamentalAnalysis.svelte b/src/lib/components/FundamentalAnalysis.svelte
index 458965de..c373a9f5 100644
--- a/src/lib/components/FundamentalAnalysis.svelte
+++ b/src/lib/components/FundamentalAnalysis.svelte
@@ -32,7 +32,7 @@
           >
             <!--Start Flow Sentiment-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm"
@@ -68,7 +68,7 @@
             <!--End Flow Sentiment-->
             <!--Start Put/Call-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Accuracy</span>
@@ -130,7 +130,7 @@
 
             <!--Start Precision-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Precision</span>
diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte
index 53bb5569..d41254dd 100644
--- a/src/lib/components/ImpliedVolatility.svelte
+++ b/src/lib/components/ImpliedVolatility.svelte
@@ -31,7 +31,7 @@
           </div>
 
           <select
-            class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+            class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
             on:change={changeStatement}
           >
             <option disabled>Choose IV Period</option>
@@ -112,7 +112,7 @@
           <div class="flex justify-start items-center w-full m-auto">
             <table class="w-full" data-test="statistics-table">
               <tbody>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>Date</span>
                   </td>
@@ -122,7 +122,7 @@
                     {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
                   </td>
                 </tr>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>IV Range</span>
                   </td>
@@ -132,7 +132,7 @@
                     {lowestIV + "%" + "-" + highestIV + "%"}
                   </td>
                 </tr>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>RV Range</span>
                   </td>
diff --git a/src/lib/components/Indicator.svelte b/src/lib/components/Indicator.svelte
index 553db080..977d018d 100644
--- a/src/lib/components/Indicator.svelte
+++ b/src/lib/components/Indicator.svelte
@@ -4,7 +4,6 @@
   import { onMount } from "svelte";
   import { indicatorData } from "$lib/store";
 
-
   export let data;
   export let checkedItems;
   export let ruleOfList;
@@ -144,7 +143,7 @@
         );
         downloadWorker = new DownloadWorker.default();
         downloadWorker.onmessage = handleDownloadMessage;
-        console.log('initialize')
+        console.log("initialize");
       }
     } catch (e) {
       console.log(e);
@@ -156,7 +155,7 @@
   <DropdownMenu.Trigger asChild let:builder>
     <Button
       builders={[builder]}
-      class="sm:ml-auto min-w-[110px] w-full sm:w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md truncate"
+      class="sm:ml-auto min-w-[110px] w-full sm:w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md truncate"
     >
       <span class="truncate text-white text-sm sm:text-[1rem]">Indicators</span>
       <svg
@@ -224,7 +223,7 @@
     <DropdownMenu.Group class="pb-2">
       <!-- Added padding to avoid overlapping with Reset button -->
       {#each searchQuery?.length !== 0 ? testList : allRows as item}
-        <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
+        <DropdownMenu.Item class="sm:hover:bg-primary">
           <div class="flex items-center">
             {#if data?.user?.tier === "Pro" || excludedRules?.has(item?.rule)}
               <label
diff --git a/src/lib/components/IndustryTable.svelte b/src/lib/components/IndustryTable.svelte
index 9084ce65..ea8c8c66 100644
--- a/src/lib/components/IndustryTable.svelte
+++ b/src/lib/components/IndustryTable.svelte
@@ -97,7 +97,7 @@
       {#each displayList as item}
         <!-- row -->
         <tr
-          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
         >
           <td
             class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index 9f1aa608..4af53056 100644
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@@ -129,7 +129,7 @@
     {#if type === "file"}
       <label
         for={id}
-        class="flex flex-col items-center bg-[#313131] rounded-md cursor-pointer {inputValue.length ===
+        class="flex flex-col items-center bg-secondary rounded-md cursor-pointer {inputValue.length ===
         0
           ? 'p-10'
           : ''} {isHovering ? 'ring-2' : ''}"
@@ -229,7 +229,7 @@
       </label>
     {:else}
       <input
-        class="input input-bordered w-full bg-[#313131] placeholder-gray-300 text-white whitespace-normal ring-2"
+        class="input input-bordered w-full bg-secondary placeholder-gray-300 text-white whitespace-normal ring-2"
         {type}
         {placeholder}
         {required}
diff --git a/src/lib/components/LoginPopup.svelte b/src/lib/components/LoginPopup.svelte
index f7775e92..76d61252 100644
--- a/src/lib/components/LoginPopup.svelte
+++ b/src/lib/components/LoginPopup.svelte
@@ -1,4 +1,3 @@
-
 <script lang="ts">
   import { enhance } from "$app/forms";
   import toast from "svelte-french-toast";
@@ -228,7 +227,7 @@ const output = await response.json();
                     on:click={() => (oauthLoading = !oauthLoading)}
                     on:mouseenter={handleHoverGoogle}
                     on:mouseleave={handleHoverGoogle}
-                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                   >
                     <svg
                       class="{isHoveredGoogle
@@ -277,7 +276,7 @@ const output = await response.json();
                     on:click={() => (oauthLoading = !oauthLoading)}
                     on:mouseenter={handleHoverDiscord}
                     on:mouseleave={handleHoverDiscord}
-                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                   >
                     <svg
                       class="{isHoveredDiscord
@@ -811,7 +810,7 @@ const output = await response.json();
                     on:click={() => (oauthLoading = !oauthLoading)}
                     on:mouseenter={handleHoverGithub}
                     on:mouseleave={handleHoverGithub}
-                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                   >
                     <svg
                       class="{isHoveredGithub
@@ -922,7 +921,7 @@ const output = await response.json();
                     on:click={() => (oauthLoading = !oauthLoading)}
                     on:mouseenter={handleHoverGoogle}
                     on:mouseleave={handleHoverGoogle}
-                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                   >
                     <svg
                       class="{isHoveredGoogle
@@ -971,7 +970,7 @@ const output = await response.json();
                     on:click={() => (oauthLoading = !oauthLoading)}
                     on:mouseenter={handleHoverDiscord}
                     on:mouseleave={handleHoverDiscord}
-                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                   >
                     <svg
                       class="{isHoveredDiscord
@@ -1505,7 +1504,7 @@ const output = await response.json();
                     on:click={() => (oauthLoading = !oauthLoading)}
                     on:mouseenter={handleHoverGithub}
                     on:mouseleave={handleHoverGithub}
-                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                   >
                     <svg
                       class="{isHoveredGithub
@@ -1637,7 +1636,7 @@ const output = await response.json();
                 <div class="w-full max-w-lg pt-5 m-auto pb-5">
                   <button
                     type="submit"
-                    class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-md m-auto text-white font-semibold text-md"
+                    class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-secondary text-white btn-md w-full rounded-md m-auto text-white font-semibold text-md"
                   >
                     Login
                   </button>
@@ -1655,7 +1654,7 @@ const output = await response.json();
                       on:click={() => (oauthLoading = !oauthLoading)}
                       on:mouseenter={handleHoverGoogle}
                       on:mouseleave={handleHoverGoogle}
-                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                     >
                       <svg
                         class="{isHoveredGoogle
@@ -1704,7 +1703,7 @@ const output = await response.json();
                       on:click={() => (oauthLoading = !oauthLoading)}
                       on:mouseenter={handleHoverDiscord}
                       on:mouseleave={handleHoverDiscord}
-                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                     >
                       <svg
                         class="{isHoveredDiscord
@@ -2238,7 +2237,7 @@ const output = await response.json();
                       on:click={() => (oauthLoading = !oauthLoading)}
                       on:mouseenter={handleHoverGithub}
                       on:mouseleave={handleHoverGithub}
-                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                     >
                       <svg
                         class="{isHoveredGithub
@@ -2319,7 +2318,7 @@ const output = await response.json();
                 <div class="w-full max-w-lg pt-5 m-auto pb-3">
                   <button
                     type="submit"
-                    class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-md m-auto font-semibold text-md"
+                    class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-secondary text-white btn-md w-full rounded-md m-auto font-semibold text-md"
                   >
                     Register
                   </button>
@@ -2338,7 +2337,7 @@ const output = await response.json();
                       on:click={() => (oauthLoading = !oauthLoading)}
                       on:mouseenter={handleHoverGoogle}
                       on:mouseleave={handleHoverGoogle}
-                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                     >
                       <svg
                         class="{isHoveredGoogle
@@ -2387,7 +2386,7 @@ const output = await response.json();
                       on:click={() => (oauthLoading = !oauthLoading)}
                       on:mouseenter={handleHoverDiscord}
                       on:mouseleave={handleHoverDiscord}
-                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                     >
                       <svg
                         class="{isHoveredDiscord
@@ -2921,7 +2920,7 @@ const output = await response.json();
                       on:click={() => (oauthLoading = !oauthLoading)}
                       on:mouseenter={handleHoverGithub}
                       on:mouseleave={handleHoverGithub}
-                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
                     >
                       <svg
                         class="{isHoveredGithub
diff --git a/src/lib/components/MarketMaker.svelte b/src/lib/components/MarketMaker.svelte
index cf63a6c3..9a935f63 100644
--- a/src/lib/components/MarketMaker.svelte
+++ b/src/lib/components/MarketMaker.svelte
@@ -88,7 +88,7 @@
         <div class="flex justify-start items-center w-full m-auto">
           <table class="w-full" data-test="statistics-table">
             <tbody>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Date</span>
                 </td>
@@ -98,7 +98,7 @@
                   {formatDateRange(historyData?.slice(-1)?.at(0)?.date)}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Total Notional Sum</span>
                 </td>
@@ -110,7 +110,7 @@
                   )}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Total Trade Count</span>
                 </td>
@@ -122,7 +122,7 @@
                   )}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Total Share Quantity</span>
                 </td>
@@ -173,7 +173,7 @@
             <tbody>
               {#each showFullStats ? topMarketMakers?.slice(0, 10) : topMarketMakers?.slice(0, 3) as item, index}
                 <tr
-                  class="border-y border-gray-800 odd:bg-[#27272A] {index ===
+                  class="border-y border-gray-800 odd:bg-secondary {index ===
                     2 &&
                   !showFullStats &&
                   topMarketMakers?.length > 3
diff --git a/src/lib/components/Markethour.svelte b/src/lib/components/Markethour.svelte
index e613373b..6b31eae4 100644
--- a/src/lib/components/Markethour.svelte
+++ b/src/lib/components/Markethour.svelte
@@ -51,17 +51,17 @@
 
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label
-    class="modal-box w-full relative bg-[#27272A] border border-gray-800 h-auto"
+    class="modal-box w-full relative bg-primary border border-gray-800 h-auto"
   >
     <label
       for="marketHour"
-      class="cursor-pointer absolute right-5 top-2 bg-[#27272A] text-2xl text-white"
+      class="cursor-pointer absolute right-5 top-2 bg-primary text-2xl text-white"
     >
       ✕
     </label>
 
     <h3 class="text-2xl font-bold text-white">Opening Hours</h3>
-    <p class="py-4 text-gray-200 bg-[#27272A] w-full">
+    <p class="py-4 text-gray-200 bg-primary w-full">
       The New York Stock Exchange, one of the largest stock exchanges in the
       world, operates on a regular trading schedule. Its trading hours are from <span
         class="text-white font-semibold underline">9:30</span
@@ -75,57 +75,57 @@
     </p>
 
     <table
-      class="table table-sm table-compact bg-[#27272A] w-full mt-5 mb-10 text-white"
+      class="table table-sm table-compact bg-primary w-full mt-5 mb-10 text-white"
     >
       <!-- head -->
       <thead>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
-          <th class="bg-[#27272A] text-white text-sm font-semibold">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
+          <th class="bg-primary text-white text-sm font-semibold">
             Exchange holidays
           </th>
-          <th class="bg-[#27272A] text-white text-sm font-semibold"> Date </th>
+          <th class="bg-primary text-white text-sm font-semibold"> Date </th>
         </tr>
       </thead>
       <tbody>
         <!-- row 1 -->
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold"> New Years Day</td>
           <td class="">01.01.2024</td>
         </tr>
         <!-- row 2 -->
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Martin Luther King, Jr. Day</td>
           <td class="">15.01.2024</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Washington's Birthday</td>
           <td class="">19.02.2024</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold"> Good Friday </td>
-          <td class="bg-[#27272A]">29.03.2024</td>
+          <td class="bg-primary">29.03.2024</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Memorial Day</td>
           <td class="">27.05.2024</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Juneteenth National Independence Day</td>
           <td class="">19.06.2024</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Independence Day</td>
           <td class="">04.07.2024</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Labor Day</td>
           <td class="">02.09.2024</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Thanksgiving Day</td>
           <td class="">28.11.2024</td>
         </tr>
-        <tr class="odd:bg-[#27272A]">
+        <tr class="odd:bg-secondary">
           <td class="font-semibold">Christmas</td>
           <td class="">25.12.2024</td>
         </tr>
diff --git a/src/lib/components/MobileCommentEditor.svelte b/src/lib/components/MobileCommentEditor.svelte
index e90a7c99..b8516154 100644
--- a/src/lib/components/MobileCommentEditor.svelte
+++ b/src/lib/components/MobileCommentEditor.svelte
@@ -254,7 +254,7 @@
       <!--Start Quill Editor-->
       <div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7">
         <div
-          class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#313131] text-white"
+          class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-secondary text-white"
         >
           <select class="ql-header" aria-label="Header" title="Header">
             <option selected></option>
@@ -266,7 +266,7 @@
         placeholder="Loading editor..."
         class="{loadingEditor
           ? 'hidden'
-          : ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#313131] text-white"
+          : ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-secondary text-white"
       ></textarea>
       <!--End Quill Editor-->
 
diff --git a/src/lib/components/NotificationBell.svelte b/src/lib/components/NotificationBell.svelte
index 8cdf38b0..f4deb605 100644
--- a/src/lib/components/NotificationBell.svelte
+++ b/src/lib/components/NotificationBell.svelte
@@ -15,7 +15,7 @@
   <a
     href="/notifications"
     on:click={toggle}
-    class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-md border-gray-600 ml-3 -mr-1"
+    class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-primary relative border p-2 rounded-md border-gray-600 ml-3 -mr-1"
   >
     <Bell class="h-[20px] w-[20px]" />
 
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index 3beefd7e..16a5a75f 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -154,7 +154,7 @@
     {#if isLoaded}
       <div class="flex flex-row items-end justify-between">
         <select
-          class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
+          class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-secondary"
           on:change={changeStatement}
         >
           <option disabled>Choose a time period</option>
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index c829b6a4..8e7f07a3 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -162,7 +162,7 @@
           >
             <!--Start Flow Sentiment-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm"
@@ -180,7 +180,7 @@
             <!--End Flow Sentiment-->
             <!--Start Put/Call-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm"
@@ -239,7 +239,7 @@
 
             <!--Start mape-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">MAPE</span>
diff --git a/src/lib/components/Pricing.svelte b/src/lib/components/Pricing.svelte
index 5f63d0d6..905628f3 100644
--- a/src/lib/components/Pricing.svelte
+++ b/src/lib/components/Pricing.svelte
@@ -244,7 +244,7 @@
 
       <!-- Pricing Card -->
       <div
-        class="sm:order-2 rounded-md box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#27272A]"
+        class="sm:order-2 rounded-md box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-primary"
       >
         <div class="{!mode ? 'hidden' : ''} ribbon ribbon-top-right">
           <span class="text-white">Discount</span>
diff --git a/src/lib/components/RatingsChart.svelte b/src/lib/components/RatingsChart.svelte
index 3ee9f306..345baa24 100644
--- a/src/lib/components/RatingsChart.svelte
+++ b/src/lib/components/RatingsChart.svelte
@@ -275,8 +275,8 @@
             <label
               on:click={() => (timePeriod = item)}
               class="px-4 py-2 {timePeriod === item
-                ? 'bg-[#27272A]'
-                : ''} sm:hover:bg-[#27272A] border border-gray-600 text-white rounded-md cursor-pointer"
+                ? 'bg-primary'
+                : ''} sm:hover:bg-primary border border-gray-600 text-white rounded-md cursor-pointer"
             >
               {item}
             </label>
@@ -305,7 +305,7 @@
     <div class="flex justify-center items-center h-80">
       <div class="relative">
         <label
-          class="bg-[#27272A] rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          class="bg-primary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
         >
           <span
             class="loading loading-spinner loading-md sm:loading-[1rem] text-gray-400"
diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte
index 30a2519f..bc6013f9 100644
--- a/src/lib/components/RetailVolume.svelte
+++ b/src/lib/components/RetailVolume.svelte
@@ -272,7 +272,7 @@
         <div class="flex justify-start items-center w-full m-auto mt-6">
           <table class="w-full" data-test="statistics-table">
             <tbody>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Date</span>
                 </td>
@@ -282,7 +282,7 @@
                   {formatDateRange(rawData?.lastDate)}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Volume in $</span>
                 </td>
@@ -292,7 +292,7 @@
                   {monthlyVolume}
                 </td>
               </tr>
-              <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+              <tr class="border-y border-gray-800 odd:bg-secondary">
                 <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                   <span>Retail Sentiment Range</span>
                 </td>
diff --git a/src/lib/components/RevenueSegmentation.svelte b/src/lib/components/RevenueSegmentation.svelte
index 80a22367..6b56835c 100644
--- a/src/lib/components/RevenueSegmentation.svelte
+++ b/src/lib/components/RevenueSegmentation.svelte
@@ -241,7 +241,7 @@
               <!--Start Progress-->
               {#each showFullStats ? geographicList : geographicList?.slice(0, 3) as item, index}
                 <div
-                  class="shadow-lg bg-[#27272A] w-full rounded-md p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
+                  class="shadow-lg bg-primary w-full rounded-md p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
                   0
                     ? 'mt-4'
                     : ''} {index === 2 &&
@@ -251,7 +251,7 @@
                     : ''}"
                 >
                   <div
-                    class="mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#27272A]"
+                    class="mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-primary"
                   >
                     {#if item?.name?.toLowerCase() === "europe"}
                       <svg
diff --git a/src/lib/components/SECFilingsCard.svelte b/src/lib/components/SECFilingsCard.svelte
index f7abd14d..38da46fe 100644
--- a/src/lib/components/SECFilingsCard.svelte
+++ b/src/lib/components/SECFilingsCard.svelte
@@ -120,9 +120,9 @@
       </h2>
 
       <div class="w-11/12 mt-5">
-        <div class="relative right-0 bg-[#27272A] rounded-md">
+        <div class="relative right-0 bg-primary rounded-md">
           <Tabs.Root value="eightK" class="w-full">
-            <Tabs.List class="grid w-full grid-cols-3 bg-[#27272A]">
+            <Tabs.List class="grid w-full grid-cols-3 bg-primary">
               <Tabs.Trigger on:click={() => changeSECType("8-K")} value="eightK"
                 >8-K</Tabs.Trigger
               >
@@ -143,7 +143,7 @@
         <div class="mt-5 w-full">
           {#each displayList as item}
             <div
-              class="flex flex-col justify-center m-auto items-start rounded-md bg-[#27272A] shadow-lg h-auto w-11/12 mb-3"
+              class="flex flex-col justify-center m-auto items-start rounded-md bg-primary shadow-lg h-auto w-11/12 mb-3"
               transition:fade={{ delay: 0, duration: 80 }}
               in={accordionOpen[item?.year]}
             >
diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index b60e847e..aac5e4ef 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -270,7 +270,7 @@
 
 <label
   for="searchBarModal"
-  class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-md"
+  class="cursor-pointer p-2 sm:hover:bg-primary text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-md"
 >
   <Search class="h-[20px] w-[20px]" />
 </label>
@@ -346,8 +346,8 @@
                     href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
                     on:click={() => popularTicker(item?.symbol)}
                     class="mb-2 {item?.symbol === focusedSuggestion
-                      ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                      : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#27272A] rounded-md flex justify-start items-center p-2 text-white  group'} w-full"
+                      ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
+                      : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white  group'} w-full"
                   >
                     <div class="flex flex-row items-center w-full">
                       <div
@@ -388,8 +388,8 @@
                     href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
                     on:click={() => searchBarTicker(item?.symbol)}
                     class="mb-2 {item?.symbol === focusedSuggestion
-                      ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                      : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#27272A] rounded-md flex justify-start items-center p-2 text-white group'}"
+                      ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
+                      : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'}"
                   >
                     <div class="flex flex-row items-center w-full">
                       <div class="flex flex-col">
@@ -411,7 +411,7 @@
             {:else if showSuggestions && searchBarData?.length === 0}
               <li>
                 <label
-                  class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
+                  class="flex items-center p-2 text-white hover:text-white hover:bg-primary rounded group"
                 >
                   <svg
                     class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
@@ -517,7 +517,7 @@
                       href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
                       on:click={() => popularTicker(item?.symbol)}
                       class="mb-2 {item?.symbol === focusedSuggestion
-                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
                         : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-md flex justify-start items-center p-2 text-white group'} w-full"
                     >
                       <div class="flex flex-row items-center w-full">
@@ -559,7 +559,7 @@
                       href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
                       on:click={() => searchBarTicker(item?.symbol)}
                       class="mb-2 {item?.symbol === focusedSuggestion
-                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
                         : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-md flex justify-start items-center p-2 text-white group'}"
                     >
                       <div class="flex flex-row items-center w-full">
@@ -582,7 +582,7 @@
               {:else if showSuggestions && searchBarData?.length === 0}
                 <li>
                   <label
-                    class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
+                    class="flex items-center p-2 text-white hover:text-white hover:bg-primary rounded group"
                   >
                     <svg
                       class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
diff --git a/src/lib/components/SectorSegmentation.svelte b/src/lib/components/SectorSegmentation.svelte
index 90b2dac2..72070400 100644
--- a/src/lib/components/SectorSegmentation.svelte
+++ b/src/lib/components/SectorSegmentation.svelte
@@ -64,7 +64,7 @@
               {#each showFullStats ? sectorList : sectorList?.slice(0, 3) as item, index}
                 <div
                   on:click={() => sectorSelector(item?.industry)}
-                  class="shadow-lg bg-[#27272A] w-full rounded-md p-4 mb-5 flex flex-row items-center {index ===
+                  class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center {index ===
                   0
                     ? 'mt-4'
                     : ''} {index === 2 &&
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index d10dbbcf..35343316 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -528,7 +528,7 @@
             {#each displayList as item, index}
               {#if item?.investorName?.length > 0}
                 <tr
-                  class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] {index +
+                  class="border-y border-gray-800 odd:bg-secondary sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] {index +
                     1 ===
                     shareholderList?.length && data?.user?.tier !== 'Pro'
                     ? 'opacity-[0.1]'
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index 1fd90023..8636225b 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -111,7 +111,7 @@
           <div class="flex justify-start items-center w-full m-auto mt-6">
             <table class="w-full" data-test="statistics-table">
               <tbody>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>Short Interest</span>
                   </td>
@@ -121,7 +121,7 @@
                     {abbreviateNumber(rawData?.sharesShort)}
                   </td>
                 </tr>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>Short Previous Month</span>
                   </td>
@@ -131,7 +131,7 @@
                     {abbreviateNumber(rawData?.sharesShortPriorMonth)}
                   </td>
                 </tr>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>Short % of Shares Out</span>
                   </td>
@@ -141,7 +141,7 @@
                     {rawData?.shortOutStandingPercent}%
                   </td>
                 </tr>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>Short % of Float</span>
                   </td>
@@ -151,7 +151,7 @@
                     {rawData?.shortFloatPercent}%
                   </td>
                 </tr>
-                <tr class="border-y border-gray-800 odd:bg-[#27272A]">
+                <tr class="border-y border-gray-800 odd:bg-secondary">
                   <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                     <span>Short Ratio (days to cover)</span>
                   </td>
diff --git a/src/lib/components/StockSplits.svelte b/src/lib/components/StockSplits.svelte
index 4e2a8456..f10be51c 100644
--- a/src/lib/components/StockSplits.svelte
+++ b/src/lib/components/StockSplits.svelte
@@ -59,7 +59,7 @@
                   <!--Start Item-->
                   <div class="flex flex-row items-center ml-5 w-full mb-6">
                     <div
-                      class="w-full rounded-md bg-[#27272A] shadow-lg h-16 pl-3 ml-6 sm:ml-3 pt-2"
+                      class="w-full rounded-md bg-primary shadow-lg h-16 pl-3 ml-6 sm:ml-3 pt-2"
                     >
                       <div class="flex flex-row items-center">
                         <div class="flex flex-col">
diff --git a/src/lib/components/Swap.svelte b/src/lib/components/Swap.svelte
index 0bbed028..664a92ef 100644
--- a/src/lib/components/Swap.svelte
+++ b/src/lib/components/Swap.svelte
@@ -220,7 +220,7 @@
 
         <div class="pb-2 rounded-md bg-[#09090B]">
           <div
-            class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+            class="bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
           >
             {#each tabs as item, i}
               <button
diff --git a/src/lib/components/TARating.svelte b/src/lib/components/TARating.svelte
index 6e53a227..e1744056 100644
--- a/src/lib/components/TARating.svelte
+++ b/src/lib/components/TARating.svelte
@@ -206,7 +206,7 @@
             <tbody>
               {#each showFullStats ? signalList : signalList?.slice(0, 3) as item, index}
                 <tr
-                  class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] {index ===
+                  class="border-y border-gray-800 odd:bg-secondary sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] {index ===
                     2 &&
                   !showFullStats &&
                   signalList?.length > 2
diff --git a/src/lib/components/Table/Table.svelte b/src/lib/components/Table/Table.svelte
index d1e9a302..92efdf8b 100644
--- a/src/lib/components/Table/Table.svelte
+++ b/src/lib/components/Table/Table.svelte
@@ -649,7 +649,7 @@
     <DropdownMenu.Trigger asChild let:builder>
       <Button
         builders={[builder]}
-        class=" min-w-[110px] w-fit ml-3 border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md"
+        class=" min-w-[110px] w-fit ml-3 border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md"
       >
         <span class="w-fit text-white text-sm sm:text-[1rem]">Indicators</span>
         <svg
@@ -717,7 +717,7 @@
       <DropdownMenu.Group class="pb-2">
         <!-- Added padding to avoid overlapping with Reset button -->
         {#each searchQuery?.length !== 0 ? testList : allRows as item}
-          <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
+          <DropdownMenu.Item class="sm:hover:bg-primary">
             <div class="flex items-center">
               {#if defaultRules?.includes(item?.rule)}
                 <label
@@ -807,7 +807,7 @@
     <tbody>
       {#each stockList as item, index}
         <tr
-          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index +
+          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] {index +
             1 ===
             rawData?.length &&
           data?.user?.tier !== 'Pro' &&
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte
index 4cda7592..608981a1 100644
--- a/src/lib/components/TrendAnalysis.svelte
+++ b/src/lib/components/TrendAnalysis.svelte
@@ -32,7 +32,7 @@
           >
             <!--Start Flow Sentiment-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm"
@@ -50,7 +50,7 @@
             <!--End Flow Sentiment-->
             <!--Start Put/Call-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Accuracy</span>
@@ -112,7 +112,7 @@
 
             <!--Start Precision-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Precision</span>
@@ -176,7 +176,7 @@
         </div>
 
         <select
-          class="mt-1 sm:mt-3 ml-1 w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+          class="mt-1 sm:mt-3 ml-1 w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
           on:change={changeStatement}
         >
           <option disabled>Choose Time Period</option>
diff --git a/src/lib/components/WatchListCard.svelte b/src/lib/components/WatchListCard.svelte
index 6404144a..8cfd7f36 100644
--- a/src/lib/components/WatchListCard.svelte
+++ b/src/lib/components/WatchListCard.svelte
@@ -73,7 +73,7 @@
               {#each watchList as item}
                 <!-- row -->
                 <tr
-                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                 >
                   <td
                     class="text-sm sm:text-[1rem] text-start border-b-[#09090B]"
diff --git a/src/lib/components/shadcn/command/command-item.svelte b/src/lib/components/shadcn/command/command-item.svelte
index f63b94d3..3b636a5f 100644
--- a/src/lib/components/shadcn/command/command-item.svelte
+++ b/src/lib/components/shadcn/command/command-item.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+  import { Command as CommandPrimitive } from "cmdk-sv";
+  import { cn } from "$lib/utils";
 
-	type $$Props = CommandPrimitive.ItemProps;
+  type $$Props = CommandPrimitive.ItemProps;
 
-	export let asChild = false;
+  export let asChild = false;
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+  let className: string | undefined | null = undefined;
+  export { className as class };
 </script>
 
 <CommandPrimitive.Item
-	{asChild}
-	class={cn(
-		"text-white sm:hover:bg-[#27272A] sm:hover:text-white aria-selected:bg-[#27272A] aria-selected:text-white relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	let:action
-	let:attrs
+  {asChild}
+  class={cn(
+    "text-white sm:hover:bg-primary sm:hover:text-white aria-selected:bg-primary aria-selected:text-white relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className,
+  )}
+  {...$$restProps}
+  let:action
+  let:attrs
 >
-	<slot {action} {attrs} />
-</CommandPrimitive.Item>
\ No newline at end of file
+  <slot {action} {attrs} />
+</CommandPrimitive.Item>
diff --git a/src/lib/components/shadcn/select/select-item.svelte b/src/lib/components/shadcn/select/select-item.svelte
index 698ca343..6dd0475d 100644
--- a/src/lib/components/shadcn/select/select-item.svelte
+++ b/src/lib/components/shadcn/select/select-item.svelte
@@ -1,40 +1,40 @@
 <script lang="ts">
-	import Check from "lucide-svelte/icons/check";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+  import Check from "lucide-svelte/icons/check";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils";
 
-	type $$Props = SelectPrimitive.ItemProps;
-	type $$Events = SelectPrimitive.ItemEvents;
+  type $$Props = SelectPrimitive.ItemProps;
+  type $$Events = SelectPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export let label: $$Props["label"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export let value: $$Props["value"];
+  export let label: $$Props["label"] = undefined;
+  export let disabled: $$Props["disabled"] = undefined;
+  export { className as class };
 </script>
 
 <SelectPrimitive.Item
-	{value}
-	{disabled}
-	{label}
-	class={cn(
-		"data-[highlighted]:bg-[#27272A] data-[highlighted]:text-white relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
+  {value}
+  {disabled}
+  {label}
+  class={cn(
+    "data-[highlighted]:bg-primary data-[highlighted]:text-white relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className,
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerleave
+  on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<SelectPrimitive.ItemIndicator>
-			<Check class="h-4 w-4" />
-		</SelectPrimitive.ItemIndicator>
-	</span>
-	<slot>
-		{label || value}
-	</slot>
-</SelectPrimitive.Item>
\ No newline at end of file
+  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <SelectPrimitive.ItemIndicator>
+      <Check class="h-4 w-4" />
+    </SelectPrimitive.ItemIndicator>
+  </span>
+  <slot>
+    {label || value}
+  </slot>
+</SelectPrimitive.Item>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a0c4a7c4..3926e1f4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -239,7 +239,7 @@
             <Button
               builders={[builder]}
               size="icon"
-              class="bg-[#09090B] text-white sm:hover:bg-[#27272A] border-none"
+              class="bg-[#09090B] text-white sm:hover:bg-primary border-none"
             >
               <Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
               <span class="sr-only">Toggle Menu</span>
@@ -810,7 +810,7 @@
             <DropdownMenu.Trigger asChild let:builder>
               <Button
                 size="icon"
-                class="overflow-hidden rounded-md bg-[#09090B] sm:hover:bg-[#27272A] border border-gray-600 w-10 h-10"
+                class="overflow-hidden rounded-md bg-[#09090B] sm:hover:bg-primary border border-gray-600 w-10 h-10"
                 builders={[builder]}
               >
                 <svg
@@ -826,19 +826,19 @@
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="end">
               <a href="/profile" class="cursor-pointer">
-                <DropdownMenu.Item class="sm:hover:bg-[#27272A] cursor-pointer">
+                <DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
                   My Account
                 </DropdownMenu.Item>
               </a>
               <DropdownMenu.Separator />
 
               <a href="/watchlist/stocks" class="cursor-pointer">
-                <DropdownMenu.Item class="sm:hover:bg-[#27272A] cursor-pointer">
+                <DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
                   Watchlist
                 </DropdownMenu.Item>
               </a>
               <a href="/price-alert" class="cursor-pointer">
-                <DropdownMenu.Item class="sm:hover:bg-[#27272A] cursor-pointer">
+                <DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
                   Price Alert
                 </DropdownMenu.Item>
               </a>
@@ -846,9 +846,7 @@
               <DropdownMenu.Separator />
               <form class="cursor-pointer" action="/logout" method="POST">
                 <button type="submit" class="w-full text-start cursor-pointer">
-                  <DropdownMenu.Item
-                    class="sm:hover:bg-[#27272A] cursor-pointer"
-                  >
+                  <DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
                     <span class="text-start">Logout</span>
                   </DropdownMenu.Item>
                 </button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 60cc9125..0087268f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -147,7 +147,7 @@
       <div class="text-center mb-10 relative w-fit flex justify-center m-auto">
         <a
           href="/insider-tracker"
-          class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded m-auto font-medium text-[1rem] flex items-center"
+          class="text-white antialiased bg-primary w-full px-4 py-2 rounded m-auto font-medium text-[1rem] flex items-center"
         >
           <span class="text-white sm:hover:text-blue-400"
             >Realtime Insider Tracker</span
@@ -406,7 +406,7 @@
                   >Recent unusual options with the highest ...</Card.Description
                 >
                 <Tabs.Root value="premium" class="w-full sm:w-fit mt-5 ">
-                  <Tabs.List class="grid w-full grid-cols-3 bg-[#313131]">
+                  <Tabs.List class="grid w-full grid-cols-3 bg-secondary">
                     <Tabs.Trigger
                       on:click={() => changeTable("premium")}
                       value="premium"
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 85aebfef..0a3e9e7f 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -206,7 +206,7 @@
                   <tbody>
                     {#each analystList as item, index}
                       <tr
-                        class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
+                        class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary {index +
                           1 ===
                           rawData?.length && data?.user?.tier !== 'Pro'
                           ? 'opacity-[0.1]'
diff --git a/src/routes/analysts/[slug]/+page.svelte b/src/routes/analysts/[slug]/+page.svelte
index 4becadf7..cffe6f52 100644
--- a/src/routes/analysts/[slug]/+page.svelte
+++ b/src/routes/analysts/[slug]/+page.svelte
@@ -388,7 +388,7 @@
                   <tbody>
                     {#each stockList as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary"
                       >
                         <td class="hidden lg:table-cell"
                           ><button
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 7b522a1f..39d11655 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -55,7 +55,7 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
           <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
+            class="w-full m-auto sm:bg-primary sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
           >
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
               <!-- Start Column -->
diff --git a/src/routes/corporate-lobbying-tracker/+page.svelte b/src/routes/corporate-lobbying-tracker/+page.svelte
index 2ed74261..1139a83e 100644
--- a/src/routes/corporate-lobbying-tracker/+page.svelte
+++ b/src/routes/corporate-lobbying-tracker/+page.svelte
@@ -193,7 +193,7 @@
                 <tbody>
                   {#each displayList as item, index}
                     <tr
-                      class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
+                      class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-secondary {index +
                         1 ===
                         displayList?.length && data?.user?.tier !== 'Pro'
                         ? 'opacity-[0.1]'
diff --git a/src/routes/cramer-tracker/+page.svelte b/src/routes/cramer-tracker/+page.svelte
index d74e227a..df7a59ab 100644
--- a/src/routes/cramer-tracker/+page.svelte
+++ b/src/routes/cramer-tracker/+page.svelte
@@ -254,7 +254,7 @@
                 <tbody>
                   {#each stockList as item}
                     <tr
-                      class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
+                      class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-secondary"
                     >
                       <td class="hidden lg:table-cell"
                         ><button
diff --git a/src/routes/crypto/+page.svelte b/src/routes/crypto/+page.svelte
index 93b41422..6e9fe7c7 100644
--- a/src/routes/crypto/+page.svelte
+++ b/src/routes/crypto/+page.svelte
@@ -67,7 +67,7 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
           <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
+            class="w-full m-auto sm:bg-primary sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
           >
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
               <!-- Start Column -->
@@ -174,7 +174,7 @@
                     {#each symbolList as item, index}
                       <tr
                         on:click={() => goto("/crypto/" + item?.symbol)}
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                       >
                         <td
                           class="text-blue-400 font-medium text-sm text-start border-b-[#09090B]"
diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index e4d1d208..2973d1e7 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -723,14 +723,14 @@
                                         <div class="hidden sm:flex ml-auto">
                                         {#if holdingShares !== 0 && data?.user}
                                         
-                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-gray-600 normal-case cursor-pointer items-center">
+                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-secondary border border-gray-600 normal-case cursor-pointer items-center">
                                           <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
                                           <span class="text-white font-medium">
                                             Portfolio
                                           </span>
                                         </label>
                                         {:else}
-                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-gray-600 normal-case  cursor-pointer items-center">
+                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-secondary border border-gray-600 normal-case  cursor-pointer items-center">
                                           <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
                                           <span class="text-white font-medium">
                                             Portfolio
@@ -1062,7 +1062,7 @@
             class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
           >
             <div
-              class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-md {item?.ticker?.includes(
+              class="flex flex-row items-center w-full bg-secondary p-3 rounded-md {item?.ticker?.includes(
                 $cryptoTicker,
               )
                 ? 'ring-2 ring-[#04E000]'
diff --git a/src/routes/crypto/[tickerID]/+page.svelte b/src/routes/crypto/[tickerID]/+page.svelte
index 9c01160e..dd0a99e7 100644
--- a/src/routes/crypto/[tickerID]/+page.svelte
+++ b/src/routes/crypto/[tickerID]/+page.svelte
@@ -830,7 +830,7 @@ afterUpdate(async () => {
 
             <Button
               on:click={changeChartType}
-              class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+              class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
             >
               {#if displayChartType === "line"}
                 <svg
diff --git a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
index d27a172c..2fa046ee 100644
--- a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
@@ -321,7 +321,7 @@
 
             <label
               on:click={changeStructure}
-              class="sm:hidden w-24 sm:ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#27272A] px-4 py-2 rounded-md shadow-md"
+              class="sm:hidden w-24 sm:ml-3 mr-2 sm:mr-0 cursor-pointer bg-primary px-4 py-2 rounded-md shadow-md"
             >
               <span class="m-auto mr-0.5 text-white text-sm">
                 Switch To: {displayStructure}
@@ -361,7 +361,7 @@
                   <tbody>
                     {#each senateTradingList as item}
                       <tr
-                        class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
+                        class="odd:bg-secondary sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
                       >
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
diff --git a/src/routes/crypto/[tickerID]/stats/+page.svelte b/src/routes/crypto/[tickerID]/stats/+page.svelte
index df2ea80c..44f49f22 100644
--- a/src/routes/crypto/[tickerID]/stats/+page.svelte
+++ b/src/routes/crypto/[tickerID]/stats/+page.svelte
@@ -330,7 +330,7 @@ updateYearRange()
                 <tbody class="shadow-md">
                   {#each quantStats[$cryptoTicker?.toUpperCase()]["Worst 10 Drawdowns"] as item}
                     <tr
-                      class="text-white border-y border-gray-800 odd:bg-[#27272A]"
+                      class="text-white border-y border-gray-800 odd:bg-secondary"
                     >
                       <td
                         class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"
@@ -433,7 +433,7 @@ updateYearRange()
                 </thead>
                 <tbody>
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -477,7 +477,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -515,7 +515,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -537,7 +537,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -559,7 +559,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -599,7 +599,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -621,7 +621,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -643,7 +643,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -663,7 +663,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -683,7 +683,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -703,7 +703,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -725,7 +725,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -747,7 +747,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"
@@ -787,7 +787,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -827,7 +827,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -867,7 +867,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -889,7 +889,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -911,7 +911,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -955,7 +955,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -999,7 +999,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1021,7 +1021,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1041,7 +1041,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"
@@ -1061,7 +1061,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1083,7 +1083,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1105,7 +1105,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1127,7 +1127,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1149,7 +1149,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1171,7 +1171,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1209,7 +1209,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1249,7 +1249,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1289,7 +1289,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"
@@ -1327,7 +1327,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1369,7 +1369,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1411,7 +1411,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1453,7 +1453,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1495,7 +1495,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1537,7 +1537,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1577,7 +1577,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1599,7 +1599,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1621,7 +1621,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1643,7 +1643,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1683,7 +1683,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1725,7 +1725,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1747,7 +1747,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1769,7 +1769,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1791,7 +1791,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
diff --git a/src/routes/dividends-calendar/+page.svelte b/src/routes/dividends-calendar/+page.svelte
index 5538de7c..aea2220c 100644
--- a/src/routes/dividends-calendar/+page.svelte
+++ b/src/routes/dividends-calendar/+page.svelte
@@ -368,7 +368,7 @@
                   on:click={() => changeWeek("previous")}
                   class="{previousMax
                     ? 'opacity-80'
-                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
+                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-primary border border-gray-600 mb-3"
                 >
                   <svg
                     class="w-6 h-6 m-auto rotate-180"
@@ -446,7 +446,7 @@
                   on:click={() => changeWeek("next")}
                   class="{nextMax
                     ? 'opacity-80'
-                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
+                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-primary border border-gray-600 mb-3"
                 >
                   <svg
                     class="w-6 h-6 m-auto"
@@ -478,7 +478,7 @@
                           {#each day as item}
                             <!-- row -->
                             <tr
-                              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                             >
                               <td
                                 class="border-b-[#09090B] text-sm sm:text-[1rem]"
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index b37219c2..134c4143 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -368,7 +368,7 @@
                   on:click={() => changeWeek("previous")}
                   class="{previousMax
                     ? 'opacity-80'
-                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
+                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-primary border border-gray-600 mb-3"
                 >
                   <svg
                     class="w-6 h-6 m-auto rotate-180"
@@ -446,7 +446,7 @@
                   on:click={() => changeWeek("next")}
                   class="{nextMax
                     ? 'opacity-80'
-                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
+                    : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-primary border border-gray-600 mb-3"
                 >
                   <svg
                     class="w-6 h-6 m-auto"
@@ -478,7 +478,7 @@
                           {#each day as item, index}
                             <!-- row -->
                             <tr
-                              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                             >
                               <td
                                 class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]"
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index b9c7889d..0eb21b32 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -683,7 +683,7 @@
                             {#each day as item}
                               <!-- row -->
                               <tr
-                                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-primary"
+                                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary"
                               >
                                 <td
                                   class="text-white text-sm sm:text-[1rem] border-b-[#09090B]"
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
index 4e1c37b3..bbc237dc 100644
--- a/src/routes/economic-indicator/+page.svelte
+++ b/src/routes/economic-indicator/+page.svelte
@@ -787,7 +787,7 @@
               <div class="w-full text-white">
                 <div class="relative flex justify-end">
                   <select
-                    class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
+                    class="w-24 select select-bordered select-sm p-0 pl-5 bg-secondary"
                     on:change={changeStatement}
                   >
                     <option disabled>Choose a Time Period</option>
@@ -807,7 +807,7 @@
               </Lazy>
 
               <div
-                class="mt-10 mb-4 bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 flex justify-center sm:justify-end items-center ml-auto"
+                class="mt-10 mb-4 bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 flex justify-center sm:justify-end items-center ml-auto"
               >
                 {#each tabs as item, i}
                   <button
@@ -907,7 +907,7 @@
                     {#each tableList as item}
                       <!-- row -->
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                       >
                         <td
                           class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index 9ee3a7f6..9c96658a 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -85,7 +85,7 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
           <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
+            class="w-full m-auto sm:bg-primary sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
           >
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
               <!-- Start Column -->
@@ -185,7 +185,7 @@
                   <tbody>
                     {#each stockList as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                       >
                         <td
                           class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index abc55c41..bdafff37 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -673,8 +673,8 @@
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Overview
                         </a>
@@ -683,8 +683,8 @@
                           on:click={() => changeSection("holdings")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'holdings'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Holdings
                         </a>
@@ -694,8 +694,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Options
                         </a>
@@ -704,8 +704,8 @@
                           on:click={() => changeSection("insider")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'insider'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Insider
                         </a>
@@ -714,8 +714,8 @@
                           on:click={() => changeSection("dividends")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dividends'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Dividends
                         </a>
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index 5e353035..a61866ad 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -906,7 +906,7 @@
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button
                     builders={[builder]}
-                    class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-auto border-gray-600 border bg-[#09090B] 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">Export</span>
                     <svg
@@ -933,22 +933,22 @@
                   <DropdownMenu.Separator />
                   <DropdownMenu.Group>
                     <!--
-                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-[#27272A]">
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-primary">
                        <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
                         1 min 
                       </DropdownMenu.Item>
-                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-[#27272A]">
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-primary">
                         <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
                         5 min
                       </DropdownMenu.Item>
-                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-[#27272A]">
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-primary">
                         <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
                         15 min
                       </DropdownMenu.Item>
                     -->
                     <DropdownMenu.Item
                       on:click={() => exportData("30min")}
-                      class="cursor-pointer sm:hover:bg-[#27272A]"
+                      class="cursor-pointer sm:hover:bg-primary"
                     >
                       <svg
                         class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
@@ -966,7 +966,7 @@
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
                       on:click={() => exportData("1hour")}
-                      class="cursor-pointer sm:hover:bg-[#27272A]"
+                      class="cursor-pointer sm:hover:bg-primary"
                     >
                       <svg
                         class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
@@ -983,7 +983,7 @@
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
                       on:click={() => exportData("max")}
-                      class="cursor-pointer sm:hover:bg-[#27272A]"
+                      class="cursor-pointer sm:hover:bg-primary"
                     >
                       <svg
                         class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte
index e986c61b..896308d8 100644
--- a/src/routes/etf/[tickerID]/dividends/+page.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+page.svelte
@@ -338,7 +338,7 @@
                   </thead>
                   <tbody class="shadow-md">
                     {#each rawData?.history as item}
-                      <tr class="text-gray-200 odd:bg-[#27272A]">
+                      <tr class="text-gray-200 odd:bg-secondary">
                         <td
                           class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]"
                         >
diff --git a/src/routes/etf/[tickerID]/insider/+page.svelte b/src/routes/etf/[tickerID]/insider/+page.svelte
index 39769562..41ba4305 100644
--- a/src/routes/etf/[tickerID]/insider/+page.svelte
+++ b/src/routes/etf/[tickerID]/insider/+page.svelte
@@ -321,7 +321,7 @@
                   <tbody>
                     {#each senateTradingList as item}
                       <tr
-                        class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
+                        class="odd:bg-secondary sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
                       >
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index e595adc3..906186c7 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -696,7 +696,7 @@
 
           <div class="flex flex-row items-center w-full mt-10">
             <select
-              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
+              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeTimePeriod}
             >
               <option disabled>Choose a time period</option>
@@ -708,7 +708,7 @@
             </select>
 
             <select
-              class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
+              class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeVolumeOI}
             >
               <option disabled>Choose a category</option>
@@ -750,7 +750,7 @@
             </h3>
 
             <div
-              class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
+              class="bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
             >
               {#each tabEX as item, i}
                 <button
@@ -785,7 +785,7 @@
 
           {#if optionList?.length !== 0}
             <div
-              class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
+              class="bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
             >
               {#each tabs as item, i}
                 <button
@@ -812,7 +812,7 @@
             {#if activeIdx === 1}
               <div class="relative mb-6">
                 <select
-                  class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+                  class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
                   on:change={changeStatement}
                 >
                   <option disabled>Choose an Expiration Date</option>
@@ -878,7 +878,7 @@
                         on:click={() => handleViewData(item?.date)}
                         on:mouseover={() =>
                           getDailyTransactions($etfTicker + "+" + item?.date)}
-                        class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index +
+                        class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] {index +
                           1 ===
                           optionList?.slice(0, 3)?.length &&
                         data?.user?.tier !== 'Pro'
@@ -1067,7 +1067,7 @@
                   <tbody>
                     {#each data?.user?.tier === "Pro" ? optionChainList : optionChainList?.slice(0, 3) as item, index}
                       <tr
-                        class="odd:bg-[#27272A] border-b-[#09090B] {index +
+                        class="odd:bg-secondary border-b-[#09090B] {index +
                           1 ===
                           optionChainList?.slice(0, 3)?.length &&
                         data?.user?.tier !== 'Pro'
@@ -1254,7 +1254,7 @@
             <tbody>
               {#each optionHistoryList as item}
                 <!-- row -->
-                <tr class="odd:bg-[#27272A] border-b-[#09090B]">
+                <tr class="odd:bg-secondary border-b-[#09090B]">
                   <td class="text-white text-sm text-start whitespace-nowrap">
                     {formatTime(item?.time)}
                   </td>
diff --git a/src/routes/etf/[tickerID]/stats/+page.svelte b/src/routes/etf/[tickerID]/stats/+page.svelte
index 89be051d..a4c569f8 100644
--- a/src/routes/etf/[tickerID]/stats/+page.svelte
+++ b/src/routes/etf/[tickerID]/stats/+page.svelte
@@ -330,7 +330,7 @@ updateYearRange()
                 <tbody class="shadow-md">
                   {#each quantStats[$etfTicker?.toUpperCase()]["Worst 10 Drawdowns"] as item}
                     <tr
-                      class="text-white border-y border-gray-800 odd:bg-[#27272A]"
+                      class="text-white border-y border-gray-800 odd:bg-secondary"
                     >
                       <td
                         class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"
@@ -433,7 +433,7 @@ updateYearRange()
                 </thead>
                 <tbody>
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -477,7 +477,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -515,7 +515,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -537,7 +537,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -559,7 +559,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -599,7 +599,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -619,7 +619,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -641,7 +641,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -661,7 +661,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -681,7 +681,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -701,7 +701,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -723,7 +723,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -745,7 +745,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"
@@ -785,7 +785,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -825,7 +825,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -865,7 +865,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -887,7 +887,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -907,7 +907,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -951,7 +951,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -995,7 +995,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1017,7 +1017,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1037,7 +1037,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"
@@ -1057,7 +1057,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1079,7 +1079,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1101,7 +1101,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1123,7 +1123,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1145,7 +1145,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1167,7 +1167,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1205,7 +1205,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1245,7 +1245,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1285,7 +1285,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"
@@ -1323,7 +1323,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1365,7 +1365,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1407,7 +1407,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1449,7 +1449,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1491,7 +1491,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1533,7 +1533,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1573,7 +1573,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1595,7 +1595,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1617,7 +1617,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1639,7 +1639,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1679,7 +1679,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1721,7 +1721,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1743,7 +1743,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1765,7 +1765,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
@@ -1787,7 +1787,7 @@ updateYearRange()
                   </tr>
 
                   <tr
-                    class="text-white odd:bg-[#27272A] border-b border-[#27272A]"
+                    class="text-white odd:bg-secondary border-b border-[#27272A]"
                   >
                     <td
                       class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
diff --git a/src/routes/etf/etf-providers/+page.svelte b/src/routes/etf/etf-providers/+page.svelte
index 48eaef71..9334d13b 100644
--- a/src/routes/etf/etf-providers/+page.svelte
+++ b/src/routes/etf/etf-providers/+page.svelte
@@ -150,7 +150,7 @@
           {#each etfProviderList as item, index}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
             >
               <td
                 class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]"
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index e70b17ca..b1804356 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -222,7 +222,7 @@
             {#each etfProviderData as item}
               <!-- row -->
               <tr
-                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
               >
                 <td
                   class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/etf/new-launches/+page.svelte b/src/routes/etf/new-launches/+page.svelte
index 44e06454..b860f44a 100644
--- a/src/routes/etf/new-launches/+page.svelte
+++ b/src/routes/etf/new-launches/+page.svelte
@@ -157,7 +157,7 @@
                   <tbody>
                     {#each etfData as item}
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                       >
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/fda-calendar/+page.svelte b/src/routes/fda-calendar/+page.svelte
index d228d3fa..4cc6bcdc 100644
--- a/src/routes/fda-calendar/+page.svelte
+++ b/src/routes/fda-calendar/+page.svelte
@@ -141,7 +141,7 @@
                   {#each displayList as item, index}
                     <tr
                       on:click={() => goto(`/stocks/${item?.symbol}`)}
-                      class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
+                      class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary {index +
                         1 ===
                         displayList?.length && data?.user?.tier !== 'Pro'
                         ? 'opacity-[0.1]'
diff --git a/src/routes/heatmaps/+page.svelte b/src/routes/heatmaps/+page.svelte
index 895fa844..e778e461 100644
--- a/src/routes/heatmaps/+page.svelte
+++ b/src/routes/heatmaps/+page.svelte
@@ -307,7 +307,7 @@ async function exportTreemap() {
   class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
 >
   <div
-    class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
+    class="w-full m-auto sm:bg-primary sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
   >
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
       <!-- Start Column -->
diff --git a/src/routes/industry/+layout.svelte b/src/routes/industry/+layout.svelte
index ec3c1d7b..7f14e64e 100644
--- a/src/routes/industry/+layout.svelte
+++ b/src/routes/industry/+layout.svelte
@@ -90,8 +90,8 @@
                 : "/industry/all"}
             on:click={() => handleMode(i)}
             class="p-2 px-5 cursor-pointer {activeIdx === i
-              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
           >
             {item.title}
           </a>
diff --git a/src/routes/industry/all/+page.svelte b/src/routes/industry/all/+page.svelte
index 24782eda..e87ad32d 100644
--- a/src/routes/industry/all/+page.svelte
+++ b/src/routes/industry/all/+page.svelte
@@ -104,7 +104,7 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
             >
               <td
                 class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/industry/sectors/+page.svelte b/src/routes/industry/sectors/+page.svelte
index 93771a07..7c382e2c 100644
--- a/src/routes/industry/sectors/+page.svelte
+++ b/src/routes/industry/sectors/+page.svelte
@@ -103,7 +103,7 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
             >
               <td
                 class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/insider-tracker/+page.svelte b/src/routes/insider-tracker/+page.svelte
index b8383336..2c7eefca 100644
--- a/src/routes/insider-tracker/+page.svelte
+++ b/src/routes/insider-tracker/+page.svelte
@@ -215,7 +215,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-[#27272A] {index +
+                        class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-secondary {index +
                           1 ===
                           stockList?.length && data?.user?.tier !== 'Pro'
                           ? 'opacity-[0.1]'
diff --git a/src/routes/ipos/+layout.svelte b/src/routes/ipos/+layout.svelte
index 4b2c8e57..374f9ae0 100644
--- a/src/routes/ipos/+layout.svelte
+++ b/src/routes/ipos/+layout.svelte
@@ -121,8 +121,8 @@
                     href={`/ipos/${item}`}
                     on:click={() => (displaySection = item)}
                     class="p-2 px-5 cursor-pointer {displaySection === item
-                      ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                      : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                      ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                      : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                   >
                     {item}
                   </a>
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index 53f2a42d..1fb1247c 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -87,7 +87,7 @@
           <tbody>
             {#each ipoList as item}
               <tr
-                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
               >
                 <td
                   class="text-white text-sm sm:text-[1rem] text-start border-b-[#09090B] whitespace-nowrap"
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index cfc40c1c..8b31975a 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -102,7 +102,7 @@
         </div>
         <div class="relative mt-4">
           <select
-            class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#313131]"
+            class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-secondary"
             on:change={changeTimePeriod}
           >
             <option disabled>Select time period</option>
@@ -156,7 +156,7 @@
             <tbody>
               {#each ipoList as item}
                 <tr
-                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                 >
                   <td
                     class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
diff --git a/src/routes/list/bitcoin-etfs/+page.svelte b/src/routes/list/bitcoin-etfs/+page.svelte
index a53cc875..30045743 100644
--- a/src/routes/list/bitcoin-etfs/+page.svelte
+++ b/src/routes/list/bitcoin-etfs/+page.svelte
@@ -174,7 +174,7 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
             >
               <td
                 class="text-white font-semibold sm:font-normal text-center text-sm sm:text-[1rem] border-b-[#09090B]"
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 79c09c6d..8aa4b795 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -177,7 +177,7 @@
               on:click={() => (oauthLoading = !oauthLoading)}
               on:mouseenter={handleHoverGoogle}
               on:mouseleave={handleHoverGoogle}
-              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
             >
               <svg
                 class="{isHoveredGoogle
@@ -226,7 +226,7 @@
               on:click={() => (oauthLoading = !oauthLoading)}
               on:mouseenter={handleHoverDiscord}
               on:mouseleave={handleHoverDiscord}
-              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
             >
               <svg
                 class="{isHoveredDiscord
@@ -760,7 +760,7 @@
               on:click={() => (oauthLoading = !oauthLoading)}
               on:mouseenter={handleHoverGithub}
               on:mouseleave={handleHoverGithub}
-              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
             >
               <svg
                 class="{isHoveredGithub
diff --git a/src/routes/market-mover/+layout.svelte b/src/routes/market-mover/+layout.svelte
index d4057a32..6577c6d7 100644
--- a/src/routes/market-mover/+layout.svelte
+++ b/src/routes/market-mover/+layout.svelte
@@ -78,8 +78,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === index
-                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/market-mover/active/+layout.svelte b/src/routes/market-mover/active/+layout.svelte
index 9a76b058..fcc46a88 100644
--- a/src/routes/market-mover/active/+layout.svelte
+++ b/src/routes/market-mover/active/+layout.svelte
@@ -85,48 +85,48 @@
             <a
               href="/market-mover/active"
               class="p-2 px-5 cursor-pointer {timePeriod === 'active'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Today
             </a>
             <a
               href="/market-mover/active/week"
               class="p-2 px-5 cursor-pointer {timePeriod === 'week'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Week
             </a>
             <a
               href="/market-mover/active/month"
               class="p-2 px-5 cursor-pointer {timePeriod === 'month'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Month
             </a>
             <a
               href="/market-mover/active/year"
               class="p-2 px-5 cursor-pointer {timePeriod === 'year'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Year
             </a>
             <a
               href="/market-mover/active/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               3 Years
             </a>
             <a
               href="/market-mover/active/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               5 Years
             </a>
diff --git a/src/routes/market-mover/afterhours/+layout.svelte b/src/routes/market-mover/afterhours/+layout.svelte
index 4910cab4..0b5f7777 100644
--- a/src/routes/market-mover/afterhours/+layout.svelte
+++ b/src/routes/market-mover/afterhours/+layout.svelte
@@ -69,16 +69,16 @@
             <a
               href="/market-mover/afterhours/gainers"
               class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Gainers
             </a>
             <a
               href="/market-mover/afterhours/losers"
               class="p-2 px-5 cursor-pointer {categoryType === 'losers'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Losers
             </a>
diff --git a/src/routes/market-mover/gainers/+layout.svelte b/src/routes/market-mover/gainers/+layout.svelte
index be004ad3..e71a0c0c 100644
--- a/src/routes/market-mover/gainers/+layout.svelte
+++ b/src/routes/market-mover/gainers/+layout.svelte
@@ -85,48 +85,48 @@
             <a
               href="/market-mover/gainers"
               class="p-2 px-5 cursor-pointer {timePeriod === 'gainers'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Today
             </a>
             <a
               href="/market-mover/gainers/week"
               class="p-2 px-5 cursor-pointer {timePeriod === 'week'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Week
             </a>
             <a
               href="/market-mover/gainers/month"
               class="p-2 px-5 cursor-pointer {timePeriod === 'month'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Month
             </a>
             <a
               href="/market-mover/gainers/year"
               class="p-2 px-5 cursor-pointer {timePeriod === 'year'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Year
             </a>
             <a
               href="/market-mover/gainers/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               3 Years
             </a>
             <a
               href="/market-mover/gainers/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               5 Years
             </a>
diff --git a/src/routes/market-mover/losers/+layout.svelte b/src/routes/market-mover/losers/+layout.svelte
index 0d0cc396..4c1a739f 100644
--- a/src/routes/market-mover/losers/+layout.svelte
+++ b/src/routes/market-mover/losers/+layout.svelte
@@ -85,48 +85,48 @@
             <a
               href="/market-mover/losers"
               class="p-2 px-5 cursor-pointer {timePeriod === 'losers'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Today
             </a>
             <a
               href="/market-mover/losers/week"
               class="p-2 px-5 cursor-pointer {timePeriod === 'week'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Week
             </a>
             <a
               href="/market-mover/losers/month"
               class="p-2 px-5 cursor-pointer {timePeriod === 'month'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Month
             </a>
             <a
               href="/market-mover/losers/year"
               class="p-2 px-5 cursor-pointer {timePeriod === 'year'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Year
             </a>
             <a
               href="/market-mover/losers/3Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               3 Years
             </a>
             <a
               href="/market-mover/losers/5Y"
               class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               5 Years
             </a>
diff --git a/src/routes/market-mover/premarket/+layout.svelte b/src/routes/market-mover/premarket/+layout.svelte
index 6b6e88d8..aabb8be4 100644
--- a/src/routes/market-mover/premarket/+layout.svelte
+++ b/src/routes/market-mover/premarket/+layout.svelte
@@ -69,16 +69,16 @@
             <a
               href="/market-mover/premarket/gainers"
               class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Gainers
             </a>
             <a
               href="/market-mover/premarket/losers"
               class="p-2 px-5 cursor-pointer {categoryType === 'losers'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Losers
             </a>
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index d2d308ba..3df8eb34 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -60,8 +60,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte
index be6d9094..674f30ff 100644
--- a/src/routes/politicians/[slug]/+page.svelte
+++ b/src/routes/politicians/[slug]/+page.svelte
@@ -348,7 +348,7 @@
                 <tbody class="p-0">
                   {#each tableData as item}
                     <tr
-                      class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#27272A] text-white"
+                      class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#27272A] text-white"
                     >
                       <td class="hidden lg:table-cell"
                         ><button
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index 8846bc7f..4eda3252 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -166,7 +166,7 @@
                           <tbody>
                             {#each displayList as item, index}
                               <tr
-                                class="odd:bg-[#27272A] border-b-[#09090B] {index +
+                                class="odd:bg-secondary border-b-[#09090B] {index +
                                   1 ===
                                   rawData?.length && data?.user?.tier !== 'Pro'
                                   ? 'opacity-[0.1]'
@@ -175,7 +175,7 @@
                                 <th
                                   class="{index % 2
                                     ? 'bg-[#09090B]'
-                                    : 'bg-[#27272A]'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
+                                    : 'bg-primary'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   <div class="flex flex-row items-center">
                                     <div
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index ce9d1149..84791601 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -342,7 +342,7 @@
                   {/if}
                   <label
                     on:click={handleEditMode}
-                    class="border text-sm border-gray-600 sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 px-3 text-white bg-[#09090B] sm:hover:bg-[#27272A] ease-out sm:hover:text-red-500"
+                    class="border text-sm border-gray-600 sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 px-3 text-white bg-[#09090B] sm:hover:bg-primary ease-out sm:hover:text-red-500"
                   >
                     <svg
                       class="inline-block w-5 h-5"
@@ -408,7 +408,7 @@
                     >
                       {#each searchBarData as item}
                         <Combobox.Item
-                          class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-[#27272A]"
+                          class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
                           value={item.symbol}
                           label={item.name}
                           on:click={(e) =>
@@ -468,7 +468,7 @@
                     {#each priceAlertList as item}
                       <!-- row -->
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                       >
                         <td
                           on:click={() => handleFilter(item?.id)}
@@ -551,7 +551,7 @@
                   class="inline-flex justify-center w-full rounded-md sm:w-auto mb-3"
                 >
                   <div
-                    class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                    class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                   >
                     {#each tabs as item, i}
                       {#if data?.user?.tier !== "Pro" && i > 0}
@@ -610,7 +610,7 @@
                         {#each titleGroups as { title, items, symbols }}
                           <div class="flex border-gray-600 text-small">
                             <div
-                              class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
+                              class="hidden min-w-[100px] items-center justify-center bg-primary p-1 lg:flex"
                             >
                               {new Date(
                                 items[0].publishedDate,
@@ -682,7 +682,7 @@
                       {#each titleGroups as item}
                         <div class="flex border-gray-600 text-small">
                           <div
-                            class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
+                            class="hidden min-w-[100px] items-center justify-center bg-primary p-1 lg:flex"
                           >
                             {formatTime(item?.time)}
                           </div>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index cf7bee8c..82a39759 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -375,7 +375,7 @@
 
       <!-- Pricing Card -->
       <div
-        class="sm:order-2 rounded-md box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#27272A]"
+        class="sm:order-2 rounded-md box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-primary"
       >
         <div class="{!mode ? 'hidden' : ''} ribbon ribbon-top-right">
           <span class="text-white">Discount</span>
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index c63d827d..79a7f0ad 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -288,7 +288,7 @@
               >
                 <label
                   for="cancelSubscriptionModal"
-                  class="cursor-pointer text-white border border-gray-600 sm:hover:bg-[#27272A] bg-opacity-[0.5] text-sm sm:text-[1rem] px-4 py-2 rounded-md mt-5"
+                  class="cursor-pointer text-white border border-gray-600 sm:hover:bg-primary bg-opacity-[0.5] text-sm sm:text-[1rem] px-4 py-2 rounded-md mt-5"
                 >
                   Cancel Subscription
                 </label>
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index 0a7a2bb5..dc236f8c 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -516,8 +516,8 @@
                           <label
                             on:click={() => changeTimePeriod(index)}
                             class="p-2 px-5 cursor-pointer {activeIdx === index
-                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                           >
                             {item.title}
                           </label>
@@ -526,8 +526,8 @@
                             href="/pricing"
                             class="flex flex-row items-center p-2 px-5 cursor-pointer {activeIdx ===
                             index
-                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                           >
                             <span class="">{item.title}</span>
                             <svg
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 8bd8e085..8902b8dd 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -80,7 +80,7 @@
 <!--
 	<label class="w-full max-w-lg">
 		<input
-		  class="input input-bordered w-full max-w-lg bg-[#313131] whitespace-normal ring-2"
+		  class="input input-bordered w-full max-w-lg bg-secondary whitespace-normal ring-2"
 		  type="password"
 		  bind:value={password}
 		  on:input={checkPassword}
@@ -193,7 +193,7 @@
             on:click={() => (oauthLoading = !oauthLoading)}
             on:mouseenter={handleHoverGoogle}
             on:mouseleave={handleHoverGoogle}
-            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
           >
             <svg
               class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block"
@@ -240,7 +240,7 @@
             on:click={() => (oauthLoading = !oauthLoading)}
             on:mouseenter={handleHoverDiscord}
             on:mouseleave={handleHoverDiscord}
-            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
           >
             <svg
               class="{isHoveredDiscord
@@ -774,7 +774,7 @@
             on:click={() => (oauthLoading = !oauthLoading)}
             on:mouseenter={handleHoverGithub}
             on:mouseleave={handleHoverGithub}
-            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
           >
             <svg
               class="{isHoveredGithub
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index c3e04a31..9d2f9a52 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -2300,7 +2300,7 @@ const handleKeyDown = (event) => {
               <DropdownMenu.Trigger asChild let:builder>
                 <Button
                   builders={[builder]}
-                  class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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"
                     >{selectedPopularStrategy?.length !== 0
@@ -2332,38 +2332,38 @@ const handleKeyDown = (event) => {
                 <DropdownMenu.Group>
                   <DropdownMenu.Item
                     on:click={() => popularStrategy("dividendGrowth")}
-                    class="cursor-pointer hover:bg-[#27272A]"
+                    class="cursor-pointer hover:bg-primary"
                   >
                     Dividend Growth
                   </DropdownMenu.Item>
                   <DropdownMenu.Item
                     on:click={() => popularStrategy("topGainers1Y")}
-                    class="cursor-pointer hover:bg-[#27272A]"
+                    class="cursor-pointer hover:bg-primary"
                   >
                     Top Gainers 1Y
                   </DropdownMenu.Item>
                   <DropdownMenu.Item
                     on:click={() => popularStrategy("topShortedStocks")}
-                    class="cursor-pointer hover:bg-[#27272A]"
+                    class="cursor-pointer hover:bg-primary"
                   >
                     Top Shorted Stocks
                   </DropdownMenu.Item>
 
                   <DropdownMenu.Item
                     on:click={() => popularStrategy("momentumTAStocks")}
-                    class="cursor-pointer hover:bg-[#27272A]"
+                    class="cursor-pointer hover:bg-primary"
                   >
                     Momentum TA Stocks
                   </DropdownMenu.Item>
                   <DropdownMenu.Item
                     on:click={() => popularStrategy("underValuedStocks")}
-                    class="cursor-pointer hover:bg-[#27272A]"
+                    class="cursor-pointer hover:bg-primary"
                   >
                     Undervalued Stocks
                   </DropdownMenu.Item>
                   <DropdownMenu.Item
                     on:click={() => popularStrategy("strongCashFlow")}
-                    class="cursor-pointer hover:bg-[#27272A]"
+                    class="cursor-pointer hover:bg-primary"
                   >
                     Strong Cash Flow
                   </DropdownMenu.Item>
@@ -2384,7 +2384,7 @@ const handleKeyDown = (event) => {
               <DropdownMenu.Trigger asChild let:builder>
                 <Button
                   builders={[builder]}
-                  class="min-w-[110px] w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                  class="min-w-[110px] w-full border-gray-600 border bg-[#09090B] 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"
                     >{selectedStrategy?.length !== 0
@@ -2441,8 +2441,8 @@ const handleKeyDown = (event) => {
                     <DropdownMenu.Item
                       on:click={() => switchStrategy(item)}
                       class="{item?.id === selectedStrategy
-                        ? 'bg-[#27272A]'
-                        : ''} cursor-pointer sm:hover:bg-[#27272A]"
+                        ? 'bg-primary'
+                        : ''} cursor-pointer sm:hover:bg-primary"
                     >
                       {item?.title} ({item?.rules?.length})
                     </DropdownMenu.Item>
@@ -2570,7 +2570,7 @@ const handleKeyDown = (event) => {
                             </svg>
                         </div>
                         
-                        <input type="text" placeholder="Search {allRows?.length} filters..." class="controls-input rounded-md w-full py-2 pl-10 placeholder:text-gray-300 bg-[#313131] sm:w-72"> 
+                        <input type="text" placeholder="Search {allRows?.length} filters..." class="controls-input rounded-md w-full py-2 pl-10 placeholder:text-gray-300 bg-secondary sm:w-72"> 
                         <div class="absolute inset-y-0 right-0 flex items-center pr-2"></div> 
                       
                     </div> 
@@ -2799,12 +2799,12 @@ const handleKeyDown = (event) => {
                         <DropdownMenu.Group class="min-h-10 mt-2">
                           {#if !["sma20", "sma50", "sma100", "sma200", "ema20", "ema50", "ema100", "ema200", "grahamNumber", "analystRating", "halalStocks", "score", "sector", "industry", "country"]?.includes(row?.rule)}
                             {#each row?.step as newValue}
-                              <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
+                              <DropdownMenu.Item class="sm:hover:bg-primary">
                                 <button
                                   on:click={() => {
                                     handleChangeValue(newValue);
                                   }}
-                                  class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-[#27272A] focus:bg-blue-100 focus:text-gray-900 focus:outline-none"
+                                  class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-none"
                                 >
                                   {ruleCondition[row?.rule] !== undefined
                                     ? ruleCondition[row?.rule]
@@ -2815,7 +2815,7 @@ const handleKeyDown = (event) => {
                             {/each}
                           {:else if ["sma20", "sma50", "sma100", "sma200", "ema20", "ema50", "ema100", "ema200", "grahamNumber"]?.includes(row?.rule)}
                             {#each row?.step as item}
-                              <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
+                              <DropdownMenu.Item class="sm:hover:bg-primary">
                                 <div
                                   class="flex items-center"
                                   on:click|capture={(event) =>
@@ -2840,7 +2840,7 @@ const handleKeyDown = (event) => {
                             {/each}
                           {:else}
                             {#each testList.length > 0 && searchQuery?.length > 0 ? testList : searchQuery?.length > 0 && testList?.length === 0 ? [] : row?.rule === "country" ? listOfRelevantCountries : row?.rule === "sector" ? sectorList : row?.rule === "industry" ? industryList : ruleName === "analystRating" || ruleName === "score" ? ["Strong Buy", "Buy", "Hold", "Sell", "Strong Sell"] : ["Compliant", "Non-Compliant"] as item}
-                              <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
+                              <DropdownMenu.Item class="sm:hover:bg-primary">
                                 <div
                                   class="flex items-center"
                                   on:click|capture={(event) =>
@@ -2939,9 +2939,9 @@ 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-none sm:hover:bg-[#27272A] {displayTableTab ===
+              class="text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-none sm:hover:bg-primary {displayTableTab ===
               'general'
-                ? 'font-semibold bg-[#27272A]'
+                ? 'font-semibold bg-primary'
                 : ''}"
             >
               General
@@ -2950,9 +2950,9 @@ const handleKeyDown = (event) => {
           <li>
             <button
               on:click={() => (displayTableTab = "filters")}
-              class="text-[1rem] sm:text-lg flex flex-row items-center relative block rounded-md px-2 py-1 sm:hover:bg-[#27272A] {displayTableTab ===
+              class="text-[1rem] sm:text-lg flex flex-row items-center relative block rounded-md px-2 py-1 sm:hover:bg-primary {displayTableTab ===
               'filters'
-                ? 'font-semibold bg-[#27272A]'
+                ? 'font-semibold bg-primary'
                 : ''} focus:outline-none"
             >
               <span class="text-white">Filters</span>
@@ -2971,9 +2971,9 @@ const handleKeyDown = (event) => {
             <button
               on:mouseover={handleMouseOver}
               on:click={() => changeTab("performance")}
-              class="text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-none sm:hover:bg-[#27272A] {displayTableTab ===
+              class="text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-none sm:hover:bg-primary {displayTableTab ===
               'performance'
-                ? 'font-semibold bg-[#27272A]'
+                ? 'font-semibold bg-primary'
                 : ''}"
             >
               Performance
@@ -3005,7 +3005,7 @@ const handleKeyDown = (event) => {
             <tbody>
               {#each displayResults as item}
                 <tr
-                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]"
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-secondary"
                 >
                   <td class="border-b-[#09090B] whitespace-nowrap">
                     <a
@@ -3086,7 +3086,7 @@ const handleKeyDown = (event) => {
                   on:click={() => {
                     handleSave(false);
                   }}
-                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]"
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-secondary"
                 >
                   <td class="border-b-[#09090B] whitespace-nowrap">
                     <a
@@ -3139,7 +3139,7 @@ const handleKeyDown = (event) => {
                   on:click={() => {
                     handleSave(false);
                   }}
-                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]"
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-secondary"
                 >
                   <td class="border-b-[#09090B] whitespace-nowrap">
                     <a
@@ -3383,7 +3383,7 @@ const handleKeyDown = (event) => {
     class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
   ></label>
 
-  <div class="modal-box w-full bg-[#27272A] border border-gray-600">
+  <div class="modal-box w-full bg-primary border border-gray-600">
     <h1 class="text-white text-2xl font-bold">New Strategy</h1>
 
     <form
@@ -3421,7 +3421,7 @@ const handleKeyDown = (event) => {
   ></label>
 
   <div
-    class="modal-box w-full bg-[#27272A] border border-gray-600 overflow-hidden"
+    class="modal-box w-full bg-primary border border-gray-600 overflow-hidden"
   >
     <h3
       class="font-bold text-md sm:text-lg flex justify-center items-center mt-10 text-white"
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 11ca585a..02ccc52b 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -870,8 +870,8 @@
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Overview
                         </a>
@@ -880,8 +880,8 @@
                           on:click={() => changeSection("financials")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'financials'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Financials
                         </a>
@@ -890,8 +890,8 @@
                           on:click={() => changeSection("statistics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'statistics'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                           >Statistics</a
                         >
 
@@ -901,8 +901,8 @@
                             on:click={() => changeSection("metrics")}
                             class="p-2 px-5 cursor-pointer {displaySection ===
                             'metrics'
-                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                             >Metrics</a
                           >
                         {/if}
@@ -913,8 +913,8 @@
                             on:click={() => changeSection("forecast")}
                             class="p-2 px-5 cursor-pointer {displaySection ===
                             'forecast'
-                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                           >
                             Forecast
                           </a>
@@ -924,8 +924,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Options
                         </a>
@@ -934,8 +934,8 @@
                           on:click={() => changeSection("insider")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'insider'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Insider
                         </a>
@@ -944,8 +944,8 @@
                           on:click={() => changeSection("dividends")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dividends'
-                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Dividends
                         </a>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 7de1040e..76640881 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -777,7 +777,7 @@
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button
                     builders={[builder]}
-                    class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-auto border-gray-600 border bg-[#09090B] 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">Export</span>
                     <svg
@@ -804,22 +804,22 @@
                   <DropdownMenu.Separator />
                   <DropdownMenu.Group>
                     <!--
-                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-[#27272A]">
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-primary">
                        <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
                         1 min 
                       </DropdownMenu.Item>
-                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-[#27272A]">
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-primary">
                         <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
                         5 min
                       </DropdownMenu.Item>
-                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-[#27272A]">
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer sm:hover:bg-primary">
                         <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
                         15 min
                       </DropdownMenu.Item>
                     -->
                     <DropdownMenu.Item
                       on:click={() => exportData("30min")}
-                      class="cursor-pointer sm:hover:bg-[#27272A]"
+                      class="cursor-pointer sm:hover:bg-primary"
                     >
                       <svg
                         class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
@@ -837,7 +837,7 @@
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
                       on:click={() => exportData("1hour")}
-                      class="cursor-pointer sm:hover:bg-[#27272A]"
+                      class="cursor-pointer sm:hover:bg-primary"
                     >
                       <svg
                         class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
@@ -854,7 +854,7 @@
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
                       on:click={() => exportData("max")}
-                      class="cursor-pointer sm:hover:bg-[#27272A]"
+                      class="cursor-pointer sm:hover:bg-primary"
                     >
                       <svg
                         class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 12da06cd..182d5a0d 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -338,7 +338,7 @@
                   </thead>
                   <tbody class="shadow-md">
                     {#each rawData?.history as item}
-                      <tr class="text-gray-200 odd:bg-[#27272A]">
+                      <tr class="text-gray-200 odd:bg-secondary">
                         <td
                           class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]"
                         >
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index 8b692b9f..3a1bc07d 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -61,8 +61,8 @@
                   href={`/stocks/${$stockTicker}/financials`}
                   on:click={() => changeSubSection("income")}
                   class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
-                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   Income
                 </a>
@@ -72,8 +72,8 @@
                   on:click={() => changeSubSection("balance-sheet")}
                   class="p-2 px-5 cursor-pointer {displaySubSection ===
                   'balance-sheet'
-                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   Balance Sheet
                 </a>
@@ -82,8 +82,8 @@
                   on:click={() => changeSubSection("cash-flow")}
                   class="p-2 px-5 cursor-pointer {displaySubSection ===
                   'cash-flow'
-                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   Cashflow
                 </a>
@@ -91,8 +91,8 @@
                   href={`/stocks/${$stockTicker}/financials/ratios`}
                   on:click={() => changeSubSection("ratios")}
                   class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
-                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   Ratios
                 </a>
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index f1f8db7e..9d1d3533 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -462,7 +462,7 @@
                   class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
                 >
                   <div
-                    class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                    class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                   >
                     {#each tabs as item, i}
                       {#if data?.user?.tier !== "Pro" && i > 0}
@@ -545,7 +545,7 @@
                         <DropdownMenu.Trigger asChild let:builder>
                           <Button
                             builders={[builder]}
-                            class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">{$timeFrame}</span
                             >
@@ -574,19 +574,19 @@
                           <DropdownMenu.Group>
                             <DropdownMenu.Item
                               on:click={() => ($timeFrame = "5Y")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               5 years
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => ($timeFrame = "10Y")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               10 years
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => ($timeFrame = "MAX")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               Max
                             </DropdownMenu.Item>
@@ -596,7 +596,7 @@
                     </div>
                     <Button
                       on:click={() => exportFundamentalData("csv")}
-                      class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                      class="ml-2 w-full border-gray-600 border bg-[#09090B] 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
@@ -618,7 +618,7 @@
                   <div class="sm:w-full">
                     <div class="relative">
                       <select
-                        class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+                        class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
                         on:change={changeStatement}
                       >
                         <option disabled>Choose an Cash Flow Variable</option>
@@ -698,7 +698,7 @@
                         {#each tableList as item, index}
                           <!-- row -->
                           <tr
-                            class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                            class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                           >
                             <td
                               class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
index 1190fd3c..00d1f5dc 100644
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
@@ -520,7 +520,7 @@
                 class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
               >
                 <div
-                  class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                 >
                   {#each tabs as item, i}
                     {#if data?.user?.tier !== "Pro" && i > 0}
@@ -603,7 +603,7 @@
                       <DropdownMenu.Trigger asChild let:builder>
                         <Button
                           builders={[builder]}
-                          class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">{$timeFrame}</span>
                           <svg
@@ -631,19 +631,19 @@
                         <DropdownMenu.Group>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "5Y")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             5 years
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "10Y")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             10 years
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "MAX")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             Max
                           </DropdownMenu.Item>
@@ -653,7 +653,7 @@
                   </div>
                   <Button
                     on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-2 w-full border-gray-600 border bg-[#09090B] 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
@@ -675,7 +675,7 @@
                 <div class="sm:w-full">
                   <div class="relative">
                     <select
-                      class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+                      class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
                       on:change={changeStatement}
                     >
                       <option disabled>Choose an Income Variable</option>
@@ -781,7 +781,7 @@
                       {#each tableList as item, index}
                         <!-- row -->
                         <tr
-                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                         >
                           <td
                             class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
index 400083ac..4c15a184 100644
--- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
@@ -465,7 +465,7 @@
                 class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
               >
                 <div
-                  class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                 >
                   {#each tabs as item, i}
                     {#if data?.user?.tier !== "Pro" && i > 0}
@@ -548,7 +548,7 @@
                       <DropdownMenu.Trigger asChild let:builder>
                         <Button
                           builders={[builder]}
-                          class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">{$timeFrame}</span>
                           <svg
@@ -576,19 +576,19 @@
                         <DropdownMenu.Group>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "5Y")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             5 years
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "10Y")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             10 years
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "MAX")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             Max
                           </DropdownMenu.Item>
@@ -598,7 +598,7 @@
                   </div>
                   <Button
                     on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-2 w-full border-gray-600 border bg-[#09090B] 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
@@ -620,7 +620,7 @@
                 <div class="sm:w-full">
                   <div class="relative">
                     <select
-                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
                       on:change={changeStatement}
                     >
                       <option disabled>Choose an Cash Flow Variable</option>
@@ -715,7 +715,7 @@
                       {#each tableList as item, index}
                         <!-- row -->
                         <tr
-                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                         >
                           <td
                             class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
index 010bdda0..fbff3197 100644
--- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
@@ -423,7 +423,7 @@
                 class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
               >
                 <div
-                  class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                 >
                   {#each tabs as item, i}
                     {#if data?.user?.tier !== "Pro" && i > 0}
@@ -506,7 +506,7 @@
                       <DropdownMenu.Trigger asChild let:builder>
                         <Button
                           builders={[builder]}
-                          class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">{$timeFrame}</span>
                           <svg
@@ -534,19 +534,19 @@
                         <DropdownMenu.Group>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "5Y")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             5 years
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "10Y")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             10 years
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "MAX")}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             Max
                           </DropdownMenu.Item>
@@ -556,7 +556,7 @@
                   </div>
                   <Button
                     on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-2 w-full border-gray-600 border bg-[#09090B] 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
@@ -578,7 +578,7 @@
                 <div class="sm:w-full">
                   <div class="relative">
                     <select
-                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
                       on:change={changeStatement}
                     >
                       <option disabled>Choose an Income Variable</option>
@@ -659,7 +659,7 @@
                       {#each tableList as item, index}
                         <!-- row -->
                         <tr
-                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                         >
                           <td
                             class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
@@ -751,7 +751,7 @@
                     </thead>
                     <tbody>
                       <!-- row -->
-                      <tr class="text-white odd:bg-[#27272A] whitespace-nowrap">
+                      <tr class="text-white odd:bg-secondary whitespace-nowrap">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >PE Ratio</td
@@ -764,7 +764,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >PS Ratio</td
@@ -778,7 +778,7 @@
                         {/each}
                       </tr>
                       <!-- row -->
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >PB Ratio</td
@@ -791,7 +791,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A] whitespace-nowrap">
+                      <tr class="text-white odd:bg-secondary whitespace-nowrap">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >P/FCF Ratio</td
@@ -806,7 +806,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >P/OCF Ratio</td
@@ -823,7 +823,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >OCF/S Ratio</td
@@ -838,7 +838,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Debt / Equity Ratio</td
@@ -852,7 +852,7 @@
                         {/each}
                       </tr>
                       <!-- row -->
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Quick Ratio</td
@@ -866,7 +866,7 @@
                         {/each}
                       </tr>
                       <!-- row -->
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Current Ratio</td
@@ -879,7 +879,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem] whitespace-nowrap"
                           >Asset Turnover</td
@@ -890,7 +890,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Interest Coverage</td
@@ -904,7 +904,7 @@
                         {/each}
                       </tr>
                       <!-- row -->
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Return on Equity (ROE)</td
@@ -915,7 +915,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Return on Assets (ROA)</td
@@ -926,7 +926,7 @@
                           >
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Return on Capital (ROIC)</td
@@ -939,7 +939,7 @@
                           >
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Dividend Yield</td
@@ -950,7 +950,7 @@
                           >
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Payout Ratio</td
@@ -963,7 +963,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Gross Profit Margin</td
@@ -978,7 +978,7 @@
                           </td>
                         {/each}
                       </tr>
-                      <tr class="text-white odd:bg-[#27272A]">
+                      <tr class="text-white odd:bg-secondary">
                         <td
                           class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
                           >Net Profit Margin</td
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
index f063e362..67c1b0e9 100644
--- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -67,8 +67,8 @@
               href={`/stocks/${$stockTicker}/forecast`}
               on:click={() => changeSubSection("overview")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Overview
             </a>
@@ -77,8 +77,8 @@
               href={`/stocks/${$stockTicker}/forecast/analyst`}
               on:click={() => changeSubSection("analyst")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Analysts Ratings
             </a>
diff --git a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
index eca805df..6465fa73 100644
--- a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
@@ -256,7 +256,7 @@
                 class="inline-flex justify-center w-full rounded-md sm:w-auto"
               >
                 <div
-                  class="bg-[#313131] w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  class="bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                 >
                   {#each tabs as item, i}
                     {#if data?.user?.tier !== "Pro" && i > 0}
@@ -422,7 +422,7 @@
                   <tr
                     class="{latestInfoDate(item?.date)
                       ? 'bg-[#F9AB00] bg-opacity-[0.1]'
-                      : 'odd:bg-[#27272A]'} border-b-[#09090B] {index + 1 ===
+                      : 'odd:bg-secondary'} border-b-[#09090B] {index + 1 ===
                       historyList?.slice(0, 3)?.length &&
                     data?.user?.tier !== 'Pro'
                       ? 'opacity-[0.1]'
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index 69fe38b4..b32b1224 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -87,8 +87,8 @@
                 href={`/stocks/${$stockTicker}/insider`}
                 on:click={() => changeSubSection("insider")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
-                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
               >
                 Insider Trading
               </a>
@@ -98,8 +98,8 @@
                 on:click={() => changeSubSection("institute")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'institute'
-                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
               >
                 13F Institute
               </a>
@@ -109,8 +109,8 @@
                 on:click={() => changeSubSection("congress-trading")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'congress-trading'
-                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
               >
                 Congress Trading
               </a>
@@ -119,8 +119,8 @@
                 on:click={() => changeSubSection("transcripts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'transcripts'
-                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
               >
                 Transcripts
               </a>
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 09a2b094..375ab5a2 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -299,7 +299,7 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">Year: {year}</span>
                         <svg
@@ -328,7 +328,7 @@
                         {#each yearRange as index}
                           <DropdownMenu.Item
                             on:click={() => (year = index)}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             {index}
                           </DropdownMenu.Item>
@@ -342,7 +342,7 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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"
                           >Quarter: Q{quarter}</span
@@ -373,7 +373,7 @@
                         {#each [1, 2, 3, 4] as index}
                           <DropdownMenu.Item
                             on:click={() => (quarter = index)}
-                            class="cursor-pointer hover:bg-[#27272A]"
+                            class="cursor-pointer hover:bg-primary"
                           >
                             Q{index}
                           </DropdownMenu.Item>
@@ -599,7 +599,7 @@
                   {#each insiderTradingList as item, index}
                     {#if item?.price > 0}
                       <tr
-                        class="text-white odd:bg-[#27272A] {index + 1 ===
+                        class="text-white odd:bg-secondary {index + 1 ===
                           insiderTradingList?.slice(0, 6)?.length &&
                         data?.user?.tier !== 'Pro'
                           ? 'opacity-[0.1]'
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index 78568d7a..014c3a96 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -321,7 +321,7 @@
                   <tbody>
                     {#each senateTradingList as item}
                       <tr
-                        class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
+                        class="odd:bg-secondary sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
                       >
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
index 13180b27..3bbe09a4 100644
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -130,7 +130,7 @@
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button
                     builders={[builder]}
-                    class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">Year: {year}</span>
                     <svg
@@ -162,7 +162,7 @@
                           year = index;
                           getTranscripts();
                         }}
-                        class="cursor-pointer hover:bg-[#27272A]"
+                        class="cursor-pointer hover:bg-primary"
                       >
                         {index}
                       </DropdownMenu.Item>
@@ -176,7 +176,7 @@
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button
                     builders={[builder]}
-                    class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">Quarter: Q{quarter}</span>
                     <svg
@@ -208,7 +208,7 @@
                           quarter = index;
                           getTranscripts();
                         }}
-                        class="cursor-pointer hover:bg-[#27272A]"
+                        class="cursor-pointer hover:bg-primary"
                       >
                         Q{index}
                       </DropdownMenu.Item>
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index a2f60d0e..babeae97 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -75,8 +75,8 @@
                 href={getHref(sectionKey)}
                 on:click={() => changeSubSection(sectionKey)}
                 class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey
-                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
               >
                 {title}
               </a>
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index e17749eb..78a56934 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -125,9 +125,9 @@
               </thead>
               <tbody class="shadow-md">
                 {#each revenueNames as name, index}
-                  <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]">
+                  <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary">
                     <th
-                      class="whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
+                      class="whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
                     >
                       {#if index < 3}
                         <a
@@ -205,10 +205,10 @@
                 <tbody class="shadow-md">
                   {#each geographicNames as name, index}
                     <tr
-                      class="bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]"
+                      class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary"
                     >
                       <th
-                        class="text-white whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
+                        class="text-white whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
                         >{name} Revenue</th
                       >
                       {#each geographiCategoryValues[index] as value}
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index ad01845a..f0b3b565 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -205,7 +205,7 @@
                     {#each tableList as item, index}
                       <!-- row -->
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] cursor-pointer"
                       >
                         <td
                           class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 2f3740d5..4666dc4b 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -696,7 +696,7 @@
 
           <div class="flex flex-row items-center w-full mt-10">
             <select
-              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
+              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeTimePeriod}
             >
               <option disabled>Choose a time period</option>
@@ -708,7 +708,7 @@
             </select>
 
             <select
-              class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
+              class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeVolumeOI}
             >
               <option disabled>Choose a category</option>
@@ -750,7 +750,7 @@
             </h3>
 
             <div
-              class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
+              class="bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
             >
               {#each tabEX as item, i}
                 <button
@@ -785,7 +785,7 @@
 
           {#if optionList?.length !== 0}
             <div
-              class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
+              class="bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
             >
               {#each tabs as item, i}
                 <button
@@ -812,7 +812,7 @@
             {#if activeIdx === 1}
               <div class="relative mb-6">
                 <select
-                  class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
+                  class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
                   on:change={changeStatement}
                 >
                   <option disabled>Choose an Expiration Date</option>
@@ -878,7 +878,7 @@
                         on:click={() => handleViewData(item?.date)}
                         on:mouseover={() =>
                           getDailyTransactions($stockTicker + "+" + item?.date)}
-                        class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index +
+                        class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] {index +
                           1 ===
                           optionList?.slice(0, 3)?.length &&
                         data?.user?.tier !== 'Pro'
@@ -1067,7 +1067,7 @@
                   <tbody>
                     {#each data?.user?.tier === "Pro" ? optionChainList : optionChainList?.slice(0, 3) as item, index}
                       <tr
-                        class="odd:bg-[#27272A] border-b-[#09090B] {index +
+                        class="odd:bg-secondary border-b-[#09090B] {index +
                           1 ===
                           optionChainList?.slice(0, 3)?.length &&
                         data?.user?.tier !== 'Pro'
@@ -1254,7 +1254,7 @@
             <tbody>
               {#each optionHistoryList as item}
                 <!-- row -->
-                <tr class="odd:bg-[#27272A] border-b-[#09090B]">
+                <tr class="odd:bg-secondary border-b-[#09090B]">
                   <td class="text-white text-sm text-start whitespace-nowrap">
                     {formatTime(item?.time)}
                   </td>
diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
index 3d0a758d..f74dd588 100644
--- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
@@ -51,8 +51,8 @@
               href={`/stocks/${$stockTicker}/statistics`}
               on:click={() => changeSubSection("overview")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Overview
             </a>
@@ -61,8 +61,8 @@
               href={`/stocks/${$stockTicker}/statistics/market-cap`}
               on:click={() => changeSubSection("market-cap")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Market Cap
             </a>
@@ -70,8 +70,8 @@
               href={`/stocks/${$stockTicker}/statistics/employees`}
               on:click={() => changeSubSection("employees")}
               class="p-2 px-5 cursor-pointer {displaySubSection === 'employees'
-                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
             >
               Employees
             </a>
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte
index 492da619..12d45b02 100644
--- a/src/routes/stocks/[tickerID]/statistics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte
@@ -97,7 +97,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Outstanding</span>
                     </td>
@@ -106,7 +106,7 @@
                       title="3,194,640,415"
                       >{abbreviateNumber(rawData?.sharesOutStanding)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Change (YoY)</span>
                     </td>
@@ -117,7 +117,7 @@
                         "percent",
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Change (QoQ)</span>
                     </td>
@@ -125,7 +125,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.sharesQoQ, "percent")}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Owned by Institutions (%)</span>
                     </td>
@@ -136,7 +136,7 @@
                         "percent",
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Floating</span>
                     </td>
@@ -146,7 +146,7 @@
                       >{abbreviateNumber(rawData?.floatShares)}</td
                     >
                   </tr>
-                  <tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  <tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Failed to Deliver (FTD) Shares</span>
                     </td>
@@ -155,7 +155,7 @@
                       title="2,777,647,654"
                       >{abbreviateNumber(rawData?.failToDeliver)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FTD / Avg. Volume</span>
                     </td>
@@ -184,7 +184,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short Interest</span>
                     </td>
@@ -193,7 +193,7 @@
                       title="74,332,630"
                       >{abbreviateNumber(rawData?.sharesShort)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short % of Shares Out</span>
                     </td>
@@ -201,7 +201,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.shortOutStandingPercent}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short % of Float</span>
                     </td>
@@ -209,7 +209,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.shortFloatPercent}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short Ratio (days to cover)</span>
                     </td>
@@ -238,7 +238,7 @@
 
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PE Ratio</span>
                     </td>
@@ -246,7 +246,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceEarningsRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Forward PE</span>
                     </td>
@@ -254,7 +254,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.forwardPE}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PS Ratio</span>
                     </td>
@@ -262,7 +262,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceToSalesRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Forward PS</span>
                     </td>
@@ -270,7 +270,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.forwardPS}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PB Ratio</span>
                     </td>
@@ -278,7 +278,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceToBookRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>P/FCF Ratio</span>
                     </td>
@@ -286,7 +286,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceToFreeCashFlowsRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PEG Ratio</span>
                     </td>
@@ -317,7 +317,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / Earnings</span>
                     </td>
@@ -325,7 +325,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.evEarnings}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / Sales</span>
                     </td>
@@ -333,7 +333,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.evSales}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / EBITDA</span>
                     </td>
@@ -341,7 +341,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.evEBITDA}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / EBIT</span>
                     </td>
@@ -349,7 +349,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.evEBIT}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / FCF</span>
                     </td>
@@ -373,7 +373,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Current Ratio</span>
                     </td>
@@ -381,7 +381,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.currentRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Quick Ratio</span>
                     </td>
@@ -389,7 +389,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.quickRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Debt / Equity</span>
                     </td>
@@ -397,7 +397,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.debtEquityRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Total Debt / Capitalization</span>
                     </td>
@@ -407,7 +407,7 @@
                         rawData?.totalDebtToCapitalization,
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Cash Flow / Debt</span>
                     </td>
@@ -415,7 +415,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.cashFlowToDebtRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Interest Coverage</span>
                     </td>
@@ -439,7 +439,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Return on Equity (ROE)</span>
                     </td>
@@ -447,7 +447,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.returnOnEquity}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Return on Assets (ROA)</span>
                     </td>
@@ -455,7 +455,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.returnOnAssets}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Return on Capital (ROIC)</span>
                     </td>
@@ -463,7 +463,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.returnOnInvestedCapital}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Revenue Per Employee</span>
                     </td>
@@ -471,7 +471,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.revenuePerEmployee)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Profits Per Employee</span>
                     </td>
@@ -479,7 +479,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.profitPerEmployee)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Employee Count</span></td
                     >
@@ -487,7 +487,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="140,473">{abbreviateNumber(rawData?.employees)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Asset Turnover</span>
                     </td>
@@ -495,7 +495,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.assetTurnover}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Inventory Turnover</span>
                     </td>
@@ -511,7 +511,7 @@
               <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Taxes</h2>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Income Tax</span>
                     </td>
@@ -519,7 +519,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.incomeTaxExpense)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Effective Tax Rate</span>
                     </td>
@@ -548,7 +548,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Beta</span>
                     </td>
@@ -556,7 +556,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.beta}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>52-Week Price Change</span>
                     </td>
@@ -564,7 +564,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.change1Y}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>50-Day Moving Average</span>
                     </td>
@@ -572,7 +572,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.sma50}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>200-Day Moving Average</span>
                     </td>
@@ -580,7 +580,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.sma200}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Relative Strength Index (RSI)</span>
                     </td>
@@ -588,7 +588,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.rsi}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Average Volume (20 Days)</span>
                     </td>
@@ -617,7 +617,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Revenue</span></td
                     >
@@ -625,7 +625,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.revenue)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Gross Profit</span>
                     </td>
@@ -633,7 +633,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.grossProfit)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Operating Income</span>
                     </td>
@@ -641,7 +641,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.operatingIncome)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Net Income</span>
                     </td>
@@ -649,7 +649,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.netIncome)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBITDA</span>
                     </td>
@@ -657,7 +657,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.ebitda)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBIT</span>
                     </td>
@@ -665,7 +665,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.ebit)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Earnings Per Share (EPS)</span>
                     </td>
@@ -701,7 +701,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Cash &amp; Cash Equivalents</span>
                     </td>
@@ -709,7 +709,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.cashAndCashEquivalents)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Total Debt</span>
                     </td>
@@ -717,7 +717,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.totalDebt)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Net Cash</span>
                     </td>
@@ -728,7 +728,7 @@
                         rawData?.cashAndCashEquivalents - rawData?.totalDebt,
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Retained Earnings</span>
                     </td>
@@ -736,7 +736,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.retainedEarnings)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Total Assets</span>
                     </td>
@@ -744,7 +744,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.totalAssets)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Working Capital</span>
                     </td>
@@ -783,7 +783,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Operating Cash Flow</span>
                     </td>
@@ -791,7 +791,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.operatingCashFlow)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Capital Expenditures</span>
                     </td>
@@ -799,7 +799,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.capitalExpenditure)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Free Cash Flow</span>
                     </td>
@@ -807,7 +807,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{abbreviateNumber(rawData?.freeCashFlow)}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FCF Per Share</span>
                     </td>
@@ -840,7 +840,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Gross Margin</span>
                     </td>
@@ -848,7 +848,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.grossProfitMargin, "int")}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Operating Margin</span>
                     </td>
@@ -856,7 +856,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.operatingProfitMargin, "int")}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Pretax Margin</span>
                     </td>
@@ -864,7 +864,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.pretaxProfitMargin, "int")}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Profit Margin</span>
                     </td>
@@ -872,7 +872,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.netProfitMargin, "int")}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBITDA Margin</span>
                     </td>
@@ -880,7 +880,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.ebitdaMargin, "int")}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBIT Margin</span>
                     </td>
@@ -888,7 +888,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.ebitMargin, "int")}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FCF Margin</span>
                     </td>
@@ -914,7 +914,7 @@
               </p>
               <table class="w-full" data-test="statistics-table">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Dividend Per Share</span>
                     </td>
@@ -924,7 +924,7 @@
                         ? "$" + rawData?.annualDividend?.toFixed(2)
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Dividend Yield</span>
                     </td>
@@ -934,7 +934,7 @@
                         ? rawData?.dividendYield
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Dividend Growth (YoY)</span>
                     </td>
@@ -944,7 +944,7 @@
                         ? rawData?.dividendGrowth + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Payout Ratio</span>
                     </td>
@@ -955,7 +955,7 @@
                         ? rawData?.payoutRatio + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Earnings Yield</span>
                     </td>
@@ -965,7 +965,7 @@
                         ? rawData?.earningsYield + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FCF Yield</span>
                     </td>
@@ -1005,7 +1005,7 @@
               </p>
               <table class="w-full" data-test="statistics-table">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Price Target</span>
                     </td>
@@ -1016,7 +1016,7 @@
                         ? "$" + rawData?.priceTarget
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Price Target Difference</span>
                     </td>
@@ -1027,7 +1027,7 @@
                         ? rawData?.upside + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Analyst Consensus</span>
                     </td>
@@ -1035,7 +1035,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="Strong Buy">{rawData?.analystRating ?? "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Analyst Count</span>
                     </td>
@@ -1075,7 +1075,7 @@
                 </p>
                 <table class="w-full" data-test="statistics-table">
                   <tbody
-                    ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                    ><tr class="border-y border-gray-600 odd:bg-secondary"
                       ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                         ><span>Last Split Date</span>
                       </td>
@@ -1092,7 +1092,7 @@
                           },
                         )}</td
                       >
-                    </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                    </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                       ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                         ><span>Split Type</span>
                       </td>
@@ -1100,7 +1100,7 @@
                         class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                         title="Forward">{rawData?.splitType}</td
                       >
-                    </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                    </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                       ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                         ><span>Split Ratio</span>
                       </td>
@@ -1117,7 +1117,7 @@
               <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Scores</h2>
               <table class="w-full" data-test="statistics-table">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  ><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Altman Z-Score</span>
                     </td>
@@ -1125,7 +1125,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="n/a">{rawData?.altmanZScore}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
+                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Piotroski F-Score</span>
                     </td>
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
index bf04dc7e..ae4c5400 100644
--- a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
@@ -532,7 +532,7 @@
                   <DropdownMenu.Trigger asChild let:builder>
                     <Button
                       builders={[builder]}
-                      class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">{sortBy}</span>
                       <svg
@@ -560,19 +560,19 @@
                     <DropdownMenu.Group>
                       <DropdownMenu.Item
                         on:click={() => (sortBy = "Total")}
-                        class="cursor-pointer hover:bg-[#27272A]"
+                        class="cursor-pointer hover:bg-primary"
                       >
                         Total
                       </DropdownMenu.Item>
                       <DropdownMenu.Item
                         on:click={() => (sortBy = "Change")}
-                        class="cursor-pointer hover:bg-[#27272A]"
+                        class="cursor-pointer hover:bg-primary"
                       >
                         Change
                       </DropdownMenu.Item>
                       <DropdownMenu.Item
                         on:click={() => (sortBy = "Growth")}
-                        class="cursor-pointer hover:bg-[#27272A]"
+                        class="cursor-pointer hover:bg-primary"
                       >
                         Growth
                       </DropdownMenu.Item>
@@ -582,7 +582,7 @@
               </div>
               <Button
                 on:click={() => exportData("csv")}
-                class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                class="ml-2 w-full border-gray-600 border bg-[#09090B] 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
@@ -646,7 +646,7 @@
               </thead>
               <tbody class="">
                 {#each historyList as item, index}
-                  <tr class="text-gray-200 odd:bg-[#27272A]">
+                  <tr class="text-gray-200 odd:bg-secondary">
                     <td
                       class="text-start border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
                     >
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index f870354d..d61f5e48 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -497,7 +497,7 @@
                         <DropdownMenu.Trigger asChild let:builder>
                           <Button
                             builders={[builder]}
-                            class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] 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-[#09090B] 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">{timePeriod}</span
                             >
@@ -526,43 +526,43 @@
                           <DropdownMenu.Group>
                             <DropdownMenu.Item
                               on:click={() => changeStatement("1M")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               1 Month
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => changeStatement("6M")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               6 Months
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => changeStatement("1Y")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               1 Year
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => changeStatement("3Y")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               3 Years
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => changeStatement("5Y")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               5 Years
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => changeStatement("10Y")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               10 Years
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                               on:click={() => changeStatement("Max")}
-                              class="cursor-pointer hover:bg-[#27272A]"
+                              class="cursor-pointer hover:bg-primary"
                             >
                               Max
                             </DropdownMenu.Item>
@@ -572,7 +572,7 @@
                     </div>
                     <Button
                       on:click={() => exportData("csv")}
-                      class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                      class="ml-2 w-full border-gray-600 border bg-[#09090B] 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
@@ -602,7 +602,7 @@
                   class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mb-6"
                 >
                   <div
-                    class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                    class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                   >
                     {#each tabs as item, i}
                       {#if data?.user?.tier !== "Pro" && i > 0}
@@ -671,7 +671,7 @@
                       {#each tableList as item, index}
                         <!-- row -->
                         <tr
-                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                         >
                           <td
                             class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte
index 5a6228fe..69816ba9 100644
--- a/src/routes/watchlist/+layout.svelte
+++ b/src/routes/watchlist/+layout.svelte
@@ -59,8 +59,8 @@
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/watchlist/options/+page.svelte b/src/routes/watchlist/options/+page.svelte
index c9609cc2..7770d033 100644
--- a/src/routes/watchlist/options/+page.svelte
+++ b/src/routes/watchlist/options/+page.svelte
@@ -290,7 +290,7 @@
                   <tbody>
                     {#each optionsWatchlist as item, index}
                       <!-- row -->
-                      <tr class="odd:bg-[#27272A] border-b-[#09090B]">
+                      <tr class="odd:bg-secondary border-b-[#09090B]">
                         <td
                           class="text-white text-sm text-start whitespace-nowrap"
                         >
@@ -301,7 +301,7 @@
                           on:click={() => handleFilter(item?.id)}
                           class="{index % 2
                             ? 'bg-[#09090B]'
-                            : 'bg-[#27272A]'} font-normal text-sm sm:text-[1rem] text-start"
+                            : 'bg-primary'} font-normal text-sm sm:text-[1rem] text-start"
                         >
                           <div class=" flex flex-row items-center">
                             <input
@@ -428,7 +428,7 @@
                 </span>
                 <a
                   href="/options-flow"
-                  class="py-3 sm:hover:bg-[#27272A] rounded-md w-64 flex mt-5 justify-center items-center m-auto text-white border border-gray-600 group"
+                  class="py-3 sm:hover:bg-primary rounded-md w-64 flex mt-5 justify-center items-center m-auto text-white border border-gray-600 group"
                 >
                   <span class="font-semibold text-[1rem]"
                     >Follow the Whales
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 3d303b8c..ba884f5c 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -875,7 +875,7 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="min-w-[110px] w-full sm:w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md truncate"
+                        class="min-w-[110px] w-full sm:w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md truncate"
                       >
                         <span
                           class="truncate font-semibold text-white text-sm sm:text-[1rem]"
@@ -932,8 +932,8 @@
                             on:click={() => changeWatchList(item)}
                             class="text-sm sm:text-[1rem] {item?.id ===
                             displayWatchList?.id
-                              ? 'bg-[#27272A]'
-                              : ''} cursor-pointer sm:hover:bg-[#27272A]"
+                              ? 'bg-primary'
+                              : ''} cursor-pointer sm:hover:bg-primary"
                           >
                             {item?.title} ({item?.ticker?.length})
                             <label
@@ -990,7 +990,7 @@
                     {/if}
                     <label
                       on:click={handleEditMode}
-                      class="border text-sm border-gray-600 sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 px-3 text-white bg-[#09090B] sm:hover:bg-[#27272A] ease-out sm:hover:text-red-500"
+                      class="border text-sm border-gray-600 sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 px-3 text-white bg-[#09090B] sm:hover:bg-primary ease-out sm:hover:text-red-500"
                     >
                       <svg
                         class="inline-block w-5 h-5"
@@ -1060,7 +1060,7 @@
                       >
                         {#each searchBarData as item}
                           <Combobox.Item
-                            class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-[#27272A]"
+                            class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
                             value={item.symbol}
                             label={item.name}
                             on:click={(e) => handleAddTicker(e, item?.symbol)}
@@ -1094,7 +1094,7 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="sm:ml-auto min-w-[110px] w-full sm:w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md truncate"
+                        class="sm:ml-auto min-w-[110px] w-full sm:w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded-md truncate"
                       >
                         <span class="truncate text-white text-sm sm:text-[1rem]"
                           >Indicators</span
@@ -1164,7 +1164,7 @@
                       <DropdownMenu.Group class="pb-2">
                         <!-- Added padding to avoid overlapping with Reset button -->
                         {#each searchQuery?.length !== 0 ? testList : allRows as item}
-                          <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
+                          <DropdownMenu.Item class="sm:hover:bg-primary">
                             <div class="flex items-center">
                               {#if data?.user?.tier === "Pro" || excludedRules?.has(item?.rule)}
                                 <label
@@ -1308,7 +1308,7 @@
                       <tbody class="p-0">
                         {#each watchList as item}
                           <tr
-                            class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+                            class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
                           >
                             <td
                               on:click={() => handleFilter(item?.symbol)}
@@ -1434,7 +1434,7 @@
                       class="inline-flex justify-center w-full rounded-md sm:w-auto mb-3"
                     >
                       <div
-                        class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                        class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                       >
                         {#each tabs as item, i}
                           {#if data?.user?.tier !== "Pro" && i > 0}
@@ -1493,7 +1493,7 @@
                             {#each titleGroups as { title, items, symbols }}
                               <div class="flex border-gray-600 text-small">
                                 <div
-                                  class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
+                                  class="hidden min-w-[100px] items-center justify-center bg-primary p-1 lg:flex"
                                 >
                                   {new Date(
                                     items[0].publishedDate,
@@ -1565,7 +1565,7 @@
                           {#each titleGroups as item}
                             <div class="flex border-gray-600 text-small">
                               <div
-                                class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
+                                class="hidden min-w-[100px] items-center justify-center bg-primary p-1 lg:flex"
                               >
                                 {formatTime(item?.time)}
                               </div>
@@ -1726,7 +1726,7 @@
   ></label>
 
   <div
-    class="modal-box w-full bg-[#27272A] border border-gray-600 overflow-hidden"
+    class="modal-box w-full bg-primary border border-gray-600 overflow-hidden"
   >
     <h3
       class="font-bold text-[1rem] text-center sm:text-lg flex justify-center items-center mt-10 text-white"