ui fixes

2025-03-30 13:41:38 +02:00 · 2025-03-30 13:41:38 +02:00 · 94dd5b9516
commit 94dd5b9516
parent ee8f4c951c
38 changed files with 269 additions and 226 deletions
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@ -381,7 +381,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
@ -525,7 +525,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/lib/components/DarkPool/HistoricalVolume.svelte
+++ b/src/lib/components/DarkPool/HistoricalVolume.svelte
@ -105,7 +105,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 20, // Increases space between label and axis
          formatter: function () {
@ -121,7 +121,7 @@
      yAxis: [
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            enabled: false,
          },
--- a/src/lib/components/DarkPool/PriceLevel.svelte
+++ b/src/lib/components/DarkPool/PriceLevel.svelte
@ -53,7 +53,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 10, // Increases space between label and axis
          formatter: function () {
@ -67,7 +67,7 @@
        },
        opposite: true,
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        tickPositioner: function () {
          const positions = [];
          const info = this.getExtremes();
--- a/src/lib/components/DarkPool/RealtimeTrade.svelte
+++ b/src/lib/components/DarkPool/RealtimeTrade.svelte
@ -110,7 +110,7 @@
          title: { text: null },
          labels: { style: { color: $mode === "light" ? "black" : "white" } },
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          opposite: true,
        },
        {
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@ -162,7 +162,7 @@
      yAxis: [
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            enabled: false,
          },
@ -173,7 +173,7 @@
        },
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            enabled: false,
          },
--- a/src/lib/components/FinancialChart.svelte
+++ b/src/lib/components/FinancialChart.svelte
@ -60,7 +60,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          rotation: -45,
          distance: 10, // Increases space between label and axis
@ -68,7 +68,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
          formatter: function () {
--- a/src/lib/components/IPOChart.svelte
+++ b/src/lib/components/IPOChart.svelte
@ -125,7 +125,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@ -61,8 +61,8 @@
  </div>

  {#if errors}
-    <label for={id} class="label py-0 pt-1 text-xs">
-      <span class="text-error">
+    <label for={id} class=" py-0 pt-1 text-xs">
+      <span class="text-red-700 font-semibold dark:font-normal dark:text-error">
        {errors}
      </span>
    </label>
--- a/src/lib/components/Options/ContractLookup.svelte
+++ b/src/lib/components/Options/ContractLookup.svelte
@ -274,7 +274,7 @@
      yAxis: [
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: { style: { color: $mode === "light" ? "black" : "white" } },
          title: { text: null },
          opposite: true,
--- a/src/lib/components/Options/GreekByExpiry.svelte
+++ b/src/lib/components/Options/GreekByExpiry.svelte
@ -151,7 +151,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 20, // Increases space between label and axis
          formatter: function () {
@ -166,7 +166,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
          formatter: function () {
--- a/src/lib/components/Options/GreekByStrike.svelte
+++ b/src/lib/components/Options/GreekByStrike.svelte
@ -125,7 +125,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          // Only display every 5th label
          formatter: function () {
@ -135,7 +135,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
          formatter: function () {
--- a/src/lib/components/Options/GreekExposure.svelte
+++ b/src/lib/components/Options/GreekExposure.svelte
@ -161,7 +161,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 20, // Increases space between label and axis
          formatter: function () {
@ -191,7 +191,7 @@
      yAxis: [
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            style: { color: $mode === "light" ? "black" : "white" },
            formatter: function () {
--- a/src/lib/components/Options/OpenInterestByExpiry.svelte
+++ b/src/lib/components/Options/OpenInterestByExpiry.svelte
@ -66,7 +66,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 10, // Adjust space between labels and axis
          formatter: function () {
@ -94,7 +94,7 @@

      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/lib/components/Options/OpenInterestByStrike.svelte
+++ b/src/lib/components/Options/OpenInterestByStrike.svelte
@ -65,7 +65,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          rotation: -45,
          // Only display every 5th label
@ -76,7 +76,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/lib/components/Options/TickerFlow.svelte
+++ b/src/lib/components/Options/TickerFlow.svelte
@ -197,7 +197,7 @@
        },
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            style: { color: $mode === "light" ? "black" : "white" },
          },
--- a/src/lib/components/Options/UnusualActivity.svelte
+++ b/src/lib/components/Options/UnusualActivity.svelte
@ -188,7 +188,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          formatter: function () {
            const date = new Date(this.value);
@ -213,7 +213,7 @@
      yAxis: [
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            style: { color: $mode === "light" ? "black" : "white" },
          },
@ -498,7 +498,7 @@
      yAxis: [
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: { style: { color: $mode === "light" ? "black" : "white" } },
          title: { text: null },
          opposite: true,
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@ -116,7 +116,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 20, // Increases space between label and axis
          formatter: function () {
@ -143,7 +143,7 @@
      yAxis: [
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            style: { color: $mode === "light" ? "black" : "white" },
          },
--- a/src/lib/components/RatingsChart.svelte
+++ b/src/lib/components/RatingsChart.svelte
@ -181,7 +181,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 20, // Increases space between label and axis
          formatter: function () {
@ -207,7 +207,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@ -63,7 +63,7 @@
        },
        opposite: true,
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          formatter: function () {
            return this?.value + "%";
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@ -92,7 +92,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
          formatter: function () {
--- a/src/lib/components/Table/TableHeader.svelte
+++ b/src/lib/components/Table/TableHeader.svelte
@ -22,7 +22,7 @@
  {#each columns as column}
    <th
      on:click={() => sortData(column.key)}
-      class="cursor-pointer select-none font-semibold text-sm whitespace-nowrap {column.align ===
+      class="cursor-pointer select-none font-semibold text-sm sm:text-[1rem] whitespace-nowrap {column.align ===
      'right'
        ? 'text-end'
        : 'text-start'}"
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@ -256,7 +256,7 @@
        startOnTick: false,
        endOnTick: false,
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        title: { text: null },
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
--- a/src/routes/index/[tickerID]/+page.svelte
+++ b/src/routes/index/[tickerID]/+page.svelte
@ -254,7 +254,7 @@
        startOnTick: false,
        endOnTick: false,
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        title: { text: null },
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
--- a/src/routes/ipos/statistics/+page.svelte
+++ b/src/routes/ipos/statistics/+page.svelte
@ -96,7 +96,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/routes/market-flow/+page.svelte
+++ b/src/routes/market-flow/+page.svelte
@ -361,7 +361,7 @@
        },
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            style: { color: $mode === "light" ? "black" : "white" },
          },
--- a/src/routes/market-flow/sector-flow/+page.svelte
+++ b/src/routes/market-flow/sector-flow/+page.svelte
@ -351,7 +351,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 20, // Increases space between label and axis
          formatter: function () {
@ -388,7 +388,7 @@
        },
        {
          gridLineWidth: 1,
-          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+          gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
          labels: {
            style: { color: $mode === "light" ? "black" : "white" },
          },
--- a/src/routes/potus-tracker/+page.svelte
+++ b/src/routes/potus-tracker/+page.svelte
@ -145,7 +145,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
          formatter: function () {
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@ -106,18 +106,15 @@
        ><path
          d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
        ></path></svg
-      ><span class="font-medium text-muted dark:text-zinc-300"
-        >Trusted by <span>4,000</span>+ Traders</span
+      ><span class="font-medium text-muted dark:text-zinc-300 text-lg"
+        >Trusted by <span class="font-semibold">5,000</span>+ Traders</span
      >
    </div>
    <span
      class="hidden sm:inline-block text-zinc-600"
      style="opacity: 1; transform: none;">|</span
    >
-    <div
-      class="mt-2 sm:mt-0 flex items-center"
-      style="opacity: 1; transform: none;"
-    >
+    <div class="mt-2 sm:mt-0 flex items-center text-lg">
      <svg
        stroke="currentColor"
        fill="currentColor"
@ -137,7 +134,7 @@
          rel="noopener noreferrer"
          target="_blank"
          href="https://www.trustpilot.com/review/stocknear.com"
-          class="sm:hover: sm:hover:underline sm:hover:underline-offset-4"
+          class="sm:hover:text-blue-700 dark:sm:hover:text-blue-400 underline underline-offset-4"
        >
          Trustpilot</a
        ></span
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@ -200,7 +200,9 @@
            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">My Account</h1>
          </div>

-          <div class="rounded border border-gray-600 p-4 xs:p-4 xs:text-lg">
+          <div
+            class="rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
+          >
            <h2 class=" text-2xl font-semibold mb-3">User Information</h2>
            <div class="mt-1">
              <strong>Email:</strong>
@ -222,7 +224,7 @@
          </div>

          <div
-            class="mt-6 rounded border border-gray-600 p-4 xs:p-4 xs:text-lg"
+            class="mt-6 rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
          >
            <h2 class=" text-2xl font-semibold mb-3">Notification</h2>
            Customize your notification alerts based on your preferences.
@ -325,7 +327,7 @@
                    <p class="mb-3">Push notifications are currently active.</p>
                    <div class="mt-3">
                      <button
-                        class="border border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
+                        class="shadow-sm border border-gray-300 dark:border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
                        type="button"
                        on:click={handlePushUnsubscribe}
                        >Disable notifications</button
@ -339,14 +341,14 @@
                    </p>
                    {#if !loading}
                      <button
-                        class="border border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
+                        class="shadow-sm border border-gray-300 dark:border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
                        type="button"
                        on:click={handlePushSubscribe}
                        >Enable notifications</button
                      >
                    {:else}
                      <button
-                        class="cursor-not-allowed border border-gray-600 w-fit px-5 py-1.5 bg-white/60 text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
+                        class="cursor-not-allowed shadow-sm border border-gray-300 dark:border-gray-600 w-fit px-5 py-1.5 bg-white/60 text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
                        ><div class="flex flex-row m-auto items-center">
                          <span class="loading loading-infinity"></span>
                          <span class=" ml-1.5">Activating...</span>
@ -369,7 +371,7 @@
                </p>
                <label
                  for="installModal"
-                  class="cursor-pointer border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5"
+                  class="cursor-pointer border border-gray-300 shadow-sshadow-sm m dark:border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5"
                >
                  Install the App
                </label>
@ -378,7 +380,7 @@
          </div>

          <div
-            class="mt-6 rounded border border-gray-600 p-4 xs:p-4 xs:text-lg"
+            class="mt-6 rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
          >
            <h2 class=" text-2xl font-semibold mb-3">Manage Subscription</h2>
            <div class="flex flex-row items-center">
@ -458,7 +460,7 @@
              >
                <label
                  for="cancelSubscriptionModal"
-                  class="cursor-pointer border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5"
+                  class="cursor-pointer border border-gray-300 shadow-sshadow-sm m dark:border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5"
                >
                  Cancel Subscription
                </label>
@ -485,7 +487,7 @@
          </div>

          <div
-            class="mt-6 rounded border border-gray-600 p-4 xs:p-4 xs:text-lg"
+            class="mt-6 rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
          >
            <h2 class=" text-2xl font-semibold mb-3">Need help?</h2>
            <div class="mt-1">
@ -543,7 +545,7 @@
    method="POST"
    action="?/cancelSubscription"
    use:enhance={submitCancellation}
-    class="modal-box w-full bg-secondary border border-gray-600 flex flex-col items-center"
+    class="modal-box w-full bg-secondary shadow-sm border border-gray-300 dark:border-gray-600 flex flex-col items-center"
  >
    <div class="mx-auto mb-8 h-1.5 w-20 shrink-0 rounded-full bg-gray-500" />
    <div class="text-white mb-5 text-center">
@ -674,7 +676,7 @@
  <label for="installModal" class="cursor-pointer modal-backdrop"></label>

  <div
-    class="modal-box text-white rounded w-full bg-secondary border border-gray-600"
+    class="modal-box text-white rounded w-full bg-secondary shadow-sm border border-gray-300 dark:border-gray-600"
  >
    <div class="flex flex-row items-center pt-5">
      <h4 class=" text-2xl font-bold text-center m-auto">Steps to install</h4>
@ -706,7 +708,7 @@
      </ul>
    </div>

-    <div class="border-t border-gray-600 mt-2">
+    <div class="boshadow-sm rder-t border-gray-300 dark:border-gray-600 mt-2">
      <label
        for="installModal"
        class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@ -93,8 +93,8 @@
        ? "#047857"
        : "#00FC50";
    const fillColorStart = isNegative
-      ? "rgba(204, 38, 26, 0.55)"
-      : "rgb(4, 120, 87, 0.55)"; //"rgba(0, 252, 80, 0.3)";
+      ? "rgba(204, 38, 26, 0.5)"
+      : "rgb(4, 120, 87, 0.5)"; //"rgba(0, 252, 80, 0.3)";
    const fillColorEnd = isNegative
      ? "rgba(204, 38, 26, 0.004)"
      : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
--- a/src/routes/stocks/[tickerID]/forecast/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+page.svelte
@ -223,7 +223,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: "white" },
        },
@ -371,7 +371,7 @@
                textColor = "#D9220E";
              } else if (rating < 3) {
                ratingText = "Hold";
-                textColor = "#f5b700";
+                textColor = "#C19000";
              } else if (rating < 4) {
                ratingText = "Buy";
                textColor = "#31B800";
@ -518,12 +518,12 @@
      },
      xAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        type: "datetime",
        endOnTick: false,
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          formatter: function () {
            const date = new Date(this.value);
@ -540,14 +540,14 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          formatter: function () {
            return `$${this.value.toFixed(0)}`;
          },
        },
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
      },

      series: [
@ -561,7 +561,7 @@
            symbol: "circle",
            radius: 4,
          },
-          lineWidth: 2,
+          lineWidth: 3,
        },
        {
          animation: false,
@ -733,66 +733,84 @@
    <div
      class="w-full relative flex justify-center items-center overflow-hidden"
    >
-      <div class="sm:pl-4 sm:pt-4 w-full m-auto mt-2 sm:mt-0">
+      <div class="sm:pl-4 w-full m-auto">
        <div
          class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
        >
          <h1 class="mb-px text-xl sm:text-2xl font-bold bp:text-3xl sm:pl-1">
-            {removeCompanyStrings($displayCompanyName)} Forecast
+            {removeCompanyStrings($displayCompanyName)} Stock Forecast
          </h1>
-
-          <div class="inline-flex justify-center w-full rounded-md sm:w-auto">
-            <div
-              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"
+          <div class="flex flex-col w-full sm:w-fit items-end justify-end">
+            <label
+              for="topAnalystModal"
+              class="ml-auto mb-1 hidden sm:inline-block"
+              ><svg
+                class="size-[18px] text-gray-400 dark:text-dark-400 dark:hover:text-dark-300 sm:hover:text-gray-700 cursor-pointer"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                style="max-width:40px"
+                ><path
+                  fill-rule="evenodd"
+                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                  clip-rule="evenodd"
+                ></path></svg
+              ></label
            >
-              {#each tabs as item, i}
-                {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
-                  <button
-                    on:click={() => goto("/pricing")}
-                    class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
-                  >
-                    <span class="relative text-sm block font-semibold">
-                      {item.title}
-                      <svg
-                        class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        ><path
-                          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
-                      >
-                    </span>
-                  </button>
-                {:else}
-                  <button
-                    on:click={() => changeTab(i)}
-                    class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
-                    i
-                      ? 'z-0'
-                      : ''} "
-                  >
-                    {#if activeIdx === i}
-                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
-                    {/if}
-                    <span
-                      class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
-                      i
-                        ? 'text-black'
-                        : ''}"
+            <div class="inline-flex justify-center w-full rounded-md sm:w-auto">
+              <div
+                class="bg-gray-300 dark:bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
+              >
+                {#each tabs as item, i}
+                  {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
+                    <button
+                      on:click={() => goto("/pricing")}
+                      class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
                    >
-                      {item.title}
-                    </span>
-                  </button>
-                {/if}
-              {/each}
+                      <span class="relative text-sm block font-semibold">
+                        {item.title}
+                        <svg
+                          class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          ><path
+                            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
+                        >
+                      </span>
+                    </button>
+                  {:else}
+                    <button
+                      on:click={() => changeTab(i)}
+                      class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                      i
+                        ? 'z-0'
+                        : ''} "
+                    >
+                      {#if activeIdx === i}
+                        <div
+                          class="absolute inset-0 rounded-md bg-[#fff]"
+                        ></div>
+                      {/if}
+                      <span
+                        class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                        i
+                          ? 'text-black'
+                          : ''}"
+                      >
+                        {item.title}
+                      </span>
+                    </button>
+                  {/if}
+                {/each}
+              </div>
            </div>
          </div>
        </div>

        <div class="w-full mb-6 mt-3">
          <div
-            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"
+            class="rounded shadow-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"
@ -814,9 +832,9 @@
              </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 class="grow md:pt-4 lg:pl-4 lg:pt-0">
              <div
-                class="chart mt-5 sm:mt-0 border-l border-r sm:border border-gray-800 rounded"
+                class="sm:shadow-sm sm:border border-gray-300 dark:border-gray-800 rounded"
                use:highcharts={config}
              ></div>
              <div
@ -846,23 +864,25 @@
                      ><td class="py-[3px] text-left lg:py-0.5">Change</td>
                      <td
                        class={lowChange > 0
-                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                          : "text-[#FF2F1F]"}>{lowChange}%</td
+                          ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                          : "text-red-700 dark:text-[#FF2F1F]"}>{lowChange}%</td
                      >
                      <td
                        class={avgChange > 0
-                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                          : "text-[#FF2F1F]"}>{avgChange}%</td
+                          ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                          : "text-red-700 dark:text-[#FF2F1F]"}>{avgChange}%</td
                      >
                      <td
                        class={medianChange > 0
-                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                          : "text-[#FF2F1F]"}>{medianChange}%</td
+                          ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                          : "text-red-700 dark:text-[#FF2F1F]"}
+                        >{medianChange}%</td
                      >
                      <td
                        class={highChange > 0
-                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                          : "text-[#FF2F1F]"}>{highChange}%</td
+                          ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                          : "text-red-700 dark:text-[#FF2F1F]"}
+                        >{highChange}%</td
                      ></tr
                    ></tbody
                  >
@ -872,7 +892,7 @@
          </div>

          <div
-            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"
+            class="w-full shadow-sm 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%]">
              <div>
@ -939,7 +959,7 @@
            <div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0">
              {#if optionsBarChart !== null}
                <div
-                  class="border border-gray-800 rounded"
+                  class="shadow-sm border border-gray-300 dark:border-gray-800 rounded"
                  use:highcharts={optionsBarChart}
                ></div>
              {/if}
@ -1008,7 +1028,7 @@
          </h2>
          {#if data?.getAnalystEstimate?.length !== 0}
            <div
-              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"
+              class="mb-4 shadow-sm 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-300 dark:border-gray-600"
@ -1267,19 +1287,52 @@
  </div>
 </section>

-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
+<!--Start Create Watchlist Modal-->
+<input type="checkbox" id="topAnalystModal" class="modal-toggle" />

-  @media (max-width: 640px) {
-    .app {
-      height: 300px;
-    }
-  }
+<dialog id="topAnalystModal" class="modal overflow-hidden p-3 sm:p-0">
+  <label for="topAnalystModal" class="cursor-pointer modal-backdrop"></label>

-  .chart {
-    width: 100%;
-  }
-</style>
+  <div
+    class="modal-box text-white rounded w-full bg-secondary shadow-sm border border-gray-300 dark:border-gray-600"
+  >
+    <div class="flex flex-row items-center pt-5">
+      <h4 class=" text-2xl font-bold text-center m-auto">Steps to install</h4>
+      <label
+        for="topAnalystModal"
+        class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem]"
+      >
+        <svg
+          class="w-6 h-6 sm:w-8 sm:h-8"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="white"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          /></svg
+        >
+      </label>
+    </div>
+
+    <div class=" flex flex-col justify-center items-center text-xl h-full">
+      <ul class="list-decimal list-inside text-left mt-5">
+        <li class="mb-2">Tap on the Safari share button.</li>
+        <li class="mb-2">Tap on "Add to Home Screen."</li>
+        <li class="mb-4">Tap on "Add."</li>
+
+        <p class="text-lg mb-4">
+          Note that web apps on iOS can only be installed using Safari.
+        </p>
+      </ul>
+    </div>
+
+    <div class="boshadow-sm rder-t border-gray-300 dark:border-gray-600 mt-2">
+      <label
+        for="topAnalystModal"
+        class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
+      >
+        Close
+      </label>
+    </div>
+  </div>
+</dialog>
--- a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
@ -80,15 +80,15 @@
        let markerColor, markerSymbol;
        if (item.score > 6) {
          // Bullish: green marker with an upward triangle
-          markerColor = "#2ecc71";
-          markerSymbol = "triangle-up";
+          markerColor = "#007050";
+          markerSymbol = "circle";
        } else if (item.score < 5) {
          // Bearish: red marker with a downward triangle
-          markerColor = "#e74c3c";
-          markerSymbol = "triangle-down";
+          markerColor = "#007050";
+          markerSymbol = "circle";
        } else {
          // Neutral (score exactly 5): yellow marker with a circle
-          markerColor = "#2C6288";
+          markerColor = "#007050";
          markerSymbol = "circle";
        }

@ -206,11 +206,11 @@
      },
      xAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        type: "datetime",
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          formatter: function () {
            const date = new Date(this.value);
@ -230,14 +230,14 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          formatter: function () {
            return `$${this.value.toFixed(0)}`;
          },
        },
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
      },
      series: [
        {
@ -248,7 +248,7 @@
          marker: {
            enabled: true,
          },
-          lineWidth: 2,
+          lineWidth: 3,
        },
        {
          name: "Projected Price",
@ -258,7 +258,7 @@
          marker: {
            enabled: false,
          },
-          lineWidth: 2,
+          lineWidth: 2.5,
          dashStyle: "Dash", // Dashed line for the last part
        },
      ],
@ -377,12 +377,12 @@
      },
      xAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        type: "datetime",
        endOnTick: false,
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          formatter: function () {
            const date = new Date(this.value);
@ -399,14 +399,14 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          formatter: function () {
            return `$${this.value.toFixed(0)}`;
          },
        },
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
      },

      series: [
@ -420,7 +420,7 @@
            symbol: "circle",
            radius: 4,
          },
-          lineWidth: 2,
+          lineWidth: 3,
        },
        {
          animation: false,
@ -431,6 +431,7 @@
          marker: {
            enabled: false,
          },
+          lineWidth: 2.5,
        },
        {
          animation: false,
@ -441,6 +442,7 @@
          marker: {
            enabled: false,
          },
+          lineWidth: 2.5,
        },
        {
          animation: false,
@ -451,6 +453,7 @@
          marker: {
            enabled: false,
          },
+          lineWidth: 2.5,
        },
      ],

@ -557,8 +560,8 @@
                    {#if isPro}
                      <span
                        class="text-xl font-bold {avgReturn >= 0
-                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                          : 'text-red-600 dark:text-[#FF2F1F]'}"
+                          ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                          : 'text-red-700 dark:text-[#FF2F1F]'}"
                        >{avgReturn?.toFixed(2)}%</span
                      >
                    {:else}
@ -693,8 +696,8 @@
                              {#if index < 5 || isPro}
                                <span
                                  class={item?.change > 0
-                                    ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                                    : "text-red-600 dark:text-[#FF2F1F]"}
+                                    ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                                    : "text-red-700 dark:text-[#FF2F1F]"}
                                >
                                  {item?.change}%
                                </span>
@ -729,8 +732,8 @@
                    )} the model shows that the average return would be
                    <span
                      class="font-semibold {avgReturn >= 0
-                        ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                        : 'text-red-600 dark:text-[#FF2F1F]'}"
+                        ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                        : 'text-red-700 dark:text-[#FF2F1F]'}"
                      >{avgReturn?.toFixed(2)}%</span
                    > based on the backtesting results.
                  </p>
@ -969,26 +972,26 @@
                          {:else}
                            <td
                              class={lowChange > 0
-                                ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                                : "text-red-600 dark:text-[#FF2F1F]"}
+                                ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                                : "text-red-700 dark:text-[#FF2F1F]"}
                              >{lowChange}%</td
                            >
                            <td
                              class={avgChange > 0
-                                ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                                : "text-red-600 dark:text-[#FF2F1F]"}
+                                ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                                : "text-red-700 dark:text-[#FF2F1F]"}
                              >{avgChange}%</td
                            >
                            <td
                              class={medianChange > 0
-                                ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                                : "text-red-600 dark:text-[#FF2F1F]"}
+                                ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                                : "text-red-700 dark:text-[#FF2F1F]"}
                              >{medianChange}%</td
                            >
                            <td
                              class={highChange > 0
-                                ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                                : "text-red-600 dark:text-[#FF2F1F]"}
+                                ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
+                                : "text-red-700 dark:text-[#FF2F1F]"}
                              >{highChange}%</td
                            >
                          {/if}
--- a/src/routes/stocks/[tickerID]/history/+page.svelte
+++ b/src/routes/stocks/[tickerID]/history/+page.svelte
@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    stockTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
+  import { stockTicker, displayCompanyName } from "$lib/store";
  import TableHeader from "$lib/components/Table/TableHeader.svelte";
  import Infobox from "$lib/components/Infobox.svelte";
  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@ -12,6 +8,7 @@
  import ArrowLogo from "lucide-svelte/icons/move-up-right";
  import SEO from "$lib/components/SEO.svelte";
  import { onMount } from "svelte";
+  import { removeCompanyStrings } from "$lib/utils";

  export let data;
  let timePeriod = "Daily";
@ -285,10 +282,10 @@
        <main class="w-full lg:w-3/4 lg:pr-10">
          <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
            <div
-              class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5"
+              class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-3"
            >
              <h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0">
-                {$stockTicker} Stock Price History
+                {removeCompanyStrings($displayCompanyName)} Stock Price History
              </h1>
              <div
                class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0"
@ -399,7 +396,7 @@
              </div>
            </div>
            {#if rawData?.length !== 0}
-              <div class="w-full m-auto mt-2">
+              <div class="w-full m-auto">
                <div
                  class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
                >
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@ -93,7 +93,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
@ -113,7 +113,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
          formatter: function () {
@ -528,22 +528,22 @@
                <thead class="text-muted dark:text-white dark:bg-default">
                  <tr>
                    <th
-                      class="text-start text-sm whitespace-nowrap font-semibold"
+                      class="text-start text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
                    >
                      Date
                    </th>
                    <th
-                      class="text-end text-sm whitespace-nowrap font-semibold"
+                      class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
                    >
                      Employees
                    </th>
                    <th
-                      class="text-end text-sm whitespace-nowrap font-semibold"
+                      class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
                    >
                      Change
                    </th>
                    <th
-                      class="text-end text-sm whitespace-nowrap font-semibold"
+                      class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
                    >
                      Growth
                    </th>
@ -589,7 +589,7 @@
                        {#if index === historyList?.length - 1}
                          n/a
                        {:else if item?.employeeCount > historyList[index + 1]?.employeeCount}
-                          <span class="text-green-600 dark:text-[#00FC50]">
+                          <span class="text-green-700 dark:text-[#00FC50]">
                            +{(
                              ((item?.employeeCount -
                                historyList[index + 1]?.employeeCount) /
@ -598,7 +598,7 @@
                            ).toFixed(2)}%
                          </span>
                        {:else if item?.employeeCount < historyList[index + 1]?.employeeCount}
-                          <span class="text-red-600 dark:text-[#FF2F1F]">
+                          <span class="text-red-700 dark:text-[#FF2F1F]">
                            -{(
                              (Math.abs(
                                item?.employeeCount -
@ -629,21 +629,3 @@
    </div>
  </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@ -280,7 +280,7 @@
        },
        labels: {
          style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
          },
          distance: 20, // Increases space between label and axis
          formatter: function () {
@ -306,7 +306,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
@ -122,7 +122,7 @@
      },
      yAxis: {
        gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
        labels: {
          style: { color: $mode === "light" ? "black" : "white" },
        },
--- a/src/routes/update-password/+page.svelte
+++ b/src/routes/update-password/+page.svelte
@ -7,22 +7,22 @@

  export let data;
  export let form;
-  let loading = false;
+  let isUpdating = false;

  const submitUpdatePassword = () => {
-    loading = true;
+    isUpdating = true;
    return async ({ result, update }) => {
      if (result.success) {
        toast.success("Password updated!", {
          style: "border-radius: 200px; background: #2A2E39; color: #fff;",
        });
-      } else if (result.error || result.errors) {
+      } else {
        toast.error("Invalid credentials", {
          style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`,
        });
      }
      await update();
-      loading = false;
+      isUpdating = false;
    };
  };
 </script>
@ -30,7 +30,7 @@
 <SEO title="Update Password" description="Update your account password" />

 <section
-  class="flex flex-col items-center min-h-screen w-full max-w-3xl m-auto"
+  class="flex flex-col items-center min-h-screen w-full max-w-3xl m-auto px-3 sm:px-0 mt-10"
 >
  <div class="w-full overflow-hidden m-auto mt-5">
    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@ -44,9 +44,7 @@
            use:enhance={submitUpdatePassword}
            class="flex flex-col space-y-2 w-full max-w-lg m-auto"
          >
-            <h1
-              class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-6 text-center"
-            >
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold mb-6 text-center">
              Reset Your Password
            </h1>

@ -76,12 +74,23 @@
            />

            <div class="w-full max-w-lg pt-3">
-              <button
-                type="submit"
-                class="py-2.5 cursor-pointer rounded bg-[#fff] text-black font-semibold sm:hover:bg-gray-300 w-full max-w-lg normal-case text-md"
-              >
-                {loading ? "Updating..." : "Update Password"}
-              </button>
+              {#if !isUpdating}
+                <button
+                  type="submit"
+                  class="cursor-pointer py-2.5 bg-[#3B82F6] dark:bg-[#fff] border-none sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-white dark:text-black font-semibold text-[1rem]"
+                >
+                  <span>Update Password</span>
+                </button>
+              {:else}
+                <label
+                  class="cursor-not-allowed btn bg-[#3B82F6] dark:bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-white dark:text-black font-semibold text-[1rem]"
+                >
+                  <div class="flex flex-row m-auto items-center">
+                    <span class="loading loading-infinity"></span>
+                    <span class=" ml-1.5">Processing</span>
+                  </div>
+                </label>
+              {/if}
            </div>
          </form>
        </main>