diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index db829543..53f38299 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -3,6 +3,7 @@
   import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils";
   import EstimationGraph from "$lib/components/EstimationGraph.svelte";
   import Lazy from "svelte-lazy";
+  import { mode } from "mode-watcher";
 
   export let data;
 
@@ -323,8 +324,8 @@
       },
       chart: {
         type: "line",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
         animation: false,
       },
@@ -345,14 +346,14 @@
         borderRadius: 4,
         formatter: function () {
           // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${
+          let tooltipContent = `<span class=" m-auto  text-[1rem] font-[501]">${
             this?.x
           }</span><br>`;
 
           // Loop through each point in the shared tooltip
           this.points?.forEach((point) => {
-            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-          <span class="text-white font-normal text-sm" >${abbreviateNumber(
+            tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span> 
+          <span class=" font-normal text-sm" >${abbreviateNumber(
             point.y,
           )}</span><br>`;
           });
@@ -366,23 +367,23 @@
         endOnTick: false,
         categories: dates,
         crosshair: {
-          color: "#fff", // Set the color of the crosshair line
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
 
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
             fontSize: "12px",
           },
         },
       },
       yAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "black" : "white" },
         },
         title: { text: null },
         opposite: true,
@@ -391,13 +392,13 @@
         {
           name: "Actual",
           data: valueList,
-          color: "#fff",
+          color: $mode === "light" ? "#2C6288" : "white",
           animation: false,
         },
         {
           name: "Avg",
           data: avgList,
-          color: "#fff",
+          color: $mode === "light" ? "#2C6288" : "white",
           dashStyle: "Dash", // Dashed line style
           animation: false,
           marker: {
@@ -408,14 +409,14 @@
           name: "Low",
           data: lowList,
           // If you want a dashed line with a different color, set the series color to that color.
-          color: "#c2c7cf",
+          color: $mode === "light" ? "#8AAAC0" : "#c2c7cf",
           dashStyle: "Dash",
           animation: false,
         },
         {
           name: "High",
           data: highList,
-          color: "#c2c7cf",
+          color: $mode === "light" ? "#8AAAC0" : "#c2c7cf",
           dashStyle: "Dash",
           animation: false,
         },
@@ -466,8 +467,8 @@
       },
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
         animation: false,
       },
@@ -481,7 +482,7 @@
         borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
         borderWidth: 1,
         style: {
-          color: "#fff",
+          color: "white",
           fontSize: "14px",
           padding: "10px",
         },
@@ -517,16 +518,16 @@
         type: "datetime",
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
             fontSize: "12px",
           },
         },
       },
       yAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "black" : "white" },
         },
         title: { text: null },
         opposite: true,
@@ -545,8 +546,18 @@
           data: growthList?.map((value) => ({
             y: value,
             // Set color based on the sign of the value
-            color: value >= 0 ? "#00FC50" : "#ED3333",
-            borderColor: value >= 0 ? "#00FC50" : "#ED3333",
+            color:
+              value >= 0
+                ? $mode === "light"
+                  ? "#338D73"
+                  : "#00FC50"
+                : "#ED3333",
+            borderColor:
+              value >= 0
+                ? $mode === "light"
+                  ? "#338D73"
+                  : "#00FC50"
+                : "#ED3333",
             borderRadius: "1px",
           })),
           zIndex: 5,
@@ -562,8 +573,8 @@
             // If either high or low is null/undefined, return nulls.
             return high != null && low != null ? [low, high] : [null, null];
           }),
-          color: "#fff",
-          lineWidth: 2, // Thicker lines for error bars
+          color: $mode === "light" ? "black" : "white",
+          lineWidth: 1, // Thicker lines for error bars
           whiskerLength: 10, // Adjust whisker length as needed
           zIndex: 10,
           // Disable tooltip for error bar points
@@ -740,7 +751,7 @@
   }
 
   $: {
-    if ($stockTicker && typeof window !== "undefined") {
+    if ($stockTicker || $mode) {
       isLoaded = false;
       analystEstimateList = [];
       analystEstimateList = data?.getAnalystEstimate || [];
@@ -759,7 +770,7 @@
   }
 </script>
 
-<section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
+<section class="overflow-hidden h-full pb-8 sm:pb-2">
   <main class="overflow-hidden">
     <div class="w-full m-auto">
       <div class="flex flex-row items-center"></div>
@@ -767,36 +778,30 @@
       {#if isLoaded}
         {#if analystEstimateList?.length !== 0}
           <div
-            class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
+            class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-2 m-auto overflow-x-auto pr-5 sm:pr-0"
           >
             <table
-              class="table table-sm table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800"
+              class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
             >
-              <thead class="">
+              <thead class="text-muted dark:text-white">
                 <tr class="">
-                  <th
-                    class="bg-primary border-b border-[#000] text-white font-semibold text-sm text-start"
-                    >Fiscal Year</th
-                  >
+                  <th class=" font-semibold text-sm text-start">Fiscal Year</th>
                   {#each xData as item}
-                    <td
-                      class="z-20 bg-primary border-b border-[#000] text-white font-semibold text-sm text-end bg-default"
+                    <td class="z-20 font-semibold text-sm text-end"
                       >{"FY" + item}</td
                     >
                   {/each}
                 </tr>
               </thead>
               <tbody>
-                <tr class="bg-primary border-b border-gray-600">
+                <tr class=" ">
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
                   >
                     Revenue
                   </th>
                   {#each tableCombinedRevenue as item}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {item?.val === "0.00" ||
                       item?.val === null ||
                       item?.val === 0
@@ -806,21 +811,20 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-primary">
+                <tr class="bg-[#F6F7F8] dark:bg-odd">
                   <th
-                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-normal border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
                   >
                     Revenue Growth
                   </th>
                   {#each computeGrowthList(tableActualRevenue, tableCombinedRevenue) as item, index}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {#if index === 0 || item?.growth === null}
                         n/a
                       {:else if tableActualRevenue[index]?.val === null}
                         <span
-                          class="text-orange-400 {item?.growth > 0
+                          class="text-orange-600 dark:text-orange-400 {item?.growth >
+                          0
                             ? "before:content-['+']"
                             : ''}"
                         >
@@ -829,9 +833,9 @@
                       {:else}
                         <span
                           class={item?.growth > 0
-                            ? "text-[#00FC50] before:content-['+']"
+                            ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
                             : item?.growth < 0
-                              ? "text-[#FF2F1F]"
+                              ? "text-red-600 dark:text-[#FF2F1F]"
                               : ""}
                         >
                           {item?.growth}%
@@ -841,16 +845,14 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-primary border-b-[#09090B]">
+                <tr class="">
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
                   >
                     EPS
                   </th>
                   {#each tableCombinedEPS as item}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {item?.val === "0.00" ||
                       item?.val === null ||
                       item?.val === 0
@@ -860,21 +862,20 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-primary">
+                <tr class="bg-[#F6F7F8] dark:bg-odd">
                   <th
-                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white font-normal text-start border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start"
                   >
                     EPS Growth
                   </th>
                   {#each computeGrowthList(tableActualEPS, tableCombinedEPS) as item, index}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {#if index === 0 || item?.growth === null}
                         n/a
                       {:else if tableActualRevenue[index]?.val === null}
                         <span
-                          class="text-orange-400 {item?.growth > 0
+                          class="text-orange-600 dark:text-orange-400 {item?.growth >
+                          0
                             ? "before:content-['+']"
                             : ''}"
                         >
@@ -883,9 +884,9 @@
                       {:else}
                         <span
                           class={item?.growth > 0
-                            ? "text-[#00FC50] before:content-['+']"
+                            ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
                             : item?.growth < 0
-                              ? "text-[#FF2F1F]"
+                              ? "text-red-600 dark:text-[#FF2F1F]"
                               : ""}
                         >
                           {item?.growth}%
@@ -894,16 +895,14 @@
                     </td>
                   {/each}
                 </tr>
-                <tr class="bg-primary border-b border-gray-600">
+                <tr>
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
                   >
                     Net Income
                   </th>
                   {#each tableCombinedNetIncome as item}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {item?.val === "0.00" ||
                       item?.val === null ||
                       item?.val === 0
@@ -913,21 +912,20 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-primary">
+                <tr class="bg-[#F6F7F8] dark:bg-odd">
                   <th
-                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white font-normal text-start border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start"
                   >
                     Net Income Growth
                   </th>
                   {#each computeGrowthList(tableActualNetIncome, tableCombinedNetIncome) as item, index}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {#if index === 0 || item?.growth === null}
                         n/a
                       {:else if tableActualNetIncome[index]?.val === null}
                         <span
-                          class="text-orange-400 {item?.growth > 0
+                          class="text-orange-600 dark:text-orange-400 {item?.growth >
+                          0
                             ? "before:content-['+']"
                             : ''}"
                         >
@@ -936,9 +934,9 @@
                       {:else}
                         <span
                           class={item?.growth > 0
-                            ? "text-[#00FC50] before:content-['+']"
+                            ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
                             : item?.growth < 0
-                              ? "text-[#FF2F1F]"
+                              ? "text-red-600 dark:text-[#FF2F1F]"
                               : ""}
                         >
                           {item?.growth}%
@@ -948,16 +946,14 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-primary border-b border-gray-600">
+                <tr>
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
                   >
                     EBITDA
                   </th>
                   {#each tableCombinedEbitda as item}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {item?.val === "0.00" ||
                       item?.val === null ||
                       item?.val === 0
@@ -967,21 +963,20 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-primary">
+                <tr class="bg-[#F6F7F8] dark:bg-odd">
                   <th
-                    class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white font-normal text-start border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start"
                   >
                     EBITDA Growth
                   </th>
                   {#each computeGrowthList(tableActualEbitda, tableCombinedEbitda) as item, index}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {#if index === 0 || item?.growth === null}
                         n/a
                       {:else if tableActualEbitda[index]?.val === null}
                         <span
-                          class="text-orange-400 {item?.growth > 0
+                          class="text-orange-600 dark:text-orange-400 {item?.growth >
+                          0
                             ? "before:content-['+']"
                             : ''}"
                         >
@@ -990,9 +985,9 @@
                       {:else}
                         <span
                           class={item?.growth > 0
-                            ? "text-[#00FC50] before:content-['+']"
+                            ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
                             : item?.growth < 0
-                              ? "text-[#FF2F1F]"
+                              ? "text-red-600 dark:text-[#FF2F1F]"
                               : ""}
                         >
                           {item?.growth}%
@@ -1002,15 +997,13 @@
                   {/each}
                 </tr>
 
-                <tr class="bg-primary border-b border-gray-600">
+                <tr>
                   <th
-                    class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
+                    class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
                     >No. Analysts</th
                   >
                   {#each tableCombinedRevenue as item}
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
-                    >
+                    <td class=" text-sm sm:text-[1rem] text-end">
                       {#if item?.FY > 24}
                         {item?.numOfAnalysts === (null || 0)
                           ? "n/a"
@@ -1024,11 +1017,11 @@
               </tbody>
             </table>
           </div>
-          <div class="text-white text-sm mt-2">
+          <div class=" text-sm mt-2">
             Historical EPS numbers are GAAP, while forecasted numbers may be
             non-GAAP.
           </div>
-          <div class="text-orange-400 text-sm mt-2">
+          <div class="text-orange-600 dark:text-orange-400 text-sm mt-2">
             &#42; This value depends on the forecast
           </div>
           <!--
diff --git a/src/lib/components/EstimationGraph.svelte b/src/lib/components/EstimationGraph.svelte
index 889f947e..aca18bbc 100644
--- a/src/lib/components/EstimationGraph.svelte
+++ b/src/lib/components/EstimationGraph.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import highcharts from "$lib/highcharts.ts";
   import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils";
+
   export let userTier;
   export let title;
   export let config;
@@ -14,9 +15,9 @@
 </script>
 
 {#if graphType !== "growth"}
-  <div>
+  <div class="shadow-sm">
     <h2 class="mb-2 text-xl font-bold">{title} Forecast</h2>
-    <div class="rounded-sm border p-2 border-gray-600">
+    <div class="rounded-sm border p-2 border-gray-300 dark:border-gray-600">
       <div class="h-[360px] w-full">
         {#if config !== null}
           <div use:highcharts={config}></div>
@@ -26,7 +27,7 @@
         <table class="w-full text-right">
           <thead
             ><tr
-              class="border-b border-gray-600 align-bottom text-white font-normal"
+              class="border-b border-gray-300 dark:border-gray-600 align-bottom font-normal"
               ><th class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
                 >{title}</th
               >
@@ -38,15 +39,16 @@
             </tr></thead
           >
           <tbody
-            ><tr class="border-b border-gray-600 last:border-0"
+            ><tr
+              class="border-b border-gray-300 dark:border-gray-600 last:border-0"
               ><td class="whitespace-nowrap px-1 py-[3px] text-left">High</td>
               {#each highDataList as item, index}
                 <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
                   {#if index !== 0}
                     {#if !["Pro", "Plus"]?.includes(userTier) && index >= highDataList?.length - 2}
-                      <a class="inline-block ml-0.5 text-white" href="/pricing"
+                      <a class="inline-block ml-0.5" href="/pricing"
                         >Pro<svg
-                          class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                          class="w-4 h-4 ml-0.5 mb-1 inline-block"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           ><path
@@ -61,15 +63,16 @@
                   {/if}
                 </td>
               {/each}
-            </tr><tr class="border-b border-gray-600 last:border-0"
+            </tr><tr
+              class="border-b border-gray-300 dark:border-gray-600 last:border-0"
               ><td class="whitespace-nowrap px-1 py-[3px] text-left">Avg</td>
               {#each avgDataList as item, index}
                 <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
                   {#if index !== 0}
                     {#if !["Pro", "Plus"]?.includes(userTier) && index >= avgDataList?.length - 2}
-                      <a class="inline-block ml-0.5 text-white" href="/pricing"
+                      <a class="inline-block ml-0.5" href="/pricing"
                         >Pro<svg
-                          class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                          class="w-4 h-4 ml-0.5 mb-1 inline-block"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           ><path
@@ -84,15 +87,16 @@
                   {/if}
                 </td>
               {/each}
-            </tr><tr class="border-b border-gray-600 last:border-0"
+            </tr><tr
+              class="border-b border-gray-300 dark:border-gray-600 last:border-0"
               ><td class="whitespace-nowrap px-1 py-[3px] text-left">Low</td>
               {#each lowDataList as item, index}
                 <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
                   {#if index !== 0}
                     {#if !["Pro", "Plus"]?.includes(userTier) && index >= lowDataList?.length - 2}
-                      <a class="inline-block ml-0.5 text-white" href="/pricing"
+                      <a class="inline-block ml-0.5" href="/pricing"
                         >Pro<svg
-                          class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                          class="w-4 h-4 ml-0.5 mb-1 inline-block"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           ><path
@@ -114,9 +118,9 @@
     </div>
   </div>
 {:else}
-  <div>
+  <div class="shadow-sm">
     <h2 class="mb-2 text-xl font-bold">{title}</h2>
-    <div class="rounded-sm border p-2 border-gray-600">
+    <div class="rounded-sm border p-2 border-gray-300 dark:border-gray-600">
       <div class="h-[360px] w-full">
         {#if config !== null}
           <div use:highcharts={config}></div>
@@ -126,7 +130,7 @@
         <table class="w-full text-right">
           <thead
             ><tr
-              class="border-b border-gray-600 align-bottom text-white font-normal whitespace-nowrap"
+              class="border-b border-gray-300 dark:border-gray-600 align-bottom font-normal whitespace-nowrap"
               ><th class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
                 >{title}</th
               >
@@ -138,15 +142,16 @@
             </tr></thead
           >
           <tbody
-            ><tr class="border-b border-gray-600 last:border-0"
+            ><tr
+              class="border-b border-gray-300 dark:border-gray-600 last:border-0"
               ><td class="whitespace-nowrap px-1 py-[3px] text-left">High</td>
               {#each computeGrowthSingleList(highDataList, avgDataList) as item, index}
                 <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
                   {#if index !== 0}
                     {#if !["Pro", "Plus"]?.includes(userTier) && index >= highDataList?.length - 2}
-                      <a class="inline-block ml-0.5 text-white" href="/pricing"
+                      <a class="inline-block ml-0.5" href="/pricing"
                         >Pro<svg
-                          class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                          class="w-4 h-4 ml-0.5 mb-1 inline-block"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           ><path
@@ -158,10 +163,10 @@
                     {:else}
                       <span
                         class={item?.growth !== null && item?.growth > 0
-                          ? "text-[#00FC50] before:content-['+']"
+                          ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
                           : item?.growth < 0
-                            ? "text-[#FF2F1F]"
-                            : "text-white"}
+                            ? "text-red-600 dark:text-[#FF2F1F]"
+                            : ""}
                       >
                         {item?.growth !== null && Math.abs(item?.growth - 0) > 0
                           ? abbreviateNumber(item?.growth) + "%"
@@ -171,15 +176,16 @@
                   {/if}
                 </td>
               {/each}
-            </tr><tr class="border-b border-gray-600 last:border-0"
+            </tr><tr
+              class="border-b border-gray-300 dark:border-gray-600 last:border-0"
               ><td class="whitespace-nowrap px-1 py-[3px] text-left">Avg</td>
               {#each avgGrowthList?.filter((item) => item.FY >= 25) as item, index}
                 <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
                   {#if index !== 0}
                     {#if !["Pro", "Plus"]?.includes(userTier) && index >= avgDataList?.length - 2}
-                      <a class="inline-block ml-0.5 text-white" href="/pricing"
+                      <a class="inline-block ml-0.5" href="/pricing"
                         >Pro<svg
-                          class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                          class="w-4 h-4 ml-0.5 mb-1 inline-block"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           ><path
@@ -191,10 +197,10 @@
                     {:else}
                       <span
                         class={item?.growth !== null && item?.growth > 0
-                          ? "text-[#00FC50] before:content-['+']"
+                          ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
                           : item?.growth < 0
-                            ? "text-[#FF2F1F]"
-                            : "text-white"}
+                            ? "text-red-600 dark:text-[#FF2F1F]"
+                            : ""}
                       >
                         {item?.growth !== null && Math.abs(item?.growth - 0) > 0
                           ? abbreviateNumber(item?.growth) + "%"
@@ -204,15 +210,16 @@
                   {/if}
                 </td>
               {/each}
-            </tr><tr class="border-b border-gray-600 last:border-0"
+            </tr><tr
+              class="border-b border-gray-300 dark:border-gray-600 last:border-0"
               ><td class="whitespace-nowrap px-1 py-[3px] text-left">Low</td>
               {#each computeGrowthSingleList(lowDataList, avgDataList) as item, index}
                 <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
                   {#if index !== 0}
                     {#if !["Pro", "Plus"]?.includes(userTier) && index >= lowDataList?.length - 2}
-                      <a class="inline-block ml-0.5 text-white" href="/pricing"
+                      <a class="inline-block ml-0.5" href="/pricing"
                         >Pro<svg
-                          class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                          class="w-4 h-4 ml-0.5 mb-1 inline-block"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           ><path
@@ -224,10 +231,10 @@
                     {:else}
                       <span
                         class={item?.growth !== null && item?.growth > 0
-                          ? "text-[#00FC50] before:content-['+']"
+                          ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
                           : item?.growth < 0
-                            ? "text-[#FF2F1F]"
-                            : "text-white"}
+                            ? "text-red-600 dark:text-[#FF2F1F]"
+                            : ""}
                       >
                         {item?.growth !== null && Math.abs(item?.growth - 0) > 0
                           ? abbreviateNumber(item?.growth) + "%"
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
index 1ecda2ee..6dc42e8e 100644
--- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -53,12 +53,12 @@
   });
 </script>
 
-<section class="w-full bg-default overflow-hidden h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="m-auto h-full overflow-hidden">
     <main class="w-full mb-4 sm:mb-0">
       <div class="m-auto">
         <nav
-          class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
+          class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
         >
           <ul class="flex flex-row items-center w-full text-white">
             <a
@@ -99,25 +99,3 @@
     <ScrollToTop />
   </div>
 </section>
-
-<style>
-  .scrollbar {
-    display: grid;
-    grid-gap: 18px;
-    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
-    grid-auto-flow: column;
-    overflow-x: auto;
-    scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
-    scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
-  }
-
-  /* Custom scrollbar for Webkit (Chrome, Safari) */
-  .scrollbar::-webkit-scrollbar {
-    width: 0; /* Hide the width of the scrollbar */
-    height: 0; /* Hide the height of the scrollbar */
-  }
-
-  .scrollbar::-webkit-scrollbar-thumb {
-    background: transparent; /* Make the thumb transparent */
-  }
-</style>
diff --git a/src/routes/stocks/[tickerID]/forecast/+page.svelte b/src/routes/stocks/[tickerID]/forecast/+page.svelte
index f9ca4655..eb8d75f8 100644
--- a/src/routes/stocks/[tickerID]/forecast/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+page.svelte
@@ -15,6 +15,7 @@
   import { goto } from "$app/navigation";
 
   import SEO from "$lib/components/SEO.svelte";
+  import { mode } from "mode-watcher";
 
   export let data;
 
@@ -181,8 +182,8 @@
     const options = {
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         animation: false,
         height: 360, // Add fixed height
         marginTop: 30, // Reduce top margin
@@ -222,7 +223,7 @@
       },
       yAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         labels: {
           style: { color: "white" },
         },
@@ -278,8 +279,8 @@
       },
       chart: {
         type: "gauge",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         animation: false,
       },
       title: {
@@ -381,7 +382,7 @@
 
               // "Analyst Consensus:" in white, rating in color
               return `
-          <span class="text-lg" style="color: #fff;">Analyst Consensus: </span>
+          <span class="text-lg">Analyst Consensus: </span>
           <span class="text-lg" style="color:${textColor};">${ratingText}</span>
         `;
             },
@@ -498,18 +499,18 @@
         },
       },
       chart: {
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
         animation: false,
       },
       title: {
-        text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-400">
+        text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-600 dark:text-gray-400">
           <h3 class="text-left">${$screenWidth && $screenWidth < 640 ? "Past Year" : "Past 12 Months"}</h3>
           <h3 class="text-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3>
          </div>`,
         style: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
           width: "100%",
         },
         verticalAlign: "top",
@@ -517,12 +518,12 @@
       },
       xAxis: {
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         type: "datetime",
         endOnTick: false,
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
           },
           formatter: function () {
             const date = new Date(this.value);
@@ -539,14 +540,14 @@
         },
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
           },
           formatter: function () {
             return `$${this.value.toFixed(0)}`;
           },
         },
         gridLineWidth: 1,
-        gridLineColor: "#111827",
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
       },
 
       series: [
@@ -554,7 +555,7 @@
           animation: false,
           name: "Historical",
           data: processedHistorical,
-          color: "#fff",
+          color: $mode === "light" ? "#007050" : "#fff",
           marker: {
             enabled: true,
             symbol: "circle",
@@ -576,7 +577,7 @@
           animation: false,
           name: "Average",
           data: forecastAvg,
-          color: "#fff",
+          color: $mode === "light" ? "#007050" : "#fff",
           dashStyle: "Dash",
           marker: {
             enabled: false,
@@ -690,9 +691,9 @@
     return options;
   }
 
-  let optionsBarChart = getBarChart() || null;
-  let optionsPieChart = getPieChart() || null;
-  let config = getPriceForecastChart() || null;
+  let optionsBarChart = null;
+  let optionsPieChart = null;
+  let config = null;
 
   function latestInfoDate(inputDate) {
     // Convert the input date string to milliseconds since epoch
@@ -712,6 +713,14 @@
     // Return the difference in days
     return differenceInDays <= 1;
   }
+
+  $: {
+    if ($mode) {
+      optionsBarChart = getBarChart() || null;
+      optionsPieChart = getPieChart() || null;
+      config = getPriceForecastChart() || null;
+    }
+  }
 </script>
 
 <SEO
@@ -719,7 +728,7 @@
   description={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -734,7 +743,7 @@
 
           <div class="inline-flex justify-center w-full rounded-md sm:w-auto">
             <div
-              class="bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+              class="bg-gray-300 dark: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 !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@@ -749,7 +758,7 @@
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24"
                         ><path
-                          fill="#A3A3A3"
+                          fill="currentColor"
                           d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                         /></svg
                       >
@@ -770,7 +779,7 @@
                       class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
                       i
                         ? 'text-black'
-                        : 'text-white'}"
+                        : ''}"
                     >
                       {item.title}
                     </span>
@@ -783,7 +792,7 @@
 
         <div class="w-full mb-6 mt-3">
           <div
-            class="rounded-sm border border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-600"
+            class="rounded-sm border border-gray-300 dark:border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-300 dark:divide-gray-600"
           >
             <div
               class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0"
@@ -803,10 +812,7 @@
                   from the current stock price of {price}.
                 </p>
               </div>
-              <div
-                class=" max-h-[225px]"
-                use:highcharts={optionsPieChart}
-              ></div>
+              <div class="max-h-[225px]" use:highcharts={optionsPieChart}></div>
             </div>
             <div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0">
               <div
@@ -816,12 +822,10 @@
               <div
                 class="hide-scroll mb-1 mt-2 overflow-x-auto px-1.5 text-center md:mb-0 md:px-0 lg:mt-2"
               >
-                <table
-                  class="w-full text-right text-tiny text-white xs:text-sm sm:"
-                >
+                <table class="w-full text-right text-tiny xs:text-sm sm:">
                   <thead
                     ><tr
-                      class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
+                      class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
                       ><th class="py-[3px] text-left font-semibold lg:py-0.5"
                         >Target</th
                       > <th class="font-semibold">Low</th>
@@ -832,7 +836,7 @@
                   >
                   <tbody
                     ><tr
-                      class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
+                      class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
                       ><td class="py-[3px] text-left lg:py-0.5">Price</td>
                       <td>${lowPriceTarget}</td>
                       <td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td>
@@ -868,11 +872,9 @@
           </div>
 
           <div
-            class="w-full rounded-sm border border-gray-600 mt-8 p-3 divide-gray-600 lg:flex lg:space-x-4 lg:divide-x"
+            class="w-full rounded-sm border border-gray-300 dark:border-gray-600 mt-8 p-3 divide-gray-300 dark:divide-gray-600 lg:flex lg:space-x-4 lg:divide-x"
           >
-            <div
-              class="flex flex-col justify-between p-1 lg:max-w-[32%] text-white"
-            >
+            <div class="flex flex-col justify-between p-1 lg:max-w-[32%]">
               <div>
                 <div class="flex flex-row items-center">
                   <h2 class="mb-1 text-xl font-bold">
@@ -890,7 +892,7 @@
                     <p class="pr-2 sm:pr-4">
                       {data?.getAnalystInsight?.insight}
                     </p>
-                    <p class="mt-5 italic text-white text-sm">
+                    <p class="mt-5 italic text-sm">
                       Updated {data?.getAnalystInsight?.date}
                     </p>
                   {:else}
@@ -899,10 +901,10 @@
                       <span class="mt-3">
                         Unlock content with
                         <a
-                          class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+                          class="inline-block ml-0.5 text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
                           href="/pricing"
                           >Pro Subscription <svg
-                            class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+                            class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:"
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 24 24"
                             ><path
@@ -914,7 +916,7 @@
                       </span>
                     </p>
 
-                    <p class="mt-5 italic text-white text-sm">
+                    <p class="mt-5 italic text-sm">
                       Updated {data?.getAnalystInsight?.date}
                     </p>
                   {/if}
@@ -948,7 +950,8 @@
                   class="w-full text-right text-tiny xs:text-sm md:text-smaller"
                 >
                   <thead
-                    ><tr class="border-b border-gray-600 font-normal"
+                    ><tr
+                      class="border-b border-gray-300 dark:border-gray-600 font-normal"
                       ><th
                         class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left font-semibold"
                         >Rating</th
@@ -966,7 +969,9 @@
                   >
                   <tbody>
                     {#each categories as category}
-                      <tr class="border-b border-gray-600 font-normal">
+                      <tr
+                        class="border-b border-gray-300 dark:border-gray-600 font-normal"
+                      >
                         <td
                           class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left"
                           >{category}</td
@@ -998,23 +1003,21 @@
             </div>
           </div>
 
-          <h2 class="mt-8 text-xl sm:text-2xl text-white font-bold mb-4">
+          <h2 class="mt-8 text-xl sm:text-2xl font-bold mb-4">
             Financial Forecast this Year
           </h2>
           {#if data?.getAnalystEstimate?.length !== 0}
             <div
-              class="mb-4 grid grid-cols-1 overflow-hidden rounded-md border divide-gray-600 border-gray-600 md:grid-cols-2 lg:grid-cols-4"
+              class="mb-4 grid grid-cols-1 overflow-hidden rounded-md border divide-gray-300 dark:divide-gray-600 border-gray-300 dark:border-gray-600 md:grid-cols-2 lg:grid-cols-4"
             >
               <div
-                class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0 border-gray-600"
+                class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0 border-gray-300 dark:border-gray-600"
               >
-                <div class=" font-normal text-white">Revenue This Year</div>
+                <div class=" font-normal">Revenue This Year</div>
                 <div
                   class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
                 >
-                  <div
-                    class="flex items-baseline text-2xl font-semibold text-white"
-                  >
+                  <div class="flex items-baseline text-2xl font-semibold">
                     {data?.getAnalystEstimate[index]?.estimatedRevenueAvg !==
                       null &&
                     data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0
@@ -1023,9 +1026,7 @@
                         )
                       : "n/a"}
                     {#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0}
-                      <div
-                        class="ml-2 block text-sm font-semibold text-white lg:hidden"
-                      >
+                      <div class="ml-2 block text-sm font-semibold lg:hidden">
                         from {data?.getAnalystEstimate[index - 1]?.revenue !==
                         undefined
                           ? abbreviateNumber(
@@ -1065,7 +1066,7 @@
                 </div>
                 {#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0}
                   <div
-                    class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
+                    class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
                   >
                     from {data?.getAnalystEstimate[index - 1]?.revenue !== null
                       ? abbreviateNumber(
@@ -1078,13 +1079,11 @@
               <div
                 class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b md:border-l lg:border-b-0"
               >
-                <div class=" font-normal text-white">Revenue Next Year</div>
+                <div class=" font-normal">Revenue Next Year</div>
                 <div
                   class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
                 >
-                  <div
-                    class="flex items-baseline text-2xl font-semibold text-white"
-                  >
+                  <div class="flex items-baseline text-2xl font-semibold">
                     {data?.getAnalystEstimate[index + 1]
                       ?.estimatedRevenueAvg !== undefined
                       ? abbreviateNumber(
@@ -1092,9 +1091,7 @@
                             ?.estimatedRevenueAvg,
                         )
                       : "n/a"}
-                    <div
-                      class="ml-2 block text-sm font-semibold text-white lg:hidden"
-                    >
+                    <div class="ml-2 block text-sm font-semibold lg:hidden">
                       from {data?.getAnalystEstimate[index]
                         ?.estimatedRevenueAvg !== undefined
                         ? abbreviateNumber(
@@ -1131,7 +1128,7 @@
                   </div>
                 </div>
                 <div
-                  class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
+                  class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
                 >
                   from {data?.getAnalystEstimate[index]?.estimatedRevenueAvg !==
                   undefined
@@ -1144,19 +1141,15 @@
               <div
                 class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b-0 lg:border-l"
               >
-                <div class=" font-normal text-white">EPS This Year</div>
+                <div class=" font-normal">EPS This Year</div>
                 <div
                   class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
                 >
-                  <div
-                    class="flex items-baseline text-2xl font-semibold text-white"
-                  >
+                  <div class="flex items-baseline text-2xl font-semibold">
                     {abbreviateNumber(
                       data?.getAnalystEstimate[index]?.estimatedEpsAvg,
                     )}
-                    <div
-                      class="ml-2 block text-sm font-semibold text-white lg:hidden"
-                    >
+                    <div class="ml-2 block text-sm font-semibold lg:hidden">
                       from {data?.getAnalystEstimate[index - 1]?.eps}
                     </div>
                   </div>
@@ -1187,27 +1180,23 @@
                   </div>
                 </div>
                 <div
-                  class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
+                  class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
                 >
                   from {data?.getAnalystEstimate[index - 1]?.eps}
                 </div>
               </div>
               <div
-                class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-l border-gray-600"
+                class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-l border-gray-300 dark:border-gray-600"
               >
-                <div class=" font-normal text-white">EPS Next Year</div>
+                <div class=" font-normal">EPS Next Year</div>
                 <div
                   class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
                 >
-                  <div
-                    class="flex items-baseline text-2xl font-semibold text-white"
-                  >
+                  <div class="flex items-baseline text-2xl font-semibold">
                     {abbreviateNumber(
                       data?.getAnalystEstimate[index + 1]?.estimatedEpsAvg,
                     )}
-                    <div
-                      class="ml-2 block text-sm font-semibold text-white lg:hidden"
-                    >
+                    <div class="ml-2 block text-sm font-semibold lg:hidden">
                       from {abbreviateNumber(
                         data?.getAnalystEstimate[index]?.estimatedEpsAvg,
                       )}
@@ -1240,7 +1229,7 @@
                   </div>
                 </div>
                 <div
-                  class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
+                  class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
                 >
                   from {abbreviateNumber(
                     data?.getAnalystEstimate[index]?.estimatedEpsAvg,
@@ -1258,7 +1247,7 @@
             </div>
           {:else}
             <div
-              class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
+              class=" p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-300 dark:border-gray-600 text-sm sm:text-[1rem]"
             >
               <svg
                 class="w-6 h-6 shrink-0 inline-block sm:mr-2"