From 94dd5b95163161f55cbeff9a4522ae34950b3a0a Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 30 Mar 2025 13:41:38 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/AnalystEstimate.svelte     |   4 +-
 .../DarkPool/HistoricalVolume.svelte          |   4 +-
 src/lib/components/DarkPool/PriceLevel.svelte |   4 +-
 .../components/DarkPool/RealtimeTrade.svelte  |   2 +-
 src/lib/components/FailToDeliver.svelte       |   4 +-
 src/lib/components/FinancialChart.svelte      |   4 +-
 src/lib/components/IPOChart.svelte            |   2 +-
 src/lib/components/Input.svelte               |   4 +-
 .../components/Options/ContractLookup.svelte  |   2 +-
 .../components/Options/GreekByExpiry.svelte   |   4 +-
 .../components/Options/GreekByStrike.svelte   |   4 +-
 .../components/Options/GreekExposure.svelte   |   4 +-
 .../Options/OpenInterestByExpiry.svelte       |   4 +-
 .../Options/OpenInterestByStrike.svelte       |   4 +-
 src/lib/components/Options/TickerFlow.svelte  |   2 +-
 .../components/Options/UnusualActivity.svelte |   6 +-
 src/lib/components/Options/Volatility.svelte  |   4 +-
 src/lib/components/RatingsChart.svelte        |   4 +-
 src/lib/components/ShareHolders.svelte        |   2 +-
 src/lib/components/Sidecard.svelte            |   2 +-
 src/lib/components/Table/TableHeader.svelte   |   2 +-
 src/routes/etf/[tickerID]/+page.svelte        |   2 +-
 src/routes/index/[tickerID]/+page.svelte      |   2 +-
 src/routes/ipos/statistics/+page.svelte       |   2 +-
 src/routes/market-flow/+page.svelte           |   2 +-
 .../market-flow/sector-flow/+page.svelte      |   4 +-
 src/routes/potus-tracker/+page.svelte         |   2 +-
 src/routes/pricing/+page.svelte               |  11 +-
 src/routes/profile/+page.svelte               |  26 ++-
 src/routes/stocks/[tickerID]/+page.svelte     |   4 +-
 .../stocks/[tickerID]/forecast/+page.svelte   | 215 +++++++++++-------
 .../[tickerID]/forecast/ai/+page.svelte       |  63 ++---
 .../stocks/[tickerID]/history/+page.svelte    |  13 +-
 .../[tickerID]/metrics/[slug]/+page.svelte    |   2 +-
 .../[tickerID]/profile/employees/+page.svelte |  32 +--
 .../statistics/market-cap/+page.svelte        |   4 +-
 .../statistics/revenue/+page.svelte           |   2 +-
 src/routes/update-password/+page.svelte       |  37 +--
 38 files changed, 269 insertions(+), 226 deletions(-)

diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index 98d76bb9..4c08cbbc 100644
--- 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" },
         },
diff --git a/src/lib/components/DarkPool/HistoricalVolume.svelte b/src/lib/components/DarkPool/HistoricalVolume.svelte
index 1d1558a6..7711bcb6 100644
--- 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,
           },
diff --git a/src/lib/components/DarkPool/PriceLevel.svelte b/src/lib/components/DarkPool/PriceLevel.svelte
index 961505a2..d5aabd85 100644
--- 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();
diff --git a/src/lib/components/DarkPool/RealtimeTrade.svelte b/src/lib/components/DarkPool/RealtimeTrade.svelte
index 57945b9f..5424db86 100644
--- 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,
         },
         {
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index 70a2e111..d2bf251b 100644
--- 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,
           },
diff --git a/src/lib/components/FinancialChart.svelte b/src/lib/components/FinancialChart.svelte
index 181ee454..03c1d8f8 100644
--- 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 () {
diff --git a/src/lib/components/IPOChart.svelte b/src/lib/components/IPOChart.svelte
index 384804e5..7b7dcb18 100644
--- 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" },
         },
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index fc5565db..3d31100a 100644
--- 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>
diff --git a/src/lib/components/Options/ContractLookup.svelte b/src/lib/components/Options/ContractLookup.svelte
index 64fcf579..7bbb44e5 100644
--- 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,
diff --git a/src/lib/components/Options/GreekByExpiry.svelte b/src/lib/components/Options/GreekByExpiry.svelte
index 97ad149a..51279102 100644
--- 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 () {
diff --git a/src/lib/components/Options/GreekByStrike.svelte b/src/lib/components/Options/GreekByStrike.svelte
index 39d7dc51..617f2cba 100644
--- 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 () {
diff --git a/src/lib/components/Options/GreekExposure.svelte b/src/lib/components/Options/GreekExposure.svelte
index ab390b61..9eb801fe 100644
--- 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 () {
diff --git a/src/lib/components/Options/OpenInterestByExpiry.svelte b/src/lib/components/Options/OpenInterestByExpiry.svelte
index 5608bdab..e633fb25 100644
--- 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" },
         },
diff --git a/src/lib/components/Options/OpenInterestByStrike.svelte b/src/lib/components/Options/OpenInterestByStrike.svelte
index 29230895..da3f1137 100644
--- 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" },
         },
diff --git a/src/lib/components/Options/TickerFlow.svelte b/src/lib/components/Options/TickerFlow.svelte
index 3e2de96b..db448b0e 100644
--- 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" },
           },
diff --git a/src/lib/components/Options/UnusualActivity.svelte b/src/lib/components/Options/UnusualActivity.svelte
index af171b73..57f0f88c 100644
--- 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,
diff --git a/src/lib/components/Options/Volatility.svelte b/src/lib/components/Options/Volatility.svelte
index f60d4699..858d6131 100644
--- 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" },
           },
diff --git a/src/lib/components/RatingsChart.svelte b/src/lib/components/RatingsChart.svelte
index c3c5fddc..449a9f73 100644
--- 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" },
         },
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index 7f6a936c..637b5106 100644
--- 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 + "%";
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index 050f0364..ea2aeb48 100644
--- 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 () {
diff --git a/src/lib/components/Table/TableHeader.svelte b/src/lib/components/Table/TableHeader.svelte
index bb0e359d..8036b5b5 100644
--- 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'}"
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index daf5f01b..ed52859a 100644
--- 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" },
diff --git a/src/routes/index/[tickerID]/+page.svelte b/src/routes/index/[tickerID]/+page.svelte
index 401b4aa0..ed6fb22a 100644
--- 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" },
diff --git a/src/routes/ipos/statistics/+page.svelte b/src/routes/ipos/statistics/+page.svelte
index 2cd87551..9454727f 100644
--- 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" },
         },
diff --git a/src/routes/market-flow/+page.svelte b/src/routes/market-flow/+page.svelte
index a6d97298..8b757118 100644
--- 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" },
           },
diff --git a/src/routes/market-flow/sector-flow/+page.svelte b/src/routes/market-flow/sector-flow/+page.svelte
index 437510e6..373241a1 100644
--- 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" },
           },
diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte
index 339bb957..1d2d0880 100644
--- 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 () {
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index e5c88e57..721ba5c0 100644
--- 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
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index d8a1daa0..befceb1f 100644
--- 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"
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index ca298f78..2e3ded80 100644
--- 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)";
diff --git a/src/routes/stocks/[tickerID]/forecast/+page.svelte b/src/routes/stocks/[tickerID]/forecast/+page.svelte
index 15ee275c..813082c3 100644
--- 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>
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
index 5ede4fc9..23ed85d6 100644
--- 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}
diff --git a/src/routes/stocks/[tickerID]/history/+page.svelte b/src/routes/stocks/[tickerID]/history/+page.svelte
index 58bc178c..398c10cf 100644
--- 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"
                 >
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index e4e924c6..51b6930a 100644
--- 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" },
         },
diff --git a/src/routes/stocks/[tickerID]/profile/employees/+page.svelte b/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
index 58d1015b..cce02599 100644
--- 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>
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index da38fee3..cd36ef36 100644
--- 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" },
         },
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
index 90746ed4..76633e8e 100644
--- 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" },
         },
diff --git a/src/routes/update-password/+page.svelte b/src/routes/update-password/+page.svelte
index dc621caf..2f1c42fa 100644
--- 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>