From d7b73672facc3fe63dbe76d8aab42befd275d2db Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 7 Nov 2024 21:09:34 +0100
Subject: [PATCH] change color scheme to white

---
 src/lib/components/AIScore.svelte             |    4 +-
 src/lib/components/AddPortfolio.svelte        |  750 ++--
 src/lib/components/AnalystCard.svelte         |    2 +-
 src/lib/components/AnalystEstimate.svelte     |    6 +-
 src/lib/components/BottomNavigation.svelte    |   36 +-
 src/lib/components/BullBearSay.svelte         |    8 +-
 src/lib/components/CommentSection.svelte      |  898 +++--
 src/lib/components/DCF.svelte                 |    2 +-
 src/lib/components/DividendCard.svelte        |  197 +-
 src/lib/components/Feedback.svelte            |    4 +-
 src/lib/components/Footer.svelte              |  145 +-
 src/lib/components/GovernmentContract.svelte  |    2 +-
 src/lib/components/Input.svelte               |  381 +-
 src/lib/components/LoginPopup.svelte          | 3552 ++++++++++++++---
 src/lib/components/MobileCommentEditor.svelte |  556 +--
 src/lib/components/News.svelte                |    2 +-
 src/lib/components/OptionsData.svelte         |    2 +-
 src/lib/components/Pricing.svelte             |   14 +-
 src/lib/components/RuleControl.svelte         |  173 +-
 src/lib/components/ShareStatistics.svelte     |    2 +-
 src/lib/components/Sidecard.svelte            |    2 +-
 src/lib/components/Swap.svelte                |    4 +-
 src/lib/components/TextEditor.svelte          |  337 +-
 src/lib/components/TickerInfoCard.svelte      |    2 +-
 src/lib/components/TopHoldingCard.svelte      |  237 +-
 src/lib/components/UpgradeToPro.svelte        |    2 +-
 src/lib/components/WIIM.svelte                |    2 +-
 .../shadcn/tabs/tabs-trigger.svelte           |    2 +-
 src/routes/+layout.svelte                     |    2 +-
 src/routes/+page.svelte                       |   20 +-
 src/routes/about/+page.svelte                 |  523 ++-
 src/routes/analysts/+page.svelte              |    8 +-
 src/routes/analysts/[slug]/+page.svelte       |   56 +-
 src/routes/analysts/top-stocks/+page.svelte   |   10 +-
 src/routes/blog/article/[slug]/+page.svelte   |  359 +-
 src/routes/changelog/+page.svelte             |  676 ++--
 src/routes/community/+page.svelte             |   12 +-
 src/routes/community/create-post/+page.svelte |  527 +--
 .../community/post/[postId]/+page.svelte      |    2 +-
 src/routes/community/profile/+page.svelte     |    8 +-
 src/routes/cramer-tracker/+page.svelte        |    2 +-
 .../[tickerID]/congress-trading/+page.svelte  |    2 +-
 .../crypto/[tickerID]/news/+page.svelte       |    4 +-
 .../crypto/[tickerID]/stats/+page.svelte      |    2 +-
 src/routes/dividends-calendar/+page.svelte    |    4 +-
 src/routes/earnings-calendar/+page.svelte     |    4 +-
 src/routes/economic-calendar/+page.svelte     |    4 +-
 src/routes/economic-indicator/+page.svelte    |   17 +-
 src/routes/etf/[tickerID]/+layout.svelte      | 1795 +++++----
 .../[tickerID]/congress-trading/+page.svelte  |    2 +-
 .../etf/[tickerID]/dividends/+page.svelte     |    2 +-
 .../etf/[tickerID]/holdings/+page.svelte      |    2 +-
 src/routes/etf/[tickerID]/news/+page.svelte   |    4 +-
 .../etf/[tickerID]/options/+page.svelte       |   20 +-
 src/routes/etf/[tickerID]/stats/+page.svelte  |    2 +-
 src/routes/etf/etf-providers/+page.svelte     |    2 +-
 .../etf/etf-providers/[slug]/+page.svelte     |    2 +-
 src/routes/fda-calendar/+page.svelte          |    2 +-
 src/routes/heatmaps/+page.svelte              |    6 +-
 src/routes/hedge-funds/[slug]/+page.svelte    |  111 +-
 src/routes/industry/+page.svelte              |    2 +-
 src/routes/insider-tracker/+page.svelte       |    2 +-
 src/routes/ipos/+page.svelte                  |    2 +-
 src/routes/ipos/[slug]/+page.svelte           |    4 +-
 src/routes/list/amex-stocks/+page.svelte      |    2 +-
 src/routes/list/bitcoin-etfs/+page.svelte     |    2 +-
 .../list/canadian-stocks-us/+page.svelte      |    2 +-
 .../list/chinese-stocks-us/+page.svelte       |    2 +-
 src/routes/list/delisted-stocks/+page.svelte  |    2 +-
 .../list/dividend-aristocrats/+page.svelte    |    2 +-
 src/routes/list/dividend-kings/+page.svelte   |    2 +-
 src/routes/list/dow-jones-stocks/+page.svelte |    2 +-
 src/routes/list/german-stocks-us/+page.svelte |    2 +-
 src/routes/list/indian-stocks-us/+page.svelte |    2 +-
 src/routes/list/industry/[slug]/+page.svelte  |    2 +-
 .../list/israeli-stocks-us/+page.svelte       |    2 +-
 .../list/japanese-stocks-us/+page.svelte      |    2 +-
 .../list/magnificent-seven/+page.svelte       |    2 +-
 .../list/nasdaq-100-stocks/+page.svelte       |    2 +-
 src/routes/list/nasdaq-stocks/+page.svelte    |    2 +-
 src/routes/list/nyse-stocks/+page.svelte      |    2 +-
 src/routes/list/reit-stocks/+page.svelte      |    2 +-
 src/routes/list/sp-500-stocks/+page.svelte    |    2 +-
 src/routes/list/uk-stocks-us/+page.svelte     |    2 +-
 src/routes/list/xetra-stocks/+page.svelte     |    2 +-
 src/routes/login/+page.svelte                 | 1021 ++++-
 src/routes/most-retail-volume/+page.svelte    |    2 +-
 src/routes/newsletter/+page.svelte            |    4 +-
 src/routes/options-flow/+page.svelte          |   24 +-
 src/routes/politicians/[slug]/+page.svelte    |    2 +-
 src/routes/price-alert/+page.svelte           |    2 +-
 src/routes/pricing/+page.svelte               |   38 +-
 src/routes/register/+page.svelte              | 1044 +++--
 src/routes/sentiment-tracker/+page.svelte     |    2 +-
 src/routes/stock-screener/+page.svelte        |   12 +-
 src/routes/stock-splits-calendar/+page.svelte |    6 +-
 src/routes/stocks/[tickerID]/+layout.svelte   |   10 +-
 .../stocks/[tickerID]/dividends/+page.svelte  |    4 +-
 .../stocks/[tickerID]/financials/+page.svelte |   18 +-
 .../financials/balance-sheet/+page.svelte     |   20 +-
 .../financials/cash-flow/+page.svelte         |   20 +-
 .../[tickerID]/financials/ratios/+page.svelte |   20 +-
 .../stocks/[tickerID]/forecast/+page.svelte   |   12 +-
 .../[tickerID]/forecast/analyst/+page.svelte  |   11 +-
 .../stocks/[tickerID]/insider/+page.svelte    |    2 +-
 .../stocks/[tickerID]/metrics/+page.svelte    |    2 +-
 .../[tickerID]/metrics/[slug]/+page.svelte    |    2 +-
 .../stocks/[tickerID]/options/+page.svelte    |   32 +-
 .../stocks/[tickerID]/statistics/+page.svelte |   12 +-
 .../statistics/employees/+page.svelte         |    4 +-
 .../statistics/market-cap/+page.svelte        |    8 +-
 src/routes/watchlist/options/+page.svelte     |    7 +-
 src/routes/watchlist/stocks/+page.svelte      |    6 +-
 113 files changed, 9131 insertions(+), 4784 deletions(-)

diff --git a/src/lib/components/AIScore.svelte b/src/lib/components/AIScore.svelte
index 92f66a90..47b52fb1 100644
--- a/src/lib/components/AIScore.svelte
+++ b/src/lib/components/AIScore.svelte
@@ -68,7 +68,7 @@
                   class="stroke-current {score >= 7
                     ? 'text-[#00FC50]'
                     : score >= 4
-                      ? 'text-[#FBCE3C]'
+                      ? 'text-[#fff]'
                       : 'text-[#FF2F1F]'}"
                   stroke-width="3"
                   stroke-dasharray="100.48"
@@ -115,7 +115,7 @@
                   </span>
                   <div class="absolute top-0.5 flex items-center">
                     <svg
-                      class="size-5 text-[#FBCE3C]"
+                      class="size-5 text-[#fff]"
                       viewBox="0 0 20 20"
                       fill="currentColor"
                       style="max-width: 40px;"
diff --git a/src/lib/components/AddPortfolio.svelte b/src/lib/components/AddPortfolio.svelte
index e83ec9c6..c496489b 100644
--- a/src/lib/components/AddPortfolio.svelte
+++ b/src/lib/components/AddPortfolio.svelte
@@ -1,77 +1,67 @@
-<script lang='ts'>
-  import toast from 'svelte-french-toast';
-  import { stockTicker, etfTicker, cryptoTicker, assetType, screenWidth } from "$lib/store";
-  import { page } from '$app/stores';
+<script lang="ts">
+  import toast from "svelte-french-toast";
+  import {
+    stockTicker,
+    etfTicker,
+    cryptoTicker,
+    assetType,
+    screenWidth,
+  } from "$lib/store";
+  import { page } from "$app/stores";
 
   export let data;
 
-
   let isClicked = false;
 
+  async function createPortfolio(event) {
+    event.preventDefault();
 
-async function createPortfolio(event) {
+    const postData = { userId: data?.user?.id };
 
-  event.preventDefault();
-
-  const postData = {'userId': data?.user?.id}
-
-  const response = await fetch('/api/create-portfolio', {
-      method: 'POST',
+    const response = await fetch("/api/create-portfolio", {
+      method: "POST",
       headers: {
-      "Content-Type": "application/json"
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(postData)
-  });
+      body: JSON.stringify(postData),
+    });
 
-  const output = await response.json();
+    const output = await response.json();
 
+    if (output?.message === "success") {
+      isClicked = true;
+      toast.success("Portfolio created successfully!", {
+        style: "border-radius: 200px; background: #333; color: #fff;",
+      });
 
-  if ( output?.message === 'success')
-  {
-    isClicked = true;
-    toast.success('Portfolio created successfully!', {
-      style: 'border-radius: 200px; background: #333; color: #fff;'});
+      setTimeout(() => {
+        const clicked = document.getElementById("addPortfolio");
+        clicked.dispatchEvent(new MouseEvent("click"));
 
-    setTimeout(() => {
+        const anchor = document.createElement("a");
 
-          const clicked = document.getElementById('addPortfolio');
-          clicked.dispatchEvent(new MouseEvent('click'));
-
-          const anchor = document.createElement('a');
-          
-          if ($page.url.pathname === '/portfolio')
-          {
-            anchor.href = '/portfolio';
+        if ($page.url.pathname === "/portfolio") {
+          anchor.href = "/portfolio";
+        } else {
+          if ($assetType === "etf") {
+            anchor.href = `/etf/${$etfTicker}`;
+          } else if ($assetType === "crypto") {
+            anchor.href = `/crypto/${$cryptoTicker}`;
+          } else {
+            anchor.href = `/stocks/${$stockTicker}`;
           }
-          else  {
-            if ($assetType === 'etf')
-            {
-              anchor.href = `/etf/${$etfTicker}`;
-            }
-            else if ($assetType === 'crypto')
-            {
-              anchor.href = `/crypto/${$cryptoTicker}`;
-            }
-            else {
-              anchor.href = `/stocks/${$stockTicker}`;
-            }
-          }
-          
+        }
 
-          anchor.dataset.sveltekitReload = true;
-          document.body.appendChild(anchor);
-          anchor.dispatchEvent(new MouseEvent('click'));
+        anchor.dataset.sveltekitReload = true;
+        document.body.appendChild(anchor);
+        anchor.dispatchEvent(new MouseEvent("click"));
       }, 500);
+    } else {
+      toast.error("Something went wrong. Please try again.", {
+        style: "border-radius: 200px; background: #333; color: #fff;",
+      });
+    }
   }
-else {
-  toast.error('Something went wrong. Please try again.', {
-        style: 'border-radius: 200px; background: #333; color: #fff;'});
-}
-
-
-}
-
-
 
   let participationCheckbox = false;
   let ageCheckbox = false;
@@ -85,296 +75,402 @@ else {
   }
 </script>
 
-
 {#if $screenWidth >= 640}
-<input type="checkbox" id="addPortfolio" class="modal-toggle" />
+  <input type="checkbox" id="addPortfolio" class="modal-toggle" />
 
-<dialog id="addPortfolio" class="modal modal-bottom sm:modal-middle overflow-hidden">
+  <dialog
+    id="addPortfolio"
+    class="modal modal-bottom sm:modal-middle overflow-hidden"
+  >
+    <label
+      for="addPortfolio"
+      class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    ></label>
 
+    <div class="modal-box w-full bg-[#09090B] overflow-hidden">
+      <div class="flex flex-col w-full mt-10 sm:mt-0">
+        <div class="text-white text-3xl font-bold mb-5">
+          Portfolio Tournament 🔥🚀
+        </div>
 
-  <label for="addPortfolio"  class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
-  
-  
-  <div class="modal-box w-full bg-[#09090B] overflow-hidden" >
+        <div class="text-white text-lg font-medium mb-3">
+          Terms and Conditions of Participation
+        </div>
 
-
-    <div class="flex flex-col w-full mt-10 sm:mt-0">
-
-    
-      <div class="text-white text-3xl font-bold mb-5">
-        Portfolio Tournament 🔥🚀
-      </div>
-
-      <div class="text-white text-lg font-medium mb-3">
-        Terms and Conditions of Participation
-      </div>
-
-      <div class="text-white text-sm border bg-[#313131] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56">
-        
-        <ol class="text-white list-decimal ml-3 p-2">
-          <li class="p-1">The organizer of the Prize competition is stocknear.</li>
-          <li class="p-1">Participation is free of charge.</li>
-          <li class="p-1">
-            All individuals worldwide who have reached the age of 18 and comply with the laws and regulations of their respective countries are eligible to participate. Persons involved in the conception and implementation of this prize competition are excluded - this explicitly does not apply to voluntary moderators or other voluntary members who have a special status on the platform.
-          </li>
-          <li class="p-1">
-            The prerequisite for participation in the competition is the creation of a portfolio whereby the user can buy and sell shares. Each user starts with a play money of 100,000 $. To be considered in the final draw and eligible for any prizes, participants must make at least one trade (buy or sell shares) during the tournament period.
-          </li>
-          <li class="p-1">
-            The prize competition will take place automated once a month for an indefinite period of time. The potential winners are drawn automatically, randomly on the first day of each month, whereby the chance of winning depends on the overall return of the portfolio. If a participant has collected too little return of the portfolio, the chance can also be 0 percent.
-          </li>
-          <li class="p-1">
-            The prizes to be awarded may change from month to month.
-          </li>
-          <li class="p-1">
-            After the draw, the accounts of the winners will be checked for possible fraud attempts. If no abnormalities are found, the potential winners will be notified by email from stocknear.
-            If any abnormalities are found, the draw will be repeated. The organizer reserves the right to refuse and reclaim prizes even after the fact and to permanently exclude participants from competitions in case of suspicion of attempted fraud or manipulation for their own benefit or the benefit of third parties as well as to temporarily or permanently block their accounts.
-          </li>
-          <li class="p-1">
-            The potential winner must respond to the respective prize notification within 14 days, 
-            which will be sent via email, in order to claim the prize. 
-            Only a response via email will be considered. 
-            Otherwise, unclaimed prizes will be included in the next monthly draw.
-          </li>
-          <li class="p-1">
-            The organizer points out that the availability and functionality of the prize draw cannot be guaranteed.
-            The organizer is not responsible for entries not being included due to technical failures or other reasons. 
-            The prize competition may be terminated or removed due to external circumstances and constraints 
-            without any claims arising for the participants against the organizer.
-          </li>
-          <li class="p-1">
-            The organizer reserves the right to change, discontinue, or suspend the game 
-            and the draw in whole or in part without prior notice in the event 
-            of unforeseen circumstances. These circumstances include, but are not limited to, 
-            the appearance of a computer virus, a program error, unauthorized intervention by third parties, 
-            or mechanical or technical problems beyond the control and influence of the organizer.
-          </li>
-          <li class="p-1">
-            The organizer reserves the right to terminate the prize draw at any time without prior notice.
-            In this case, any outstanding prizes will be properly awarded.
-          </li>
-          <li class="p-1">
-            Should individual provisions of these terms and conditions of participation be or become invalid,
-            inadmissible, or unenforceable, this shall not affect the validity of the remaining terms 
-            and conditions. In place of the invalid, inadmissible, or unenforceable clause, provisions 
-            shall be deemed to have been agreed upon that come as close as possible to the economic objectives.
-          </li>
-          <li class="p-1">
-            Furthermore, the <a href="/imprint" class="text-blue-700 hover:underline">Imprint</a>, <a href="/terms-of-use" class="text-blue-700 hover:underline">
-              Terms of Use
-            </a> and our 
-            <a href="/privacy-policy" class="text-blue-700 hover:underline">
-              Privacy Policy
-            </a>
-            apply. 
-            The applicable law and jurisdiction for this prize draw shall be determined based on the participant's 
-            country of residence. In case of any legal disputes, the competent courts of the participant's 
-            country of residence shall have exclusive jurisdiction.
-          </li>
-          <li class="p-1">
-            The right of recourse to the courts is excluded.
-          </li>
-
-        </ol> 
-      </div>
-
-      <div class="form-control mt-5">
-        <label class="label cursor-pointer flex flex-row">
-          <input on:click={handleParticipation} checked={participationCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
-          <span class="label-text text-white ml-3">I accept the Terms and Conditions of Participation 
-            in the monthly portfolio tournament.</span> 
-        </label>
-      </div>
-
-
-
-      <div class="form-control ">
-        <label class="label cursor-pointer">
-          <input on:click={handleAge} checked={ageCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
-          <span class="label-text text-white ml-3 mr-auto">I'm at least 18 years old.</span> 
-        </label>
-      </div>
-
-      {#if ageCheckbox && participationCheckbox && !isClicked}
-      <form
-        on:submit={createPortfolio}
-        class="w-full max-w-lg pt-5 m-auto pb-8"
+        <div
+          class="text-white text-sm border bg-[#313131] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56"
         >
-        <button type="submit" class="btn bg-purple-600 hover:bg-purple-500  btn-md w-full rounded-lg m-auto text-white font-bold text-md">
-            Create Portfolio
-        </button>
-      </form>
-      {:else}
-      <div class="w-full max-w-lg pt-5 m-auto pb-8">
-        <label class="opacity-[0.4] cursor-not-allowed btn bg-purple-600  btn-md w-full rounded-lg m-auto text-white font-bold text-md">
-          {#if !isClicked} 
-            Create Portfolio
-          {:else}
-          <div class="flex flex-row m-auto">
-            <span class="loading loading-infinity"></span>
-            <span class="text-white ml-2">Loading</span>
+          <ol class="text-white list-decimal ml-3 p-2">
+            <li class="p-1">
+              The organizer of the Prize competition is stocknear.
+            </li>
+            <li class="p-1">Participation is free of charge.</li>
+            <li class="p-1">
+              All individuals worldwide who have reached the age of 18 and
+              comply with the laws and regulations of their respective countries
+              are eligible to participate. Persons involved in the conception
+              and implementation of this prize competition are excluded - this
+              explicitly does not apply to voluntary moderators or other
+              voluntary members who have a special status on the platform.
+            </li>
+            <li class="p-1">
+              The prerequisite for participation in the competition is the
+              creation of a portfolio whereby the user can buy and sell shares.
+              Each user starts with a play money of 100,000 $. To be considered
+              in the final draw and eligible for any prizes, participants must
+              make at least one trade (buy or sell shares) during the tournament
+              period.
+            </li>
+            <li class="p-1">
+              The prize competition will take place automated once a month for
+              an indefinite period of time. The potential winners are drawn
+              automatically, randomly on the first day of each month, whereby
+              the chance of winning depends on the overall return of the
+              portfolio. If a participant has collected too little return of the
+              portfolio, the chance can also be 0 percent.
+            </li>
+            <li class="p-1">
+              The prizes to be awarded may change from month to month.
+            </li>
+            <li class="p-1">
+              After the draw, the accounts of the winners will be checked for
+              possible fraud attempts. If no abnormalities are found, the
+              potential winners will be notified by email from stocknear. If any
+              abnormalities are found, the draw will be repeated. The organizer
+              reserves the right to refuse and reclaim prizes even after the
+              fact and to permanently exclude participants from competitions in
+              case of suspicion of attempted fraud or manipulation for their own
+              benefit or the benefit of third parties as well as to temporarily
+              or permanently block their accounts.
+            </li>
+            <li class="p-1">
+              The potential winner must respond to the respective prize
+              notification within 14 days, which will be sent via email, in
+              order to claim the prize. Only a response via email will be
+              considered. Otherwise, unclaimed prizes will be included in the
+              next monthly draw.
+            </li>
+            <li class="p-1">
+              The organizer points out that the availability and functionality
+              of the prize draw cannot be guaranteed. The organizer is not
+              responsible for entries not being included due to technical
+              failures or other reasons. The prize competition may be terminated
+              or removed due to external circumstances and constraints without
+              any claims arising for the participants against the organizer.
+            </li>
+            <li class="p-1">
+              The organizer reserves the right to change, discontinue, or
+              suspend the game and the draw in whole or in part without prior
+              notice in the event of unforeseen circumstances. These
+              circumstances include, but are not limited to, the appearance of a
+              computer virus, a program error, unauthorized intervention by
+              third parties, or mechanical or technical problems beyond the
+              control and influence of the organizer.
+            </li>
+            <li class="p-1">
+              The organizer reserves the right to terminate the prize draw at
+              any time without prior notice. In this case, any outstanding
+              prizes will be properly awarded.
+            </li>
+            <li class="p-1">
+              Should individual provisions of these terms and conditions of
+              participation be or become invalid, inadmissible, or
+              unenforceable, this shall not affect the validity of the remaining
+              terms and conditions. In place of the invalid, inadmissible, or
+              unenforceable clause, provisions shall be deemed to have been
+              agreed upon that come as close as possible to the economic
+              objectives.
+            </li>
+            <li class="p-1">
+              Furthermore, the <a
+                href="/imprint"
+                class="text-blue-700 hover:underline">Imprint</a
+              >,
+              <a href="/terms-of-use" class="text-blue-700 hover:underline">
+                Terms of Use
+              </a>
+              and our
+              <a href="/privacy-policy" class="text-blue-700 hover:underline">
+                Privacy Policy
+              </a>
+              apply. The applicable law and jurisdiction for this prize draw shall
+              be determined based on the participant's country of residence. In case
+              of any legal disputes, the competent courts of the participant's country
+              of residence shall have exclusive jurisdiction.
+            </li>
+            <li class="p-1">
+              The right of recourse to the courts is excluded.
+            </li>
+          </ol>
+        </div>
+
+        <div class="form-control mt-5">
+          <label class="label cursor-pointer flex flex-row">
+            <input
+              on:click={handleParticipation}
+              checked={participationCheckbox}
+              aria-describedby="helper-checkbox-text"
+              type="checkbox"
+              value=""
+              class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
+            />
+            <span class="label-text text-white ml-3"
+              >I accept the Terms and Conditions of Participation in the monthly
+              portfolio tournament.</span
+            >
+          </label>
+        </div>
+
+        <div class="form-control">
+          <label class="label cursor-pointer">
+            <input
+              on:click={handleAge}
+              checked={ageCheckbox}
+              aria-describedby="helper-checkbox-text"
+              type="checkbox"
+              value=""
+              class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
+            />
+            <span class="label-text text-white ml-3 mr-auto"
+              >I'm at least 18 years old.</span
+            >
+          </label>
+        </div>
+
+        {#if ageCheckbox && participationCheckbox && !isClicked}
+          <form
+            on:submit={createPortfolio}
+            class="w-full max-w-lg pt-5 m-auto pb-8"
+          >
+            <button
+              type="submit"
+              class="btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
+            >
+              Create Portfolio
+            </button>
+          </form>
+        {:else}
+          <div class="w-full max-w-lg pt-5 m-auto pb-8">
+            <label
+              class="opacity-[0.4] cursor-not-allowed btn bg-[#fff] btn-md w-full rounded-lg m-auto text-white font-bold text-md"
+            >
+              {#if !isClicked}
+                Create Portfolio
+              {:else}
+                <div class="flex flex-row m-auto">
+                  <span class="loading loading-infinity"></span>
+                  <span class="text-white ml-2">Loading</span>
+                </div>
+              {/if}
+            </label>
           </div>
-          {/if}
-        </label>
+        {/if}
       </div>
-      {/if}
-
-
     </div>
-
- 
-
-        
-      </div>
   </dialog>
-
-
-
 {:else}
-<!--Start Drawer Sidewise for mobile-->
-
+  <!--Start Drawer Sidewise for mobile-->
 
   <!--Start ESG Modal-->
-  <div class="drawer drawer-end overflow-hidden w-screen" style="z-index: 9999;">
-    <input id="addPortfolio" type="checkbox" class="drawer-toggle"/>
+  <div
+    class="drawer drawer-end overflow-hidden w-screen"
+    style="z-index: 9999;"
+  >
+    <input id="addPortfolio" type="checkbox" class="drawer-toggle" />
     <div class="drawer-side overflow-y-scroll overflow-hidden">
-    
-        
-      <div class="bg-[#000] min-h-screen px-5 pt-16 w-screen pb-20 overflow-y-scroll overflow-hidden">
-  
-      <h1 class="text-white sm:hidden font-bold text-2xl mb-5">
-        Portfolio Tournament 🔥🚀
-      </h1>
+      <div
+        class="bg-[#000] min-h-screen px-5 pt-16 w-screen pb-20 overflow-y-scroll overflow-hidden"
+      >
+        <h1 class="text-white sm:hidden font-bold text-2xl mb-5">
+          Portfolio Tournament 🔥🚀
+        </h1>
 
+        <div class="text-white text-lg font-medium mb-3">
+          Terms and Conditions of Participation
+        </div>
 
-      <div class="text-white text-lg font-medium mb-3">
-        Terms and Conditions of Participation
-      </div>
-
-      <div class="text-white text-sm border bg-[#09090B]  border-gray-800 p-3 rounded-lg overflow-y-scroll h-56">
-        
-        <ol class="text-white list-decimal ml-3 p-2">
-          <li class="p-1">The organizer of the Prize competition is stocknear.</li>
-          <li class="p-1">Participation is free of charge.</li>
-          <li class="p-1">
-            All individuals worldwide who have reached the age of 18 and comply with the laws and regulations of their respective countries are eligible to participate. Persons involved in the conception and implementation of this prize competition are excluded - this explicitly does not apply to voluntary moderators or other voluntary members who have a special status on the platform.
-          </li>
-          <li class="p-1">
-            The prerequisite for participation in the competition is the creation of a portfolio whereby the user can buy and sell shares. Each user starts with a play money of 100,000 $. To be considered in the final draw and eligible for any prizes, participants must make at least one trade (buy or sell shares) during the tournament period.
-          </li>
-          <li class="p-1">
-            The prize competition will take place automated once a month for an indefinite period of time. The potential winners are drawn automatically, randomly on the first day of each month, whereby the chance of winning depends on the overall return of the portfolio. If a participant has collected too little return of the portfolio, the chance can also be 0 percent.
-          </li>
-          <li class="p-1">
-            The prizes to be awarded may change from month to month.
-          </li>
-          <li class="p-1">
-            After the draw, the accounts of the winners will be checked for possible fraud attempts. If no abnormalities are found, the potential winners will be notified by email from stocknear.
-            If any abnormalities are found, the draw will be repeated. The organizer reserves the right to refuse and reclaim prizes even after the fact and to permanently exclude participants from competitions in case of suspicion of attempted fraud or manipulation for their own benefit or the benefit of third parties as well as to temporarily or permanently block their accounts.
-          </li>
-          <li class="p-1">
-            The potential winner must respond to the respective prize notification within 14 days, 
-            which will be sent via email, in order to claim the prize. 
-            Only a response via email will be considered. 
-            Otherwise, unclaimed prizes will be included in the next monthly draw.
-          </li>
-          <li class="p-1">
-            The organizer points out that the availability and functionality of the prize draw cannot be guaranteed.
-            The organizer is not responsible for entries not being included due to technical failures or other reasons. 
-            The prize competition may be terminated or removed due to external circumstances and constraints 
-            without any claims arising for the participants against the organizer.
-          </li>
-          <li class="p-1">
-            The organizer reserves the right to change, discontinue, or suspend the game 
-            and the draw in whole or in part without prior notice in the event 
-            of unforeseen circumstances. These circumstances include, but are not limited to, 
-            the appearance of a computer virus, a program error, unauthorized intervention by third parties, 
-            or mechanical or technical problems beyond the control and influence of the organizer.
-          </li>
-          <li class="p-1">
-            The organizer reserves the right to terminate the prize draw at any time without prior notice.
-            In this case, any outstanding prizes will be properly awarded.
-          </li>
-          <li class="p-1">
-            Should individual provisions of these terms and conditions of participation be or become invalid,
-            inadmissible, or unenforceable, this shall not affect the validity of the remaining terms 
-            and conditions. In place of the invalid, inadmissible, or unenforceable clause, provisions 
-            shall be deemed to have been agreed upon that come as close as possible to the economic objectives.
-          </li>
-          <li class="p-1">
-            Furthermore, the <a href="/imprint" class="text-blue-700 hover:underline">Imprint</a>, <a href="/terms-of-use" class="text-blue-700 hover:underline">
-              Terms of Use
-            </a> and our 
-            <a href="/privacy-policy" class="text-blue-700 hover:underline">
-              Privacy Policy
-            </a>
-            apply. 
-            The applicable law and jurisdiction for this prize draw shall be determined based on the participant's 
-            country of residence. In case of any legal disputes, the competent courts of the participant's 
-            country of residence shall have exclusive jurisdiction.
-          </li>
-          <li class="p-1">
-            The right of recourse to the courts is excluded.
-          </li>
-
-        </ol> 
-      </div>
-
-      <div class="form-control mt-5">
-        <label class="label cursor-pointer flex flex-row">
-          <input on:click={handleParticipation} checked={participationCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
-          <span class="label-text text-white ml-3">I accept the Terms and Conditions of Participation 
-            in the monthly portfolio tournament.</span> 
-        </label>
-      </div>
-
-
-
-      <div class="form-control">
-        <label class="label cursor-pointer">
-          <input on:click={handleAge} checked={ageCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
-          <span class="label-text text-white ml-3 mr-auto">I'm at least 18 years old.</span> 
-        </label>
-      </div>
-
-      {#if ageCheckbox && participationCheckbox && !isClicked}
-      <form
-        on:submit={createPortfolio}
-        class="w-full max-w-lg m-auto pb-8 mt-10"
+        <div
+          class="text-white text-sm border bg-[#09090B] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56"
         >
-        <button type="submit" class="btn bg-purple-600 hover:bg-purple-500  btn-md w-full rounded-lg m-auto text-white font-bold text-md">
-            Create Portfolio
-        </button>
-      </form>
-      {:else}
-      <div class="w-full max-w-lg m-auto pb-8 mt-10">
-        <label class="opacity-[0.4] cursor-not-allowed btn bg-purple-600  btn-md w-full rounded-lg m-auto text-white font-bold text-md">
-          {#if !isClicked} 
-            Create Portfolio
-          {:else}
-          <div class="flex flex-row m-auto">
-            <span class="loading loading-infinity"></span>
-            <span class="text-white ml-2">Loading</span>
+          <ol class="text-white list-decimal ml-3 p-2">
+            <li class="p-1">
+              The organizer of the Prize competition is stocknear.
+            </li>
+            <li class="p-1">Participation is free of charge.</li>
+            <li class="p-1">
+              All individuals worldwide who have reached the age of 18 and
+              comply with the laws and regulations of their respective countries
+              are eligible to participate. Persons involved in the conception
+              and implementation of this prize competition are excluded - this
+              explicitly does not apply to voluntary moderators or other
+              voluntary members who have a special status on the platform.
+            </li>
+            <li class="p-1">
+              The prerequisite for participation in the competition is the
+              creation of a portfolio whereby the user can buy and sell shares.
+              Each user starts with a play money of 100,000 $. To be considered
+              in the final draw and eligible for any prizes, participants must
+              make at least one trade (buy or sell shares) during the tournament
+              period.
+            </li>
+            <li class="p-1">
+              The prize competition will take place automated once a month for
+              an indefinite period of time. The potential winners are drawn
+              automatically, randomly on the first day of each month, whereby
+              the chance of winning depends on the overall return of the
+              portfolio. If a participant has collected too little return of the
+              portfolio, the chance can also be 0 percent.
+            </li>
+            <li class="p-1">
+              The prizes to be awarded may change from month to month.
+            </li>
+            <li class="p-1">
+              After the draw, the accounts of the winners will be checked for
+              possible fraud attempts. If no abnormalities are found, the
+              potential winners will be notified by email from stocknear. If any
+              abnormalities are found, the draw will be repeated. The organizer
+              reserves the right to refuse and reclaim prizes even after the
+              fact and to permanently exclude participants from competitions in
+              case of suspicion of attempted fraud or manipulation for their own
+              benefit or the benefit of third parties as well as to temporarily
+              or permanently block their accounts.
+            </li>
+            <li class="p-1">
+              The potential winner must respond to the respective prize
+              notification within 14 days, which will be sent via email, in
+              order to claim the prize. Only a response via email will be
+              considered. Otherwise, unclaimed prizes will be included in the
+              next monthly draw.
+            </li>
+            <li class="p-1">
+              The organizer points out that the availability and functionality
+              of the prize draw cannot be guaranteed. The organizer is not
+              responsible for entries not being included due to technical
+              failures or other reasons. The prize competition may be terminated
+              or removed due to external circumstances and constraints without
+              any claims arising for the participants against the organizer.
+            </li>
+            <li class="p-1">
+              The organizer reserves the right to change, discontinue, or
+              suspend the game and the draw in whole or in part without prior
+              notice in the event of unforeseen circumstances. These
+              circumstances include, but are not limited to, the appearance of a
+              computer virus, a program error, unauthorized intervention by
+              third parties, or mechanical or technical problems beyond the
+              control and influence of the organizer.
+            </li>
+            <li class="p-1">
+              The organizer reserves the right to terminate the prize draw at
+              any time without prior notice. In this case, any outstanding
+              prizes will be properly awarded.
+            </li>
+            <li class="p-1">
+              Should individual provisions of these terms and conditions of
+              participation be or become invalid, inadmissible, or
+              unenforceable, this shall not affect the validity of the remaining
+              terms and conditions. In place of the invalid, inadmissible, or
+              unenforceable clause, provisions shall be deemed to have been
+              agreed upon that come as close as possible to the economic
+              objectives.
+            </li>
+            <li class="p-1">
+              Furthermore, the <a
+                href="/imprint"
+                class="text-blue-700 hover:underline">Imprint</a
+              >,
+              <a href="/terms-of-use" class="text-blue-700 hover:underline">
+                Terms of Use
+              </a>
+              and our
+              <a href="/privacy-policy" class="text-blue-700 hover:underline">
+                Privacy Policy
+              </a>
+              apply. The applicable law and jurisdiction for this prize draw shall
+              be determined based on the participant's country of residence. In case
+              of any legal disputes, the competent courts of the participant's country
+              of residence shall have exclusive jurisdiction.
+            </li>
+            <li class="p-1">
+              The right of recourse to the courts is excluded.
+            </li>
+          </ol>
+        </div>
+
+        <div class="form-control mt-5">
+          <label class="label cursor-pointer flex flex-row">
+            <input
+              on:click={handleParticipation}
+              checked={participationCheckbox}
+              aria-describedby="helper-checkbox-text"
+              type="checkbox"
+              value=""
+              class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
+            />
+            <span class="label-text text-white ml-3"
+              >I accept the Terms and Conditions of Participation in the monthly
+              portfolio tournament.</span
+            >
+          </label>
+        </div>
+
+        <div class="form-control">
+          <label class="label cursor-pointer">
+            <input
+              on:click={handleAge}
+              checked={ageCheckbox}
+              aria-describedby="helper-checkbox-text"
+              type="checkbox"
+              value=""
+              class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
+            />
+            <span class="label-text text-white ml-3 mr-auto"
+              >I'm at least 18 years old.</span
+            >
+          </label>
+        </div>
+
+        {#if ageCheckbox && participationCheckbox && !isClicked}
+          <form
+            on:submit={createPortfolio}
+            class="w-full max-w-lg m-auto pb-8 mt-10"
+          >
+            <button
+              type="submit"
+              class="btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
+            >
+              Create Portfolio
+            </button>
+          </form>
+        {:else}
+          <div class="w-full max-w-lg m-auto pb-8 mt-10">
+            <label
+              class="opacity-[0.4] cursor-not-allowed btn bg-[#fff] btn-md w-full rounded-lg m-auto text-white font-bold text-md"
+            >
+              {#if !isClicked}
+                Create Portfolio
+              {:else}
+                <div class="flex flex-row m-auto">
+                  <span class="loading loading-infinity"></span>
+                  <span class="text-white ml-2">Loading</span>
+                </div>
+              {/if}
+            </label>
           </div>
-          {/if}
+        {/if}
+
+        <label for="addPortfolio" class="absolute left-6 top-4 sm:hidden">
+          <svg
+            class="w-6 h-6 inline-block mb-0.5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><path
+              fill="#fff"
+              d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
+            /></svg
+          >
+          <span class="text-white text-md font-medium"> Return </span>
         </label>
       </div>
-      {/if}
-
-
-      <label for="addPortfolio" class="absolute left-6 top-4 sm:hidden">
-        <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-        <span class="text-white text-md font-medium">
-          Return
-        </span>
-      </label>
-
-
     </div>
-
   </div>
-
-
-</div>
-
-{/if}
\ No newline at end of file
+{/if}
diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 9fbe7260..1475d086 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -174,7 +174,7 @@
 
       <a
         href={`/stocks/${$stockTicker}/forecast/analyst`}
-        class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
+        class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
       >
         Analyst Ratings
       </a>
diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index 44dde8f6..5fffcaaa 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -162,7 +162,7 @@
           },
           lineStyle: {
             type: "dashed", // Set the line type to dashed
-            color: "#FBCE3C",
+            color: "#c2c7cf",
           },
 
           showSymbol: false, // Show symbols for line plot points
@@ -176,7 +176,7 @@
           },
           lineStyle: {
             type: "dashed", // Set the line type to dashed
-            color: "#FBCE3C",
+            color: "#c2c7cf",
           },
           showSymbol: false, // Show symbols for line plot points
         },
@@ -506,7 +506,7 @@
           <!--
             <div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
               <svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
-                ><path fill="#FBCE3C" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16" /></svg
+                ><path fill="#fff" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16" /></svg
               >
               For the current Fiscal Year we use available quarterly data. Complete annual data, used to compare against analyst estimates, is only finalized after the year ends.
             </div>
diff --git a/src/lib/components/BottomNavigation.svelte b/src/lib/components/BottomNavigation.svelte
index cc31afbb..e8503c6a 100644
--- a/src/lib/components/BottomNavigation.svelte
+++ b/src/lib/components/BottomNavigation.svelte
@@ -1,28 +1,34 @@
-<script lang='ts'>
-  import { goto } from '$app/navigation';
-
+<script lang="ts">
+  import { goto } from "$app/navigation";
 
   export let data;
 
-
   function handleClick() {
-    const label = document.getElementById('animated-label');
-    label.classList.add('animate-bounce');
+    const label = document.getElementById("animated-label");
+    label.classList.add("animate-bounce");
 
-    goto('/community/create-post');
+    goto("/community/create-post");
   }
-
- 
 </script>
 
-
-    
 <div class="sm:hidden fixed z-50 w-full h-16 max-w-3xl -right-5 bottom-5">
-  <div class="h-full max-w-3xl mx-auto">        
+  <div class="h-full max-w-3xl mx-auto">
     <div class="flex items-center justify-end mr-10">
-      <label id="animated-label" on:click={handleClick} class="inline-flex items-center justify-center w-14 h-14 font-medium bg-purple-600 bg-opacity-[0.8] rounded-full cursor-pointer">
-        <svg class="w-4 h-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="m362.7 19.3l-48.4 48.4l130 130l48.4-48.4c25-25 25-65.5 0-90.5l-39.4-39.5c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2c-2.5 8.5-.2 17.6 6 23.8s15.3 8.5 23.7 6.1L151 475.7c14.1-4.2 27-11.8 37.4-22.2l233.3-233.2l-130-130z"/></svg>
+      <label
+        id="animated-label"
+        on:click={handleClick}
+        class="inline-flex items-center justify-center w-14 h-14 font-medium bg-[#fff] bg-opacity-[0.8] rounded-full cursor-pointer"
+      >
+        <svg
+          class="w-4 h-4 text-white inline-block"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          ><path
+            fill="white"
+            d="m362.7 19.3l-48.4 48.4l130 130l48.4-48.4c25-25 25-65.5 0-90.5l-39.4-39.5c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2c-2.5 8.5-.2 17.6 6 23.8s15.3 8.5 23.7 6.1L151 475.7c14.1-4.2 27-11.8 37.4-22.2l233.3-233.2l-130-130z"
+          /></svg
+        >
       </label>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/lib/components/BullBearSay.svelte b/src/lib/components/BullBearSay.svelte
index a0eb35f9..0cabba22 100644
--- a/src/lib/components/BullBearSay.svelte
+++ b/src/lib/components/BullBearSay.svelte
@@ -83,10 +83,12 @@
               : ''} "
           >
             {#if activeIdx === i}
-              <div class="absolute inset-0 rounded-md bg-purple-600"></div>
+              <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
             {/if}
             <span
-              class="relative text-sm block font-medium duration-200 text-white"
+              class="relative text-sm block font-semibold {activeIdx === i
+                ? 'text-black'
+                : 'text-white'}"
             >
               {item.title}
               <svg
@@ -110,7 +112,7 @@
         <label
           class="{latestInfoDate(rawData?.date)
             ? ''
-            : 'hidden'} text-black bg-[#FBCE3C] mr-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
+            : 'hidden'} text-black bg-[#fff] mr-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
           >New</label
         >
         Updated {rawData?.date}
diff --git a/src/lib/components/CommentSection.svelte b/src/lib/components/CommentSection.svelte
index a672d1ff..163aa3a5 100644
--- a/src/lib/components/CommentSection.svelte
+++ b/src/lib/components/CommentSection.svelte
@@ -1,109 +1,117 @@
-<script lang='ts'>
+<script lang="ts">
+  import { getImageURL, formatDate } from "$lib/utils";
+  import toast from "svelte-french-toast";
+  import {
+    commentAdded,
+    commentIdDeleted,
+    screenWidth,
+    replyCommentClicked,
+    editCommentClicked,
+    scrollToComment,
+  } from "$lib/store";
+  import TextEditor from "$lib/components/TextEditor.svelte";
+  import { marked } from "marked";
+  import { tick } from "svelte";
 
-  import {getImageURL, formatDate} from '$lib/utils';
-  import toast from 'svelte-french-toast';
-  import { commentAdded, commentIdDeleted, screenWidth, replyCommentClicked, editCommentClicked, scrollToComment } from '$lib/store';
-  import TextEditor from '$lib/components/TextEditor.svelte';
-  import { marked } from 'marked';
-  import { tick } from 'svelte';
-  
-  export let moderators
+  export let moderators;
   export let comment;
   export let data;
   export let postId;
   export let opUserId;
 
-export let upvoteButtonClicked
-export let downvoteButtonClicked
-export let upvoteCounter;
-export let downvoteCounter;
-export let userAlreadyVoted;
+  export let upvoteButtonClicked;
+  export let downvoteButtonClicked;
+  export let upvoteCounter;
+  export let downvoteCounter;
+  export let userAlreadyVoted;
 
+  if (userAlreadyVoted) {
+    upvoteButtonClicked =
+      comment?.expand["alreadyVoted(comment)"]?.find(
+        (item) => item?.user === data?.user?.id,
+      )?.type === "upvote";
+    downvoteButtonClicked =
+      comment?.expand["alreadyVoted(comment)"]?.find(
+        (item) => item?.user === data?.user?.id,
+      )?.type === "downvote";
+  } else {
+    upvoteButtonClicked = false;
+    downvoteButtonClicked = false;
+  }
 
-if (userAlreadyVoted) {
-  upvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'upvote';
-  downvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'downvote';
-} else {
-  upvoteButtonClicked = false;
-  downvoteButtonClicked = false;
-}
+  function removeDuplicateClasses(str) {
+    return str.replace(/class="([^"]*)"/g, (match, classAttr) => {
+      return `class="${[...new Set(classAttr.split(" "))].join(" ")}"`;
+    });
+  }
 
-
-
-function removeDuplicateClasses(str) {
-  return str.replace(/class="([^"]*)"/g, (match, classAttr) => {
-      return `class="${[...new Set(classAttr.split(' '))].join(' ')}"`;
-  });
-}
-
-function addClassesToHtml(htmlString) {
-  // Helper function to add a class to a specific tag
-  function addClassToTag(tag, className) {
+  function addClassesToHtml(htmlString) {
+    // Helper function to add a class to a specific tag
+    function addClassToTag(tag, className) {
       // Add class if the tag doesn't already have a class attribute
-      const regex = new RegExp(`<${tag}(?![^>]*\\bclass=)([^>]*)>`, 'g');
+      const regex = new RegExp(`<${tag}(?![^>]*\\bclass=)([^>]*)>`, "g");
       htmlString = htmlString.replace(regex, `<${tag} class="${className}"$1>`);
 
       // Append the new class to tags that already have a class attribute, ensuring no duplicates
-      const regexWithClass = new RegExp(`(<${tag}[^>]*\\bclass=["'][^"']*)(?!.*\\b${className}\\b)([^"']*)["']`, 'g');
+      const regexWithClass = new RegExp(
+        `(<${tag}[^>]*\\bclass=["'][^"']*)(?!.*\\b${className}\\b)([^"']*)["']`,
+        "g",
+      );
       htmlString = htmlString.replace(regexWithClass, `$1 ${className}$2"`);
-  }
+    }
 
-  // Add classes to headings
-  addClassToTag('h1', 'text-lg');
-  addClassToTag('h2', 'text-lg');
-  addClassToTag('h3', 'text-lg');
-  addClassToTag('h4', 'text-lg');
-  addClassToTag('h5', 'text-lg');
-  addClassToTag('h6', 'text-lg');
+    // Add classes to headings
+    addClassToTag("h1", "text-lg");
+    addClassToTag("h2", "text-lg");
+    addClassToTag("h3", "text-lg");
+    addClassToTag("h4", "text-lg");
+    addClassToTag("h5", "text-lg");
+    addClassToTag("h6", "text-lg");
 
-  // Add classes to anchor tags
-  addClassToTag('a', 'text-blue-400 hover:text-white underline');
+    // Add classes to anchor tags
+    addClassToTag("a", "text-blue-400 hover:text-white underline");
 
-  // Add classes to ordered lists
-  addClassToTag('ol', 'list-decimal ml-10 text-sm');
+    // Add classes to ordered lists
+    addClassToTag("ol", "list-decimal ml-10 text-sm");
 
-  // Add classes to unordered lists
-  addClassToTag('ul', 'list-disc ml-10 text-sm -mt-5');
+    // Add classes to unordered lists
+    addClassToTag("ul", "list-disc ml-10 text-sm -mt-5");
 
-  // Add classes to blockquotes and their paragraphs
-  function addClassToBlockquote() {
+    // Add classes to blockquotes and their paragraphs
+    function addClassToBlockquote() {
       // Add class to blockquote
       htmlString = htmlString.replace(
-          /<blockquote/g,
-          '<blockquote class="pl-4 pr-4 rounded-lg bg-[#323232]"'
+        /<blockquote/g,
+        '<blockquote class="pl-4 pr-4 rounded-lg bg-[#323232]"',
       );
 
       // Add class to p inside blockquote
       htmlString = htmlString.replace(
-          /<blockquote([^>]*)>\s*<p/g,
-          `<blockquote$1>\n<p class="text-sm font-medium leading-relaxed text-white"`
+        /<blockquote([^>]*)>\s*<p/g,
+        `<blockquote$1>\n<p class="text-sm font-medium leading-relaxed text-white"`,
       );
+    }
+
+    addClassToBlockquote();
+
+    // Remove duplicate classes after all modifications
+    htmlString = removeDuplicateClasses(htmlString);
+
+    return htmlString;
   }
 
-  addClassToBlockquote();
+  const handleUpvote = async (event) => {
+    event.preventDefault(); // prevent the default form submission behavior
 
-  // Remove duplicate classes after all modifications
-  htmlString = removeDuplicateClasses(htmlString);
+    const commentId = event.target.commentId.value;
+    const postData = {
+      postId: postId,
+      commentId: commentId,
+      userId: data?.user?.id,
+      path: "upvote-comment",
+    };
 
-  return htmlString;
-}
-
-
-
-const handleUpvote = async (event) => {
-  
-  event.preventDefault(); // prevent the default form submission behavior
-      
-  const commentId = event.target.commentId.value;
-  const postData = {
-      'postId': postId,
-      'commentId': commentId,
-      'userId': data?.user?.id,
-      'path': 'upvote-comment'
-  };
-        
-  upvoteButtonClicked = !upvoteButtonClicked;
-  
+    upvoteButtonClicked = !upvoteButtonClicked;
 
     if (upvoteButtonClicked) {
       if (downvoteButtonClicked) {
@@ -116,30 +124,27 @@ const handleUpvote = async (event) => {
     } else {
       upvoteCounter--;
     }
-  const response = await fetch('/api/fastify-post-data', {
-    method: 'POST',
-    headers: {
-      "Content-Type": "application/json"
+    const response = await fetch("/api/fastify-post-data", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
       },
-    body: JSON.stringify(postData)
-  }); // make a POST request to the server with the FormData object
-  
-};
+      body: JSON.stringify(postData),
+    }); // make a POST request to the server with the FormData object
+  };
 
+  const handleDownvote = async (event) => {
+    event.preventDefault(); // prevent the default form submission behavior
+
+    const commentId = event.target.commentId.value;
+    const postData = {
+      commentId: commentId,
+      userId: data?.user?.id,
+      path: "downvote-comment",
+    };
+
+    downvoteButtonClicked = !downvoteButtonClicked;
 
-const handleDownvote = async (event) => {
-  event.preventDefault(); // prevent the default form submission behavior
-    
-  const commentId = event.target.commentId.value;
-  const postData = {
-                  'commentId': commentId,
-                  'userId': data?.user?.id,
-                  'path': 'downvote-comment'
-                  };
-  
-  downvoteButtonClicked = !downvoteButtonClicked;
-  
-  
     if (downvoteButtonClicked) {
       if (upvoteButtonClicked) {
         downvoteCounter += 1;
@@ -151,114 +156,95 @@ const handleDownvote = async (event) => {
     } else {
       downvoteCounter--;
     }
-  
 
-  const response = await fetch('/api/fastify-post-data', {
-    method: 'POST',
-    headers: {
-      "Content-Type": "application/json"
+    const response = await fetch("/api/fastify-post-data", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
       },
-    body: JSON.stringify(postData)
-  }); // make a POST request to the server with the FormData object
-  
-};
-  
-  
-  let deleteCommentId = comment?.id
-  
+      body: JSON.stringify(postData),
+    }); // make a POST request to the server with the FormData object
+  };
+
+  let deleteCommentId = comment?.id;
+
   function isModerator(comment) {
-    return moderators?.some(moderator => comment?.user === moderator?.user);
+    return moderators?.some((moderator) => comment?.user === moderator?.user);
   }
-  
-  
+
   function repeatedCharacters(str) {
-      // This regex matches any character (.) followed by itself at least five times
-      const regex = /(.)\1{10,}/;
-    
-      // Test the string against the regex
-      return regex?.test(str);
+    // This regex matches any character (.) followed by itself at least five times
+    const regex = /(.)\1{10,}/;
+
+    // Test the string against the regex
+    return regex?.test(str);
   }
-  
-  
+
   const handleDeleteComment = async () => {
-  
-  
-  const postData = {
-    'userId': data?.user?.id,
-    'commentId': comment?.id,
-    'commentUser': comment?.user,
-    'path': 'delete-comment'
+    const postData = {
+      userId: data?.user?.id,
+      commentId: comment?.id,
+      commentUser: comment?.user,
+      path: "delete-comment",
+    };
+
+    const response = await fetch("/api/fastify-post-data", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(postData),
+    }); // make a POST request to the server with the FormData object
+
+    const output = (await response.json())?.message;
+    if (output === "success") {
+      $commentIdDeleted = comment?.id;
     }
-  
-  
-  
-  const response = await fetch('/api/fastify-post-data', {
-    method: 'POST',
-    headers: {
-        "Content-Type": "application/json"
-    },
-    body: JSON.stringify(postData)
-  }); // make a POST request to the server with the FormData object
-  
-  const output = (await response.json())?.message;
-  if (output === 'success')
-  {
-    $commentIdDeleted = comment?.id;
-  
-  }
-  
-  if (output === 'success') {
-      toast.success('Comment deleted', {
-      style: 'border-radius: 200px; background: #333; color: #fff;'
+
+    if (output === "success") {
+      toast.success("Comment deleted", {
+        style: "border-radius: 200px; background: #333; color: #fff;",
       });
-  } else {
-      toast.error('Something went wrong', {
-      style: 'border-radius: 200px; background: #333; color: #fff;'
+    } else {
+      toast.error("Something went wrong", {
+        style: "border-radius: 200px; background: #333; color: #fff;",
       });
-  }
-  
-  
-  }
-  
-  
-  
+    }
+  };
+
   const handleReportComment = async () => {
-  
-  toast.success('Comment reported.', {
-      style: 'border-radius: 200px; background: #333; color: #fff'
-      });
-  
-  
-  }
-  
+    toast.success("Comment reported.", {
+      style: "border-radius: 200px; background: #333; color: #fff",
+    });
+  };
+
   const toggle = (state) => {
-    if (state === 'reply') {
-      $replyCommentClicked[comment.id] = !$replyCommentClicked[comment.id]
+    if (state === "reply") {
+      $replyCommentClicked[comment.id] = !$replyCommentClicked[comment.id];
       $editCommentClicked[comment.id] = false;
-    }
-    else if (state === 'edit') {
+    } else if (state === "edit") {
       $editCommentClicked[comment.id] = !$editCommentClicked[comment.id];
       $replyCommentClicked[comment.id] = false;
     }
-  }
+  };
 
+  $replyCommentClicked[comment?.id] = false;
+  $editCommentClicked[comment?.id] = false;
 
-    
-  $replyCommentClicked[comment?.id] = false
-  $editCommentClicked[comment?.id] = false
-
-
-  $: if ($scrollToComment?.length !== 0 && typeof window !== 'undefined') {
+  $: if ($scrollToComment?.length !== 0 && typeof window !== "undefined") {
     // Wait for the DOM to update
     tick().then(() => {
       const commentElement = document.getElementById($scrollToComment);
       if (commentElement) {
-        commentElement.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: "center"});
+        commentElement.scrollIntoView({
+          behavior: "smooth",
+          inline: "nearest",
+          block: "center",
+        });
       }
     });
   }
 
-
   /*
   $: {
     if($commentAdded?.length !== 0) {
@@ -278,239 +264,335 @@ const handleDownvote = async (event) => {
 }
 
 */
+</script>
 
-  </script>
-  
-    
-  <div class="comment border-l border-gray-500 mt-8">
-        <div class="flex flex-row justify-start items-center -ml-4">
-            <a href={'/community/user/'+comment?.expand?.user?.id} class="flex flex-row items-center justify-start">
-              <label class="avatar w-7 h-7 flex-shrink-0 text-white text-xs sm:text-sm ml-1">
-                <img class="flex-shrink-0 inline-block bg-slate-300 rounded-full" 
-                src={comment?.expand?.user?.avatar
-                    ? getImageURL(comment?.expand?.user?.collectionId, comment?.expand?.user?.id, comment?.expand?.user?.avatar)
-                    : `https://avatar.vercel.sh/${comment?.expand?.user?.username}`} 
-                alt="User avatar" />
-              </label>
-              <span class="text-white ml-2 inline-block text-xs sm:text-sm">
-                {comment?.expand?.user?.username}
-              </span>
-              {#if isModerator(comment)}
-                <svg class="inline-block ml-1 w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#75d377" d="M256 32C174 69.06 121.38 86.46 32 96c0 77.59 5.27 133.36 25.29 184.51a348.86 348.86 0 0 0 71.43 112.41c49.6 52.66 104.17 80.4 127.28 87.08c23.11-6.68 77.68-34.42 127.28-87.08a348.86 348.86 0 0 0 71.43-112.41C474.73 229.36 480 173.59 480 96c-89.38-9.54-142-26.94-224-64Z"/></svg>
-              {/if}
-              {#if comment?.user === opUserId}
-              <span class="text-[#756EFF] text-sm font-semibold ml-1"> 
-                OP
-              </span>
-              {/if}
-              <span class="text-white font-bold ml-1 mr-1">
-                ·
-              </span>
-              <span class="text-white text-xs">
-                {formatDate(comment?.created)} ago
-              </span>
-            </a>
-            
-  
-  
-        </div>
-        <div class="text-md text-slate-400 mb-1 pl-5 pt-3 whitespace-pre-wrap w-11/12 sm:w-5/6 ">
-  
-            
-            <div id={comment?.id} class="text-sm text-[#D7DADC] rounded-lg {comment?.id === $scrollToComment ? 'pt-3 pl-3 pr-3 mb-5 bg-[#31304D]' : ''} whitespace-pre-line {repeatedCharacters(comment?.comment) === true ? 'break-all' : ''}">
-              {#if !$editCommentClicked[comment?.id]}
-              {@html addClassesToHtml(marked(comment?.comment))}
-              {:else}
-                <TextEditor
-                data={data}
-                postId={postId}
-                commentId={comment?.id}
-                inputValue={comment?.comment}
-                placeholder={"Reply to the comment of @"+comment?.expand?.user?.username+"..."}
-                />
-              {/if}
-            </div>
-            {#if comment?.image?.length !== 0}
-            <div class="relative mr-auto -mt-5">
-              <img
-                src={getImageURL(comment?.collectionId, comment?.id, comment?.image)} 
-                class="w-auto max-w-36 max-h-[350px] sm:max-h-[550px] mr-auto"
-                alt="comment Image"
-                />
-              </div>
-              {/if}
-  
-            
-          </div>
-  
-  
-          <div class="flex flex-col items-start w-full">
-          <div class="pl-5 flex flex-row items-center  {comment?.image?.length === 0 ? '-mt-8' : ''} ">
-            <!--Start Voting-->
-            <!--Start Upvote -->
-            <form on:submit={handleUpvote}>
-              <input type="hidden" name="commentId" value={comment?.id}>
-              {#if !data?.user}
-              <label for="userLogin" class="text-[#A6ADBB] cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
-                <svg class="rotate-180 w-4 h-4" version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
-              </label>
-              {:else}
-              <button type="submit" class="{upvoteButtonClicked ? 'text-[#0076FE] bg-[#31304D]' : 'text-[#A6ADBB]'} cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
-                <svg class="rotate-180 w-4 h-4" version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
-              </button >
-              {/if}
-            </form>
-            <!--End Upvote-->
-            <!--Start Downvote-->
-            <span class="text-gray-200 text-sm ml-1.5 mr-1.5">
-              {upvoteCounter - downvoteCounter }
-            </span>
-            <form on:submit={handleDownvote}>
-              <input type="hidden" name="commentId" value={comment?.id} />
-            {#if !data?.user}
-            <label for="userLogin" class="mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
-              <svg class="w-4 h-4 mt-0.5" version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
-            </label>
-            {:else}
-            <button type="submit" class="{downvoteButtonClicked ? 'text-[#0076FE] bg-[#31304D]' : 'text-[#A6ADBB]'} mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
-              <svg class="w-4 h-4 mt-0.5" version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
-            </button>
-            {/if}
-            </form>
-            <!--End Downvote-->
-            <!--End Voting-->
-
-            <label class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]" for={!data?.user ? 'userLogin' : ''} on:click={() => toggle('reply')}>
-              Reply
-            </label>
-
-            {#if data?.user?.id === comment?.expand?.user?.id}  
-            <label class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]" for={!data?.user ? 'userLogin' : ''} on:click={() => toggle('edit')}>
-                Edit
-              </label>
-            {/if}
-  
-            {#if data?.user?.id === comment?.expand?.user?.id || data?.user?.id === moderators?.at(0).user}  
-              <label for={'delete'+deleteCommentId} class="cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]">
-                Delete
-              </label>
-            {/if}
-
-  
-          </div>
-
-          <div class="pl-8 w-full">
-            
-            {#if $replyCommentClicked[comment?.id]}
-              <div class="mt-3 -ml-3">
-              {#if data?.user}
-                <TextEditor
-                data={data}
-                postId={postId}
-                commentId={comment?.id}
-                placeholder={"Reply to the comment of @"+comment?.expand?.user?.username+"..."}
-                />
-              {/if}
-              </div>
-            {/if}
-          </div>
-
-        </div>
-  
-  
-          {#if comment?.children}
-          <div class="ml-2">
-            {#each comment.children  as comment}
-            <svelte:self 
-            {moderators} 
-            {comment} 
-            {data} 
-            {postId} 
-            {opUserId} 
-            upvoteCounter={comment?.upvote}
-            downvoteCounter={comment?.downvote}
-            userAlreadyVoted={comment?.expand['alreadyVoted(comment)']?.some(item => item?.user === data?.user?.id)}
-            />
-            {/each}
-          </div>
-          {/if}
-          
+<div class="comment border-l border-gray-500 mt-8">
+  <div class="flex flex-row justify-start items-center -ml-4">
+    <a
+      href={"/community/user/" + comment?.expand?.user?.id}
+      class="flex flex-row items-center justify-start"
+    >
+      <label
+        class="avatar w-7 h-7 flex-shrink-0 text-white text-xs sm:text-sm ml-1"
+      >
+        <img
+          class="flex-shrink-0 inline-block bg-slate-300 rounded-full"
+          src={comment?.expand?.user?.avatar
+            ? getImageURL(
+                comment?.expand?.user?.collectionId,
+                comment?.expand?.user?.id,
+                comment?.expand?.user?.avatar,
+              )
+            : `https://avatar.vercel.sh/${comment?.expand?.user?.username}`}
+          alt="User avatar"
+        />
+      </label>
+      <span class="text-white ml-2 inline-block text-xs sm:text-sm">
+        {comment?.expand?.user?.username}
+      </span>
+      {#if isModerator(comment)}
+        <svg
+          class="inline-block ml-1 w-3 h-3"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          ><path
+            fill="#75d377"
+            d="M256 32C174 69.06 121.38 86.46 32 96c0 77.59 5.27 133.36 25.29 184.51a348.86 348.86 0 0 0 71.43 112.41c49.6 52.66 104.17 80.4 127.28 87.08c23.11-6.68 77.68-34.42 127.28-87.08a348.86 348.86 0 0 0 71.43-112.41C474.73 229.36 480 173.59 480 96c-89.38-9.54-142-26.94-224-64Z"
+          /></svg
+        >
+      {/if}
+      {#if comment?.user === opUserId}
+        <span class="text-[#756EFF] text-sm font-semibold ml-1"> OP </span>
+      {/if}
+      <span class="text-white font-bold ml-1 mr-1"> · </span>
+      <span class="text-white text-xs">
+        {formatDate(comment?.created)} ago
+      </span>
+    </a>
   </div>
-  
-  
-  <!--Start Delete Modal-->
-  <input type="checkbox" id={'delete'+deleteCommentId} class="modal-toggle" />
-  
-  <dialog id={'delete'+deleteCommentId} class="modal modal-bottom sm:modal-middle border border-slate-800">
-  
-    <label for={'delete'+deleteCommentId}  class="cursor-pointer modal-backdrop  bg-[#fff] bg-opacity-[0.05]"></label>
-  
-    <div class="modal-box bg-[#09090B] p-5 border border-slate-600 shadow-none" >
-  
-          <h3 class="font-bold text-md sm:text-lg sm:mb-10 text-white mt-5">
-            Are you sure you want to delete the comment?
-          </h3>
-  
-          <div class="modal-action pb-4">
-            <label for={'delete'+deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#646464]">
-              No, cancel
-            </label>
-            <label on:click={handleDeleteComment} for={'delete'+deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-purple-600">
-              Yes, I'm sure
-            </label>
-              
-          </div>
+  <div
+    class="text-md text-slate-400 mb-1 pl-5 pt-3 whitespace-pre-wrap w-11/12 sm:w-5/6"
+  >
+    <div
+      id={comment?.id}
+      class="text-sm text-[#D7DADC] rounded-lg {comment?.id === $scrollToComment
+        ? 'pt-3 pl-3 pr-3 mb-5 bg-[#31304D]'
+        : ''} whitespace-pre-line {repeatedCharacters(comment?.comment) === true
+        ? 'break-all'
+        : ''}"
+    >
+      {#if !$editCommentClicked[comment?.id]}
+        {@html addClassesToHtml(marked(comment?.comment))}
+      {:else}
+        <TextEditor
+          {data}
+          {postId}
+          commentId={comment?.id}
+          inputValue={comment?.comment}
+          placeholder={"Reply to the comment of @" +
+            comment?.expand?.user?.username +
+            "..."}
+        />
+      {/if}
+    </div>
+    {#if comment?.image?.length !== 0}
+      <div class="relative mr-auto -mt-5">
+        <img
+          src={getImageURL(comment?.collectionId, comment?.id, comment?.image)}
+          class="w-auto max-w-36 max-h-[350px] sm:max-h-[550px] mr-auto"
+          alt="comment Image"
+        />
+      </div>
+    {/if}
+  </div>
+
+  <div class="flex flex-col items-start w-full">
+    <div
+      class="pl-5 flex flex-row items-center {comment?.image?.length === 0
+        ? '-mt-8'
+        : ''} "
+    >
+      <!--Start Voting-->
+      <!--Start Upvote -->
+      <form on:submit={handleUpvote}>
+        <input type="hidden" name="commentId" value={comment?.id} />
+        {#if !data?.user}
+          <label
+            for="userLogin"
+            class="text-[#A6ADBB] cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
+          >
+            <svg
+              class="rotate-180 w-4 h-4"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512.171 512.171"
+              xml:space="preserve"
+              ><path
+                fill="currentColor"
+                d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
+              ></path></svg
+            >
+          </label>
+        {:else}
+          <button
+            type="submit"
+            class="{upvoteButtonClicked
+              ? 'text-[#0076FE] bg-[#31304D]'
+              : 'text-[#A6ADBB]'} cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
+          >
+            <svg
+              class="rotate-180 w-4 h-4"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512.171 512.171"
+              xml:space="preserve"
+              ><path
+                fill="currentColor"
+                d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
+              ></path></svg
+            >
+          </button>
+        {/if}
+      </form>
+      <!--End Upvote-->
+      <!--Start Downvote-->
+      <span class="text-gray-200 text-sm ml-1.5 mr-1.5">
+        {upvoteCounter - downvoteCounter}
+      </span>
+      <form on:submit={handleDownvote}>
+        <input type="hidden" name="commentId" value={comment?.id} />
+        {#if !data?.user}
+          <label
+            for="userLogin"
+            class="mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
+          >
+            <svg
+              class="w-4 h-4 mt-0.5"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512.171 512.171"
+              xml:space="preserve"
+              ><path
+                fill="currentColor"
+                d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
+              ></path></svg
+            >
+          </label>
+        {:else}
+          <button
+            type="submit"
+            class="{downvoteButtonClicked
+              ? 'text-[#0076FE] bg-[#31304D]'
+              : 'text-[#A6ADBB]'} mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
+          >
+            <svg
+              class="w-4 h-4 mt-0.5"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512.171 512.171"
+              xml:space="preserve"
+              ><path
+                fill="currentColor"
+                d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
+              ></path></svg
+            >
+          </button>
+        {/if}
+      </form>
+      <!--End Downvote-->
+      <!--End Voting-->
+
+      <label
+        class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]"
+        for={!data?.user ? "userLogin" : ""}
+        on:click={() => toggle("reply")}
+      >
+        Reply
+      </label>
+
+      {#if data?.user?.id === comment?.expand?.user?.id}
+        <label
+          class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]"
+          for={!data?.user ? "userLogin" : ""}
+          on:click={() => toggle("edit")}
+        >
+          Edit
+        </label>
+      {/if}
+
+      {#if data?.user?.id === comment?.expand?.user?.id || data?.user?.id === moderators?.at(0).user}
+        <label
+          for={"delete" + deleteCommentId}
+          class="cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]"
+        >
+          Delete
+        </label>
+      {/if}
+    </div>
+
+    <div class="pl-8 w-full">
+      {#if $replyCommentClicked[comment?.id]}
+        <div class="mt-3 -ml-3">
+          {#if data?.user}
+            <TextEditor
+              {data}
+              {postId}
+              commentId={comment?.id}
+              placeholder={"Reply to the comment of @" +
+                comment?.expand?.user?.username +
+                "..."}
+            />
+          {/if}
         </div>
-    </dialog>
-  <!--End Delete Modal-->
-  
-  
-  
-  <!--Start Delete Modal-->
-  <input type="checkbox" id="reportComment" class="modal-toggle" />
-  
-  <dialog id="reportComment" class="modal modal-bottom sm:modal-middle">
-  
-  
-    <div class="modal-box" >
-      <label for="reportComment" class="{$screenWidth < 640 ? 'hidden' : ''} btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
-  
-          <h3 class="font-bold text-md sm:text-lg sm:mb-10">
-            Are you sure you want to report the comment?
-          </h3>
-  
-          <div class="modal-action">
-            <label for="reportComment" class="btn text-xs text-white mr-5">
-              No, cancel
-            </label>
-            <label on:click={handleReportComment} for="reportComment" class="btn bg-red-700 hover:bg-red-800 text-xs text-white mr-5">
-              Yes, I'm sure
-            </label>
-              
-          </div>
-        </div>
-    </dialog>
-  <!--End Delete Modal-->
-  
-  
-  
-  <style>
+      {/if}
+    </div>
+  </div>
+
+  {#if comment?.children}
+    <div class="ml-2">
+      {#each comment.children as comment}
+        <svelte:self
+          {moderators}
+          {comment}
+          {data}
+          {postId}
+          {opUserId}
+          upvoteCounter={comment?.upvote}
+          downvoteCounter={comment?.downvote}
+          userAlreadyVoted={comment?.expand["alreadyVoted(comment)"]?.some(
+            (item) => item?.user === data?.user?.id,
+          )}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!--Start Delete Modal-->
+<input type="checkbox" id={"delete" + deleteCommentId} class="modal-toggle" />
+
+<dialog
+  id={"delete" + deleteCommentId}
+  class="modal modal-bottom sm:modal-middle border border-slate-800"
+>
+  <label
+    for={"delete" + deleteCommentId}
+    class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05]"
+  ></label>
+
+  <div class="modal-box bg-[#09090B] p-5 border border-slate-600 shadow-none">
+    <h3 class="font-bold text-md sm:text-lg sm:mb-10 text-white mt-5">
+      Are you sure you want to delete the comment?
+    </h3>
+
+    <div class="modal-action pb-4">
+      <label
+        for={"delete" + deleteCommentId}
+        class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#646464]"
+      >
+        No, cancel
+      </label>
+      <label
+        on:click={handleDeleteComment}
+        for={"delete" + deleteCommentId}
+        class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#fff]"
+      >
+        Yes, I'm sure
+      </label>
+    </div>
+  </div>
+</dialog>
+<!--End Delete Modal-->
+
+<!--Start Delete Modal-->
+<input type="checkbox" id="reportComment" class="modal-toggle" />
+
+<dialog id="reportComment" class="modal modal-bottom sm:modal-middle">
+  <div class="modal-box">
+    <label
+      for="reportComment"
+      class="{$screenWidth < 640
+        ? 'hidden'
+        : ''} btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label
+    >
+
+    <h3 class="font-bold text-md sm:text-lg sm:mb-10">
+      Are you sure you want to report the comment?
+    </h3>
+
+    <div class="modal-action">
+      <label for="reportComment" class="btn text-xs text-white mr-5">
+        No, cancel
+      </label>
+      <label
+        on:click={handleReportComment}
+        for="reportComment"
+        class="btn bg-red-700 hover:bg-red-800 text-xs text-white mr-5"
+      >
+        Yes, I'm sure
+      </label>
+    </div>
+  </div>
+</dialog>
+
+<!--End Delete Modal-->
+
+<style>
+  .comment {
+    margin-inline-start: 1rem;
+  }
+  .comment.lines {
+    position: relative;
+    padding-inline-start: 1rem;
+  }
+
+  /* Media query for mobile devices */
+  @media (max-width: 640px) {
     .comment {
-      margin-inline-start: 1rem;
+      margin-inline-start: 0.5rem;
     }
     .comment.lines {
-      position: relative;
-      padding-inline-start: 1rem;
+      padding-inline-start: 0.5rem;
     }
-  
-    /* Media query for mobile devices */
-    @media (max-width: 640px) {
-      .comment {
-        margin-inline-start: 0.5rem;
-      }
-      .comment.lines {
-        padding-inline-start: 0.5rem;
-      }
-    }
-  </style>
-  
\ No newline at end of file
+  }
+</style>
diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte
index 54dd2aef..7062ab33 100644
--- a/src/lib/components/DCF.svelte
+++ b/src/lib/components/DCF.svelte
@@ -347,7 +347,7 @@
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 256 256"
                   ><path
-                    fill="#FBCE3C"
+                    fill="#fff"
                     d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                   /></svg
                 >
diff --git a/src/lib/components/DividendCard.svelte b/src/lib/components/DividendCard.svelte
index 022505e8..a42f54f0 100644
--- a/src/lib/components/DividendCard.svelte
+++ b/src/lib/components/DividendCard.svelte
@@ -1,91 +1,122 @@
 <script lang="ts">
+  import { etfTicker, screenWidth } from "$lib/store";
+  import { goto } from "$app/navigation";
 
-    import {etfTicker, screenWidth} from '$lib/store';
-    import { goto } from '$app/navigation';
-    
-    export let dividendList;
-  
-    let dividendHistoryList = []; 
-    let dividendYield;
-    
-    $: {
-        if($etfTicker && typeof window !== 'undefined')
-        {
-            dividendHistoryList = dividendList?.history;
+  export let dividendList;
 
-            dividendYield = dividendList?.dividendYield;
+  let dividendHistoryList = [];
+  let dividendYield;
 
-        }
-}
-    
-    </script>
-          
-          <!--Start Similar Stocks Card -->
-          
-          <div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">  
-          
-          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
-          
-            <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
-              <div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
-                <span class="font-bold text-white text-2xl">
-                    Dividends
-                </span>
-                <span class="text-white font-semibold ml-auto text-[1rem]">
-                    Dividend Yield {dividendYield ?? '0'}%
-                </span>
-              </div>
-              
-              {#if dividendList?.history?.at(0)?.length !== 0} 
-        
-              
-          
-              <div class="flex justify-start items-center w-full m-auto pl-2">
-                <table class="table lg:table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
-                  <thead>
-                    <tr>
-                      <th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]">Ex-Dividend</th>
-                      <th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Payment Date</th>
-                      <th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Amount</th>
-                    </tr>
-                  </thead>
+  $: {
+    if ($etfTicker && typeof window !== "undefined") {
+      dividendHistoryList = dividendList?.history;
 
-                  <tbody>
-                    {#each dividendHistoryList?.slice(0,5) as item}
-                    <tr class="text-white bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
-                        <td class="text-start text-sm text-white font-medium">
-                            {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                        </td>
-                        
-        
-                      <td class="text-end text-sm text-white font-medium">
-                        {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
-                      </td>
+      dividendYield = dividendList?.dividendYield;
+    }
+  }
+</script>
 
-                        <td class="text-end text-sm text-white font-medium">
-                            ${item?.adjDividend?.toFixed(2)}
-                        </td>
+<!--Start Similar Stocks Card -->
 
-                    </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
+<div
+  class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0
+    ? ''
+    : 'hidden'}"
+>
+  <div
+    class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <=
+    800
+      ? 'w-screen pt-16'
+      : ''} md:w-[420px] xl:w-[450px]"
+  >
+    <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
+      <div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
+        <span class="font-bold text-white text-2xl"> Dividends </span>
+        <span class="text-white font-semibold ml-auto text-[1rem]">
+          Dividend Yield {dividendYield ?? "0"}%
+        </span>
+      </div>
 
-              <label for="dividendModal" on:click={() => goto(`/etf/${$etfTicker}/dividends`)} class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100 ease-in">
-                View Dividend History
-              </label>
-        
-              {:else}
-                <h2 class="mt-20 justify-center items-center text-3xl font-medium text-slate-700 mb-20 m-auto">
-                  No data available
-                  <svg class="w-10 lg:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
-                </h2>
-                {/if}
-          
-            
-          </div>
-          </div>
-          </div>
-          <!--End Similar Stocks Card -->    
-          
\ No newline at end of file
+      {#if dividendList?.history?.at(0)?.length !== 0}
+        <div class="flex justify-start items-center w-full m-auto pl-2">
+          <table
+            class="table lg:table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto"
+          >
+            <thead>
+              <tr>
+                <th
+                  class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]"
+                  >Ex-Dividend</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
+                  >Payment Date</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
+                  >Amount</th
+                >
+              </tr>
+            </thead>
+
+            <tbody>
+              {#each dividendHistoryList?.slice(0, 5) as item}
+                <tr
+                  class="text-white bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]"
+                >
+                  <td class="text-start text-sm text-white font-medium">
+                    {new Date(item?.date)?.toLocaleString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                      daySuffix: "2-digit",
+                    })}
+                  </td>
+
+                  <td class="text-end text-sm text-white font-medium">
+                    {item?.paymentDate?.length !== 0
+                      ? new Date(item?.paymentDate)?.toLocaleString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                          daySuffix: "2-digit",
+                        })
+                      : "n/a"}
+                  </td>
+
+                  <td class="text-end text-sm text-white font-medium">
+                    ${item?.adjDividend?.toFixed(2)}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+
+        <label
+          for="dividendModal"
+          on:click={() => goto(`/etf/${$etfTicker}/dividends`)}
+          class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100 ease-in"
+        >
+          View Dividend History
+        </label>
+      {:else}
+        <h2
+          class="mt-20 justify-center items-center text-3xl font-medium text-slate-700 mb-20 m-auto"
+        >
+          No data available
+          <svg
+            class="w-10 lg:w-12 inline-block"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><path
+              fill="#334155"
+              d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"
+            /></svg
+          >
+        </h2>
+      {/if}
+    </div>
+  </div>
+</div>
+<!--End Similar Stocks Card -->
diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index d89025cc..77ec771d 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -82,7 +82,7 @@
 <div class="fixed z-[100] bottom-8 sm:bottom-10 right-8 sm:right-16">
   <label
     for="feedbackInfo"
-    class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-700 sm:bg-[#FBCE3C] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
+    class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-700 sm:bg-[#fff] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -185,7 +185,7 @@
 
     <button
       on:click={() => sendFeedback()}
-      class="mb-4 px-3 py-2 bg-[#FBCE3C] sm:hover:bg-[#e8b305] {rating?.length !==
+      class="mb-4 px-3 py-2 bg-[#fff] sm:hover:bg-gray-300 {rating?.length !==
         0 && inputValue?.length !== 0
         ? 'opacity-100 cursor-pointer'
         : 'opacity-60 cursor-not-allowed'} w-11/12 rounded-lg m-auto text-black font-semibold text-md"
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index e76e11f1..de63b26f 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,34 +1,65 @@
-<script lang='ts'>
-
+<script lang="ts">
   let discordURL = import.meta.env.VITE_DISCORD_URL;
-
-
 </script>
 
-
- <!--Footer-->
- <footer class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto">
+<!--Footer-->
+<footer
+  class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto"
+>
   <div class="container mx-auto px-3">
-      
     <div class="w-full flex flex-col md:flex-row py-6">
       <div class="flex-1 mb-8">
         <div class="flex flex-row items-center mt-4">
-
-
-          <a href={discordURL} rel="noopener noreferrer" target="_blank" class="flex flex-row items-center">
-            <svg class="w-6 h-6 ml-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"/></svg>
+          <a
+            href={discordURL}
+            rel="noopener noreferrer"
+            target="_blank"
+            class="flex flex-row items-center"
+          >
+            <svg
+              class="w-6 h-6 ml-4"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="white"
+                d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"
+              /></svg
+            >
           </a>
 
-
-          <a href="https://twitter.com/intent/follow?screen_name=stocknear" rel="noopener noreferrer" target="_blank" class="flex flex-row items-center">
-            <svg class="w-5 h-5 ml-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231l5.45-6.231Zm-1.161 17.52h1.833L7.045 4.126H5.078L17.044 19.77Z"/></svg>
-          </a>
-          
-          <a href="https://github.com/stocknear" rel="noopener noreferrer" target="_blank" class="flex flex-row items-center ml-3">
-            <svg class="w-6 h-6 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
+          <a
+            href="https://twitter.com/intent/follow?screen_name=stocknear"
+            rel="noopener noreferrer"
+            target="_blank"
+            class="flex flex-row items-center"
+          >
+            <svg
+              class="w-5 h-5 ml-4"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="white"
+                d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231l5.45-6.231Zm-1.161 17.52h1.833L7.045 4.126H5.078L17.044 19.77Z"
+              /></svg
+            >
           </a>
 
-
+          <a
+            href="https://github.com/stocknear"
+            rel="noopener noreferrer"
+            target="_blank"
+            class="flex flex-row items-center ml-3"
+          >
+            <svg
+              class="w-6 h-6 ml-1"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="white"
+                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+              /></svg
+            >
+          </a>
         </div>
 
         <!--
@@ -38,22 +69,29 @@
           </span>
           <span class="relative flex h-3 w-3 ml-2">
             <span class="absolute inline-flex h-full w-full rounded-full"></span>
-            <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-600"></span>
+            <span class="relative inline-flex rounded-full h-3 w-3 bg-[#fff]"></span>
           </span>
         </a>
         -->
-
       </div>
-      
+
       <div class="flex-1 mb-2 sm:mb-0">
         <p class="uppercase text-slate-100 md:mb-6">Products</p>
         <ul class="list-reset mb-6">
-          <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
-            <a href="/pricing" class="no-underline sm:hover:underline text-gray-100  sm:hover:text-blue-400">Pricing</a>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a
+              href="/pricing"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              >Pricing</a
+            >
           </li>
-          
-          <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
-            <a href="/donation" class="no-underline sm:hover:underline text-gray-100  sm:hover:text-blue-400">Support Us ❤</a>
+
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a
+              href="/donation"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              >Support Us ❤</a
+            >
           </li>
         </ul>
       </div>
@@ -61,34 +99,54 @@
       <div class="flex-1 mb-2 sm:mb-0">
         <p class="uppercase text-slate-100 md:mb-6">Legal</p>
         <ul class="list-reset mb-6">
-          <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
-            <a href="/terms-of-use" class="no-underline sm:hover:underline text-gray-100  sm:hover:text-blue-400">Terms of Use</a>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a
+              href="/terms-of-use"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              >Terms of Use</a
+            >
           </li>
-          <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
-            <a href="/privacy-policy" class="no-underline sm:hover:underline text-gray-100  sm:hover:text-blue-400">Privacy Policy</a>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a
+              href="/privacy-policy"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              >Privacy Policy</a
+            >
           </li>
-          <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
-            <a href="/imprint" class="no-underline sm:hover:underline text-gray-100  sm:hover:text-blue-400">Imprint</a>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a
+              href="/imprint"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              >Imprint</a
+            >
           </li>
         </ul>
       </div>
-    
+
       <div class="flex-1 mb-2 sm:mb-0">
         <p class="uppercase text-slate-100 md:mb-6">Company</p>
         <ul class="list-reset mb-6">
-
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
-            <a href="/about" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">
+            <a
+              href="/about"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+            >
               About Us
             </a>
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
-            <a href="/contact" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">
+            <a
+              href="/contact"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+            >
               Contact Us
             </a>
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
-            <a href="/blog" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">
+            <a
+              href="/blog"
+              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+            >
               Blog
             </a>
           </li>
@@ -99,7 +157,6 @@
             </a>
           </li>
           -->
-      
         </ul>
       </div>
       <!--
@@ -129,17 +186,13 @@
         </ul>
       </div>
       -->
-
-      
     </div>
 
     <div class="hidden sm:flex flex-col">
-      <div class="border-b border-gray-700 w-full"/>
+      <div class="border-b border-gray-700 w-full" />
       <span class="flex flex-row items-center mt-6 text-md text-gray-300 mb-5">
         © 2024 Stocknear. All Rights Reserved.
       </span>
     </div>
-
-
-  </div>  
+  </div>
 </footer>
diff --git a/src/lib/components/GovernmentContract.svelte b/src/lib/components/GovernmentContract.svelte
index 6209a6de..f21f6b25 100644
--- a/src/lib/components/GovernmentContract.svelte
+++ b/src/lib/components/GovernmentContract.svelte
@@ -111,7 +111,7 @@
           data: amountList,
           type: "bar",
           itemStyle: {
-            color: "#FBCE3C", // Change bar color to orange
+            color: "#fff", // Change bar color to orange
           },
         },
       ],
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index 3e342243..9f1aa608 100644
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@@ -1,78 +1,65 @@
-<script lang='ts'>
-	import { onMount } from 'svelte';
-	//import { linkTitle } from '$lib/store';
+<script lang="ts">
+  import { onMount } from "svelte";
+  //import { linkTitle } from '$lib/store';
 
-	export let value = '';
-	export let placeholder = '';
-	export let id;
-	export let label;
-	export let type = 'text';
-	export let disabled = false;
-	export let required = false;
-	export let maxLength = 100;
-	export let showCounter = false;
-	export let hidden = false;
-	export let errors;
-    export let useTitle = false; // new prop
+  export let value = "";
+  export let placeholder = "";
+  export let id;
+  export let label;
+  export let type = "text";
+  export let disabled = false;
+  export let required = false;
+  export let maxLength = 100;
+  export let showCounter = false;
+  export let hidden = false;
+  export let errors;
+  export let useTitle = false; // new prop
 
-	let videoInput;
-	let showVideo = false;
+  let videoInput;
+  let showVideo = false;
 
-	onMount( () => {
-		window.addEventListener('dragover', (event) => event.preventDefault());
-  		window.addEventListener('drop', (event) => event.preventDefault());
-	})
+  onMount(() => {
+    window.addEventListener("dragover", (event) => event.preventDefault());
+    window.addEventListener("drop", (event) => event.preventDefault());
+  });
 
-	const showPreview = (event) => {
-		const target = event.target;
-		const files = target.files;
-		if (files.length > 0) {
+  const showPreview = (event) => {
+    const target = event.target;
+    const files = target.files;
+    if (files.length > 0) {
+      if (files[0]?.name?.toLowerCase()?.includes(".mp4")) {
+        videoInput = URL.createObjectURL(files[0]);
+      } else {
+        const src = URL.createObjectURL(files[0]);
 
+        const preview = document.getElementById("image-preview");
+        preview.src = src;
+      }
+    }
+  };
 
-			if (files[0]?.name?.toLowerCase()?.includes('.mp4'))
-			{
-				videoInput = URL.createObjectURL(files[0]);
-			}
-			else {
+  let inputValue = value;
 
-			
-				const src = URL.createObjectURL(files[0]);
+  //$: value = useTitle === false ? $linkTitle : '';
 
-				const preview = document.getElementById('image-preview');
-				preview.src = src;
-			}
+  let counterColor;
 
-		}
-	};
+  $: counter = `${inputValue.length}/${maxLength}`;
 
+  $: {
+    if (inputValue.length > maxLength) {
+      counterColor = "text-error";
+    } else {
+      counterColor = "text-white";
+    }
+  }
 
-
-	let inputValue = value;
-
-
-	//$: value = useTitle === false ? $linkTitle : '';
-
-	
-
-	let counterColor;
-
-	$: counter = `${inputValue.length}/${maxLength}`;
-
-	$: {
-		if (inputValue.length > maxLength) {
-			counterColor = 'text-error';
-		} else {
-			counterColor = 'text-white';
-		}
-	}
-  
-	function handleInput(event) {
-		inputValue = event.target.value;
-		if(inputValue?.toLowerCase()?.includes('.mp4'))
-		{
-			showVideo = true;
-		}
-		/*
+  function handleInput(event) {
+    inputValue = event.target.value;
+    if (inputValue?.toLowerCase()?.includes(".mp4")) {
+      showVideo = true;
+    }
+    /*
 		if (useTitle) {
 			// Check if the input value is a valid URL
 			try {
@@ -90,10 +77,9 @@
 
 		$: value = useTitle === false ? $linkTitle : '';
 		*/
-		
-	}
+  }
 
-	/*
+  /*
 	async function getTitle(url) {
 		try {
 
@@ -115,129 +101,158 @@
 	}
 	*/
 
+  function handleDrop(e) {
+    e.preventDefault();
 
-function handleDrop(e) {
-	e.preventDefault()
+    let element_id = e.detail;
+  }
 
-	let element_id = e.detail
-
-}
-
-
-
-const handleCancel= () => {
-	inputValue = '';
-	showVideo = false;
-}
-
-let isHovering = false;
-
-
-$: {
-	if(inputValue)
-	{
-		errors = null;
-	}
-}
+  const handleCancel = () => {
+    inputValue = "";
+    showVideo = false;
+  };
 
+  let isHovering = false;
 
+  $: {
+    if (inputValue) {
+      errors = null;
+    }
+  }
 </script>
 
-
 <div class="form-control w-full max-w-2xl mb-2 {hidden ? 'hidden' : ''}">
-	<label for={id} class="label font-medium pb-1">
-		<span class="text-white label-text">{label}</span>
-	</label>
-	<div class="relative">
-		{#if type === 'file'}
-			<label for={id} class="flex flex-col items-center bg-[#313131] rounded-md cursor-pointer {inputValue.length === 0 ? 'p-10' : ''} {isHovering ? 'ring-2' : ''}"
-			on:dragenter={() => isHovering = true}
-			on:dragleave={() => isHovering = false}
-			on:drop={handleDrop}
-			>
+  <label for={id} class="label font-medium pb-1">
+    <span class="text-white label-text">{label}</span>
+  </label>
+  <div class="relative">
+    {#if type === "file"}
+      <label
+        for={id}
+        class="flex flex-col items-center bg-[#313131] rounded-md cursor-pointer {inputValue.length ===
+        0
+          ? 'p-10'
+          : ''} {isHovering ? 'ring-2' : ''}"
+        on:dragenter={() => (isHovering = true)}
+        on:dragleave={() => (isHovering = false)}
+        on:drop={handleDrop}
+      >
+        {#if inputValue.length !== 0}
+          <label
+            on:click={handleCancel}
+            class="btn btn-sm btn-circle bg-red-600 absolute right-0 -top-3 z-20"
+            >✕</label
+          >
 
-			
+          <div
+            class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"
+          ></div>
+          <img
+            class="w-auto max-h-[400px] object-fill bg-center bg-contain z-10 {showVideo
+              ? 'hidden'
+              : ''} "
+            alt="Image preview"
+            id="image-preview"
+            loading="lazy"
+          />
+        {:else}
+          {#if !isHovering}
+            <svg
+              class="w-10 h-10"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g><g id="SVGRepo_iconCarrier">
+                <path
+                  opacity="0.4"
+                  d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z"
+                  fill="white"
+                ></path>
+                <path
+                  d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z"
+                  fill="white"
+                ></path>
+              </g></svg
+            >
+            <span class="mt-2 mb-4 text-gray-200">Choose a file to upload</span>
+          {:else}
+            <svg
+              class="w-10 h-10"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="#9D64D9"
+                d="M6 20q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Zm5-4V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16h-2Z"
+              /></svg
+            >
+            <span class="mt-2 mb-4 text-gray-200">Drop here to upload</span>
+          {/if}
+          <span class="text-xs sm:text-sm text-gray-400 m-auto mb-5">
+            We support jpg/jpeg, png, webp and mp4.
+          </span>
+          <span class="text-xs sm:text-sm text-gray-400 m-auto mb-5">
+            File must be smaller than 5MB.
+          </span>
+          <label
+            for={id}
+            class="cursor-pointer rounded-md sm:hover:bg-gray-300 bg-[#fff] text-sm text-black font-semibold w-auto p-3"
+          >
+            Choose File
+          </label>
+        {/if}
+        <input
+          class="hidden rounded text-gray-300"
+          {type}
+          {placeholder}
+          {required}
+          {disabled}
+          {id}
+          name={id}
+          value={inputValue}
+          accept="image"
+          on:change={showPreview}
+          on:input={handleInput}
+          autocomplete="off"
+        />
 
-			{#if inputValue.length !== 0}
-			<label on:click={handleCancel} class="btn btn-sm btn-circle bg-red-600 absolute right-0 -top-3 z-20">✕</label>
-			
-			<div class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"></div>
-			<img class="w-auto max-h-[400px] object-fill bg-center bg-contain z-10 {showVideo ? 'hidden' : ''} "
-				alt="Image preview"
-				id="image-preview"
-				loading="lazy" />
-			{:else}
-			{#if !isHovering}
-				<svg class="w-10 h-10"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="white" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="white"></path> </g></svg>
-				<span class="mt-2 mb-4 text-gray-200">Choose a file to upload</span>
-			{:else}
-				<svg class="w-10 h-10"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9D64D9" d="M6 20q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Zm5-4V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16h-2Z"/></svg>
-				<span class="mt-2 mb-4 text-gray-200">Drop here to upload</span>
-			{/if}
-			<span class="text-xs sm:text-sm text-gray-400 m-auto mb-5 ">
-				We support jpg/jpeg, png, webp and mp4.
-			</span>
-			<span class="text-xs sm:text-sm text-gray-400 m-auto mb-5 ">
-				File must be smaller than 5MB.
-			</span>
-			<label for={id} class="cursor-pointer rounded-lg sm:hover:bg-purple-700 bg-purple-600 text-sm text-white font-bold w-auto p-3">
-				Choose File
-			</label>
-	
-			{/if}
-			<input class="hidden rounded text-gray-300"
-					{type}
-					{placeholder}
-					{required}
-					{disabled}
-					{id}
-					name={id}
-					value={inputValue}
-					accept="image"
-					on:change={showPreview}
-					on:input={handleInput}
-					autocomplete="off"
-					
-			/>
+        {#if showVideo}
+          <div
+            class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"
+          ></div>
+          <video controls class="w-auto max-h-[500px] z-10" src={videoInput}>
+          </video>
+        {/if}
+      </label>
+    {:else}
+      <input
+        class="input input-bordered w-full bg-[#313131] placeholder-gray-300 text-white whitespace-normal ring-2"
+        {type}
+        {placeholder}
+        {required}
+        {disabled}
+        {id}
+        name={id}
+        value={inputValue}
+        on:input={handleInput}
+        autocomplete="off"
+      />
+    {/if}
+    {#if showCounter}
+      <div class="flex justify-end mt-1 -mb-1">
+        <span class={`label-text text-xs ${counterColor}`}>{counter}</span>
+      </div>
+    {/if}
+  </div>
 
-			{#if showVideo}
-			<div class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"></div>
-			<video controls
-			class="w-auto max-h-[500px] z-10"
-			src={videoInput}
-			>
-			</video>
-			{/if}
-
-
-		</label>
-		{:else}
-			<input
-				class="input input-bordered w-full bg-[#313131] placeholder-gray-300 text-white whitespace-normal ring-2"
-				{type}
-				{placeholder}
-				{required}
-				{disabled}
-				{id}
-				name={id}
-				value={inputValue}
-				on:input={handleInput}
-				autocomplete="off"
-			/>
-		{/if}
-		{#if showCounter}
-			<div class="flex justify-end mt-1 -mb-1">
-				<span class={`label-text text-xs ${counterColor}`}>{counter}</span>
-			</div>
-		{/if}
-	</div>
-
-	{#if errors}
-		<label for={id} class="label py-0 pt-1">
-			<span class="label-text-alt text-error">
-				{errors}
-			</span>
-		</label>
-	{/if}
-	
-</div>
\ No newline at end of file
+  {#if errors}
+    <label for={id} class="label py-0 pt-1">
+      <span class="label-text-alt text-error">
+        {errors}
+      </span>
+    </label>
+  {/if}
+</div>
diff --git a/src/lib/components/LoginPopup.svelte b/src/lib/components/LoginPopup.svelte
index df7fdab3..c822f7a0 100644
--- a/src/lib/components/LoginPopup.svelte
+++ b/src/lib/components/LoginPopup.svelte
@@ -1,54 +1,59 @@
-<script lang='ts'>
-    import { enhance } from '$app/forms';
-    import toast from 'svelte-french-toast';
-    import Input from '$lib/components/Input.svelte';
-    import { screenWidth } from '$lib/store';
-    
-    export let form;
-    
-    let oauthLoading = false;
-    let isClicked = false;
-	let loading = false;
-    
-    const submitLogin = () => {
-        loading = true;
-            return async ({ result, update}) => {
-                switch (result.type) {
-                    case 'success':
-                        if (form?.notVerified)
-                        {
-                            toast.error('Please verify your email first', {
-                            style: 'border-radius: 200px; background: #333; color: #fff;'});
-                            await update();
-                            break;
-                        }
-                        else (form?.notVerified === false)
-                        {
-                            toast.success('Login successfully!', {
-                            style: 'border-radius: 200px; background: #333; color: #fff;'});
-                            await update();
-                            break;
-                        }
-                        case 'redirect':
-                        isClicked = true;
-                        toast.success('Login successfully!', {
-                            style: 'border-radius: 200px; background: #333; color: #fff;'});
-                        await update();
-                        break;
-                    case 'failure':
-                        toast.error('Invalid credentials', {
-                        style: 'border-radius: 200px; background: #333; color: #fff;'});
-                        await update();
-                        break;
-                    case 'error':
-                        toast.error(result.error.message, {
-                        style: 'border-radius: 200px; background: #333; color: #fff;'});
-                        break;
-                    default:
-                        await update();
-                }
-    
-                /*
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import toast from "svelte-french-toast";
+  import Input from "$lib/components/Input.svelte";
+  import { screenWidth } from "$lib/store";
+
+  export let form;
+
+  let oauthLoading = false;
+  let isClicked = false;
+  let loading = false;
+
+  const submitLogin = () => {
+    loading = true;
+    return async ({ result, update }) => {
+      switch (result.type) {
+        case "success":
+          if (form?.notVerified) {
+            toast.error("Please verify your email first", {
+              style: "border-radius: 200px; background: #333; color: #fff;",
+            });
+            await update();
+            break;
+          } else form?.notVerified === false;
+          {
+            toast.success("Login successfully!", {
+              style: "border-radius: 200px; background: #333; color: #fff;",
+            });
+            await update();
+            break;
+          }
+        case "redirect":
+          isClicked = true;
+          toast.success("Login successfully!", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "failure":
+          toast.error("Invalid credentials", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "error":
+          toast.error(result.error.message, {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          break;
+        default:
+          await update();
+      }
+
+      /*
           setTimeout(() => {
               if (result.type === 'redirect') {
                 const anchor = document.createElement('a');
@@ -59,42 +64,41 @@
               }
             }, 280);
             */
-           
-            loading = false;
 
-            }
-        }
-    
-    
-        const submitRegistration= () => {
-            loading = true;
-            return async ({ result, update}) => {
-                switch (result.type) {
-                    case 'success':
-                        isClicked = true;
-                        toast.success('Registration successfully!', {
-                         style: 'border-radius: 200px; background: #333; color: #fff;'});
-                        await update();
-                        break;
-                    case 'failure':
-                        toast.error('Invalid credentials', {
-                         style: 'border-radius: 200px; background: #333; color: #fff;'});
-                        await update();
-                        break;
-                    case 'error':
-                        toast.error(result.error.message, {
-                         style: 'border-radius: 200px; background: #333; color: #fff;'});
-                        break;
-                    default:
-                        await update();
-                }
-                loading = false;
-            }
-        }
-    
+      loading = false;
+    };
+  };
 
+  const submitRegistration = () => {
+    loading = true;
+    return async ({ result, update }) => {
+      switch (result.type) {
+        case "success":
+          isClicked = true;
+          toast.success("Registration successfully!", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "failure":
+          toast.error("Invalid credentials", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "error":
+          toast.error(result.error.message, {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          break;
+        default:
+          await update();
+      }
+      loading = false;
+    };
+  };
 
-/*
+  /*
 async function handleRegister(event) {
 
 event.preventDefault();
@@ -114,564 +118,2892 @@ const output = await response.json();
 }
 */
 
+  let displaySection = "login";
 
-let displaySection = 'login';
+  let isHoveredGoogle = false;
+  let isHoveredDiscord = false;
+  let isHoveredGithub = false;
 
-
-let isHoveredGoogle = false;
-let isHoveredDiscord = false;
-let isHoveredGithub = false;
-
-
-function handleHoverGoogle() {
+  function handleHoverGoogle() {
     isHoveredGoogle = !isHoveredGoogle;
-}
+  }
 
-function handleHoverDiscord() {
+  function handleHoverDiscord() {
     isHoveredDiscord = !isHoveredDiscord;
-}
+  }
 
-function handleHoverGithub() {
+  function handleHoverGithub() {
     isHoveredGithub = !isHoveredGithub;
-}
-	
-
-
+  }
 </script>
 
-    
-<svelte:options immutable={true} />
-
-
 {#if $screenWidth > 640}
-<!--Start Login Modal-->
+  <!--Start Login Modal-->
 
-<input type="checkbox" id="userLogin" class="modal-toggle" />
-    
-    <dialog id="userLogin" class="modal modal-bottom sm:modal-middle">
-    
-    
-        <label on:click={() => form= []} id="userLogin" for="userLogin"  class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05] "></label>
-        
-        
-        <div class="modal-box w-full bg-[#000] border border-gray-800 {$screenWidth < 640 ? 'min-h-screen' : ''}">
-      
-          
-    
-            {#if displaySection === 'login'}
-            <div class="grid grid-cols-1 animate-fade-in-once">
-                <div class="relative">
-                    <h2 class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold">
-                        Sign In
-                    </h2>
-                </div>
+  <input type="checkbox" id="userLogin" class="modal-toggle" />
 
-                <span class="text-gray-400 text-center pb-4">
-					Welcome back!
-				</span>	
-    
-            
-    
-                <div class="relative">
-    
-    
-                    <form action="?/login" method="POST" use:enhance={submitLogin} class="flex flex-col items-center space-y-2 w-full md:w-5/6 md:ml-auto md:mr-auto">
-                        <Input
-                            type="email"
-                            id="email"
-                            label="Email"
-                            value={form?.data?.email ?? ''}
-                            errors={form?.errors?.email}
-                        />
-                        <Input
-                            type="password"
-                            id="password" 
-                            label="Password" 
-                            errors={form?.errors?.password} 
-                        />
-                        <div class="text-start w-full max-w-lg">
-                            <a href="/reset-password" class="text-start text-sm font-semibold text-[#FB6A67] hover:cursor-pointer hover:underline">Forgot Password?</a>
-                        </div>
-                        <div class="w-full max-w-lg pt-5 m-auto pb-5">
-                            {#if !loading && !isClicked}
-								<button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-									<span class="text-white">Login</span>
-								</button>
-							{:else}
-								<label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-									<div class="flex flex-row m-auto items-center">
-										<span class="loading loading-infinity"></span>
-										<span class="text-white ml-1.5">Signing Up</span>
-									</div>
-								</label>
-							{/if}
-                        </div>
+  <dialog id="userLogin" class="modal modal-bottom sm:modal-middle">
+    <label
+      on:click={() => (form = [])}
+      id="userLogin"
+      for="userLogin"
+      class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05]"
+    ></label>
 
-                        <div class="divider divider-[#fff] pt-10 pb-10">
-                            <span class="text-white text-[1rem] z-10">Or login using</span>
-                        </div>
+    <div
+      class="modal-box w-full bg-[#000] border border-gray-800 {$screenWidth <
+      640
+        ? 'min-h-screen'
+        : ''}"
+    >
+      {#if displaySection === "login"}
+        <div class="grid grid-cols-1 animate-fade-in-once">
+          <div class="relative">
+            <h2
+              class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold"
+            >
+              Sign In
+            </h2>
+          </div>
 
-                        <div class="flex flex-row items-center gap-x-5 pb-6">
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='google'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverGoogle}
-									on:mouseleave={handleHoverGoogle}	
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block" viewBox="-3 0 262 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451" fill="#4285F4"> </path> <path d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"> </path> <path d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"> </path> <path d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479" fill="#EB4335"> </path> </g> </g></svg>
-								</button>
-							</form>
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='discord'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverDiscord}
-									on:mouseleave={handleHoverDiscord}
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredDiscord ? 'shake-logo' : ''}  w-7 h-7 inline-block" viewBox="0 0 100 100" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#F5BB41;} .st2{fill:#2167D1;} .st3{fill:#3D84F3;} .st4{fill:#4CA853;} .st5{fill:#398039;} .st6{fill:#D74F3F;} .st7{fill:#D43C89;} .st8{fill:#B2005F;} .st9{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st10{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st11{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#040404;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill-rule:evenodd;clip-rule:evenodd;} .st13{fill-rule:evenodd;clip-rule:evenodd;fill:#040404;} .st14{fill:url(#SVGID_1_);} .st15{fill:url(#SVGID_2_);} .st16{fill:url(#SVGID_3_);} .st17{fill:url(#SVGID_4_);} .st18{fill:url(#SVGID_5_);} .st19{fill:url(#SVGID_6_);} .st20{fill:url(#SVGID_7_);} .st21{fill:url(#SVGID_8_);} .st22{fill:url(#SVGID_9_);} .st23{fill:url(#SVGID_10_);} .st24{fill:url(#SVGID_11_);} .st25{fill:url(#SVGID_12_);} .st26{fill:url(#SVGID_13_);} .st27{fill:url(#SVGID_14_);} .st28{fill:url(#SVGID_15_);} .st29{fill:url(#SVGID_16_);} .st30{fill:url(#SVGID_17_);} .st31{fill:url(#SVGID_18_);} .st32{fill:url(#SVGID_19_);} .st33{fill:url(#SVGID_20_);} .st34{fill:url(#SVGID_21_);} .st35{fill:url(#SVGID_22_);} .st36{fill:url(#SVGID_23_);} .st37{fill:url(#SVGID_24_);} .st38{fill:url(#SVGID_25_);} .st39{fill:url(#SVGID_26_);} .st40{fill:url(#SVGID_27_);} .st41{fill:url(#SVGID_28_);} .st42{fill:url(#SVGID_29_);} .st43{fill:url(#SVGID_30_);} .st44{fill:url(#SVGID_31_);} .st45{fill:url(#SVGID_32_);} .st46{fill:url(#SVGID_33_);} .st47{fill:url(#SVGID_34_);} .st48{fill:url(#SVGID_35_);} .st49{fill:url(#SVGID_36_);} .st50{fill:url(#SVGID_37_);} .st51{fill:url(#SVGID_38_);} .st52{fill:url(#SVGID_39_);} .st53{fill:url(#SVGID_40_);} .st54{fill:url(#SVGID_41_);} .st55{fill:url(#SVGID_42_);} .st56{fill:url(#SVGID_43_);} .st57{fill:url(#SVGID_44_);} .st58{fill:url(#SVGID_45_);} .st59{fill:#040404;} .st60{fill:url(#SVGID_46_);} .st61{fill:url(#SVGID_47_);} .st62{fill:url(#SVGID_48_);} .st63{fill:url(#SVGID_49_);} .st64{fill:url(#SVGID_50_);} .st65{fill:url(#SVGID_51_);} .st66{fill:url(#SVGID_52_);} .st67{fill:url(#SVGID_53_);} .st68{fill:url(#SVGID_54_);} .st69{fill:url(#SVGID_55_);} .st70{fill:url(#SVGID_56_);} .st71{fill:url(#SVGID_57_);} .st72{fill:url(#SVGID_58_);} .st73{fill:url(#SVGID_59_);} .st74{fill:url(#SVGID_60_);} .st75{fill:url(#SVGID_61_);} .st76{fill:url(#SVGID_62_);} .st77{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;} .st78{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;} .st79{fill:#4BC9FF;} .st80{fill:#5500DD;} .st81{fill:#FF3A00;} .st82{fill:#E6162D;} .st83{fill:#F1F1F1;} .st84{fill:#FF9933;} .st85{fill:#B92B27;} .st86{fill:#00ACED;} .st87{fill:#BD2125;} .st88{fill:#1877F2;} .st89{fill:#fff;} .st90{fill:#CE3056;} .st91{fill:#5BB381;} .st92{fill:#61C3EC;} .st93{fill:#E4B34B;} .st94{fill:#181EF2;} .st95{fill:#FF0000;} .st96{fill:#FE466C;} .st97{fill:#FA4778;} .st98{fill:#FF7700;} .st99{fill-rule:evenodd;clip-rule:evenodd;fill:#1F6BF6;} .st100{fill:#520094;} .st101{fill:#4477E8;} .st102{fill:#3D1D1C;} .st103{fill:#FFE812;} .st104{fill:#344356;} .st105{fill:#00CC76;} .st106{fill-rule:evenodd;clip-rule:evenodd;fill:#345E90;} .st107{fill:#1F65D8;} .st108{fill:#EB3587;} .st109{fill-rule:evenodd;clip-rule:evenodd;fill:#603A88;} .st110{fill:#E3CE99;} .st111{fill:#783AF9;} .st112{fill:#FF515E;} .st113{fill:#FF4906;} .st114{fill:#503227;} .st115{fill:#4C7BD9;} .st116{fill:#69C9D0;} .st117{fill:#1B92D1;} .st118{fill:#EB4F4A;} .st119{fill:#513728;} .st120{fill:#FF6600;} .st121{fill-rule:evenodd;clip-rule:evenodd;fill:#B61438;} .st122{fill:#FFFC00;} .st123{fill:#141414;} .st124{fill:#94D137;} .st125{fill-rule:evenodd;clip-rule:evenodd;fill:#F1F1F1;} .st126{fill-rule:evenodd;clip-rule:evenodd;fill:#66E066;} .st127{fill:#2D8CFF;} .st128{fill:#F1A300;} .st129{fill:#4BA2F2;} .st130{fill:#1A5099;} .st131{fill:#EE6060;} .st132{fill-rule:evenodd;clip-rule:evenodd;fill:#F48120;} .st133{fill:#222222;} .st134{fill:url(#SVGID_63_);} .st135{fill:#0077B5;} .st136{fill:#FFCC00;} .st137{fill:#EB3352;} .st138{fill:#F9D265;} .st139{fill:#F5B955;} .st140{fill:#DD2A7B;} .st141{fill:#66E066;} .st142{fill:#EB4E00;} .st143{fill:#FFC794;} .st144{fill:#B5332A;} .st145{fill:#4E85EB;} .st146{fill:#58A45C;} .st147{fill:#F2BC42;} .st148{fill:#D85040;} .st149{fill:#464EB8;} .st150{fill:#7B83EB;} </style> <g id="Layer_1"></g> <g id="Layer_2"> <g> <g> <path class="st89" d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"></path> </g> </g> </g> </g></svg>
-								</button>
-							</form>
+          <span class="text-gray-400 text-center pb-4"> Welcome back! </span>
 
-                            <form method="post" action="?/oauth2">
-							<input class="hidden" name='provider' value='github'/>
-							<button
-								on:click={() => oauthLoading = !oauthLoading}
-								on:mouseenter={handleHoverGithub}
-								on:mouseleave={handleHoverGithub}
-								class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-								<svg class="{isHoveredGithub ? 'shake-logo' : ''}  w-7 h-7 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
-							</button>
-						    </form>
-
-						</div>
-    
-                        <p class="pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center">You don't have an account?
-                            <label on:click={() => displaySection='register'} class="text-blue-400 hover:underline  ml-1 cursor-pointer">Sign up</label>
-                        </p>
-                    </form>
-    
-                    
-                </div>
-      
-              
-            </div>
-    
-            {:else if displaySection === 'register'}
-    
-    
-    
-                <div class="grid grid-cols-1 gap-4text-white animate-fade-in-once ">
-                    <div class="relative">
-                        <h2 class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold">
-                           Getting Started
-                        </h2>
-    
+          <div class="relative">
+            <form
+              action="?/login"
+              method="POST"
+              use:enhance={submitLogin}
+              class="flex flex-col items-center space-y-2 w-full md:w-5/6 md:ml-auto md:mr-auto"
+            >
+              <Input
+                type="email"
+                id="email"
+                label="Email"
+                value={form?.data?.email ?? ""}
+                errors={form?.errors?.email}
+              />
+              <Input
+                type="password"
+                id="password"
+                label="Password"
+                errors={form?.errors?.password}
+              />
+              <div class="text-start w-full max-w-lg">
+                <a
+                  href="/reset-password"
+                  class="text-start text-sm font-semibold text-[#FB6A67] hover:cursor-pointer hover:underline"
+                  >Forgot Password?</a
+                >
+              </div>
+              <div class="w-full max-w-lg pt-5 m-auto pb-5">
+                {#if !loading && !isClicked}
+                  <button
+                    type="submit"
+                    class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
+                  >
+                    <span>Login</span>
+                  </button>
+                {:else}
+                  <label
+                    class="cursor-not-allowed btn bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
+                  >
+                    <div class="flex flex-row m-auto items-center">
+                      <span class="loading loading-infinity"></span>
+                      <span class="text-white ml-1.5">Signing Up</span>
                     </div>
+                  </label>
+                {/if}
+              </div>
 
-                    <span class="text-gray-400 text-center pb-4">
-                        Create an account to get started
-                    </span>	
-        
-    
+              <div class="divider divider-[#fff] pt-10 pb-10">
+                <span class="text-white text-[1rem] z-10">Or login using</span>
+              </div>
 
-                    <div class="relative">
-                    <form method="POST" action="?/register" use:enhance={submitRegistration} class="flex flex-col items-center space-y-2 w-full md:w-5/6 pt-4 md:ml-auto md:mr-auto">
-                        <!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
-                        <Input
-                            id="username"
-                            label="Username"
-                            value={form?.data?.username}
-                            errors={form?.errors?.username}
-                            disabled={loading} 
-                        />
-                        <Input
-                            type="email"
-                            id="email"
-                            label="Email"
-                            value={form?.data?.email}
-                            errors={form?.errors?.email}
-                            disabled={loading} 
-                        />
-                        
-                        <Input 
-                            type="password" 
-                            id="password" 
-                            label="Password" 
-                            errors={form?.errors?.password} 
-                            disabled={loading} 
-                        />
-                        
-                    
-    
-                        <Input
-                            type="password"
-                            id="passwordConfirm"
-                            label="Confirm Password"
-                            errors={form?.errors?.passwordConfirm}
-                            disabled={loading} 
-                        />
-    
-                        <div class="w-full max-w-lg pt-5 m-auto pb-3">
-                            {#if !loading && !isClicked}
-                                <button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-                                    <span class="text-white">Register</span>
-                                </button>
-                            {:else}
-                                <label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-                                    <div class="flex flex-row m-auto items-center">
-                                        <span class="loading loading-infinity"></span>
-                                        <span class="text-white ml-1.5">Signing Up</span>
-                                    </div>
-                                </label>
-                            {/if}
-                        </div>
+              <div class="flex flex-row items-center gap-x-5 pb-6">
+                <form method="post" action="?/oauth2">
+                  <input class="hidden" name="provider" value="google" />
+                  <button
+                    on:click={() => (oauthLoading = !oauthLoading)}
+                    on:mouseenter={handleHoverGoogle}
+                    on:mouseleave={handleHoverGoogle}
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                  >
+                    <svg
+                      class="{isHoveredGoogle
+                        ? 'shake-logo'
+                        : ''} w-6 h-6 inline-block"
+                      viewBox="-3 0 262 262"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      preserveAspectRatio="xMidYMid"
+                      fill="#000000"
+                      ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                        id="SVGRepo_tracerCarrier"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ></g><g id="SVGRepo_iconCarrier">
+                        <g>
+                          <path
+                            d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
+                            fill="#4285F4"
+                          >
+                          </path>
+                          <path
+                            d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
+                            fill="#34A853"
+                          >
+                          </path>
+                          <path
+                            d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
+                            fill="#FBBC05"
+                          >
+                          </path>
+                          <path
+                            d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
+                            fill="#EB4335"
+                          >
+                          </path>
+                        </g>
+                      </g></svg
+                    >
+                  </button>
+                </form>
+                <form method="post" action="?/oauth2">
+                  <input class="hidden" name="provider" value="discord" />
+                  <button
+                    on:click={() => (oauthLoading = !oauthLoading)}
+                    on:mouseenter={handleHoverDiscord}
+                    on:mouseleave={handleHoverDiscord}
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                  >
+                    <svg
+                      class="{isHoveredDiscord
+                        ? 'shake-logo'
+                        : ''}  w-7 h-7 inline-block"
+                      viewBox="0 0 100 100"
+                      version="1.1"
+                      xml:space="preserve"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      fill="#000000"
+                      ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                        id="SVGRepo_tracerCarrier"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ></g><g id="SVGRepo_iconCarrier">
+                        <style type="text/css">
+                          .st0 {
+                            fill: #ffffff;
+                          }
+                          .st1 {
+                            fill: #f5bb41;
+                          }
+                          .st2 {
+                            fill: #2167d1;
+                          }
+                          .st3 {
+                            fill: #3d84f3;
+                          }
+                          .st4 {
+                            fill: #4ca853;
+                          }
+                          .st5 {
+                            fill: #398039;
+                          }
+                          .st6 {
+                            fill: #d74f3f;
+                          }
+                          .st7 {
+                            fill: #d43c89;
+                          }
+                          .st8 {
+                            fill: #b2005f;
+                          }
+                          .st9 {
+                            fill: none;
+                            stroke: #000000;
+                            stroke-width: 3;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                          }
+                          .st10 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: none;
+                            stroke: #000000;
+                            stroke-width: 3;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                          }
+                          .st11 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: none;
+                            stroke: #040404;
+                            stroke-width: 3;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                          }
+                          .st12 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                          }
+                          .st13 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #040404;
+                          }
+                          .st14 {
+                            fill: url(#SVGID_1_);
+                          }
+                          .st15 {
+                            fill: url(#SVGID_2_);
+                          }
+                          .st16 {
+                            fill: url(#SVGID_3_);
+                          }
+                          .st17 {
+                            fill: url(#SVGID_4_);
+                          }
+                          .st18 {
+                            fill: url(#SVGID_5_);
+                          }
+                          .st19 {
+                            fill: url(#SVGID_6_);
+                          }
+                          .st20 {
+                            fill: url(#SVGID_7_);
+                          }
+                          .st21 {
+                            fill: url(#SVGID_8_);
+                          }
+                          .st22 {
+                            fill: url(#SVGID_9_);
+                          }
+                          .st23 {
+                            fill: url(#SVGID_10_);
+                          }
+                          .st24 {
+                            fill: url(#SVGID_11_);
+                          }
+                          .st25 {
+                            fill: url(#SVGID_12_);
+                          }
+                          .st26 {
+                            fill: url(#SVGID_13_);
+                          }
+                          .st27 {
+                            fill: url(#SVGID_14_);
+                          }
+                          .st28 {
+                            fill: url(#SVGID_15_);
+                          }
+                          .st29 {
+                            fill: url(#SVGID_16_);
+                          }
+                          .st30 {
+                            fill: url(#SVGID_17_);
+                          }
+                          .st31 {
+                            fill: url(#SVGID_18_);
+                          }
+                          .st32 {
+                            fill: url(#SVGID_19_);
+                          }
+                          .st33 {
+                            fill: url(#SVGID_20_);
+                          }
+                          .st34 {
+                            fill: url(#SVGID_21_);
+                          }
+                          .st35 {
+                            fill: url(#SVGID_22_);
+                          }
+                          .st36 {
+                            fill: url(#SVGID_23_);
+                          }
+                          .st37 {
+                            fill: url(#SVGID_24_);
+                          }
+                          .st38 {
+                            fill: url(#SVGID_25_);
+                          }
+                          .st39 {
+                            fill: url(#SVGID_26_);
+                          }
+                          .st40 {
+                            fill: url(#SVGID_27_);
+                          }
+                          .st41 {
+                            fill: url(#SVGID_28_);
+                          }
+                          .st42 {
+                            fill: url(#SVGID_29_);
+                          }
+                          .st43 {
+                            fill: url(#SVGID_30_);
+                          }
+                          .st44 {
+                            fill: url(#SVGID_31_);
+                          }
+                          .st45 {
+                            fill: url(#SVGID_32_);
+                          }
+                          .st46 {
+                            fill: url(#SVGID_33_);
+                          }
+                          .st47 {
+                            fill: url(#SVGID_34_);
+                          }
+                          .st48 {
+                            fill: url(#SVGID_35_);
+                          }
+                          .st49 {
+                            fill: url(#SVGID_36_);
+                          }
+                          .st50 {
+                            fill: url(#SVGID_37_);
+                          }
+                          .st51 {
+                            fill: url(#SVGID_38_);
+                          }
+                          .st52 {
+                            fill: url(#SVGID_39_);
+                          }
+                          .st53 {
+                            fill: url(#SVGID_40_);
+                          }
+                          .st54 {
+                            fill: url(#SVGID_41_);
+                          }
+                          .st55 {
+                            fill: url(#SVGID_42_);
+                          }
+                          .st56 {
+                            fill: url(#SVGID_43_);
+                          }
+                          .st57 {
+                            fill: url(#SVGID_44_);
+                          }
+                          .st58 {
+                            fill: url(#SVGID_45_);
+                          }
+                          .st59 {
+                            fill: #040404;
+                          }
+                          .st60 {
+                            fill: url(#SVGID_46_);
+                          }
+                          .st61 {
+                            fill: url(#SVGID_47_);
+                          }
+                          .st62 {
+                            fill: url(#SVGID_48_);
+                          }
+                          .st63 {
+                            fill: url(#SVGID_49_);
+                          }
+                          .st64 {
+                            fill: url(#SVGID_50_);
+                          }
+                          .st65 {
+                            fill: url(#SVGID_51_);
+                          }
+                          .st66 {
+                            fill: url(#SVGID_52_);
+                          }
+                          .st67 {
+                            fill: url(#SVGID_53_);
+                          }
+                          .st68 {
+                            fill: url(#SVGID_54_);
+                          }
+                          .st69 {
+                            fill: url(#SVGID_55_);
+                          }
+                          .st70 {
+                            fill: url(#SVGID_56_);
+                          }
+                          .st71 {
+                            fill: url(#SVGID_57_);
+                          }
+                          .st72 {
+                            fill: url(#SVGID_58_);
+                          }
+                          .st73 {
+                            fill: url(#SVGID_59_);
+                          }
+                          .st74 {
+                            fill: url(#SVGID_60_);
+                          }
+                          .st75 {
+                            fill: url(#SVGID_61_);
+                          }
+                          .st76 {
+                            fill: url(#SVGID_62_);
+                          }
+                          .st77 {
+                            fill: none;
+                            stroke: #000000;
+                            stroke-width: 3;
+                            stroke-miterlimit: 10;
+                          }
+                          .st78 {
+                            fill: none;
+                            stroke: #ffffff;
+                            stroke-miterlimit: 10;
+                          }
+                          .st79 {
+                            fill: #4bc9ff;
+                          }
+                          .st80 {
+                            fill: #5500dd;
+                          }
+                          .st81 {
+                            fill: #ff3a00;
+                          }
+                          .st82 {
+                            fill: #e6162d;
+                          }
+                          .st83 {
+                            fill: #f1f1f1;
+                          }
+                          .st84 {
+                            fill: #ff9933;
+                          }
+                          .st85 {
+                            fill: #b92b27;
+                          }
+                          .st86 {
+                            fill: #00aced;
+                          }
+                          .st87 {
+                            fill: #bd2125;
+                          }
+                          .st88 {
+                            fill: #1877f2;
+                          }
+                          .st89 {
+                            fill: #fff;
+                          }
+                          .st90 {
+                            fill: #ce3056;
+                          }
+                          .st91 {
+                            fill: #5bb381;
+                          }
+                          .st92 {
+                            fill: #61c3ec;
+                          }
+                          .st93 {
+                            fill: #e4b34b;
+                          }
+                          .st94 {
+                            fill: #181ef2;
+                          }
+                          .st95 {
+                            fill: #ff0000;
+                          }
+                          .st96 {
+                            fill: #fe466c;
+                          }
+                          .st97 {
+                            fill: #fa4778;
+                          }
+                          .st98 {
+                            fill: #ff7700;
+                          }
+                          .st99 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #1f6bf6;
+                          }
+                          .st100 {
+                            fill: #520094;
+                          }
+                          .st101 {
+                            fill: #4477e8;
+                          }
+                          .st102 {
+                            fill: #3d1d1c;
+                          }
+                          .st103 {
+                            fill: #ffe812;
+                          }
+                          .st104 {
+                            fill: #344356;
+                          }
+                          .st105 {
+                            fill: #00cc76;
+                          }
+                          .st106 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #345e90;
+                          }
+                          .st107 {
+                            fill: #1f65d8;
+                          }
+                          .st108 {
+                            fill: #eb3587;
+                          }
+                          .st109 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #603a88;
+                          }
+                          .st110 {
+                            fill: #e3ce99;
+                          }
+                          .st111 {
+                            fill: #783af9;
+                          }
+                          .st112 {
+                            fill: #ff515e;
+                          }
+                          .st113 {
+                            fill: #ff4906;
+                          }
+                          .st114 {
+                            fill: #503227;
+                          }
+                          .st115 {
+                            fill: #4c7bd9;
+                          }
+                          .st116 {
+                            fill: #69c9d0;
+                          }
+                          .st117 {
+                            fill: #1b92d1;
+                          }
+                          .st118 {
+                            fill: #eb4f4a;
+                          }
+                          .st119 {
+                            fill: #513728;
+                          }
+                          .st120 {
+                            fill: #ff6600;
+                          }
+                          .st121 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #b61438;
+                          }
+                          .st122 {
+                            fill: #fffc00;
+                          }
+                          .st123 {
+                            fill: #141414;
+                          }
+                          .st124 {
+                            fill: #94d137;
+                          }
+                          .st125 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #f1f1f1;
+                          }
+                          .st126 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #66e066;
+                          }
+                          .st127 {
+                            fill: #2d8cff;
+                          }
+                          .st128 {
+                            fill: #f1a300;
+                          }
+                          .st129 {
+                            fill: #4ba2f2;
+                          }
+                          .st130 {
+                            fill: #1a5099;
+                          }
+                          .st131 {
+                            fill: #ee6060;
+                          }
+                          .st132 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #f48120;
+                          }
+                          .st133 {
+                            fill: #222222;
+                          }
+                          .st134 {
+                            fill: url(#SVGID_63_);
+                          }
+                          .st135 {
+                            fill: #0077b5;
+                          }
+                          .st136 {
+                            fill: #ffcc00;
+                          }
+                          .st137 {
+                            fill: #eb3352;
+                          }
+                          .st138 {
+                            fill: #f9d265;
+                          }
+                          .st139 {
+                            fill: #f5b955;
+                          }
+                          .st140 {
+                            fill: #dd2a7b;
+                          }
+                          .st141 {
+                            fill: #66e066;
+                          }
+                          .st142 {
+                            fill: #eb4e00;
+                          }
+                          .st143 {
+                            fill: #ffc794;
+                          }
+                          .st144 {
+                            fill: #b5332a;
+                          }
+                          .st145 {
+                            fill: #4e85eb;
+                          }
+                          .st146 {
+                            fill: #58a45c;
+                          }
+                          .st147 {
+                            fill: #f2bc42;
+                          }
+                          .st148 {
+                            fill: #d85040;
+                          }
+                          .st149 {
+                            fill: #464eb8;
+                          }
+                          .st150 {
+                            fill: #7b83eb;
+                          }
+                        </style> <g id="Layer_1"></g>
+                        <g id="Layer_2">
+                          <g>
+                            <g>
+                              <path
+                                class="st89"
+                                d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
+                              ></path>
+                            </g>
+                          </g>
+                        </g>
+                      </g></svg
+                    >
+                  </button>
+                </form>
 
-                        <div class="divider divider-[#fff] pt-10 pb-10">
-                            <span class="text-white text-[1rem] z-10">Or register using</span>
-                        </div>
+                <form method="post" action="?/oauth2">
+                  <input class="hidden" name="provider" value="github" />
+                  <button
+                    on:click={() => (oauthLoading = !oauthLoading)}
+                    on:mouseenter={handleHoverGithub}
+                    on:mouseleave={handleHoverGithub}
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                  >
+                    <svg
+                      class="{isHoveredGithub
+                        ? 'shake-logo'
+                        : ''}  w-7 h-7 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><path
+                        fill="white"
+                        d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+                      /></svg
+                    >
+                  </button>
+                </form>
+              </div>
 
-                        <div class="flex flex-row items-center gap-x-5 pb-6">
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='google'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverGoogle}
-									on:mouseleave={handleHoverGoogle}	
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block" viewBox="-3 0 262 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451" fill="#4285F4"> </path> <path d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"> </path> <path d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"> </path> <path d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479" fill="#EB4335"> </path> </g> </g></svg>
-								</button>
-							</form>
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='discord'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverDiscord}
-									on:mouseleave={handleHoverDiscord}
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredDiscord ? 'shake-logo' : ''}  w-7 h-7 inline-block" viewBox="0 0 100 100" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#F5BB41;} .st2{fill:#2167D1;} .st3{fill:#3D84F3;} .st4{fill:#4CA853;} .st5{fill:#398039;} .st6{fill:#D74F3F;} .st7{fill:#D43C89;} .st8{fill:#B2005F;} .st9{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st10{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st11{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#040404;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill-rule:evenodd;clip-rule:evenodd;} .st13{fill-rule:evenodd;clip-rule:evenodd;fill:#040404;} .st14{fill:url(#SVGID_1_);} .st15{fill:url(#SVGID_2_);} .st16{fill:url(#SVGID_3_);} .st17{fill:url(#SVGID_4_);} .st18{fill:url(#SVGID_5_);} .st19{fill:url(#SVGID_6_);} .st20{fill:url(#SVGID_7_);} .st21{fill:url(#SVGID_8_);} .st22{fill:url(#SVGID_9_);} .st23{fill:url(#SVGID_10_);} .st24{fill:url(#SVGID_11_);} .st25{fill:url(#SVGID_12_);} .st26{fill:url(#SVGID_13_);} .st27{fill:url(#SVGID_14_);} .st28{fill:url(#SVGID_15_);} .st29{fill:url(#SVGID_16_);} .st30{fill:url(#SVGID_17_);} .st31{fill:url(#SVGID_18_);} .st32{fill:url(#SVGID_19_);} .st33{fill:url(#SVGID_20_);} .st34{fill:url(#SVGID_21_);} .st35{fill:url(#SVGID_22_);} .st36{fill:url(#SVGID_23_);} .st37{fill:url(#SVGID_24_);} .st38{fill:url(#SVGID_25_);} .st39{fill:url(#SVGID_26_);} .st40{fill:url(#SVGID_27_);} .st41{fill:url(#SVGID_28_);} .st42{fill:url(#SVGID_29_);} .st43{fill:url(#SVGID_30_);} .st44{fill:url(#SVGID_31_);} .st45{fill:url(#SVGID_32_);} .st46{fill:url(#SVGID_33_);} .st47{fill:url(#SVGID_34_);} .st48{fill:url(#SVGID_35_);} .st49{fill:url(#SVGID_36_);} .st50{fill:url(#SVGID_37_);} .st51{fill:url(#SVGID_38_);} .st52{fill:url(#SVGID_39_);} .st53{fill:url(#SVGID_40_);} .st54{fill:url(#SVGID_41_);} .st55{fill:url(#SVGID_42_);} .st56{fill:url(#SVGID_43_);} .st57{fill:url(#SVGID_44_);} .st58{fill:url(#SVGID_45_);} .st59{fill:#040404;} .st60{fill:url(#SVGID_46_);} .st61{fill:url(#SVGID_47_);} .st62{fill:url(#SVGID_48_);} .st63{fill:url(#SVGID_49_);} .st64{fill:url(#SVGID_50_);} .st65{fill:url(#SVGID_51_);} .st66{fill:url(#SVGID_52_);} .st67{fill:url(#SVGID_53_);} .st68{fill:url(#SVGID_54_);} .st69{fill:url(#SVGID_55_);} .st70{fill:url(#SVGID_56_);} .st71{fill:url(#SVGID_57_);} .st72{fill:url(#SVGID_58_);} .st73{fill:url(#SVGID_59_);} .st74{fill:url(#SVGID_60_);} .st75{fill:url(#SVGID_61_);} .st76{fill:url(#SVGID_62_);} .st77{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;} .st78{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;} .st79{fill:#4BC9FF;} .st80{fill:#5500DD;} .st81{fill:#FF3A00;} .st82{fill:#E6162D;} .st83{fill:#F1F1F1;} .st84{fill:#FF9933;} .st85{fill:#B92B27;} .st86{fill:#00ACED;} .st87{fill:#BD2125;} .st88{fill:#1877F2;} .st89{fill:#fff;} .st90{fill:#CE3056;} .st91{fill:#5BB381;} .st92{fill:#61C3EC;} .st93{fill:#E4B34B;} .st94{fill:#181EF2;} .st95{fill:#FF0000;} .st96{fill:#FE466C;} .st97{fill:#FA4778;} .st98{fill:#FF7700;} .st99{fill-rule:evenodd;clip-rule:evenodd;fill:#1F6BF6;} .st100{fill:#520094;} .st101{fill:#4477E8;} .st102{fill:#3D1D1C;} .st103{fill:#FFE812;} .st104{fill:#344356;} .st105{fill:#00CC76;} .st106{fill-rule:evenodd;clip-rule:evenodd;fill:#345E90;} .st107{fill:#1F65D8;} .st108{fill:#EB3587;} .st109{fill-rule:evenodd;clip-rule:evenodd;fill:#603A88;} .st110{fill:#E3CE99;} .st111{fill:#783AF9;} .st112{fill:#FF515E;} .st113{fill:#FF4906;} .st114{fill:#503227;} .st115{fill:#4C7BD9;} .st116{fill:#69C9D0;} .st117{fill:#1B92D1;} .st118{fill:#EB4F4A;} .st119{fill:#513728;} .st120{fill:#FF6600;} .st121{fill-rule:evenodd;clip-rule:evenodd;fill:#B61438;} .st122{fill:#FFFC00;} .st123{fill:#141414;} .st124{fill:#94D137;} .st125{fill-rule:evenodd;clip-rule:evenodd;fill:#F1F1F1;} .st126{fill-rule:evenodd;clip-rule:evenodd;fill:#66E066;} .st127{fill:#2D8CFF;} .st128{fill:#F1A300;} .st129{fill:#4BA2F2;} .st130{fill:#1A5099;} .st131{fill:#EE6060;} .st132{fill-rule:evenodd;clip-rule:evenodd;fill:#F48120;} .st133{fill:#222222;} .st134{fill:url(#SVGID_63_);} .st135{fill:#0077B5;} .st136{fill:#FFCC00;} .st137{fill:#EB3352;} .st138{fill:#F9D265;} .st139{fill:#F5B955;} .st140{fill:#DD2A7B;} .st141{fill:#66E066;} .st142{fill:#EB4E00;} .st143{fill:#FFC794;} .st144{fill:#B5332A;} .st145{fill:#4E85EB;} .st146{fill:#58A45C;} .st147{fill:#F2BC42;} .st148{fill:#D85040;} .st149{fill:#464EB8;} .st150{fill:#7B83EB;} </style> <g id="Layer_1"></g> <g id="Layer_2"> <g> <g> <path class="st89" d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"></path> </g> </g> </g> </g></svg>
-								</button>
-							</form>
-
-                            <form method="post" action="?/oauth2">
-							<input class="hidden" name='provider' value='github'/>
-							<button
-								on:click={() => oauthLoading = !oauthLoading}
-								on:mouseenter={handleHoverGithub}
-								on:mouseleave={handleHoverGithub}
-								class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-								<svg class="{isHoveredGithub ? 'shake-logo' : ''}  w-7 h-7 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
-							</button>
-						    </form>
-
-						</div>
-
-                        <p class="pb-1 text-xs text-gray-300 text-center">By registering you agree to stocknear's
-                            <a href="/terms-of-use" class="text-blue-400 hover:underline ">Terms of Use</a>
-                            and acknowledge that you've read our <a href="/privacy-policy" class="text-blue-400 hover:underline ">Privacy Policy</a>.
-                        </p>
-    
-                        <p class="pt-3 pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center">You already have an account?
-                            <label on:click={() => displaySection = 'login'} class="text-blue-400 hover:underline  ml-1 cursor-pointer">Sign in</label>
-                        </p>
-                    </form>
-                </div>
-                </div>
-    
-
-            {/if}
-    
-    
-    {#if oauthLoading}
-	<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
-		<div class="relative">
-			<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-				<span class="loading loading-spinner loading-md text-gray-400"></span>
-			</label>
-		</div>  
-	</div>
-	{/if}
-
-    </dialog>
-<!--End Login Modal-->
-    
-
-{:else}
-<!--Start Drawer Sidewise for mobile-->
-
-
-<div class="drawer drawer-end overflow-hidden" style="z-index: 9999;">
-    <input id="userLogin" type="checkbox" class="drawer-toggle"/>
-    
-    <div class="drawer-side">
-    
-        
-        <div class="modal-box rounded-xl bg-[#000] min-h-screen w-screen pb-20 overflow-y-auto">
-
-            <label on:click={() => form = []} for="userLogin" class="absolute left-6 top-4">
-                <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-                <span class="text-white text-md font-medium">
-                    Return
-                </span>
-            </label>
-
-            {#if displaySection === 'login'}
-            <div class="grid grid-cols-1 animate-fade-in-once mt-6">
-                <div class="relative">
-                    <h2 class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold">
-                        Sign In
-                    </h2>
-                </div>
-
-                <span class="text-gray-400 text-center pb-4">
-					Welcome back!
-				</span>	
-
-    
-                <div class="divider divider-[#fff]">
-                    <span class="text-white text-xl font-medium z-10">or</span>
-                </div>
-    
-    
-                <div class="relative">
-    
-    
-                    <form action="?/login" method="POST" use:enhance={submitLogin} class="flex flex-col justify-center items-center space-y-2 w-11/12 m-auto">
-                        <Input
-                            type="email"
-                            id="email"
-                            label="Email"
-                            value={form?.data?.email ?? ''}
-                            errors={form?.errors?.email}
-                        />
-                        <Input
-                            type="password"
-                            id="password" 
-                            label="Password" 
-                            errors={form?.errors?.password} 
-                        />
-                        <div class="w-full max-w-lg">
-                            <a href="/reset-password" class="text-sm font-medium text-[#FB6A67] hover:cursor-pointer hover:underline">Forgot Password?</a>
-                        </div>
-                        
-    
-                        <div class="w-full max-w-lg pt-5 m-auto pb-5">
-                            <button type="submit" class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-md">
-                                Login
-                            </button>
-                        </div>
-
-                        <div class="divider divider-[#fff] pt-10 pb-10">
-                            <span class="text-white text-[1rem] z-10">Or login using</span>
-                        </div>
-
-                        <div class="flex flex-row items-center gap-x-5 pb-6">
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='google'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverGoogle}
-									on:mouseleave={handleHoverGoogle}	
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block" viewBox="-3 0 262 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451" fill="#4285F4"> </path> <path d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"> </path> <path d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"> </path> <path d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479" fill="#EB4335"> </path> </g> </g></svg>
-								</button>
-							</form>
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='discord'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverDiscord}
-									on:mouseleave={handleHoverDiscord}
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredDiscord ? 'shake-logo' : ''}  w-7 h-7 inline-block" viewBox="0 0 100 100" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#F5BB41;} .st2{fill:#2167D1;} .st3{fill:#3D84F3;} .st4{fill:#4CA853;} .st5{fill:#398039;} .st6{fill:#D74F3F;} .st7{fill:#D43C89;} .st8{fill:#B2005F;} .st9{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st10{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st11{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#040404;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill-rule:evenodd;clip-rule:evenodd;} .st13{fill-rule:evenodd;clip-rule:evenodd;fill:#040404;} .st14{fill:url(#SVGID_1_);} .st15{fill:url(#SVGID_2_);} .st16{fill:url(#SVGID_3_);} .st17{fill:url(#SVGID_4_);} .st18{fill:url(#SVGID_5_);} .st19{fill:url(#SVGID_6_);} .st20{fill:url(#SVGID_7_);} .st21{fill:url(#SVGID_8_);} .st22{fill:url(#SVGID_9_);} .st23{fill:url(#SVGID_10_);} .st24{fill:url(#SVGID_11_);} .st25{fill:url(#SVGID_12_);} .st26{fill:url(#SVGID_13_);} .st27{fill:url(#SVGID_14_);} .st28{fill:url(#SVGID_15_);} .st29{fill:url(#SVGID_16_);} .st30{fill:url(#SVGID_17_);} .st31{fill:url(#SVGID_18_);} .st32{fill:url(#SVGID_19_);} .st33{fill:url(#SVGID_20_);} .st34{fill:url(#SVGID_21_);} .st35{fill:url(#SVGID_22_);} .st36{fill:url(#SVGID_23_);} .st37{fill:url(#SVGID_24_);} .st38{fill:url(#SVGID_25_);} .st39{fill:url(#SVGID_26_);} .st40{fill:url(#SVGID_27_);} .st41{fill:url(#SVGID_28_);} .st42{fill:url(#SVGID_29_);} .st43{fill:url(#SVGID_30_);} .st44{fill:url(#SVGID_31_);} .st45{fill:url(#SVGID_32_);} .st46{fill:url(#SVGID_33_);} .st47{fill:url(#SVGID_34_);} .st48{fill:url(#SVGID_35_);} .st49{fill:url(#SVGID_36_);} .st50{fill:url(#SVGID_37_);} .st51{fill:url(#SVGID_38_);} .st52{fill:url(#SVGID_39_);} .st53{fill:url(#SVGID_40_);} .st54{fill:url(#SVGID_41_);} .st55{fill:url(#SVGID_42_);} .st56{fill:url(#SVGID_43_);} .st57{fill:url(#SVGID_44_);} .st58{fill:url(#SVGID_45_);} .st59{fill:#040404;} .st60{fill:url(#SVGID_46_);} .st61{fill:url(#SVGID_47_);} .st62{fill:url(#SVGID_48_);} .st63{fill:url(#SVGID_49_);} .st64{fill:url(#SVGID_50_);} .st65{fill:url(#SVGID_51_);} .st66{fill:url(#SVGID_52_);} .st67{fill:url(#SVGID_53_);} .st68{fill:url(#SVGID_54_);} .st69{fill:url(#SVGID_55_);} .st70{fill:url(#SVGID_56_);} .st71{fill:url(#SVGID_57_);} .st72{fill:url(#SVGID_58_);} .st73{fill:url(#SVGID_59_);} .st74{fill:url(#SVGID_60_);} .st75{fill:url(#SVGID_61_);} .st76{fill:url(#SVGID_62_);} .st77{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;} .st78{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;} .st79{fill:#4BC9FF;} .st80{fill:#5500DD;} .st81{fill:#FF3A00;} .st82{fill:#E6162D;} .st83{fill:#F1F1F1;} .st84{fill:#FF9933;} .st85{fill:#B92B27;} .st86{fill:#00ACED;} .st87{fill:#BD2125;} .st88{fill:#1877F2;} .st89{fill:#fff;} .st90{fill:#CE3056;} .st91{fill:#5BB381;} .st92{fill:#61C3EC;} .st93{fill:#E4B34B;} .st94{fill:#181EF2;} .st95{fill:#FF0000;} .st96{fill:#FE466C;} .st97{fill:#FA4778;} .st98{fill:#FF7700;} .st99{fill-rule:evenodd;clip-rule:evenodd;fill:#1F6BF6;} .st100{fill:#520094;} .st101{fill:#4477E8;} .st102{fill:#3D1D1C;} .st103{fill:#FFE812;} .st104{fill:#344356;} .st105{fill:#00CC76;} .st106{fill-rule:evenodd;clip-rule:evenodd;fill:#345E90;} .st107{fill:#1F65D8;} .st108{fill:#EB3587;} .st109{fill-rule:evenodd;clip-rule:evenodd;fill:#603A88;} .st110{fill:#E3CE99;} .st111{fill:#783AF9;} .st112{fill:#FF515E;} .st113{fill:#FF4906;} .st114{fill:#503227;} .st115{fill:#4C7BD9;} .st116{fill:#69C9D0;} .st117{fill:#1B92D1;} .st118{fill:#EB4F4A;} .st119{fill:#513728;} .st120{fill:#FF6600;} .st121{fill-rule:evenodd;clip-rule:evenodd;fill:#B61438;} .st122{fill:#FFFC00;} .st123{fill:#141414;} .st124{fill:#94D137;} .st125{fill-rule:evenodd;clip-rule:evenodd;fill:#F1F1F1;} .st126{fill-rule:evenodd;clip-rule:evenodd;fill:#66E066;} .st127{fill:#2D8CFF;} .st128{fill:#F1A300;} .st129{fill:#4BA2F2;} .st130{fill:#1A5099;} .st131{fill:#EE6060;} .st132{fill-rule:evenodd;clip-rule:evenodd;fill:#F48120;} .st133{fill:#222222;} .st134{fill:url(#SVGID_63_);} .st135{fill:#0077B5;} .st136{fill:#FFCC00;} .st137{fill:#EB3352;} .st138{fill:#F9D265;} .st139{fill:#F5B955;} .st140{fill:#DD2A7B;} .st141{fill:#66E066;} .st142{fill:#EB4E00;} .st143{fill:#FFC794;} .st144{fill:#B5332A;} .st145{fill:#4E85EB;} .st146{fill:#58A45C;} .st147{fill:#F2BC42;} .st148{fill:#D85040;} .st149{fill:#464EB8;} .st150{fill:#7B83EB;} </style> <g id="Layer_1"></g> <g id="Layer_2"> <g> <g> <path class="st89" d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"></path> </g> </g> </g> </g></svg>
-								</button>
-							</form>
-
-                            <form method="post" action="?/oauth2">
-							<input class="hidden" name='provider' value='github'/>
-							<button
-								on:click={() => oauthLoading = !oauthLoading}
-								on:mouseenter={handleHoverGithub}
-								on:mouseleave={handleHoverGithub}
-								class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-								<svg class="{isHoveredGithub ? 'shake-logo' : ''}  w-7 h-7 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
-							</button>
-						    </form>
-
-						</div>
-    
-                        <p class="pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center">You don't have an account?
-                            <label on:click={() => displaySection='register'} class="text-blue-400 hover:underline  ml-1 cursor-pointer">Sign up</label>
-                        </p>
-                    </form>
-    
-                    
-                </div>
-      
-              
-            </div>
-    
-            {:else if displaySection === 'register'}
-    
-
-                <div class="grid grid-cols-1 text-white animate-fade-in-once mt-6">
-                    <div class="relative">
-                        <h2 class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold">
-                           Getting Started
-                        </h2>
-    
-                    </div>
-
-                    <span class="text-gray-400 text-center pb-4">
-                        Create an account to get started
-                    </span>	
-        
-                  
-                    <div class="relative">
-                    <form method="POST" action="?/register" use:enhance={submitRegistration} class="flex flex-col items-center space-y-2 w-full md:w-5/6 pt-4 md:ml-auto md:mr-auto">
-                        <!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
-                        <Input
-                            id="username"
-                            label="Username"
-                            value={form?.data?.username}
-                            errors={form?.errors?.username}
-                            disabled={loading} 
-                        />
-                        <Input
-                            type="email"
-                            id="email"
-                            label="Email"
-                            value={form?.data?.email}
-                            errors={form?.errors?.email}
-                            disabled={loading} 
-                        />
-                        
-                        <Input 
-                            type="password" 
-                            id="password" 
-                            label="Password" 
-                            errors={form?.errors?.password} 
-                            disabled={loading} 
-                        />
-                        
-                    
-    
-                        <Input
-                            type="password"
-                            id="passwordConfirm"
-                            label="Confirm Password"
-                            errors={form?.errors?.passwordConfirm}
-                            disabled={loading} 
-                        />
-
-                        <div class="w-full max-w-lg pt-5 m-auto pb-3">
-                            <button type="submit" class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-lg m-auto font-semibold text-md">
-                                Register
-                            </button>
-                        </div>
-                        
-                        <div class="divider divider-[#fff] pt-10 pb-10">
-                            <span class="text-white text-[1rem] z-10">Or register using</span>
-                        </div>
-    
-                        <div class="flex flex-row items-center gap-x-5 pb-6">
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='google'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverGoogle}
-									on:mouseleave={handleHoverGoogle}	
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block" viewBox="-3 0 262 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451" fill="#4285F4"> </path> <path d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"> </path> <path d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"> </path> <path d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479" fill="#EB4335"> </path> </g> </g></svg>
-								</button>
-							</form>
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='discord'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverDiscord}
-									on:mouseleave={handleHoverDiscord}
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredDiscord ? 'shake-logo' : ''}  w-7 h-7 inline-block" viewBox="0 0 100 100" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#F5BB41;} .st2{fill:#2167D1;} .st3{fill:#3D84F3;} .st4{fill:#4CA853;} .st5{fill:#398039;} .st6{fill:#D74F3F;} .st7{fill:#D43C89;} .st8{fill:#B2005F;} .st9{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st10{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st11{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#040404;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill-rule:evenodd;clip-rule:evenodd;} .st13{fill-rule:evenodd;clip-rule:evenodd;fill:#040404;} .st14{fill:url(#SVGID_1_);} .st15{fill:url(#SVGID_2_);} .st16{fill:url(#SVGID_3_);} .st17{fill:url(#SVGID_4_);} .st18{fill:url(#SVGID_5_);} .st19{fill:url(#SVGID_6_);} .st20{fill:url(#SVGID_7_);} .st21{fill:url(#SVGID_8_);} .st22{fill:url(#SVGID_9_);} .st23{fill:url(#SVGID_10_);} .st24{fill:url(#SVGID_11_);} .st25{fill:url(#SVGID_12_);} .st26{fill:url(#SVGID_13_);} .st27{fill:url(#SVGID_14_);} .st28{fill:url(#SVGID_15_);} .st29{fill:url(#SVGID_16_);} .st30{fill:url(#SVGID_17_);} .st31{fill:url(#SVGID_18_);} .st32{fill:url(#SVGID_19_);} .st33{fill:url(#SVGID_20_);} .st34{fill:url(#SVGID_21_);} .st35{fill:url(#SVGID_22_);} .st36{fill:url(#SVGID_23_);} .st37{fill:url(#SVGID_24_);} .st38{fill:url(#SVGID_25_);} .st39{fill:url(#SVGID_26_);} .st40{fill:url(#SVGID_27_);} .st41{fill:url(#SVGID_28_);} .st42{fill:url(#SVGID_29_);} .st43{fill:url(#SVGID_30_);} .st44{fill:url(#SVGID_31_);} .st45{fill:url(#SVGID_32_);} .st46{fill:url(#SVGID_33_);} .st47{fill:url(#SVGID_34_);} .st48{fill:url(#SVGID_35_);} .st49{fill:url(#SVGID_36_);} .st50{fill:url(#SVGID_37_);} .st51{fill:url(#SVGID_38_);} .st52{fill:url(#SVGID_39_);} .st53{fill:url(#SVGID_40_);} .st54{fill:url(#SVGID_41_);} .st55{fill:url(#SVGID_42_);} .st56{fill:url(#SVGID_43_);} .st57{fill:url(#SVGID_44_);} .st58{fill:url(#SVGID_45_);} .st59{fill:#040404;} .st60{fill:url(#SVGID_46_);} .st61{fill:url(#SVGID_47_);} .st62{fill:url(#SVGID_48_);} .st63{fill:url(#SVGID_49_);} .st64{fill:url(#SVGID_50_);} .st65{fill:url(#SVGID_51_);} .st66{fill:url(#SVGID_52_);} .st67{fill:url(#SVGID_53_);} .st68{fill:url(#SVGID_54_);} .st69{fill:url(#SVGID_55_);} .st70{fill:url(#SVGID_56_);} .st71{fill:url(#SVGID_57_);} .st72{fill:url(#SVGID_58_);} .st73{fill:url(#SVGID_59_);} .st74{fill:url(#SVGID_60_);} .st75{fill:url(#SVGID_61_);} .st76{fill:url(#SVGID_62_);} .st77{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;} .st78{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;} .st79{fill:#4BC9FF;} .st80{fill:#5500DD;} .st81{fill:#FF3A00;} .st82{fill:#E6162D;} .st83{fill:#F1F1F1;} .st84{fill:#FF9933;} .st85{fill:#B92B27;} .st86{fill:#00ACED;} .st87{fill:#BD2125;} .st88{fill:#1877F2;} .st89{fill:#fff;} .st90{fill:#CE3056;} .st91{fill:#5BB381;} .st92{fill:#61C3EC;} .st93{fill:#E4B34B;} .st94{fill:#181EF2;} .st95{fill:#FF0000;} .st96{fill:#FE466C;} .st97{fill:#FA4778;} .st98{fill:#FF7700;} .st99{fill-rule:evenodd;clip-rule:evenodd;fill:#1F6BF6;} .st100{fill:#520094;} .st101{fill:#4477E8;} .st102{fill:#3D1D1C;} .st103{fill:#FFE812;} .st104{fill:#344356;} .st105{fill:#00CC76;} .st106{fill-rule:evenodd;clip-rule:evenodd;fill:#345E90;} .st107{fill:#1F65D8;} .st108{fill:#EB3587;} .st109{fill-rule:evenodd;clip-rule:evenodd;fill:#603A88;} .st110{fill:#E3CE99;} .st111{fill:#783AF9;} .st112{fill:#FF515E;} .st113{fill:#FF4906;} .st114{fill:#503227;} .st115{fill:#4C7BD9;} .st116{fill:#69C9D0;} .st117{fill:#1B92D1;} .st118{fill:#EB4F4A;} .st119{fill:#513728;} .st120{fill:#FF6600;} .st121{fill-rule:evenodd;clip-rule:evenodd;fill:#B61438;} .st122{fill:#FFFC00;} .st123{fill:#141414;} .st124{fill:#94D137;} .st125{fill-rule:evenodd;clip-rule:evenodd;fill:#F1F1F1;} .st126{fill-rule:evenodd;clip-rule:evenodd;fill:#66E066;} .st127{fill:#2D8CFF;} .st128{fill:#F1A300;} .st129{fill:#4BA2F2;} .st130{fill:#1A5099;} .st131{fill:#EE6060;} .st132{fill-rule:evenodd;clip-rule:evenodd;fill:#F48120;} .st133{fill:#222222;} .st134{fill:url(#SVGID_63_);} .st135{fill:#0077B5;} .st136{fill:#FFCC00;} .st137{fill:#EB3352;} .st138{fill:#F9D265;} .st139{fill:#F5B955;} .st140{fill:#DD2A7B;} .st141{fill:#66E066;} .st142{fill:#EB4E00;} .st143{fill:#FFC794;} .st144{fill:#B5332A;} .st145{fill:#4E85EB;} .st146{fill:#58A45C;} .st147{fill:#F2BC42;} .st148{fill:#D85040;} .st149{fill:#464EB8;} .st150{fill:#7B83EB;} </style> <g id="Layer_1"></g> <g id="Layer_2"> <g> <g> <path class="st89" d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"></path> </g> </g> </g> </g></svg>
-								</button>
-							</form>
-
-                            <form method="post" action="?/oauth2">
-							<input class="hidden" name='provider' value='github'/>
-							<button
-								on:click={() => oauthLoading = !oauthLoading}
-								on:mouseenter={handleHoverGithub}
-								on:mouseleave={handleHoverGithub}
-								class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-								<svg class="{isHoveredGithub ? 'shake-logo' : ''}  w-7 h-7 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
-							</button>
-						    </form>
-
-						</div>
-
-                        <p class="pb-1 text-xs text-gray-300 text-center">By registering you agree to stocknear's
-                            <a href="/terms-of-use" class="text-blue-400 hover:underline ">Terms of Use</a>
-                            and acknowledge that you've read our <a href="/privacy-policy" class="text-blue-400 hover:underline ">Privacy Policy</a>.
-                        </p>
-    
-                        <p class="pt-3 pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center">You already have an account?
-                            <label on:click={() => displaySection = 'login'} class="text-blue-400 hover:underline  ml-1 cursor-pointer">Sign in</label>
-                        </p>
-                    </form>
-                </div>
-                </div>
-    
-            {/if}
-    
+              <p
+                class="pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center"
+              >
+                You don't have an account?
+                <label
+                  on:click={() => (displaySection = "register")}
+                  class="text-blue-400 sm:hover:underline ml-1 cursor-pointer"
+                  >Sign up</label
+                >
+              </p>
+            </form>
+          </div>
         </div>
+      {:else if displaySection === "register"}
+        <div class="grid grid-cols-1 gap-4text-white animate-fade-in-once">
+          <div class="relative">
+            <h2
+              class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold"
+            >
+              Getting Started
+            </h2>
+          </div>
 
-        
+          <span class="text-gray-400 text-center pb-4">
+            Create an account to get started
+          </span>
+
+          <div class="relative">
+            <form
+              method="POST"
+              action="?/register"
+              use:enhance={submitRegistration}
+              class="flex flex-col items-center space-y-2 w-full md:w-5/6 pt-4 md:ml-auto md:mr-auto"
+            >
+              <!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
+              <Input
+                id="username"
+                label="Username"
+                value={form?.data?.username}
+                errors={form?.errors?.username}
+                disabled={loading}
+              />
+              <Input
+                type="email"
+                id="email"
+                label="Email"
+                value={form?.data?.email}
+                errors={form?.errors?.email}
+                disabled={loading}
+              />
+
+              <Input
+                type="password"
+                id="password"
+                label="Password"
+                errors={form?.errors?.password}
+                disabled={loading}
+              />
+
+              <Input
+                type="password"
+                id="passwordConfirm"
+                label="Confirm Password"
+                errors={form?.errors?.passwordConfirm}
+                disabled={loading}
+              />
+
+              <div class="w-full max-w-lg pt-5 m-auto pb-3">
+                {#if !loading && !isClicked}
+                  <button
+                    type="submit"
+                    class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
+                  >
+                    <span>Register</span>
+                  </button>
+                {:else}
+                  <label
+                    class="cursor-not-allowed btn bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
+                  >
+                    <div class="flex flex-row m-auto items-center">
+                      <span class="loading loading-infinity"></span>
+                      <span class="ml-1.5">Signing Up</span>
+                    </div>
+                  </label>
+                {/if}
+              </div>
+
+              <div class="divider divider-[#fff] pt-10 pb-10">
+                <span class="text-white text-[1rem] z-10"
+                  >Or register using</span
+                >
+              </div>
+
+              <div class="flex flex-row items-center gap-x-5 pb-6">
+                <form method="post" action="?/oauth2">
+                  <input class="hidden" name="provider" value="google" />
+                  <button
+                    on:click={() => (oauthLoading = !oauthLoading)}
+                    on:mouseenter={handleHoverGoogle}
+                    on:mouseleave={handleHoverGoogle}
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                  >
+                    <svg
+                      class="{isHoveredGoogle
+                        ? 'shake-logo'
+                        : ''} w-6 h-6 inline-block"
+                      viewBox="-3 0 262 262"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      preserveAspectRatio="xMidYMid"
+                      fill="#000000"
+                      ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                        id="SVGRepo_tracerCarrier"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ></g><g id="SVGRepo_iconCarrier">
+                        <g>
+                          <path
+                            d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
+                            fill="#4285F4"
+                          >
+                          </path>
+                          <path
+                            d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
+                            fill="#34A853"
+                          >
+                          </path>
+                          <path
+                            d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
+                            fill="#FBBC05"
+                          >
+                          </path>
+                          <path
+                            d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
+                            fill="#EB4335"
+                          >
+                          </path>
+                        </g>
+                      </g></svg
+                    >
+                  </button>
+                </form>
+                <form method="post" action="?/oauth2">
+                  <input class="hidden" name="provider" value="discord" />
+                  <button
+                    on:click={() => (oauthLoading = !oauthLoading)}
+                    on:mouseenter={handleHoverDiscord}
+                    on:mouseleave={handleHoverDiscord}
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                  >
+                    <svg
+                      class="{isHoveredDiscord
+                        ? 'shake-logo'
+                        : ''}  w-7 h-7 inline-block"
+                      viewBox="0 0 100 100"
+                      version="1.1"
+                      xml:space="preserve"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      fill="#000000"
+                      ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                        id="SVGRepo_tracerCarrier"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ></g><g id="SVGRepo_iconCarrier">
+                        <style type="text/css">
+                          .st0 {
+                            fill: #ffffff;
+                          }
+                          .st1 {
+                            fill: #f5bb41;
+                          }
+                          .st2 {
+                            fill: #2167d1;
+                          }
+                          .st3 {
+                            fill: #3d84f3;
+                          }
+                          .st4 {
+                            fill: #4ca853;
+                          }
+                          .st5 {
+                            fill: #398039;
+                          }
+                          .st6 {
+                            fill: #d74f3f;
+                          }
+                          .st7 {
+                            fill: #d43c89;
+                          }
+                          .st8 {
+                            fill: #b2005f;
+                          }
+                          .st9 {
+                            fill: none;
+                            stroke: #000000;
+                            stroke-width: 3;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                          }
+                          .st10 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: none;
+                            stroke: #000000;
+                            stroke-width: 3;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                          }
+                          .st11 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: none;
+                            stroke: #040404;
+                            stroke-width: 3;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                          }
+                          .st12 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                          }
+                          .st13 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #040404;
+                          }
+                          .st14 {
+                            fill: url(#SVGID_1_);
+                          }
+                          .st15 {
+                            fill: url(#SVGID_2_);
+                          }
+                          .st16 {
+                            fill: url(#SVGID_3_);
+                          }
+                          .st17 {
+                            fill: url(#SVGID_4_);
+                          }
+                          .st18 {
+                            fill: url(#SVGID_5_);
+                          }
+                          .st19 {
+                            fill: url(#SVGID_6_);
+                          }
+                          .st20 {
+                            fill: url(#SVGID_7_);
+                          }
+                          .st21 {
+                            fill: url(#SVGID_8_);
+                          }
+                          .st22 {
+                            fill: url(#SVGID_9_);
+                          }
+                          .st23 {
+                            fill: url(#SVGID_10_);
+                          }
+                          .st24 {
+                            fill: url(#SVGID_11_);
+                          }
+                          .st25 {
+                            fill: url(#SVGID_12_);
+                          }
+                          .st26 {
+                            fill: url(#SVGID_13_);
+                          }
+                          .st27 {
+                            fill: url(#SVGID_14_);
+                          }
+                          .st28 {
+                            fill: url(#SVGID_15_);
+                          }
+                          .st29 {
+                            fill: url(#SVGID_16_);
+                          }
+                          .st30 {
+                            fill: url(#SVGID_17_);
+                          }
+                          .st31 {
+                            fill: url(#SVGID_18_);
+                          }
+                          .st32 {
+                            fill: url(#SVGID_19_);
+                          }
+                          .st33 {
+                            fill: url(#SVGID_20_);
+                          }
+                          .st34 {
+                            fill: url(#SVGID_21_);
+                          }
+                          .st35 {
+                            fill: url(#SVGID_22_);
+                          }
+                          .st36 {
+                            fill: url(#SVGID_23_);
+                          }
+                          .st37 {
+                            fill: url(#SVGID_24_);
+                          }
+                          .st38 {
+                            fill: url(#SVGID_25_);
+                          }
+                          .st39 {
+                            fill: url(#SVGID_26_);
+                          }
+                          .st40 {
+                            fill: url(#SVGID_27_);
+                          }
+                          .st41 {
+                            fill: url(#SVGID_28_);
+                          }
+                          .st42 {
+                            fill: url(#SVGID_29_);
+                          }
+                          .st43 {
+                            fill: url(#SVGID_30_);
+                          }
+                          .st44 {
+                            fill: url(#SVGID_31_);
+                          }
+                          .st45 {
+                            fill: url(#SVGID_32_);
+                          }
+                          .st46 {
+                            fill: url(#SVGID_33_);
+                          }
+                          .st47 {
+                            fill: url(#SVGID_34_);
+                          }
+                          .st48 {
+                            fill: url(#SVGID_35_);
+                          }
+                          .st49 {
+                            fill: url(#SVGID_36_);
+                          }
+                          .st50 {
+                            fill: url(#SVGID_37_);
+                          }
+                          .st51 {
+                            fill: url(#SVGID_38_);
+                          }
+                          .st52 {
+                            fill: url(#SVGID_39_);
+                          }
+                          .st53 {
+                            fill: url(#SVGID_40_);
+                          }
+                          .st54 {
+                            fill: url(#SVGID_41_);
+                          }
+                          .st55 {
+                            fill: url(#SVGID_42_);
+                          }
+                          .st56 {
+                            fill: url(#SVGID_43_);
+                          }
+                          .st57 {
+                            fill: url(#SVGID_44_);
+                          }
+                          .st58 {
+                            fill: url(#SVGID_45_);
+                          }
+                          .st59 {
+                            fill: #040404;
+                          }
+                          .st60 {
+                            fill: url(#SVGID_46_);
+                          }
+                          .st61 {
+                            fill: url(#SVGID_47_);
+                          }
+                          .st62 {
+                            fill: url(#SVGID_48_);
+                          }
+                          .st63 {
+                            fill: url(#SVGID_49_);
+                          }
+                          .st64 {
+                            fill: url(#SVGID_50_);
+                          }
+                          .st65 {
+                            fill: url(#SVGID_51_);
+                          }
+                          .st66 {
+                            fill: url(#SVGID_52_);
+                          }
+                          .st67 {
+                            fill: url(#SVGID_53_);
+                          }
+                          .st68 {
+                            fill: url(#SVGID_54_);
+                          }
+                          .st69 {
+                            fill: url(#SVGID_55_);
+                          }
+                          .st70 {
+                            fill: url(#SVGID_56_);
+                          }
+                          .st71 {
+                            fill: url(#SVGID_57_);
+                          }
+                          .st72 {
+                            fill: url(#SVGID_58_);
+                          }
+                          .st73 {
+                            fill: url(#SVGID_59_);
+                          }
+                          .st74 {
+                            fill: url(#SVGID_60_);
+                          }
+                          .st75 {
+                            fill: url(#SVGID_61_);
+                          }
+                          .st76 {
+                            fill: url(#SVGID_62_);
+                          }
+                          .st77 {
+                            fill: none;
+                            stroke: #000000;
+                            stroke-width: 3;
+                            stroke-miterlimit: 10;
+                          }
+                          .st78 {
+                            fill: none;
+                            stroke: #ffffff;
+                            stroke-miterlimit: 10;
+                          }
+                          .st79 {
+                            fill: #4bc9ff;
+                          }
+                          .st80 {
+                            fill: #5500dd;
+                          }
+                          .st81 {
+                            fill: #ff3a00;
+                          }
+                          .st82 {
+                            fill: #e6162d;
+                          }
+                          .st83 {
+                            fill: #f1f1f1;
+                          }
+                          .st84 {
+                            fill: #ff9933;
+                          }
+                          .st85 {
+                            fill: #b92b27;
+                          }
+                          .st86 {
+                            fill: #00aced;
+                          }
+                          .st87 {
+                            fill: #bd2125;
+                          }
+                          .st88 {
+                            fill: #1877f2;
+                          }
+                          .st89 {
+                            fill: #fff;
+                          }
+                          .st90 {
+                            fill: #ce3056;
+                          }
+                          .st91 {
+                            fill: #5bb381;
+                          }
+                          .st92 {
+                            fill: #61c3ec;
+                          }
+                          .st93 {
+                            fill: #e4b34b;
+                          }
+                          .st94 {
+                            fill: #181ef2;
+                          }
+                          .st95 {
+                            fill: #ff0000;
+                          }
+                          .st96 {
+                            fill: #fe466c;
+                          }
+                          .st97 {
+                            fill: #fa4778;
+                          }
+                          .st98 {
+                            fill: #ff7700;
+                          }
+                          .st99 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #1f6bf6;
+                          }
+                          .st100 {
+                            fill: #520094;
+                          }
+                          .st101 {
+                            fill: #4477e8;
+                          }
+                          .st102 {
+                            fill: #3d1d1c;
+                          }
+                          .st103 {
+                            fill: #ffe812;
+                          }
+                          .st104 {
+                            fill: #344356;
+                          }
+                          .st105 {
+                            fill: #00cc76;
+                          }
+                          .st106 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #345e90;
+                          }
+                          .st107 {
+                            fill: #1f65d8;
+                          }
+                          .st108 {
+                            fill: #eb3587;
+                          }
+                          .st109 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #603a88;
+                          }
+                          .st110 {
+                            fill: #e3ce99;
+                          }
+                          .st111 {
+                            fill: #783af9;
+                          }
+                          .st112 {
+                            fill: #ff515e;
+                          }
+                          .st113 {
+                            fill: #ff4906;
+                          }
+                          .st114 {
+                            fill: #503227;
+                          }
+                          .st115 {
+                            fill: #4c7bd9;
+                          }
+                          .st116 {
+                            fill: #69c9d0;
+                          }
+                          .st117 {
+                            fill: #1b92d1;
+                          }
+                          .st118 {
+                            fill: #eb4f4a;
+                          }
+                          .st119 {
+                            fill: #513728;
+                          }
+                          .st120 {
+                            fill: #ff6600;
+                          }
+                          .st121 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #b61438;
+                          }
+                          .st122 {
+                            fill: #fffc00;
+                          }
+                          .st123 {
+                            fill: #141414;
+                          }
+                          .st124 {
+                            fill: #94d137;
+                          }
+                          .st125 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #f1f1f1;
+                          }
+                          .st126 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #66e066;
+                          }
+                          .st127 {
+                            fill: #2d8cff;
+                          }
+                          .st128 {
+                            fill: #f1a300;
+                          }
+                          .st129 {
+                            fill: #4ba2f2;
+                          }
+                          .st130 {
+                            fill: #1a5099;
+                          }
+                          .st131 {
+                            fill: #ee6060;
+                          }
+                          .st132 {
+                            fill-rule: evenodd;
+                            clip-rule: evenodd;
+                            fill: #f48120;
+                          }
+                          .st133 {
+                            fill: #222222;
+                          }
+                          .st134 {
+                            fill: url(#SVGID_63_);
+                          }
+                          .st135 {
+                            fill: #0077b5;
+                          }
+                          .st136 {
+                            fill: #ffcc00;
+                          }
+                          .st137 {
+                            fill: #eb3352;
+                          }
+                          .st138 {
+                            fill: #f9d265;
+                          }
+                          .st139 {
+                            fill: #f5b955;
+                          }
+                          .st140 {
+                            fill: #dd2a7b;
+                          }
+                          .st141 {
+                            fill: #66e066;
+                          }
+                          .st142 {
+                            fill: #eb4e00;
+                          }
+                          .st143 {
+                            fill: #ffc794;
+                          }
+                          .st144 {
+                            fill: #b5332a;
+                          }
+                          .st145 {
+                            fill: #4e85eb;
+                          }
+                          .st146 {
+                            fill: #58a45c;
+                          }
+                          .st147 {
+                            fill: #f2bc42;
+                          }
+                          .st148 {
+                            fill: #d85040;
+                          }
+                          .st149 {
+                            fill: #464eb8;
+                          }
+                          .st150 {
+                            fill: #7b83eb;
+                          }
+                        </style> <g id="Layer_1"></g>
+                        <g id="Layer_2">
+                          <g>
+                            <g>
+                              <path
+                                class="st89"
+                                d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
+                              ></path>
+                            </g>
+                          </g>
+                        </g>
+                      </g></svg
+                    >
+                  </button>
+                </form>
+
+                <form method="post" action="?/oauth2">
+                  <input class="hidden" name="provider" value="github" />
+                  <button
+                    on:click={() => (oauthLoading = !oauthLoading)}
+                    on:mouseenter={handleHoverGithub}
+                    on:mouseleave={handleHoverGithub}
+                    class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                  >
+                    <svg
+                      class="{isHoveredGithub
+                        ? 'shake-logo'
+                        : ''}  w-7 h-7 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><path
+                        fill="white"
+                        d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+                      /></svg
+                    >
+                  </button>
+                </form>
+              </div>
+
+              <p class="pb-1 text-xs text-gray-300 text-center">
+                By registering you agree to stocknear's
+                <a href="/terms-of-use" class="text-blue-400 hover:underline"
+                  >Terms of Use</a
+                >
+                and acknowledge that you've read our
+                <a href="/privacy-policy" class="text-blue-400 hover:underline"
+                  >Privacy Policy</a
+                >.
+              </p>
+
+              <p
+                class="pt-3 pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center"
+              >
+                You already have an account?
+                <label
+                  on:click={() => (displaySection = "login")}
+                  class="text-blue-400 hover:underline ml-1 cursor-pointer"
+                  >Sign in</label
+                >
+              </p>
+            </form>
+          </div>
+        </div>
+      {/if}
+
+      {#if oauthLoading}
+        <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
+          <div class="relative">
+            <label
+              class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            >
+              <span class="loading loading-spinner loading-md text-gray-400"
+              ></span>
+            </label>
+          </div>
+        </div>
+      {/if}
     </div>
+  </dialog>
+  <!--End Login Modal-->
+{:else}
+  <!--Start Drawer Sidewise for mobile-->
 
-</div>
+  <div class="drawer drawer-end overflow-hidden" style="z-index: 9999;">
+    <input id="userLogin" type="checkbox" class="drawer-toggle" />
 
+    <div class="drawer-side">
+      <div
+        class="modal-box rounded-xl bg-[#000] min-h-screen w-screen pb-20 overflow-y-auto"
+      >
+        <label
+          on:click={() => (form = [])}
+          for="userLogin"
+          class="absolute left-6 top-4"
+        >
+          <svg
+            class="w-6 h-6 inline-block mb-0.5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><path
+              fill="#fff"
+              d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
+            /></svg
+          >
+          <span class="text-white text-md font-medium"> Return </span>
+        </label>
+
+        {#if displaySection === "login"}
+          <div class="grid grid-cols-1 animate-fade-in-once mt-6">
+            <div class="relative">
+              <h2
+                class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold"
+              >
+                Sign In
+              </h2>
+            </div>
+
+            <span class="text-gray-400 text-center pb-4"> Welcome back! </span>
+
+            <div class="divider divider-[#fff]">
+              <span class="text-white text-xl font-medium z-10">or</span>
+            </div>
+
+            <div class="relative">
+              <form
+                action="?/login"
+                method="POST"
+                use:enhance={submitLogin}
+                class="flex flex-col justify-center items-center space-y-2 w-11/12 m-auto"
+              >
+                <Input
+                  type="email"
+                  id="email"
+                  label="Email"
+                  value={form?.data?.email ?? ""}
+                  errors={form?.errors?.email}
+                />
+                <Input
+                  type="password"
+                  id="password"
+                  label="Password"
+                  errors={form?.errors?.password}
+                />
+                <div class="w-full max-w-lg">
+                  <a
+                    href="/reset-password"
+                    class="text-sm font-medium text-[#FB6A67] hover:cursor-pointer hover:underline"
+                    >Forgot Password?</a
+                  >
+                </div>
+
+                <div class="w-full max-w-lg pt-5 m-auto pb-5">
+                  <button
+                    type="submit"
+                    class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-md m-auto text-white font-semibold text-md"
+                  >
+                    Login
+                  </button>
+                </div>
+
+                <div class="divider divider-[#fff] pt-10 pb-10">
+                  <span class="text-white text-[1rem] z-10">Or login using</span
+                  >
+                </div>
+
+                <div class="flex flex-row items-center gap-x-5 pb-6">
+                  <form method="post" action="?/oauth2">
+                    <input class="hidden" name="provider" value="google" />
+                    <button
+                      on:click={() => (oauthLoading = !oauthLoading)}
+                      on:mouseenter={handleHoverGoogle}
+                      on:mouseleave={handleHoverGoogle}
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    >
+                      <svg
+                        class="{isHoveredGoogle
+                          ? 'shake-logo'
+                          : ''} w-6 h-6 inline-block"
+                        viewBox="-3 0 262 262"
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        preserveAspectRatio="xMidYMid"
+                        fill="#000000"
+                        ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                          id="SVGRepo_tracerCarrier"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></g><g id="SVGRepo_iconCarrier">
+                          <g>
+                            <path
+                              d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
+                              fill="#4285F4"
+                            >
+                            </path>
+                            <path
+                              d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
+                              fill="#34A853"
+                            >
+                            </path>
+                            <path
+                              d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
+                              fill="#FBBC05"
+                            >
+                            </path>
+                            <path
+                              d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
+                              fill="#EB4335"
+                            >
+                            </path>
+                          </g>
+                        </g></svg
+                      >
+                    </button>
+                  </form>
+                  <form method="post" action="?/oauth2">
+                    <input class="hidden" name="provider" value="discord" />
+                    <button
+                      on:click={() => (oauthLoading = !oauthLoading)}
+                      on:mouseenter={handleHoverDiscord}
+                      on:mouseleave={handleHoverDiscord}
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    >
+                      <svg
+                        class="{isHoveredDiscord
+                          ? 'shake-logo'
+                          : ''}  w-7 h-7 inline-block"
+                        viewBox="0 0 100 100"
+                        version="1.1"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        fill="#000000"
+                        ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                          id="SVGRepo_tracerCarrier"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></g><g id="SVGRepo_iconCarrier">
+                          <style type="text/css">
+                            .st0 {
+                              fill: #ffffff;
+                            }
+                            .st1 {
+                              fill: #f5bb41;
+                            }
+                            .st2 {
+                              fill: #2167d1;
+                            }
+                            .st3 {
+                              fill: #3d84f3;
+                            }
+                            .st4 {
+                              fill: #4ca853;
+                            }
+                            .st5 {
+                              fill: #398039;
+                            }
+                            .st6 {
+                              fill: #d74f3f;
+                            }
+                            .st7 {
+                              fill: #d43c89;
+                            }
+                            .st8 {
+                              fill: #b2005f;
+                            }
+                            .st9 {
+                              fill: none;
+                              stroke: #000000;
+                              stroke-width: 3;
+                              stroke-linecap: round;
+                              stroke-linejoin: round;
+                              stroke-miterlimit: 10;
+                            }
+                            .st10 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: none;
+                              stroke: #000000;
+                              stroke-width: 3;
+                              stroke-linecap: round;
+                              stroke-linejoin: round;
+                              stroke-miterlimit: 10;
+                            }
+                            .st11 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: none;
+                              stroke: #040404;
+                              stroke-width: 3;
+                              stroke-linecap: round;
+                              stroke-linejoin: round;
+                              stroke-miterlimit: 10;
+                            }
+                            .st12 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                            }
+                            .st13 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #040404;
+                            }
+                            .st14 {
+                              fill: url(#SVGID_1_);
+                            }
+                            .st15 {
+                              fill: url(#SVGID_2_);
+                            }
+                            .st16 {
+                              fill: url(#SVGID_3_);
+                            }
+                            .st17 {
+                              fill: url(#SVGID_4_);
+                            }
+                            .st18 {
+                              fill: url(#SVGID_5_);
+                            }
+                            .st19 {
+                              fill: url(#SVGID_6_);
+                            }
+                            .st20 {
+                              fill: url(#SVGID_7_);
+                            }
+                            .st21 {
+                              fill: url(#SVGID_8_);
+                            }
+                            .st22 {
+                              fill: url(#SVGID_9_);
+                            }
+                            .st23 {
+                              fill: url(#SVGID_10_);
+                            }
+                            .st24 {
+                              fill: url(#SVGID_11_);
+                            }
+                            .st25 {
+                              fill: url(#SVGID_12_);
+                            }
+                            .st26 {
+                              fill: url(#SVGID_13_);
+                            }
+                            .st27 {
+                              fill: url(#SVGID_14_);
+                            }
+                            .st28 {
+                              fill: url(#SVGID_15_);
+                            }
+                            .st29 {
+                              fill: url(#SVGID_16_);
+                            }
+                            .st30 {
+                              fill: url(#SVGID_17_);
+                            }
+                            .st31 {
+                              fill: url(#SVGID_18_);
+                            }
+                            .st32 {
+                              fill: url(#SVGID_19_);
+                            }
+                            .st33 {
+                              fill: url(#SVGID_20_);
+                            }
+                            .st34 {
+                              fill: url(#SVGID_21_);
+                            }
+                            .st35 {
+                              fill: url(#SVGID_22_);
+                            }
+                            .st36 {
+                              fill: url(#SVGID_23_);
+                            }
+                            .st37 {
+                              fill: url(#SVGID_24_);
+                            }
+                            .st38 {
+                              fill: url(#SVGID_25_);
+                            }
+                            .st39 {
+                              fill: url(#SVGID_26_);
+                            }
+                            .st40 {
+                              fill: url(#SVGID_27_);
+                            }
+                            .st41 {
+                              fill: url(#SVGID_28_);
+                            }
+                            .st42 {
+                              fill: url(#SVGID_29_);
+                            }
+                            .st43 {
+                              fill: url(#SVGID_30_);
+                            }
+                            .st44 {
+                              fill: url(#SVGID_31_);
+                            }
+                            .st45 {
+                              fill: url(#SVGID_32_);
+                            }
+                            .st46 {
+                              fill: url(#SVGID_33_);
+                            }
+                            .st47 {
+                              fill: url(#SVGID_34_);
+                            }
+                            .st48 {
+                              fill: url(#SVGID_35_);
+                            }
+                            .st49 {
+                              fill: url(#SVGID_36_);
+                            }
+                            .st50 {
+                              fill: url(#SVGID_37_);
+                            }
+                            .st51 {
+                              fill: url(#SVGID_38_);
+                            }
+                            .st52 {
+                              fill: url(#SVGID_39_);
+                            }
+                            .st53 {
+                              fill: url(#SVGID_40_);
+                            }
+                            .st54 {
+                              fill: url(#SVGID_41_);
+                            }
+                            .st55 {
+                              fill: url(#SVGID_42_);
+                            }
+                            .st56 {
+                              fill: url(#SVGID_43_);
+                            }
+                            .st57 {
+                              fill: url(#SVGID_44_);
+                            }
+                            .st58 {
+                              fill: url(#SVGID_45_);
+                            }
+                            .st59 {
+                              fill: #040404;
+                            }
+                            .st60 {
+                              fill: url(#SVGID_46_);
+                            }
+                            .st61 {
+                              fill: url(#SVGID_47_);
+                            }
+                            .st62 {
+                              fill: url(#SVGID_48_);
+                            }
+                            .st63 {
+                              fill: url(#SVGID_49_);
+                            }
+                            .st64 {
+                              fill: url(#SVGID_50_);
+                            }
+                            .st65 {
+                              fill: url(#SVGID_51_);
+                            }
+                            .st66 {
+                              fill: url(#SVGID_52_);
+                            }
+                            .st67 {
+                              fill: url(#SVGID_53_);
+                            }
+                            .st68 {
+                              fill: url(#SVGID_54_);
+                            }
+                            .st69 {
+                              fill: url(#SVGID_55_);
+                            }
+                            .st70 {
+                              fill: url(#SVGID_56_);
+                            }
+                            .st71 {
+                              fill: url(#SVGID_57_);
+                            }
+                            .st72 {
+                              fill: url(#SVGID_58_);
+                            }
+                            .st73 {
+                              fill: url(#SVGID_59_);
+                            }
+                            .st74 {
+                              fill: url(#SVGID_60_);
+                            }
+                            .st75 {
+                              fill: url(#SVGID_61_);
+                            }
+                            .st76 {
+                              fill: url(#SVGID_62_);
+                            }
+                            .st77 {
+                              fill: none;
+                              stroke: #000000;
+                              stroke-width: 3;
+                              stroke-miterlimit: 10;
+                            }
+                            .st78 {
+                              fill: none;
+                              stroke: #ffffff;
+                              stroke-miterlimit: 10;
+                            }
+                            .st79 {
+                              fill: #4bc9ff;
+                            }
+                            .st80 {
+                              fill: #5500dd;
+                            }
+                            .st81 {
+                              fill: #ff3a00;
+                            }
+                            .st82 {
+                              fill: #e6162d;
+                            }
+                            .st83 {
+                              fill: #f1f1f1;
+                            }
+                            .st84 {
+                              fill: #ff9933;
+                            }
+                            .st85 {
+                              fill: #b92b27;
+                            }
+                            .st86 {
+                              fill: #00aced;
+                            }
+                            .st87 {
+                              fill: #bd2125;
+                            }
+                            .st88 {
+                              fill: #1877f2;
+                            }
+                            .st89 {
+                              fill: #fff;
+                            }
+                            .st90 {
+                              fill: #ce3056;
+                            }
+                            .st91 {
+                              fill: #5bb381;
+                            }
+                            .st92 {
+                              fill: #61c3ec;
+                            }
+                            .st93 {
+                              fill: #e4b34b;
+                            }
+                            .st94 {
+                              fill: #181ef2;
+                            }
+                            .st95 {
+                              fill: #ff0000;
+                            }
+                            .st96 {
+                              fill: #fe466c;
+                            }
+                            .st97 {
+                              fill: #fa4778;
+                            }
+                            .st98 {
+                              fill: #ff7700;
+                            }
+                            .st99 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #1f6bf6;
+                            }
+                            .st100 {
+                              fill: #520094;
+                            }
+                            .st101 {
+                              fill: #4477e8;
+                            }
+                            .st102 {
+                              fill: #3d1d1c;
+                            }
+                            .st103 {
+                              fill: #ffe812;
+                            }
+                            .st104 {
+                              fill: #344356;
+                            }
+                            .st105 {
+                              fill: #00cc76;
+                            }
+                            .st106 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #345e90;
+                            }
+                            .st107 {
+                              fill: #1f65d8;
+                            }
+                            .st108 {
+                              fill: #eb3587;
+                            }
+                            .st109 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #603a88;
+                            }
+                            .st110 {
+                              fill: #e3ce99;
+                            }
+                            .st111 {
+                              fill: #783af9;
+                            }
+                            .st112 {
+                              fill: #ff515e;
+                            }
+                            .st113 {
+                              fill: #ff4906;
+                            }
+                            .st114 {
+                              fill: #503227;
+                            }
+                            .st115 {
+                              fill: #4c7bd9;
+                            }
+                            .st116 {
+                              fill: #69c9d0;
+                            }
+                            .st117 {
+                              fill: #1b92d1;
+                            }
+                            .st118 {
+                              fill: #eb4f4a;
+                            }
+                            .st119 {
+                              fill: #513728;
+                            }
+                            .st120 {
+                              fill: #ff6600;
+                            }
+                            .st121 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #b61438;
+                            }
+                            .st122 {
+                              fill: #fffc00;
+                            }
+                            .st123 {
+                              fill: #141414;
+                            }
+                            .st124 {
+                              fill: #94d137;
+                            }
+                            .st125 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #f1f1f1;
+                            }
+                            .st126 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #66e066;
+                            }
+                            .st127 {
+                              fill: #2d8cff;
+                            }
+                            .st128 {
+                              fill: #f1a300;
+                            }
+                            .st129 {
+                              fill: #4ba2f2;
+                            }
+                            .st130 {
+                              fill: #1a5099;
+                            }
+                            .st131 {
+                              fill: #ee6060;
+                            }
+                            .st132 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #f48120;
+                            }
+                            .st133 {
+                              fill: #222222;
+                            }
+                            .st134 {
+                              fill: url(#SVGID_63_);
+                            }
+                            .st135 {
+                              fill: #0077b5;
+                            }
+                            .st136 {
+                              fill: #ffcc00;
+                            }
+                            .st137 {
+                              fill: #eb3352;
+                            }
+                            .st138 {
+                              fill: #f9d265;
+                            }
+                            .st139 {
+                              fill: #f5b955;
+                            }
+                            .st140 {
+                              fill: #dd2a7b;
+                            }
+                            .st141 {
+                              fill: #66e066;
+                            }
+                            .st142 {
+                              fill: #eb4e00;
+                            }
+                            .st143 {
+                              fill: #ffc794;
+                            }
+                            .st144 {
+                              fill: #b5332a;
+                            }
+                            .st145 {
+                              fill: #4e85eb;
+                            }
+                            .st146 {
+                              fill: #58a45c;
+                            }
+                            .st147 {
+                              fill: #f2bc42;
+                            }
+                            .st148 {
+                              fill: #d85040;
+                            }
+                            .st149 {
+                              fill: #464eb8;
+                            }
+                            .st150 {
+                              fill: #7b83eb;
+                            }
+                          </style> <g id="Layer_1"></g>
+                          <g id="Layer_2">
+                            <g>
+                              <g>
+                                <path
+                                  class="st89"
+                                  d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
+                                ></path>
+                              </g>
+                            </g>
+                          </g>
+                        </g></svg
+                      >
+                    </button>
+                  </form>
+
+                  <form method="post" action="?/oauth2">
+                    <input class="hidden" name="provider" value="github" />
+                    <button
+                      on:click={() => (oauthLoading = !oauthLoading)}
+                      on:mouseenter={handleHoverGithub}
+                      on:mouseleave={handleHoverGithub}
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    >
+                      <svg
+                        class="{isHoveredGithub
+                          ? 'shake-logo'
+                          : ''}  w-7 h-7 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="white"
+                          d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+                        /></svg
+                      >
+                    </button>
+                  </form>
+                </div>
+
+                <p
+                  class="pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center"
+                >
+                  You don't have an account?
+                  <label
+                    on:click={() => (displaySection = "register")}
+                    class="text-blue-400 hover:underline ml-1 cursor-pointer"
+                    >Sign up</label
+                  >
+                </p>
+              </form>
+            </div>
+          </div>
+        {:else if displaySection === "register"}
+          <div class="grid grid-cols-1 text-white animate-fade-in-once mt-6">
+            <div class="relative">
+              <h2
+                class="text-center text-white text-xl pt-10 sm:pt-4 font-semibold"
+              >
+                Getting Started
+              </h2>
+            </div>
+
+            <span class="text-gray-400 text-center pb-4">
+              Create an account to get started
+            </span>
+
+            <div class="relative">
+              <form
+                method="POST"
+                action="?/register"
+                use:enhance={submitRegistration}
+                class="flex flex-col items-center space-y-2 w-full md:w-5/6 pt-4 md:ml-auto md:mr-auto"
+              >
+                <!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
+                <Input
+                  id="username"
+                  label="Username"
+                  value={form?.data?.username}
+                  errors={form?.errors?.username}
+                  disabled={loading}
+                />
+                <Input
+                  type="email"
+                  id="email"
+                  label="Email"
+                  value={form?.data?.email}
+                  errors={form?.errors?.email}
+                  disabled={loading}
+                />
+
+                <Input
+                  type="password"
+                  id="password"
+                  label="Password"
+                  errors={form?.errors?.password}
+                  disabled={loading}
+                />
+
+                <Input
+                  type="password"
+                  id="passwordConfirm"
+                  label="Confirm Password"
+                  errors={form?.errors?.passwordConfirm}
+                  disabled={loading}
+                />
+
+                <div class="w-full max-w-lg pt-5 m-auto pb-3">
+                  <button
+                    type="submit"
+                    class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-md m-auto font-semibold text-md"
+                  >
+                    Register
+                  </button>
+                </div>
+
+                <div class="divider divider-[#fff] pt-10 pb-10">
+                  <span class="text-white text-[1rem] z-10"
+                    >Or register using</span
+                  >
+                </div>
+
+                <div class="flex flex-row items-center gap-x-5 pb-6">
+                  <form method="post" action="?/oauth2">
+                    <input class="hidden" name="provider" value="google" />
+                    <button
+                      on:click={() => (oauthLoading = !oauthLoading)}
+                      on:mouseenter={handleHoverGoogle}
+                      on:mouseleave={handleHoverGoogle}
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    >
+                      <svg
+                        class="{isHoveredGoogle
+                          ? 'shake-logo'
+                          : ''} w-6 h-6 inline-block"
+                        viewBox="-3 0 262 262"
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        preserveAspectRatio="xMidYMid"
+                        fill="#000000"
+                        ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                          id="SVGRepo_tracerCarrier"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></g><g id="SVGRepo_iconCarrier">
+                          <g>
+                            <path
+                              d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
+                              fill="#4285F4"
+                            >
+                            </path>
+                            <path
+                              d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
+                              fill="#34A853"
+                            >
+                            </path>
+                            <path
+                              d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
+                              fill="#FBBC05"
+                            >
+                            </path>
+                            <path
+                              d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
+                              fill="#EB4335"
+                            >
+                            </path>
+                          </g>
+                        </g></svg
+                      >
+                    </button>
+                  </form>
+                  <form method="post" action="?/oauth2">
+                    <input class="hidden" name="provider" value="discord" />
+                    <button
+                      on:click={() => (oauthLoading = !oauthLoading)}
+                      on:mouseenter={handleHoverDiscord}
+                      on:mouseleave={handleHoverDiscord}
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    >
+                      <svg
+                        class="{isHoveredDiscord
+                          ? 'shake-logo'
+                          : ''}  w-7 h-7 inline-block"
+                        viewBox="0 0 100 100"
+                        version="1.1"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        fill="#000000"
+                        ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                          id="SVGRepo_tracerCarrier"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></g><g id="SVGRepo_iconCarrier">
+                          <style type="text/css">
+                            .st0 {
+                              fill: #ffffff;
+                            }
+                            .st1 {
+                              fill: #f5bb41;
+                            }
+                            .st2 {
+                              fill: #2167d1;
+                            }
+                            .st3 {
+                              fill: #3d84f3;
+                            }
+                            .st4 {
+                              fill: #4ca853;
+                            }
+                            .st5 {
+                              fill: #398039;
+                            }
+                            .st6 {
+                              fill: #d74f3f;
+                            }
+                            .st7 {
+                              fill: #d43c89;
+                            }
+                            .st8 {
+                              fill: #b2005f;
+                            }
+                            .st9 {
+                              fill: none;
+                              stroke: #000000;
+                              stroke-width: 3;
+                              stroke-linecap: round;
+                              stroke-linejoin: round;
+                              stroke-miterlimit: 10;
+                            }
+                            .st10 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: none;
+                              stroke: #000000;
+                              stroke-width: 3;
+                              stroke-linecap: round;
+                              stroke-linejoin: round;
+                              stroke-miterlimit: 10;
+                            }
+                            .st11 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: none;
+                              stroke: #040404;
+                              stroke-width: 3;
+                              stroke-linecap: round;
+                              stroke-linejoin: round;
+                              stroke-miterlimit: 10;
+                            }
+                            .st12 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                            }
+                            .st13 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #040404;
+                            }
+                            .st14 {
+                              fill: url(#SVGID_1_);
+                            }
+                            .st15 {
+                              fill: url(#SVGID_2_);
+                            }
+                            .st16 {
+                              fill: url(#SVGID_3_);
+                            }
+                            .st17 {
+                              fill: url(#SVGID_4_);
+                            }
+                            .st18 {
+                              fill: url(#SVGID_5_);
+                            }
+                            .st19 {
+                              fill: url(#SVGID_6_);
+                            }
+                            .st20 {
+                              fill: url(#SVGID_7_);
+                            }
+                            .st21 {
+                              fill: url(#SVGID_8_);
+                            }
+                            .st22 {
+                              fill: url(#SVGID_9_);
+                            }
+                            .st23 {
+                              fill: url(#SVGID_10_);
+                            }
+                            .st24 {
+                              fill: url(#SVGID_11_);
+                            }
+                            .st25 {
+                              fill: url(#SVGID_12_);
+                            }
+                            .st26 {
+                              fill: url(#SVGID_13_);
+                            }
+                            .st27 {
+                              fill: url(#SVGID_14_);
+                            }
+                            .st28 {
+                              fill: url(#SVGID_15_);
+                            }
+                            .st29 {
+                              fill: url(#SVGID_16_);
+                            }
+                            .st30 {
+                              fill: url(#SVGID_17_);
+                            }
+                            .st31 {
+                              fill: url(#SVGID_18_);
+                            }
+                            .st32 {
+                              fill: url(#SVGID_19_);
+                            }
+                            .st33 {
+                              fill: url(#SVGID_20_);
+                            }
+                            .st34 {
+                              fill: url(#SVGID_21_);
+                            }
+                            .st35 {
+                              fill: url(#SVGID_22_);
+                            }
+                            .st36 {
+                              fill: url(#SVGID_23_);
+                            }
+                            .st37 {
+                              fill: url(#SVGID_24_);
+                            }
+                            .st38 {
+                              fill: url(#SVGID_25_);
+                            }
+                            .st39 {
+                              fill: url(#SVGID_26_);
+                            }
+                            .st40 {
+                              fill: url(#SVGID_27_);
+                            }
+                            .st41 {
+                              fill: url(#SVGID_28_);
+                            }
+                            .st42 {
+                              fill: url(#SVGID_29_);
+                            }
+                            .st43 {
+                              fill: url(#SVGID_30_);
+                            }
+                            .st44 {
+                              fill: url(#SVGID_31_);
+                            }
+                            .st45 {
+                              fill: url(#SVGID_32_);
+                            }
+                            .st46 {
+                              fill: url(#SVGID_33_);
+                            }
+                            .st47 {
+                              fill: url(#SVGID_34_);
+                            }
+                            .st48 {
+                              fill: url(#SVGID_35_);
+                            }
+                            .st49 {
+                              fill: url(#SVGID_36_);
+                            }
+                            .st50 {
+                              fill: url(#SVGID_37_);
+                            }
+                            .st51 {
+                              fill: url(#SVGID_38_);
+                            }
+                            .st52 {
+                              fill: url(#SVGID_39_);
+                            }
+                            .st53 {
+                              fill: url(#SVGID_40_);
+                            }
+                            .st54 {
+                              fill: url(#SVGID_41_);
+                            }
+                            .st55 {
+                              fill: url(#SVGID_42_);
+                            }
+                            .st56 {
+                              fill: url(#SVGID_43_);
+                            }
+                            .st57 {
+                              fill: url(#SVGID_44_);
+                            }
+                            .st58 {
+                              fill: url(#SVGID_45_);
+                            }
+                            .st59 {
+                              fill: #040404;
+                            }
+                            .st60 {
+                              fill: url(#SVGID_46_);
+                            }
+                            .st61 {
+                              fill: url(#SVGID_47_);
+                            }
+                            .st62 {
+                              fill: url(#SVGID_48_);
+                            }
+                            .st63 {
+                              fill: url(#SVGID_49_);
+                            }
+                            .st64 {
+                              fill: url(#SVGID_50_);
+                            }
+                            .st65 {
+                              fill: url(#SVGID_51_);
+                            }
+                            .st66 {
+                              fill: url(#SVGID_52_);
+                            }
+                            .st67 {
+                              fill: url(#SVGID_53_);
+                            }
+                            .st68 {
+                              fill: url(#SVGID_54_);
+                            }
+                            .st69 {
+                              fill: url(#SVGID_55_);
+                            }
+                            .st70 {
+                              fill: url(#SVGID_56_);
+                            }
+                            .st71 {
+                              fill: url(#SVGID_57_);
+                            }
+                            .st72 {
+                              fill: url(#SVGID_58_);
+                            }
+                            .st73 {
+                              fill: url(#SVGID_59_);
+                            }
+                            .st74 {
+                              fill: url(#SVGID_60_);
+                            }
+                            .st75 {
+                              fill: url(#SVGID_61_);
+                            }
+                            .st76 {
+                              fill: url(#SVGID_62_);
+                            }
+                            .st77 {
+                              fill: none;
+                              stroke: #000000;
+                              stroke-width: 3;
+                              stroke-miterlimit: 10;
+                            }
+                            .st78 {
+                              fill: none;
+                              stroke: #ffffff;
+                              stroke-miterlimit: 10;
+                            }
+                            .st79 {
+                              fill: #4bc9ff;
+                            }
+                            .st80 {
+                              fill: #5500dd;
+                            }
+                            .st81 {
+                              fill: #ff3a00;
+                            }
+                            .st82 {
+                              fill: #e6162d;
+                            }
+                            .st83 {
+                              fill: #f1f1f1;
+                            }
+                            .st84 {
+                              fill: #ff9933;
+                            }
+                            .st85 {
+                              fill: #b92b27;
+                            }
+                            .st86 {
+                              fill: #00aced;
+                            }
+                            .st87 {
+                              fill: #bd2125;
+                            }
+                            .st88 {
+                              fill: #1877f2;
+                            }
+                            .st89 {
+                              fill: #fff;
+                            }
+                            .st90 {
+                              fill: #ce3056;
+                            }
+                            .st91 {
+                              fill: #5bb381;
+                            }
+                            .st92 {
+                              fill: #61c3ec;
+                            }
+                            .st93 {
+                              fill: #e4b34b;
+                            }
+                            .st94 {
+                              fill: #181ef2;
+                            }
+                            .st95 {
+                              fill: #ff0000;
+                            }
+                            .st96 {
+                              fill: #fe466c;
+                            }
+                            .st97 {
+                              fill: #fa4778;
+                            }
+                            .st98 {
+                              fill: #ff7700;
+                            }
+                            .st99 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #1f6bf6;
+                            }
+                            .st100 {
+                              fill: #520094;
+                            }
+                            .st101 {
+                              fill: #4477e8;
+                            }
+                            .st102 {
+                              fill: #3d1d1c;
+                            }
+                            .st103 {
+                              fill: #ffe812;
+                            }
+                            .st104 {
+                              fill: #344356;
+                            }
+                            .st105 {
+                              fill: #00cc76;
+                            }
+                            .st106 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #345e90;
+                            }
+                            .st107 {
+                              fill: #1f65d8;
+                            }
+                            .st108 {
+                              fill: #eb3587;
+                            }
+                            .st109 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #603a88;
+                            }
+                            .st110 {
+                              fill: #e3ce99;
+                            }
+                            .st111 {
+                              fill: #783af9;
+                            }
+                            .st112 {
+                              fill: #ff515e;
+                            }
+                            .st113 {
+                              fill: #ff4906;
+                            }
+                            .st114 {
+                              fill: #503227;
+                            }
+                            .st115 {
+                              fill: #4c7bd9;
+                            }
+                            .st116 {
+                              fill: #69c9d0;
+                            }
+                            .st117 {
+                              fill: #1b92d1;
+                            }
+                            .st118 {
+                              fill: #eb4f4a;
+                            }
+                            .st119 {
+                              fill: #513728;
+                            }
+                            .st120 {
+                              fill: #ff6600;
+                            }
+                            .st121 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #b61438;
+                            }
+                            .st122 {
+                              fill: #fffc00;
+                            }
+                            .st123 {
+                              fill: #141414;
+                            }
+                            .st124 {
+                              fill: #94d137;
+                            }
+                            .st125 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #f1f1f1;
+                            }
+                            .st126 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #66e066;
+                            }
+                            .st127 {
+                              fill: #2d8cff;
+                            }
+                            .st128 {
+                              fill: #f1a300;
+                            }
+                            .st129 {
+                              fill: #4ba2f2;
+                            }
+                            .st130 {
+                              fill: #1a5099;
+                            }
+                            .st131 {
+                              fill: #ee6060;
+                            }
+                            .st132 {
+                              fill-rule: evenodd;
+                              clip-rule: evenodd;
+                              fill: #f48120;
+                            }
+                            .st133 {
+                              fill: #222222;
+                            }
+                            .st134 {
+                              fill: url(#SVGID_63_);
+                            }
+                            .st135 {
+                              fill: #0077b5;
+                            }
+                            .st136 {
+                              fill: #ffcc00;
+                            }
+                            .st137 {
+                              fill: #eb3352;
+                            }
+                            .st138 {
+                              fill: #f9d265;
+                            }
+                            .st139 {
+                              fill: #f5b955;
+                            }
+                            .st140 {
+                              fill: #dd2a7b;
+                            }
+                            .st141 {
+                              fill: #66e066;
+                            }
+                            .st142 {
+                              fill: #eb4e00;
+                            }
+                            .st143 {
+                              fill: #ffc794;
+                            }
+                            .st144 {
+                              fill: #b5332a;
+                            }
+                            .st145 {
+                              fill: #4e85eb;
+                            }
+                            .st146 {
+                              fill: #58a45c;
+                            }
+                            .st147 {
+                              fill: #f2bc42;
+                            }
+                            .st148 {
+                              fill: #d85040;
+                            }
+                            .st149 {
+                              fill: #464eb8;
+                            }
+                            .st150 {
+                              fill: #7b83eb;
+                            }
+                          </style> <g id="Layer_1"></g>
+                          <g id="Layer_2">
+                            <g>
+                              <g>
+                                <path
+                                  class="st89"
+                                  d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
+                                ></path>
+                              </g>
+                            </g>
+                          </g>
+                        </g></svg
+                      >
+                    </button>
+                  </form>
+
+                  <form method="post" action="?/oauth2">
+                    <input class="hidden" name="provider" value="github" />
+                    <button
+                      on:click={() => (oauthLoading = !oauthLoading)}
+                      on:mouseenter={handleHoverGithub}
+                      on:mouseleave={handleHoverGithub}
+                      class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+                    >
+                      <svg
+                        class="{isHoveredGithub
+                          ? 'shake-logo'
+                          : ''}  w-7 h-7 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="white"
+                          d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+                        /></svg
+                      >
+                    </button>
+                  </form>
+                </div>
+
+                <p class="pb-1 text-xs text-gray-300 text-center">
+                  By registering you agree to stocknear's
+                  <a href="/terms-of-use" class="text-blue-400 hover:underline"
+                    >Terms of Use</a
+                  >
+                  and acknowledge that you've read our
+                  <a
+                    href="/privacy-policy"
+                    class="text-blue-400 hover:underline">Privacy Policy</a
+                  >.
+                </p>
+
+                <p
+                  class="pt-3 pb-1 text-sm w-full max-w-lg text-gray-300 flex justify-center items-center"
+                >
+                  You already have an account?
+                  <label
+                    on:click={() => (displaySection = "login")}
+                    class="text-blue-400 hover:underline ml-1 cursor-pointer"
+                    >Sign in</label
+                  >
+                </p>
+              </form>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
 {/if}
 
-
 <!--End Drawer Sidewise for mobile-->
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    
 <style>
-    
-.shake-logo{
+  .shake-logo {
     animation-name: shake;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
-}
+  }
 
-
-@keyframes shake {
-    0% { transform: rotate(0deg); }
-    25% { transform: rotate(10deg); }
-    50% { transform: rotate(0deg); }
-    75% { transform: rotate(-10deg); }
-    100% { transform: rotate(0deg); }
-}
-    
-    </style>
\ No newline at end of file
+  @keyframes shake {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    75% {
+      transform: rotate(-10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+</style>
diff --git a/src/lib/components/MobileCommentEditor.svelte b/src/lib/components/MobileCommentEditor.svelte
index 72355936..e58c5c35 100644
--- a/src/lib/components/MobileCommentEditor.svelte
+++ b/src/lib/components/MobileCommentEditor.svelte
@@ -1,56 +1,49 @@
-<script lang='ts'>
-  import { onMount, onDestroy } from 'svelte';
-  import toast from 'svelte-french-toast';
-  import {commentAdded} from '$lib/store';
-  import { pb } from '$lib/pocketbase';
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import toast from "svelte-french-toast";
+  import { commentAdded } from "$lib/store";
+  import { pb } from "$lib/pocketbase";
 
- export let data;
- export let postId = '';
+  export let data;
+  export let postId = "";
 
-let post = data?.getOnePost;
+  let post = data?.getOnePost;
 
-let imageId = 'image-input';
+  let imageId = "image-input";
 
-let expandField = false;
+  let expandField = false;
 
   //let characterCount = 0;
 
+  let inputValue = "";
+  let imageInput = "";
+  let imageComment;
 
+  const showPreview = (event) => {
+    const target = event.target;
+    const files = target.files;
+    if (files.length > 0) {
+      const src = URL.createObjectURL(files[0]);
+      const preview = document.getElementById("image-preview");
+      preview.src = src;
+    }
+  };
 
-let inputValue = '';
-let imageInput = '';
-let imageComment;
-
-
-const showPreview = (event) => {
-  const target = event.target;
-  const files = target.files;
-  if (files.length > 0) {
-  const src = URL.createObjectURL(files[0]);
-  const preview = document.getElementById('image-preview');
-  preview.src = src;
-
-  }
-};
-
-
-
-const createComment = async (event) => {
+  const createComment = async (event) => {
     event.preventDefault(); // prevent the default form submission behavior
     let output;
     let newComment;
     const userId = data?.user?.id;
 
-  if(inputValue.length !== 0)
-    {
-    const postData = {
-      'comment': inputValue,
-      'post': postId,
-      'image': imageInput.length !== 0 ? imageInput[0] : '',
-      'user': userId
-    }
+    if (inputValue.length !== 0) {
+      const postData = {
+        comment: inputValue,
+        post: postId,
+        image: imageInput.length !== 0 ? imageInput[0] : "",
+        user: userId,
+      };
 
-    /*
+      /*
     const response = await fetch(fastifyURL+'/create-comment', {
       method: 'POST',
       headers: {
@@ -62,313 +55,324 @@ const createComment = async (event) => {
       output = await response.json()
     }
     */
-   //Create comment in User Browser because i need to learn how to transfer images.
-    try {
-      newComment = await pb.collection('comments').create(postData);
-    
-      newComment = await pb.collection("comments").getOne(newComment?.id, {
-          expand: `user`})
+      //Create comment in User Browser because i need to learn how to transfer images.
+      try {
+        newComment = await pb.collection("comments").create(postData);
 
+        newComment = await pb.collection("comments").getOne(newComment?.id, {
+          expand: `user`,
+        });
 
-      //User always upvotes their post in the intial state
-      await pb.collection("comments").update(newComment.id, {
-        "vote+": 1,
-      })
+        //User always upvotes their post in the intial state
+        await pb.collection("comments").update(newComment.id, {
+          "vote+": 1,
+        });
 
-      const opPost = await pb.collection('posts').getOne(postId)
-      //create new record for notifications collections
-      if (userId !== opPost?.user)
-      {
+        const opPost = await pb.collection("posts").getOne(postId);
+        //create new record for notifications collections
+        if (userId !== opPost?.user) {
           let formDataNotifications = new FormData();
-          formDataNotifications.append('opUser', opPost?.user);
-          formDataNotifications.append('user', userId)
-          formDataNotifications.append('post', postId);
-          formDataNotifications.append('comment', newComment?.id)
-          formDataNotifications.append('notifyType', 'comment');
-  
-          await pb.collection('notifications').create(formDataNotifications);
+          formDataNotifications.append("opUser", opPost?.user);
+          formDataNotifications.append("user", userId);
+          formDataNotifications.append("post", postId);
+          formDataNotifications.append("comment", newComment?.id);
+          formDataNotifications.append("notifyType", "comment");
+
+          await pb.collection("notifications").create(formDataNotifications);
+        }
+        output = "success";
+      } catch (e) {
+        console.log(e);
+        output = "failure";
       }
-      output = 'success'
 
-  }
-  catch(e) {
-      console.log(e);
-      output = 'failure'
-  }
-   
-  if (output === 'success') {
-      toast.success('Commented successfully', {
-      style: 'border-radius: 200px; background: #333; color: #fff;'
-      });
+      if (output === "success") {
+        toast.success("Commented successfully", {
+          style: "border-radius: 200px; background: #333; color: #fff;",
+        });
 
-      $commentAdded = newComment;
+        $commentAdded = newComment;
 
-      //console.log("comment added: ", $commentAdded)
-      inputValue = '';
-      imageInput = '';
+        //console.log("comment added: ", $commentAdded)
+        inputValue = "";
+        imageInput = "";
 
-      handleCancel()
-
-
-  } 
-  else {
-    toast.error('Something went wrong. Please try again...', {
-      style: 'border-radius: 200px; background: #333; color: #fff;'
-      });
-  }
-
-  }
-};
-
-
-
-function handleInput(event) {
-  inputValue = event.target.value;
-
-  const textarea = event.target;
-  textarea.style.height = 'auto';
-  textarea.style.height = Math.min(textarea.scrollHeight, 140) + 'px';
-}
-
-function handleCancel() {
-if (editor)
-{
-  editor.innerHTML = '';
-}
-inputValue = '';
-imageInput = '';
-const closePopup = document.getElementById("mobileTextEditorModal");
-closePopup?.dispatchEvent(new MouseEvent('click'))
-        
-const textarea = document.querySelector('textarea');
-textarea.style.height = '36px'; // 48px are h-12 in tailwindcss
-
-}
-
-function handleImageInput(event) {
-  imageInput = event.target.files;
-
-  expandField=true;
-}
-
-
-
-const toolbarOptions = {
-        container: [
-            ['bold', 'italic', 'underline','strike'],
-            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-            ['link'],
-            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-        ],
+        handleCancel();
+      } else {
+        toast.error("Something went wrong. Please try again...", {
+          style: "border-radius: 200px; background: #333; color: #fff;",
+        });
+      }
     }
+  };
 
+  function handleInput(event) {
+    inputValue = event.target.value;
 
-	let quill;
+    const textarea = event.target;
+    textarea.style.height = "auto";
+    textarea.style.height = Math.min(textarea.scrollHeight, 140) + "px";
+  }
+
+  function handleCancel() {
+    if (editor) {
+      editor.innerHTML = "";
+    }
+    inputValue = "";
+    imageInput = "";
+    const closePopup = document.getElementById("mobileTextEditorModal");
+    closePopup?.dispatchEvent(new MouseEvent("click"));
+
+    const textarea = document.querySelector("textarea");
+    textarea.style.height = "36px"; // 48px are h-12 in tailwindcss
+  }
+
+  function handleImageInput(event) {
+    imageInput = event.target.files;
+
+    expandField = true;
+  }
+
+  const toolbarOptions = {
+    container: [
+      ["bold", "italic", "underline", "strike"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link"],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    ],
+  };
+
+  let quill;
   let editor;
   const regex = /^(\s*<p><br><\/p>\s*)*$/;
 
-    let loadingEditor = false;
+  let loadingEditor = false;
 
-    onMount(async () => {
+  onMount(async () => {
+    const { default: Quill } = await import("quill");
 
-        const { default: Quill } = await import('quill');
+    quill = new Quill(".quill-editor", {
+      modules: {
+        toolbar: toolbarOptions,
+      },
+      theme: "snow",
+      placeholder: "Leave a comment...",
+      keepFocus: true,
+    });
 
-        quill = new Quill('.quill-editor', {
-            modules: {
-            toolbar: toolbarOptions,
-            },
-            theme: 'snow',
-            placeholder: "Leave a comment...",
-            keepFocus: true,
-        });
+    quill.on("text-change", function () {
+      editor = quill.root;
+      // Add text-4xl class to all h1 elements
+      editor.querySelectorAll("h1").forEach((h1) => {
+        h1.classList.add("text-4xl");
+      });
+      editor.querySelectorAll("h2").forEach((h2) => {
+        h2.classList.add("text-3xl");
+      });
+      editor.querySelectorAll("h3").forEach((h3) => {
+        h3.classList.add("text-xl");
+      });
+      editor.querySelectorAll("h4").forEach((h4) => {
+        h4.classList.add("text-md");
+      });
+      editor.querySelectorAll("h5").forEach((h5) => {
+        h5.classList.add("text-sm");
+      });
+      editor.querySelectorAll("h6").forEach((h6) => {
+        h6.classList.add("text-xs");
+      });
 
+      editor.querySelectorAll("a").forEach((a) => {
+        a.classList.add("text-blue-400", "hover:text-white", "underline");
+      });
 
-        quill.on('text-change', function() {
-            editor = quill.root;
-            // Add text-4xl class to all h1 elements
-            editor.querySelectorAll('h1').forEach((h1) => {
-                h1.classList.add('text-4xl');
-            });
-            editor.querySelectorAll('h2').forEach((h2) => {
-                h2.classList.add('text-3xl');
-            });
-            editor.querySelectorAll('h3').forEach((h3) => {
-                h3.classList.add('text-xl');
-            });
-            editor.querySelectorAll('h4').forEach((h4) => {
-                h4.classList.add('text-md');
-            });
-            editor.querySelectorAll('h5').forEach((h5) => {
-                h5.classList.add('text-sm');
-            });
-            editor.querySelectorAll('h6').forEach((h6) => {
-                h6.classList.add('text-xs');
-            });
+      editor.querySelectorAll("ol").forEach((ol) => {
+        ol.classList.add("list-decimal", "ml-10", "text-sm");
+      });
 
-            editor.querySelectorAll('a').forEach((a) => {
-                a.classList.add('text-blue-400', 'hover:text-white','underline');
-            });
+      editor.querySelectorAll("ul").forEach((ul) => {
+        ul.classList.add("list-disc", "ml-10", "text-sm");
+      });
 
-            editor.querySelectorAll('ol').forEach((ol) => {
-                ol.classList.add('list-decimal', 'ml-10','text-sm');
-            });
-
-            editor.querySelectorAll('ul').forEach((ul) => {
-                ul.classList.add('list-disc', 'ml-10','text-sm');
-            });
-
-            
-            /*
+      /*
             editor.querySelectorAll('pre').forEach((pre) => {
                 pre.classList.add('bg-[#23241F]', 'w-auto','h-auto','max-w-6xl','breaks-all');
             });
             */
 
-            const contents = editor.innerHTML;
-            inputValue = contents;
+      const contents = editor.innerHTML;
+      inputValue = contents;
 
-            console.log(inputValue)
+      console.log(inputValue);
 
-            if (regex?.test(inputValue)) {
-              editor.innerHTML = '';
-              inputValue = '';
-            }
+      if (regex?.test(inputValue)) {
+        editor.innerHTML = "";
+        inputValue = "";
+      }
 
-            //console.log(inputValue)
+      //console.log(inputValue)
 
-            // Force Svelte to update the DOM
-            $: {}
-        });
-
-        loadingEditor = true;
+      // Force Svelte to update the DOM
+      $: {
+      }
     });
 
+    loadingEditor = true;
+  });
 
-onDestroy(() => {
+  onDestroy(() => {
     if (quill) {
-      quill.off('text-change');
+      quill.off("text-change");
       quill = null;
     }
   });
 
-
-
-1
+  1;
 </script>
 
 <svelte:head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+  />
 </svelte:head>
 
-
 <div class="drawer drawer-end overflow-hidden" style="z-index: 9999;">
-  <input id="mobileTextEditorModal" type="checkbox" class="drawer-toggle"/>
-    <div class="drawer-side overflow-hidden">
-      <div class="rounded-xl bg-[#000] min-h-screen w-screen pb-20 overflow-y-auto overflow-hidden">
-    <!--
+  <input id="mobileTextEditorModal" type="checkbox" class="drawer-toggle" />
+  <div class="drawer-side overflow-hidden">
+    <div
+      class="rounded-xl bg-[#000] min-h-screen w-screen pb-20 overflow-y-auto overflow-hidden"
+    >
+      <!--
     <h1 class="text-white sm:hidden font-medium text-xl mt-10 pl-2">
       {@html post?.title}
     </h1>
     -->
 
-    <h1 class="text-white text-lg pl-7 pt-16">
-      Share your opinion 
-    </h1>
-    
-    <!--Start Quill Editor-->
-    <div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7">
-      <div class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white">
+      <h1 class="text-white text-lg pl-7 pt-16">Share your opinion</h1>
+
+      <!--Start Quill Editor-->
+      <div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7">
+        <div
+          class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"
+        >
           <select class="ql-header" aria-label="Header" title="Header">
             <option selected></option>
           </select>
+        </div>
       </div>
-    </div>
 
-
-  <textarea placeholder="Loading editor..." class="{loadingEditor ? 'hidden' : ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"></textarea>
-    <!--End Quill Editor-->
-    
+      <textarea
+        placeholder="Loading editor..."
+        class="{loadingEditor
+          ? 'hidden'
+          : ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"
+      ></textarea>
+      <!--End Quill Editor-->
 
       <textarea
         class="hidden"
         type="text"
         value={inputValue}
         on:input={handleInput}
-        />
+      />
 
-    <div class="flex flex-row justify-start mt-4 pb-16 pl-7 pr-7">
-     
-      <div class="relative">
+      <div class="flex flex-row justify-start mt-4 pb-16 pl-7 pr-7">
+        <div class="relative">
+          <label
+            for={imageId}
+            class="{imageInput.length !== 0
+              ? 'hidden'
+              : ''} inline-flex mr-auto items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer"
+          >
+            <svg
+              class="w-5 h-5 inline-block"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g><g id="SVGRepo_iconCarrier">
+                <path
+                  opacity="0.4"
+                  d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z"
+                  fill="#A6ADBB"
+                ></path>
+                <path
+                  d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z"
+                  fill="#E5E7EB"
+                ></path>
+              </g></svg
+            >
 
-          
-      <label for={imageId} class="{imageInput.length !== 0 ? 'hidden' : ''} inline-flex mr-auto items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer">
-        
-            
-      <svg class="w-5 h-5 inline-block"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="#A6ADBB" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>
-      
-        <input class="hidden rounded text-gray-200"
-          type="file"
-          id={imageId}
-          name={imageId}
-          on:input={handleImageInput}
-          on:change={showPreview}
-         />
-      </label>
+            <input
+              class="hidden rounded text-gray-200"
+              type="file"
+              id={imageId}
+              name={imageId}
+              on:input={handleImageInput}
+              on:change={showPreview}
+            />
+          </label>
 
-      {#if imageInput.length !== 0}
-      <div class="ml-2">
-        <label on:click={() => imageInput = ''} class="btn btn-xs btn-circle bg-red-600 absolute -top-2 -right-2">
-          ✕
-        </label>
-        <img class="object-contain w-10 h-10 mx-auto rounded"
-             alt="Image preview"
-             id="image-preview" />
-      </div>
-      
-      {/if}
-
-
-    </div>
-      <div class="relative flex justify-end items-center ml-auto mr-2">
-      <label on:click={handleCancel} class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3">
-          Cancel
-      </label>
-        <label on:click={createComment} class="inline-flex justify-end items-center bg-purple-600 {inputValue.length !== 0 ? 'opacity-100 cursor-pointer' : 'opacity-60'}  py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300">
+          {#if imageInput.length !== 0}
+            <div class="ml-2">
+              <label
+                on:click={() => (imageInput = "")}
+                class="btn btn-xs btn-circle bg-red-600 absolute -top-2 -right-2"
+              >
+                ✕
+              </label>
+              <img
+                class="object-contain w-10 h-10 mx-auto rounded"
+                alt="Image preview"
+                id="image-preview"
+              />
+            </div>
+          {/if}
+        </div>
+        <div class="relative flex justify-end items-center ml-auto mr-2">
+          <label
+            on:click={handleCancel}
+            class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3"
+          >
+            Cancel
+          </label>
+          <label
+            on:click={createComment}
+            class="inline-flex justify-end items-center bg-[#fff] {inputValue.length !==
+            0
+              ? 'opacity-100 cursor-pointer'
+              : 'opacity-60'}  py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300"
+          >
             Post
-        </label>
-
-      </div>
-      
+          </label>
+        </div>
       </div>
 
-      
-
-  
-
-    <label on:click={() => handleCancel()} class="absolute left-6 top-4">
-      <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-        <span class="text-white text-md font-medium">
-          Return
-        </span>
-    </label>
-        
-
+      <label on:click={() => handleCancel()} class="absolute left-6 top-4">
+        <svg
+          class="w-6 h-6 inline-block mb-0.5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="#fff"
+            d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
+          /></svg
+        >
+        <span class="text-white text-md font-medium"> Return </span>
+      </label>
+    </div>
   </div>
-
-  
 </div>
-</div>
-
-
-
-
-
 
 <style>
-	@import '/src/lib/assets/style_quill.css';
+  @import "/src/lib/assets/style_quill.css";
 
-    .quill-editor, textarea {
-        touch-action: none; /* or 'none' if manipulation doesn't work */
-    }
-	
-</style>
\ No newline at end of file
+  .quill-editor,
+  textarea {
+    touch-action: none; /* or 'none' if manipulation doesn't work */
+  }
+</style>
diff --git a/src/lib/components/News.svelte b/src/lib/components/News.svelte
index 89cbe93e..a533807f 100644
--- a/src/lib/components/News.svelte
+++ b/src/lib/components/News.svelte
@@ -153,7 +153,7 @@
       {#if newsList?.length !== rawData?.length}
         <label
           on:click={loadMoreData}
-          class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-purple-700 bg-purple-600"
+          class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-gray-300 bg-[#fff]"
         >
           Load More News
         </label>
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index ff24a825..56a5065c 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -257,7 +257,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/lib/components/Pricing.svelte b/src/lib/components/Pricing.svelte
index 9451a8dc..8dbfc956 100644
--- a/src/lib/components/Pricing.svelte
+++ b/src/lib/components/Pricing.svelte
@@ -66,9 +66,7 @@
           <span class="text-sm font-medium text-white text-opacity-[0.6]">
             Pay Yearly
           </span>
-          <span class="text-[#FBCE3C] text-sm font-semibold">
-            Save up 16%
-          </span>
+          <span class="text-[#fff] text-sm font-semibold"> Save up 16% </span>
         </div>
       </div>
     </div>
@@ -217,7 +215,7 @@
         {#if !data?.user}
           <label
             for="userLogin"
-            class="py-3 cursor-pointer rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
+            class="py-3 cursor-pointer rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
           >
             Get Sign In
             <span
@@ -537,7 +535,7 @@
         </div>
         <label
           for={"userLogin"}
-          class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
+          class="cursor-pointer py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
         >
           30 Days Free Trial
           <span
@@ -616,19 +614,19 @@
                 </div>  
 
                 {#if data?.user?.tier === 'Pro' && !data?.user?.freeTrial}
-                <a class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group" href="#">
+                <a class="py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group" href="#">
                     Active Plan
                </a>
                {:else if data?.user?.tier === 'Pro' && data?.user?.freeTrial === true}
 
-                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
+                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
                     Get Lifetime Access
                    <span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
                    </span>
                 </label>
                 {:else}
-                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
+                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
                     Get Lifetime Access
                    <span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
                        <svg class="w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
diff --git a/src/lib/components/RuleControl.svelte b/src/lib/components/RuleControl.svelte
index cf1dc006..94bb96ac 100644
--- a/src/lib/components/RuleControl.svelte
+++ b/src/lib/components/RuleControl.svelte
@@ -1,24 +1,24 @@
-<script lang='ts'>
-  import { createEventDispatcher } from 'svelte';
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
 
   export let ruleName;
-  export let title
+  export let title;
   export let value;
   export let min;
   export let max;
   export let step;
-  export let unit = '';
+  export let unit = "";
   export let condition;
 
   const dispatch = createEventDispatcher();
 
   function changeRuleCondition(newCondition) {
-    condition = newCondition
-    dispatch('changeCondition', { rule: ruleName, condition: newCondition });
+    condition = newCondition;
+    dispatch("changeCondition", { rule: ruleName, condition: newCondition });
   }
 
   function changeValue(val) {
-    dispatch('changeValue', { rule: ruleName, value: val });
+    dispatch("changeValue", { rule: ruleName, value: val });
   }
 </script>
 
@@ -27,12 +27,12 @@
   {title?.replace('[%]','')} {condition} {value} {unit}
 
   <label on:click={() => changeRuleCondition('under')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
-    <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
+    <input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2" 
            checked={condition === 'under'} name={ruleName} />
     <span class="label-text text-white">Under</span> 
   </label>
   <label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
-    <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
+    <input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2" 
            checked={condition === 'over'} name={ruleName} />
     <span class="label-text text-white">Over</span> 
   </label>
@@ -43,64 +43,117 @@
 </div>
 -->
 
-
- <!--Start Added Rules-->
-<div class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-default">
+<!--Start Added Rules-->
+<div
+  class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-default"
+>
   <div class="text-white text-[1rem]">
-      {title?.replace('[%]','')}
-  </div> 
+    {title?.replace("[%]", "")}
+  </div>
   <div class="flex items-center">
-      <button class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-none" title="Remove filter">
-          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="CurrentColor" style="max-width:40px">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+    <button
+      class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-none"
+      title="Remove filter"
+    >
+      <svg
+        class="w-5 h-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="CurrentColor"
+        style="max-width:40px"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+        ></path>
+      </svg>
+    </button>
+    <div class="relative inline-block text-left">
+      <div class="dropdown dropdown-end">
+        <button
+          tabindex="0"
+          class="bg-[#000] h-[33px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate"
+        >
+          <span class="truncate ml-2">
+            {#if value === "" || condition === ""}
+              Any
+            {:else}
+              {condition} {value}{unit}
+            {/if}
+          </span>
+          <svg
+            class=" ml-1 h-6 w-6 xs:ml-2 inline-block"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            style="max-width:40px"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            ></path>
           </svg>
-      </button> 
-      <div class="relative inline-block text-left">
-        <div class="dropdown dropdown-end">
-          <button tabindex="0" class="bg-[#000] h-[33px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate">
-              <span class="truncate ml-2">
-                {#if value === '' || condition === ''} 
-                Any
-                {:else}
-                {condition} {value}{unit}
-                {/if}
-              </span> 
-              <svg class=" ml-1 h-6 w-6 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-              </svg>
-          </button> 
-          
-          <div class="dropdown-content absolute z-40 mt-2 rounded-md bg-[#181C1F] py-1 shadow-lg border border-gray-600 focus:outline-none" tabindex="0" role="menu">
+        </button>
 
-            <div class="select-none space-y-1 p-1 pb-2 pr-2 text-sm">
-                <div class="flex items-center justify-start gap-x-1">
-                    <div class="relative inline-block flex flex-row items-center justify-center m-auto">
-                        <label on:click={() => changeRuleCondition('under')} class="cursor-pointer flex flex-row mr-2 justify-center items-center">
-                          <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
-                               checked={condition === 'under'} name={ruleName} />
-                          <span class="label-text text-white">Under</span> 
-                        </label>
-                        <label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
-                          <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
-                            checked={condition === 'over'} name={ruleName} />
-                          <span class="label-text text-white">Over</span> 
-                        </label>
-                    </div>
-                </div> 
-            </div> 
-
-            <div class="thin-scrollbar dark:styled-scrollbar dark:right-scrollbar max-h-[250px] overflow-y-auto overflow-x-hidden overscroll-contain border-t border-gray-600 
-                dark:border-dark-500 xl:max-h-[297px]">
-                {#each step as newValue}
-                  <button on:click={() => changeValue(newValue)} class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 sm:hover:bg-gray-100 sm:hover:text-gray-900 
-                                  focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
-                    {condition} {newValue}{unit}
-                  </button>
-                {/each}
+        <div
+          class="dropdown-content absolute z-40 mt-2 rounded-md bg-[#181C1F] py-1 shadow-lg border border-gray-600 focus:outline-none"
+          tabindex="0"
+          role="menu"
+        >
+          <div class="select-none space-y-1 p-1 pb-2 pr-2 text-sm">
+            <div class="flex items-center justify-start gap-x-1">
+              <div
+                class="relative inline-block flex flex-row items-center justify-center m-auto"
+              >
+                <label
+                  on:click={() => changeRuleCondition("under")}
+                  class="cursor-pointer flex flex-row mr-2 justify-center items-center"
+                >
+                  <input
+                    type="radio"
+                    class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                    checked={condition === "under"}
+                    name={ruleName}
+                  />
+                  <span class="label-text text-white">Under</span>
+                </label>
+                <label
+                  on:click={() => changeRuleCondition("over")}
+                  class="cursor-pointer flex flex-row ml-2 justify-center items-center"
+                >
+                  <input
+                    type="radio"
+                    class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
+                    checked={condition === "over"}
+                    name={ruleName}
+                  />
+                  <span class="label-text text-white">Over</span>
+                </label>
+              </div>
             </div>
           </div>
+
+          <div
+            class="thin-scrollbar dark:styled-scrollbar dark:right-scrollbar max-h-[250px] overflow-y-auto overflow-x-hidden overscroll-contain border-t border-gray-600
+                dark:border-dark-500 xl:max-h-[297px]"
+          >
+            {#each step as newValue}
+              <button
+                on:click={() => changeValue(newValue)}
+                class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 sm:hover:bg-gray-100 sm:hover:text-gray-900
+                                  focus:bg-blue-100 focus:text-gray-900 focus:outline-none"
+              >
+                {condition}
+                {newValue}{unit}
+              </button>
+            {/each}
+          </div>
         </div>
       </div>
+    </div>
   </div>
 </div>
-<!--End Added Rules-->
\ No newline at end of file
+<!--End Added Rules-->
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index f404b58e..6ec02ed9 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -85,7 +85,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index 0c907bb5..0fdcaaf0 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -242,7 +242,7 @@
 
         <a
           href={`/stocks/${$stockTicker}/forecast/analyst`}
-          class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-bold text-white hover:bg-purple-700 bg-purple-600 transition duration-100"
+          class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
         >
           Stock Forecasts
         </a>
diff --git a/src/lib/components/Swap.svelte b/src/lib/components/Swap.svelte
index c5bfa968..51af176e 100644
--- a/src/lib/components/Swap.svelte
+++ b/src/lib/components/Swap.svelte
@@ -146,7 +146,7 @@
           data: dates?.map((date, index) => [date, notionalQuantity[index]]),
           yAxisIndex: 1,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -231,7 +231,7 @@
                   : ''} "
               >
                 {#if activeIdx === i}
-                  <div class="absolute inset-0 rounded-lg bg-purple-600"></div>
+                  <div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
                 {/if}
                 <span
                   class="relative text-sm block font-medium duration-200 text-white"
diff --git a/src/lib/components/TextEditor.svelte b/src/lib/components/TextEditor.svelte
index 6b4ff7fc..f99090a5 100644
--- a/src/lib/components/TextEditor.svelte
+++ b/src/lib/components/TextEditor.svelte
@@ -1,21 +1,23 @@
-<script lang='ts'>
-  import toast from 'svelte-french-toast';
-  import {commentAdded, commentUpdated, replyCommentClicked, editCommentClicked} from '$lib/store';
-
-   export let data;
-   export let postId = '';
-   export let placeholder = 'Leave a comment';
-   export let commentId; //Important for replyComent when clicked Cancel it should close the TextEditor;
-   export let inputValue = '';
-
-
+<script lang="ts">
+  import toast from "svelte-french-toast";
+  import {
+    commentAdded,
+    commentUpdated,
+    replyCommentClicked,
+    editCommentClicked,
+  } from "$lib/store";
 
+  export let data;
+  export let postId = "";
+  export let placeholder = "Leave a comment";
+  export let commentId; //Important for replyComent when clicked Cancel it should close the TextEditor;
+  export let inputValue = "";
 
   let ref;
   let isLoaded = true;
   //let imageId = 'image-input';
   let expandField = commentId?.length !== 0 ? true : false;
-  let imageInput = '';
+  let imageInput = "";
 
   /*
 	const showPreview = (event) => {
@@ -30,146 +32,133 @@
 	};
   */
 
-async function handleComment(event) {
-  if(isLoaded === true && inputValue?.length !== 0)
-  {
-    if($editCommentClicked[commentId]) {
-      toast.promise(
-      updateComment(event),
-      {
-        loading: 'Updating...',
-        success: 'Updated successfully!',
-        error: 'Something went wrong. Please try again...',
-      }, 
-      {
-        style: 'border-radius: 200px; background: #333; color: #fff;',
+  async function handleComment(event) {
+    if (isLoaded === true && inputValue?.length !== 0) {
+      if ($editCommentClicked[commentId]) {
+        toast.promise(
+          updateComment(event),
+          {
+            loading: "Updating...",
+            success: "Updated successfully!",
+            error: "Something went wrong. Please try again...",
+          },
+          {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          },
+        );
+      } else {
+        toast.promise(
+          createComment(event),
+          {
+            loading: "Creating...",
+            success: "Commented successfully!",
+            error: "Something went wrong. Please try again...",
+          },
+          {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          },
+        );
       }
-      );
-    }
-    else {
-      toast.promise(
-      createComment(event),
-      {
-        loading: 'Creating...',
-        success: 'Commented successfully!',
-        error: 'Something went wrong. Please try again...',
-      }, 
-      {
-        style: 'border-radius: 200px; background: #333; color: #fff;',
-      }
-      );
-
     }
+    isLoaded = true;
   }
-isLoaded = true;
-}
 
-
-const createComment = async (event) => {
+  const createComment = async (event) => {
     event.preventDefault(); // prevent the default form submission behavior
     let output;
 
     try {
-      if(isLoaded === true && inputValue?.length !== 0)
-      {
+      if (isLoaded === true && inputValue?.length !== 0) {
         isLoaded = false;
         let formData = new FormData();
 
         if ($replyCommentClicked[commentId]) {
-          formData.append('reply', commentId)
+          formData.append("reply", commentId);
         }
-        formData.append('comment', inputValue)
-        formData.append('post', postId)
-        formData.append('image', imageInput.length !== 0 ? imageInput[0] : '')
-        formData.append('user', data?.user?.id)
+        formData.append("comment", inputValue);
+        formData.append("post", postId);
+        formData.append("image", imageInput.length !== 0 ? imageInput[0] : "");
+        formData.append("user", data?.user?.id);
 
-
-          const response = await fetch('/api/create-comment', {
-          method: 'POST',
+        const response = await fetch("/api/create-comment", {
+          method: "POST",
           body: formData,
-          }); // make a POST request to the server with the FormData object
+        }); // make a POST request to the server with the FormData object
 
-          output = await response?.json()
+        output = await response?.json();
 
+        if (output[0] === "success") {
+          //Weird bug pocketbase says +1 for upvote but when i console.log(output[1]) i get upvote 0
+          //Weird bug pocketbase does not expand correctly alreadyVoted when I create the comment but it works
+          //when i retrieve all comments through the endpoint get-all-comments in fastify.
+          //To circumvent this problem we manually check it again here:
 
-          if (output[0] === 'success') {
-            //Weird bug pocketbase says +1 for upvote but when i console.log(output[1]) i get upvote 0
-            //Weird bug pocketbase does not expand correctly alreadyVoted when I create the comment but it works 
-            //when i retrieve all comments through the endpoint get-all-comments in fastify.
-            //To circumvent this problem we manually check it again here:
+          let newComment = output[1];
 
-            let newComment = output[1];
+          if (newComment?.upvote === 0) {
+            newComment.upvote = 1;
+          }
 
-            if (newComment?.upvote === 0) {
-              newComment.upvote = 1;
-            }
+          if (!newComment?.expand["alreadyVoted(comment)"]) {
+            newComment.expand["alreadyVoted(comment)"] = [];
+          }
 
-            if (!newComment?.expand["alreadyVoted(comment)"]) {
-              newComment.expand["alreadyVoted(comment)"] = [];
-            }
+          const alreadyVotedArray = newComment?.expand["alreadyVoted(comment)"];
+          const hasAlreadyVoted = alreadyVotedArray?.some(
+            (vote) => vote.type === "upvote" && vote.user === newComment?.user,
+          );
 
-            const alreadyVotedArray = newComment?.expand["alreadyVoted(comment)"];
-            const hasAlreadyVoted = alreadyVotedArray?.some(vote => vote.type === 'upvote' && vote.user === newComment?.user);
+          if (!hasAlreadyVoted) {
+            alreadyVotedArray.push({ type: "upvote", user: newComment?.user });
+          }
 
-            if (!hasAlreadyVoted) {
-              alreadyVotedArray.push({ type: 'upvote', user: newComment?.user });
-            }
+          $commentAdded = newComment;
 
+          inputValue = "";
+          imageInput = "";
 
-            $commentAdded = newComment;
-
-            inputValue = '';
-            imageInput = '';
-
-            handleCancel()
-
-          } 
+          handleCancel();
+        }
       }
+    } catch (e) {
+      console.log(e);
     }
-    catch(e) {
-      console.log(e)
-    }
-};
+  };
 
-const updateComment = async (event) => {
+  const updateComment = async (event) => {
     event.preventDefault(); // prevent the default form submission behavior
     let output;
 
     try {
-      if(isLoaded === true && inputValue?.length !== 0)
-      {
+      if (isLoaded === true && inputValue?.length !== 0) {
         isLoaded = false;
         let formData = new FormData();
-        formData.append('comment', inputValue?.trimStart())
-        formData.append('commentId', commentId)
+        formData.append("comment", inputValue?.trimStart());
+        formData.append("commentId", commentId);
 
-          const response = await fetch('/api/update-comment', {
-          method: 'POST',
+        const response = await fetch("/api/update-comment", {
+          method: "POST",
           body: formData,
-          }); // make a POST request to the server with the FormData object
+        }); // make a POST request to the server with the FormData object
 
-          output = await response?.json()
+        output = await response?.json();
 
+        if (output[0] === "success") {
+          $commentUpdated = output[1];
 
-          if (output[0] === 'success') {
-            $commentUpdated = output[1];
-
-            inputValue = '';
-            imageInput = '';
-            handleCancel()
-
-          } 
+          inputValue = "";
+          imageInput = "";
+          handleCancel();
+        }
       }
+    } catch (e) {
+      console.log(e);
     }
-    catch(e) {
-      console.log(e)
-    }
-};
+  };
 
-
-function handleInput(event) {
+  function handleInput(event) {
     inputValue = event.target.value;
-  /*
+    /*
     const textarea = event.target;
     if($screenWidth >= 640)
     {
@@ -181,67 +170,65 @@ function handleInput(event) {
       textarea.style.height = Math.min(textarea.scrollHeight, 10000) + 'px';
     }
     */
-
   }
 
-function handleCancel() {
+  function handleCancel() {
+    if (commentId?.length !== 0) {
+      $replyCommentClicked[commentId] = false;
+      $editCommentClicked[commentId] = false;
+    }
 
-  if (commentId?.length !== 0) {
-    $replyCommentClicked[commentId] = false;
-    $editCommentClicked[commentId] = false;
+    inputValue = "";
+    imageInput = "";
+    expandField = false;
+
+    const textarea = document.querySelector("textarea");
+    textarea.style.height = "48px"; // 48px are h-12 in tailwindcss
   }
 
-  inputValue = '';
-  imageInput = '';
-  expandField = false;
-
-  const textarea = document.querySelector('textarea');
-  textarea.style.height = '48px'; // 48px are h-12 in tailwindcss
-
-
-
-}
-
- // Function to adjust textarea height
- function adjustHeight() {
+  // Function to adjust textarea height
+  function adjustHeight() {
     if (ref) {
-      ref.style.height = 'auto';
-      ref.style.height = Math.min(ref.scrollHeight, 10000) + 'px';
+      ref.style.height = "auto";
+      ref.style.height = Math.min(ref.scrollHeight, 10000) + "px";
     }
   }
 
-function handleImageInput(event) {
+  function handleImageInput(event) {
     imageInput = event.target.files;
     //console.log(imageInput)
-
   }
 
-
   $: {
-    if (expandField === true && typeof window !== 'undefined') {
-      ref?.focus()
+    if (expandField === true && typeof window !== "undefined") {
+      ref?.focus();
       adjustHeight();
     }
   }
-
 </script>
-  
-<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
 
-<div class="p-2 w-full max-w-xl mr-auto overflow-y-scroll {commentId?.length !== 0 ? '-ml-2' : ''}">
+<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
+
+<div
+  class="p-2 w-full max-w-xl mr-auto overflow-y-scroll {commentId?.length !== 0
+    ? '-ml-2'
+    : ''}"
+>
   <textarea
-    on:click={() => expandField = true}
-    class="rounded-lg text-sm  {expandField ? 'min-h-24 h-auto border-[#1C4090]' : 'h-12  border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-300 w-full bg-[#27272A] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
-    placeholder={placeholder}
+    on:click={() => (expandField = true)}
+    class="rounded-lg text-sm {expandField
+      ? 'min-h-24 h-auto border-[#1C4090]'
+      : 'h-12  border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-300 w-full bg-[#27272A] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
+    {placeholder}
     value={inputValue}
     bind:this={ref}
     on:input={handleInput}
-    />
+  />
 
-    {#if expandField}
+  {#if expandField}
     <div class="flex flex-col">
       <div class="flex flex-row items-center justify-end mt-4">
-       <!--
+        <!--
         <div class="relative">
         <label for={imageId} class="{imageInput.length !== 0 ? 'hidden' : ''} inline-flex mr-auto items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer">
           <svg class="w-6 h-6 inline-block"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="#A6ADBB" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>
@@ -257,37 +244,45 @@ function handleImageInput(event) {
       </div>
       -->
 
-        <label on:click={handleCancel} class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3">
-            Cancel
+        <label
+          on:click={handleCancel}
+          class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3"
+        >
+          Cancel
         </label>
         {#if isLoaded}
-          <label on:click={handleComment} class="inline-flex justify-end items-center bg-purple-600 sm:hover:bg-purple-700 duration-100 transition {inputValue.length !== 0 ? 'opacity-100 cursor-pointer' : 'opacity-60'}  py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300">
-              Post
+          <label
+            on:click={handleComment}
+            class="inline-flex justify-end items-center bg-[#fff] sm:hover:bg-gray-300 duration-100 transition {inputValue.length !==
+            0
+              ? 'opacity-100 cursor-pointer'
+              : 'opacity-60'}  py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300"
+          >
+            Post
           </label>
         {:else}
-        <label class="cursor-not-allowed inline-flex justify-end items-center bg-purple-600 bg-opacity-40 py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300">
-          Post
-        </label>
+          <label
+            class="cursor-not-allowed inline-flex justify-end items-center bg-[#fff] bg-opacity-40 py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300"
+          >
+            Post
+          </label>
         {/if}
-
-        </div>
-
-        {#if imageInput.length !== 0}
-        <div class="relative mr-auto -mt-8">
-          <label on:click={() => imageInput = ''} class="text-black w-7 h-7 text-center m-auto flex justify-center items-center rounded-full bg-white absolute top-0 -right-2">✕</label>
-          <img class="object-contain max-w-full max-h-[150px] mx-auto"
-               alt="Image preview"
-               id="image-preview" />
-        </div>
-        
-        {/if}
-
-
       </div>
-    {/if}
+
+      {#if imageInput.length !== 0}
+        <div class="relative mr-auto -mt-8">
+          <label
+            on:click={() => (imageInput = "")}
+            class="text-black w-7 h-7 text-center m-auto flex justify-center items-center rounded-full bg-white absolute top-0 -right-2"
+            >✕</label
+          >
+          <img
+            class="object-contain max-w-full max-h-[150px] mx-auto"
+            alt="Image preview"
+            id="image-preview"
+          />
+        </div>
+      {/if}
+    </div>
+  {/if}
 </div>
-
-
-
-
-
diff --git a/src/lib/components/TickerInfoCard.svelte b/src/lib/components/TickerInfoCard.svelte
index 1f322d08..dfdc8c11 100644
--- a/src/lib/components/TickerInfoCard.svelte
+++ b/src/lib/components/TickerInfoCard.svelte
@@ -91,7 +91,7 @@
       <div class="flex flex-row pt-1 pb-2">
         {#if earningDate}
           <div
-            class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black"
+            class="badge bg-[#fff] gap-2 mt-2 font-semibold text-sm text-black"
           >
             Earnings Call - {earningDate}
           </div>
diff --git a/src/lib/components/TopHoldingCard.svelte b/src/lib/components/TopHoldingCard.svelte
index 209195de..617ee9d0 100644
--- a/src/lib/components/TopHoldingCard.svelte
+++ b/src/lib/components/TopHoldingCard.svelte
@@ -1,83 +1,116 @@
 <script lang="ts">
+  import {
+    etfTicker,
+    stockTicker,
+    cryptoTicker,
+    screenWidth,
+  } from "$lib/store";
+  import { goto } from "$app/navigation";
+  import { abbreviateNumber, formatString } from "$lib/utils";
+  import defaultLogo from "$lib/images/stocks/logo/default_logo.png";
 
-import {etfTicker, stockTicker, cryptoTicker, screenWidth} from '$lib/store';
-import { goto } from '$app/navigation';
-import { abbreviateNumber, formatString } from '$lib/utils';
-import defaultLogo from '$lib/images/stocks/logo/default_logo.png';
+  export let topHoldingList;
 
-export let topHoldingList;
+  let totalAssetPercentage = 0;
 
-let totalAssetPercentage = 0;
-
-async function stockSelector(ticker:string)
-    {
-    if (ticker?.length !== 0 && !['BTC', 'USD']?.includes(ticker)) {
-        window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
-        stockTicker.update(value => ticker);
-        goto("/stocks/"+ticker+"/")
+  async function stockSelector(ticker: string) {
+    if (ticker?.length !== 0 && !["BTC", "USD"]?.includes(ticker)) {
+      window?.scroll({ top: 0, left: 0, behavior: "smooth" });
+      stockTicker.update((value) => ticker);
+      goto("/stocks/" + ticker + "/");
+    } else if (ticker === "BTC") {
+      window?.scroll({ top: 0, left: 0, behavior: "smooth" });
+      cryptoTicker.update((value) => "BTCUSD");
+      goto("/crypto/BTCUSD");
     }
-    else if (ticker === 'BTC') {
-      window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
-        cryptoTicker.update(value => 'BTCUSD');
-        goto("/crypto/BTCUSD")
+  }
+
+  $: {
+    if ($etfTicker && typeof window !== "undefined") {
+      totalAssetPercentage = topHoldingList
+        ?.slice(0, 5)
+        ?.reduce((acc, current) => acc + current?.weightPercentage, 0)
+        ?.toFixed(2);
     }
-
-}
-
-$: {
-    if($etfTicker && typeof window !== 'undefined')
-    {
-        totalAssetPercentage = topHoldingList?.slice(0, 5)?.reduce((acc, current) => acc + current?.weightPercentage, 0)?.toFixed(2);
-    }
-}
-
+  }
 </script>
-      
-      <!--Start Similar Stocks Card -->
-      
-      <div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">  
-      
-      <div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
-      
-        <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
-    
-              
-          <div class="-mt-10 lg:mt-0 flex flex-row items-center w-full ml-2 pb-2 p-3">
-            <span class="hidden lg:block font-bold text-white text-2xl">
-                Top Holdings
-            </span>
-            <span class="text-white font-semibold ml-auto text-[1rem]">
-                {totalAssetPercentage}% of assets
-            </span>
-          </div>
-          
-          {#if topHoldingList?.length !== 0} 
-    
-          
-      
-          <div class="flex justify-start items-center w-full m-auto overflow-hidden">
-            <table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
-              <thead>
-                <tr>
-                  <th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]">Company</th>
-                  <th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Market Value</th>
-                  <th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Portfolio</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each topHoldingList?.slice(0,5) as item}
+
+<!--Start Similar Stocks Card -->
+
+<div
+  class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}"
+>
+  <div
+    class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <=
+    800
+      ? 'w-screen pt-16'
+      : ''} md:w-[420px] xl:w-[450px]"
+  >
+    <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
+      <div
+        class="-mt-10 lg:mt-0 flex flex-row items-center w-full ml-2 pb-2 p-3"
+      >
+        <span class="hidden lg:block font-bold text-white text-2xl">
+          Top Holdings
+        </span>
+        <span class="text-white font-semibold ml-auto text-[1rem]">
+          {totalAssetPercentage}% of assets
+        </span>
+      </div>
+
+      {#if topHoldingList?.length !== 0}
+        <div
+          class="flex justify-start items-center w-full m-auto overflow-hidden"
+        >
+          <table
+            class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto"
+          >
+            <thead>
+              <tr>
+                <th
+                  class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]"
+                  >Company</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
+                  >Market Value</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
+                  >Portfolio</th
+                >
+              </tr>
+            </thead>
+            <tbody>
+              {#each topHoldingList?.slice(0, 5) as item}
                 {#if item?.asset !== null}
-                <tr on:click={() => stockSelector(item?.asset)} class="lg:shake-ticker sm:hover:text-white text-blue-400 cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
+                  <tr
+                    on:click={() => stockSelector(item?.asset)}
+                    class="lg:shake-ticker sm:hover:text-white text-blue-400 cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]"
+                  >
                     <td class="">
                       <div class="flex flex-row items-center">
-                        <div class="rounded-full w-10 h-10 relative  flex items-center justify-center">
-                          <img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={item?.asset?.length !== 0 ? `https://financialmodelingprep.com/image-stock/${item?.asset}.png` : defaultLogo} loading="lazy"/>
+                        <div
+                          class="rounded-full w-10 h-10 relative flex items-center justify-center"
+                        >
+                          <img
+                            style="clip-path: circle(50%);"
+                            class="w-6 h-6 rounded-full"
+                            src={item?.asset?.length !== 0
+                              ? `https://financialmodelingprep.com/image-stock/${item?.asset}.png`
+                              : defaultLogo}
+                            loading="lazy"
+                          />
                         </div>
                         <div class="flex flex-col ml-3 w-full">
-                          <span class="text-sm font-medium">{item?.asset ?? '-'}</span>
+                          <span class="text-sm font-medium"
+                            >{item?.asset ?? "-"}</span
+                          >
                           <span class="text-white text-sm">
-                            {#if typeof item?.name !== 'undefined'}
-                              {item?.name?.length > 20 ? formatString(item?.name?.slice(0,20)) + "..." : formatString(item?.name)}
+                            {#if typeof item?.name !== "undefined"}
+                              {item?.name?.length > 20
+                                ? formatString(item?.name?.slice(0, 20)) + "..."
+                                : formatString(item?.name)}
                             {:else}
                               n/a
                             {/if}
@@ -86,36 +119,46 @@ $: {
                       </div>
                     </td>
 
-                
-                  <td class="text-white text-end font-semibold ">
-                    {item?.marketValue !== null ? abbreviateNumber(item?.marketValue, true) : '-'}
-                  </td>
-                
-                  <td class="text-white font-semibold text-end">
-                    {abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
-                  </td>
+                    <td class="text-white text-end font-semibold">
+                      {item?.marketValue !== null
+                        ? abbreviateNumber(item?.marketValue, true)
+                        : "-"}
+                    </td>
 
-                </tr>
+                    <td class="text-white font-semibold text-end">
+                      {abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
+                    </td>
+                  </tr>
                 {/if}
-                {/each}
-              </tbody>
-            </table>
-          </div>
+              {/each}
+            </tbody>
+          </table>
+        </div>
 
-          <label for="topHoldingModal" on:click={() => goto(`/etf/${$etfTicker}/holdings`)} class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100 ease-in">
-            View All Holdings
-          </label>
-    
-          {:else}
-            <h2 class="mt-20 justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-              No data available
-              <svg class="w-10 lg:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
-            </h2>
-            {/if}
-      
-        
-      </div>
-      </div>
-      </div>
-      <!--End Similar Stocks Card -->    
-      
\ No newline at end of file
+        <label
+          for="topHoldingModal"
+          on:click={() => goto(`/etf/${$etfTicker}/holdings`)}
+          class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100 ease-in"
+        >
+          View All Holdings
+        </label>
+      {:else}
+        <h2
+          class="mt-20 justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto"
+        >
+          No data available
+          <svg
+            class="w-10 lg:w-12 inline-block"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><path
+              fill="#334155"
+              d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"
+            /></svg
+          >
+        </h2>
+      {/if}
+    </div>
+  </div>
+</div>
+<!--End Similar Stocks Card -->
diff --git a/src/lib/components/UpgradeToPro.svelte b/src/lib/components/UpgradeToPro.svelte
index 7ae86073..2c588960 100644
--- a/src/lib/components/UpgradeToPro.svelte
+++ b/src/lib/components/UpgradeToPro.svelte
@@ -68,7 +68,7 @@
 
       <a
         href="/pricing"
-        class="mt-10 flex justify-center text-[1rem] items-center px-5 w-fit m-auto rounded-md btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
+        class="mt-10 flex justify-center text-[1rem] items-center px-5 w-fit m-auto rounded-md btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
       >
         Become a Pro
         <span
diff --git a/src/lib/components/WIIM.svelte b/src/lib/components/WIIM.svelte
index b0d87ace..e4b810d1 100644
--- a/src/lib/components/WIIM.svelte
+++ b/src/lib/components/WIIM.svelte
@@ -78,7 +78,7 @@
                             >
                             {#if latestInfoDate(item?.date)}
                               <label
-                                class="bg-[#FBCE3C] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
+                                class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
                                 >New</label
                               >
                             {/if}
diff --git a/src/lib/components/shadcn/tabs/tabs-trigger.svelte b/src/lib/components/shadcn/tabs/tabs-trigger.svelte
index 89a276e8..b59965a6 100644
--- a/src/lib/components/shadcn/tabs/tabs-trigger.svelte
+++ b/src/lib/components/shadcn/tabs/tabs-trigger.svelte
@@ -12,7 +12,7 @@
 
 <TabsPrimitive.Trigger
   class={cn(
-    " inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#FBCE3C] data-[state=active]:text-black data-[state=active]:shadow-sm",
+    " inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#fff] data-[state=active]:text-black data-[state=active]:shadow-sm",
     className,
   )}
   {value}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4148fb4d..41632040 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -914,7 +914,7 @@ const handleTwitchMessage = (event) => {
         {:else}
           <a
             href="/login"
-            class="inline-flex items-center justify-center rounded-lg bg-purple-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-150 hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
+            class="inline-flex items-center justify-center rounded-md bg-[#fff] px-4 py-2 text-sm font-semibold text-black shadow-sm transition-all duration-150 sm:hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
           >
             Login
           </a>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0e27a4dd..2617b12a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -146,7 +146,7 @@
   <!--
   {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial === true}
     <div
-      class="mb-5 relative isolate sm:rounded text-center flex justify-center items-center gap-x-6 overflow-hidden bg-purple-600 px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
+      class="mb-5 relative isolate sm:rounded text-center flex justify-center items-center gap-x-6 overflow-hidden bg-[#fff] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
     >
       <div
         class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
@@ -177,12 +177,12 @@
             class="mx-2 inline h-0.5 w-0.5 fill-current"
             aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg
           >
-          Save <strong class="text-[#FBCE3C]">16%</strong> on Pro Subscription and
+          Save <strong class="text-[#fff]">16%</strong> on Pro Subscription and
           boost your investing game!
         </p>
         <a
           href="/pricing"
-          class="flex-none rounded-full m-auto sm:m-0 px-3.5 py-1 text-[1rem] font-semibold text-black shadow-sm bg-[#FBCE3C] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+          class="flex-none rounded-full m-auto sm:m-0 px-3.5 py-1 text-[1rem] font-semibold text-black shadow-sm bg-[#fff] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
         >
           Get Pro Now <span aria-hidden="true">&rarr;</span>
         </a>
@@ -207,7 +207,7 @@
         </a>
         <div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
           <span
-            class="bg-[#FBCE3C] text-black text-sm sm:text-[0.9rem] rounded font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
+            class="bg-[#fff] text-black text-sm sm:text-[0.9rem] rounded font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
           >
             New
           </span>
@@ -218,7 +218,7 @@
       <h1
         class="hidden sm:block text-3xl lg:text-4xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
       >
-        Clear & <span class="italic text-[#FBCE3C]">Simple</span> Market Insight.
+        Clear & <span class="italic text-[#fff]">Simple</span> Market Insight.
       </h1>
 
       <h1
@@ -430,7 +430,7 @@
                   >
                   <a
                     href="/options-flow"
-                    class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
+                    class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#fff] text-black"
                   >
                     View All
                     <ArrowUpRight
@@ -627,7 +627,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 256 256"
                     ><path
-                      fill="#FBCE3C"
+                      fill="#fff"
                       d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                     /></svg
                   >
@@ -649,7 +649,7 @@
                   >
                   <a
                     href="/earnings-calendar"
-                    class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
+                    class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#fff] text-black"
                   >
                     View All
                     <ArrowUpRight
@@ -713,7 +713,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 256 256"
                     ><path
-                      fill="#FBCE3C"
+                      fill="#fff"
                       d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                     /></svg
                   >
@@ -792,7 +792,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 256 256"
                     ><path
-                      fill="#FBCE3C"
+                      fill="#fff"
                       d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                     /></svg
                   >
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 08c14b92..090c0fe5 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  
-
-  import { numberOfUnreadNotification } from '$lib/store';
+  import { numberOfUnreadNotification } from "$lib/store";
 
   export let data;
   /*
@@ -18,272 +16,389 @@
     }
   }
   */
-  
-  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
+  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 </script>
 
 <svelte:head>
-  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} About · stocknear</title>
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} About
+    · stocknear</title
+  >
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
 
-  <meta name="description" content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors.">
+  <meta
+    name="description"
+    content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors."
+  />
   <!-- Other meta tags -->
-  <meta property="og:title" content="About · stocknear"/>
-  <meta property="og:description" content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors.">
-  <meta property="og:type" content="website"/>
+  <meta property="og:title" content="About · stocknear" />
+  <meta
+    property="og:description"
+    content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors."
+  />
+  <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content="About · stocknear"/>
-  <meta name="twitter:description" content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors.">
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="About · stocknear" />
+  <meta
+    name="twitter:description"
+    content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors."
+  />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
-    
-
 
 <body>
-
-
-    
   <div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-10 mb-40">
-    
     <!--Start Mission-->
-    <div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3">
+    <div
+      class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3"
+    >
       <div class="text-white text-3xl sm:text-5xl text-center p-3 sm:mt-5">
-          <span class="font-bold">
-            A stock analysis platform by the users, for the users.
-          </span>
+        <span class="font-bold">
+          A stock analysis platform by the users, for the users.
+        </span>
       </div>
 
-      
       <div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
-        Our mission is to create the first large-scale stock analysis platform in which the platform's interests are aligned with those of the user—a platform founded on ethical design principles. At the heart of these principles is the concept of complete transparency.
+        Our mission is to create the first large-scale stock analysis platform
+        in which the platform's interests are aligned with those of the user—a
+        platform founded on ethical design principles. At the heart of these
+        principles is the concept of complete transparency.
 
-           <!-- Start Image -->
-           <div class="m-auto flex justify-center mt-6">
-            <div class="relative">
-                <div class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <img class="w-24 sm:w-28 mr-4"  src={cloudFrontUrl+"/assets/globe.png"} alt="logo" loading="lazy">
-                </div>
-                  <svg id="visual" viewBox="0 0 960 540" width="380" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
-                    <defs>
-                      <filter id="glow">
-                        <feGaussianBlur stdDeviation="12" result="glow"/>
-                        <feMerge>
-                          <feMergeNode in="glow"/>
-                          <feMergeNode in="SourceGraphic"/>
-                        </feMerge>
-                      </filter>
-                    </defs>
-                    <g transform="translate(506.6556351091302 253.49315711627338)">
-                      <path d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2" fill="#1E40AF" stroke-width="10" filter="url(#glow)"></path>
-                    </g>
-                  </svg>
-                </div>
+        <!-- Start Image -->
+        <div class="m-auto flex justify-center mt-6">
+          <div class="relative">
+            <div
+              class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            >
+              <img
+                class="w-24 sm:w-28 mr-4"
+                src={cloudFrontUrl + "/assets/globe.png"}
+                alt="logo"
+                loading="lazy"
+              />
             </div>
-            <!-- End Image -->
+            <svg
+              id="visual"
+              viewBox="0 0 960 540"
+              width="380"
+              height="200"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              version="1.1"
+            >
+              <defs>
+                <filter id="glow">
+                  <feGaussianBlur stdDeviation="12" result="glow" />
+                  <feMerge>
+                    <feMergeNode in="glow" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+              </defs>
+              <g transform="translate(506.6556351091302 253.49315711627338)">
+                <path
+                  d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2"
+                  fill="#1E40AF"
+                  stroke-width="10"
+                  filter="url(#glow)"
+                ></path>
+              </g>
+            </svg>
+          </div>
+        </div>
+        <!-- End Image -->
       </div>
     </div>
     <!--End Mission-->
 
-      
+    <div
+      class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8"
+    >
+      <div class="text-3xl sm:text-5xl text-white text-center p-3">
+        <span class="font-bold"> Proudly Open Source </span>
+      </div>
 
-
-      <div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8">
-          <div class="text-3xl sm:text-5xl text-white text-center p-3 ">
-              <span class="font-bold">
-                Proudly Open Source
-              </span>
-          </div>
-
-      <div class="text-[1rem] sm:text-lg text-white text-center w-11/12 sm:w-1/2 m-auto mb-8">
-        Stocknear is committed to open source & transparency. You can also run it locally or self-hosted.
+      <div
+        class="text-[1rem] sm:text-lg text-white text-center w-11/12 sm:w-1/2 m-auto mb-8"
+      >
+        Stocknear is committed to open source & transparency. You can also run
+        it locally or self-hosted.
       </div>
 
       <div class="w-11/12 sm:w-1/2 m-auto text-center">
-        <a href="https://github.com/stocknear" rel="noopener noreferrer" target="_blank"
+        <a
+          href="https://github.com/stocknear"
+          rel="noopener noreferrer"
+          target="_blank"
           class="w-fit sm:w-54 inline-flex animate-shine items-center justify-center rounded-xl text-sm border border-neutral-900 bg-[linear-gradient(110deg,#252626,55%,#fff,45%,#252626)] bg-[length:200%_100%] px-4 py-2 font-medium transition-colors"
         >
-        <div class="m-auto flex-shrink-0 flex justify-center items-center">
-          <svg class="w-8 h-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
-        
-          <span class="text-white text-[1rem] ml-2 font-semibold">
-            stocknear
-            {data?.getFrontendStars+data?.getBackendStars}
-          </span>
-          <svg class="ml-1 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fff" d="m18.7 4.627l2.247 4.31a2.27 2.27 0 0 0 1.686 1.189l4.746.65c2.538.35 3.522 3.479 1.645 5.219l-3.25 2.999a2.225 2.225 0 0 0-.683 2.04l.793 4.398c.441 2.45-2.108 4.36-4.345 3.24l-4.536-2.25a2.282 2.282 0 0 0-2.006 0l-4.536 2.25c-2.238 1.11-4.786-.79-4.345-3.24l.793-4.399c.14-.75-.12-1.52-.682-2.04l-3.251-2.998c-1.877-1.73-.893-4.87 1.645-5.22l4.746-.65a2.23 2.23 0 0 0 1.686-1.189l2.248-4.309c1.144-2.17 4.264-2.17 5.398 0"/></svg>
-        </div>
+          <div class="m-auto flex-shrink-0 flex justify-center items-center">
+            <svg
+              class="w-8 h-8 sm:w-10 sm:h-10"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="#fff"
+                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+              /></svg
+            >
+
+            <span class="text-white text-[1rem] ml-2 font-semibold">
+              stocknear
+              {data?.getFrontendStars + data?.getBackendStars}
+            </span>
+            <svg
+              class="ml-1 w-4 h-4"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 32 32"
+              ><path
+                fill="#fff"
+                d="m18.7 4.627l2.247 4.31a2.27 2.27 0 0 0 1.686 1.189l4.746.65c2.538.35 3.522 3.479 1.645 5.219l-3.25 2.999a2.225 2.225 0 0 0-.683 2.04l.793 4.398c.441 2.45-2.108 4.36-4.345 3.24l-4.536-2.25a2.282 2.282 0 0 0-2.006 0l-4.536 2.25c-2.238 1.11-4.786-.79-4.345-3.24l.793-4.399c.14-.75-.12-1.52-.682-2.04l-3.251-2.998c-1.877-1.73-.893-4.87 1.645-5.22l4.746-.65a2.23 2.23 0 0 0 1.686-1.189l2.248-4.309c1.144-2.17 4.264-2.17 5.398 0"
+              /></svg
+            >
+          </div>
         </a>
 
-            
-          <div class="text-white text-sm font-semibold font-mono mt-5">
-            Leave a star to support us
-          </div>
-      </div>
-
-      </div>
-
-
-        <!-- Start Section-->
-        <div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8">
-          <div class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5">
-              <span class="font-bold">
-                No ads. No tracking.
-              </span>
-          </div>
-
-          
-          <div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
-            Stocknear has no ads or affiliate marketing, or tracking. 
-            Your attention and data are never monetized. If you're skeptical, just look at our code <a href="https://github.com/stocknear" rel="noopener noreferrer" target="_blank" class="text-blue-400 sm:hover:text-white sm:hover:underline" >here</a>. 
-          </div>
-      </div>
-      <!--End Section-->
-
-
-       <!-- Start Section-->
-       <div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8">
-        <div class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5">
-            <span class="font-bold">
-              No Dark Patterns
-            </span>
+        <div class="text-white text-sm font-semibold font-mono mt-5">
+          Leave a star to support us
         </div>
+      </div>
+    </div>
 
-        
-        <div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
-          On Stocknear, you won't encounter intrusive pop-ups prompting you to sign up unless it's essential for accessing all platform features. We don't manipulate you into using our platform more than you want to. If you wish to cancel your subscription, there's no survey to fill out; you can cancel it in just 2 seconds.
-        </div>
+    <!-- Start Section-->
+    <div
+      class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8"
+    >
+      <div
+        class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5"
+      >
+        <span class="font-bold"> No ads. No tracking. </span>
+      </div>
+
+      <div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
+        Stocknear has no ads or affiliate marketing, or tracking. Your attention
+        and data are never monetized. If you're skeptical, just look at our code <a
+          href="https://github.com/stocknear"
+          rel="noopener noreferrer"
+          target="_blank"
+          class="text-blue-400 sm:hover:text-white sm:hover:underline">here</a
+        >.
+      </div>
+    </div>
+    <!--End Section-->
+
+    <!-- Start Section-->
+    <div
+      class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8"
+    >
+      <div
+        class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5"
+      >
+        <span class="font-bold"> No Dark Patterns </span>
+      </div>
+
+      <div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
+        On Stocknear, you won't encounter intrusive pop-ups prompting you to
+        sign up unless it's essential for accessing all platform features. We
+        don't manipulate you into using our platform more than you want to. If
+        you wish to cancel your subscription, there's no survey to fill out; you
+        can cancel it in just 2 seconds.
+      </div>
     </div>
     <!--End Section-->
 
     <!--Start Why we need this -->
-    <div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8">
-      <div class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5">
-        <span class="font-bold">
-         What we offer
-        </span>
-    </div>
+    <div
+      class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8"
+    >
+      <div
+        class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5"
+      >
+        <span class="font-bold"> What we offer </span>
+      </div>
 
-      <div class="text-white text-[1rem] sm:text-lg mt-3 text-center pl-3 pr-3 sm:pl-10 sm:pr-10">
-        We provide retail traders with high-quality, accurate data that is only available to hedge funds and institutional investors. By bridging the gap between <span class="text-[#FBCE3C] font-semibold italic">Wall Street</span> and <span class="text-[#FBCE3C] font-semibold italic">Retail Traders</span>, we enhance your stock analysis with a wide range of data sources. Take control of your investments, make informed decisions, and execute profitable trades using our comprehensive data presented in an intuitive UI.
-           <!-- Start Image -->
-           <div class="m-auto flex justify-center mt-5">
-            <div class="relative">
-                <div class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <img class="w-20 mr-8"  src={cloudFrontUrl+"/assets/no_money_logo.png"} alt="logo" loading="lazy">
-                </div>
-                  <svg id="visual" viewBox="0 0 960 540" width="380" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
-                    <defs>
-                      <filter id="glow">
-                        <feGaussianBlur stdDeviation="12" result="glow"/>
-                        <feMerge>
-                          <feMergeNode in="glow"/>
-                          <feMergeNode in="SourceGraphic"/>
-                        </feMerge>
-                      </filter>
-                    </defs>
-                    <g transform="translate(506.6556351091302 253.49315711627338)">
-                      <path d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2" fill="#1E40AF" stroke-width="10" filter="url(#glow)"></path>
-                    </g>
-                  </svg>
-                </div>
+      <div
+        class="text-white text-[1rem] sm:text-lg mt-3 text-center pl-3 pr-3 sm:pl-10 sm:pr-10"
+      >
+        We provide retail traders with high-quality, accurate data that is only
+        available to hedge funds and institutional investors. By bridging the
+        gap between <span class="text-[#fff] font-semibold italic"
+          >Wall Street</span
+        >
+        and
+        <span class="text-[#fff] font-semibold italic">Retail Traders</span>, we
+        enhance your stock analysis with a wide range of data sources. Take
+        control of your investments, make informed decisions, and execute
+        profitable trades using our comprehensive data presented in an intuitive
+        UI.
+        <!-- Start Image -->
+        <div class="m-auto flex justify-center mt-5">
+          <div class="relative">
+            <div
+              class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            >
+              <img
+                class="w-20 mr-8"
+                src={cloudFrontUrl + "/assets/no_money_logo.png"}
+                alt="logo"
+                loading="lazy"
+              />
             </div>
-            <!-- End Image -->
+            <svg
+              id="visual"
+              viewBox="0 0 960 540"
+              width="380"
+              height="200"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              version="1.1"
+            >
+              <defs>
+                <filter id="glow">
+                  <feGaussianBlur stdDeviation="12" result="glow" />
+                  <feMerge>
+                    <feMergeNode in="glow" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+              </defs>
+              <g transform="translate(506.6556351091302 253.49315711627338)">
+                <path
+                  d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2"
+                  fill="#1E40AF"
+                  stroke-width="10"
+                  filter="url(#glow)"
+                ></path>
+              </g>
+            </svg>
+          </div>
+        </div>
+        <!-- End Image -->
       </div>
     </div>
     <!--End Why we need this -->
 
-
-     <!--Start Why we need this -->
-     <div class="bg-[#09090B] w-full bg-[#09090B]  sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3 mb-20 sm:mb-8">
-      <div class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5">
-          <span class="font-bold">
-            Why choose us
-          </span>
+    <!--Start Why we need this -->
+    <div
+      class="bg-[#09090B] w-full bg-[#09090B] sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3 mb-20 sm:mb-8"
+    >
+      <div
+        class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5"
+      >
+        <span class="font-bold"> Why choose us </span>
       </div>
 
-      <div class="-mt-10 sm:mt-0 text-white text-[1rem] sm:text-lg text-center pl-3 pr-3 sm:pl-10 sm:pr-10">
-        <br class="mb-8 sm:mb-5">
-        We love data and want to understand what drives the stock market. 
-        We collaborate with top data vendors to provide clear and actionable insights, giving you a competitive advantage over other traders.
-          <br>
-          <br>
+      <div
+        class="-mt-10 sm:mt-0 text-white text-[1rem] sm:text-lg text-center pl-3 pr-3 sm:pl-10 sm:pr-10"
+      >
+        <br class="mb-8 sm:mb-5" />
+        We love data and want to understand what drives the stock market. We collaborate
+        with top data vendors to provide clear and actionable insights, giving you
+        a competitive advantage over other traders.
+        <br />
+        <br />
 
-          As a physicist, I prioritize transparency and rigorous analysis. 
-          During my PhD in theoretical particle physics, I developed models to describe New Physics effects beyond our current knowledge of the universe, as shown by my publication record <a href="https://inspirehep.net/authors/1838037" target="_blank" class="hover:text-white text-blue-400 underline">here</a>. 
-          <br class="mb-5">
-          Unlike most financial websites run by programmers, I combine my programming skills with a scientific approach.
-          <br>
-          <br>
-          If you find value in stocknear's approach to tackling stock analysis tasks, that's great. If not, I wish you all the best on your trading journey and maybe we will see us again in the future.
-          <!-- Start Image -->
-           <div class="m-auto flex justify-center mt-5">
-            <div class="relative">
-                <div class="z-2 absolute mt-3">
-                    <img class="w-56 sm:w-64 ml-16 sm:ml-10 mt-12 sm:mt-8"  src={cloudFrontUrl+"/assets/community_logo.png"} alt="logo" loading="lazy">
-                </div>
-                  <svg id="visual" viewBox="0 0 960 540" width="380" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
-                    <defs>
-                      <filter id="glow">
-                        <feGaussianBlur stdDeviation="12" result="glow"/>
-                        <feMerge>
-                          <feMergeNode in="glow"/>
-                          <feMergeNode in="SourceGraphic"/>
-                        </feMerge>
-                      </filter>
-                    </defs>
-                    <g transform="translate(506.6556351091302 253.49315711627338)">
-                      <path d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2" fill="#1E40AF" stroke-width="10" filter="url(#glow)"></path>
-                    </g>
-                  </svg>
-                </div>
+        As a physicist, I prioritize transparency and rigorous analysis. During
+        my PhD in theoretical particle physics, I developed models to describe
+        New Physics effects beyond our current knowledge of the universe, as
+        shown by my publication record
+        <a
+          href="https://inspirehep.net/authors/1838037"
+          target="_blank"
+          class="hover:text-white text-blue-400 underline">here</a
+        >.
+        <br class="mb-5" />
+        Unlike most financial websites run by programmers, I combine my programming
+        skills with a scientific approach.
+        <br />
+        <br />
+        If you find value in stocknear's approach to tackling stock analysis tasks,
+        that's great. If not, I wish you all the best on your trading journey and
+        maybe we will see us again in the future.
+        <!-- Start Image -->
+        <div class="m-auto flex justify-center mt-5">
+          <div class="relative">
+            <div class="z-2 absolute mt-3">
+              <img
+                class="w-56 sm:w-64 ml-16 sm:ml-10 mt-12 sm:mt-8"
+                src={cloudFrontUrl + "/assets/community_logo.png"}
+                alt="logo"
+                loading="lazy"
+              />
             </div>
-            <!-- End Image -->
+            <svg
+              id="visual"
+              viewBox="0 0 960 540"
+              width="380"
+              height="200"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              version="1.1"
+            >
+              <defs>
+                <filter id="glow">
+                  <feGaussianBlur stdDeviation="12" result="glow" />
+                  <feMerge>
+                    <feMergeNode in="glow" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+              </defs>
+              <g transform="translate(506.6556351091302 253.49315711627338)">
+                <path
+                  d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2"
+                  fill="#1E40AF"
+                  stroke-width="10"
+                  filter="url(#glow)"
+                ></path>
+              </g>
+            </svg>
+          </div>
+        </div>
+        <!-- End Image -->
       </div>
     </div>
     <!--End Why we need this -->
 
-
-     <!--Start Team -->
-     <div class="bg-[#09090B] w-full bg-[#09090B]  sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3">
-      <div class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5">
+    <!--Start Team -->
+    <div
+      class="bg-[#09090B] w-full bg-[#09090B] sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3"
+    >
+      <div
+        class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5"
+      >
         Team
       </div>
 
       <div class="text-white text-[1rem] sm:text-lg mt-3 text-center">
         <!-- Team members -->
         <div class="sm:flex sm:flex-wrap sm:justify-center mb-4">
-            <!-- 1st member -->
-            <div class="m-auto flex justify-center items-center mt-6">
-                <div class="flex flex-col justify-center items-center w-full">
-                    <img class="rounded-full mb-4 w-20 sm:w-28" src={cloudFrontUrl+"/assets/mrahimi.webp"} alt="Founder" loading="lazy"/>
-                    <h4 class="text-lg mb-1">
-                      Dr. Muslem Rahimi
-                    </h4>
-                    <div class="text-white mb-6">
-                      Chief of Nothing
-                    </div>
-                    <span class="text-[1.1rem] p-3 text-gray-300">
-                      During my PhD in physics, I was developing models to describe New Physics.
-                      Now I'm developing a stock analysis platform to help small investors.
-                    </span>
-                </div>
+          <!-- 1st member -->
+          <div class="m-auto flex justify-center items-center mt-6">
+            <div class="flex flex-col justify-center items-center w-full">
+              <img
+                class="rounded-full mb-4 w-20 sm:w-28"
+                src={cloudFrontUrl + "/assets/mrahimi.webp"}
+                alt="Founder"
+                loading="lazy"
+              />
+              <h4 class="text-lg mb-1">Dr. Muslem Rahimi</h4>
+              <div class="text-white mb-6">Chief of Nothing</div>
+              <span class="text-[1.1rem] p-3 text-gray-300">
+                During my PhD in physics, I was developing models to describe
+                New Physics. Now I'm developing a stock analysis platform to
+                help small investors.
+              </span>
             </div>
-
+          </div>
         </div>
       </div>
     </div>
     <!--End Team -->
-
-
-
-
-
-
   </div>
-
 </body>
-
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 9c424010..80516c85 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -342,7 +342,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -371,7 +371,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -401,7 +401,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -431,7 +431,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/analysts/[slug]/+page.svelte b/src/routes/analysts/[slug]/+page.svelte
index 6635957c..313c89f1 100644
--- a/src/routes/analysts/[slug]/+page.svelte
+++ b/src/routes/analysts/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
+  import { sectorNavigation } from "$lib/utils";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { onMount } from "svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@@ -23,55 +24,6 @@
   }).format(analystStats?.numOfAnalysts);
   let numOfStocks = analystStats?.numOfStocks;
 
-  function sectorSelector(sector) {
-    let path;
-    switch (sector) {
-      case "Financials":
-        path = "financial";
-        break;
-      case "Healthcare":
-        path = "healthcare";
-        break;
-      case "Information Technology":
-        path = "technology";
-        break;
-      case "Technology":
-        path = "technology";
-        break;
-      case "Financial Services":
-        path = "financial";
-        break;
-      case "Industrials":
-        path = "industrials";
-        break;
-      case "Energy":
-        path = "energy";
-        break;
-      case "Utilities":
-        path = "utilities";
-        break;
-      case "Consumer Cyclical":
-        path = "consumer-cyclical";
-        break;
-      case "Real Estate":
-        path = "real-estate";
-        break;
-      case "Basic Materials":
-        path = "basic-materials";
-        break;
-      case "Communication Services":
-        path = "communication-services";
-        break;
-      case "Consumer Defensive":
-        path = "consumer-defensive";
-        break;
-      default:
-        // Handle default case if needed
-        break;
-    }
-    return path;
-  }
-
   async function handleScroll() {
     const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
     const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
@@ -273,7 +225,9 @@
                   >
                     {#each data?.getAnalystStats?.mainSectors as sector}
                       <a
-                        href={"/list/sector/" + sectorSelector(sector)}
+                        href={sectorNavigation?.find(
+                          (listItem) => listItem?.title === sector,
+                        )?.link}
                         class="cursor-pointer w-fit border border-gray-600 px-3 sm:px-4 py-2 text-sm sm:text-[1rem] font-medium rounded-md sm:hover:text-blue-400 text-white underline underline-offset-4"
                       >
                         {sector}
@@ -342,7 +296,7 @@
 
                               <div class="absolute top-3 flex items-center">
                                 <svg
-                                  class="size-5 text-[#FBCE3C]"
+                                  class="size-5 text-[#fff]"
                                   viewBox="0 0 20 20"
                                   fill="currentColor"
                                   style="max-width: 40px;"
diff --git a/src/routes/analysts/top-stocks/+page.svelte b/src/routes/analysts/top-stocks/+page.svelte
index bea6885a..4d9aca82 100644
--- a/src/routes/analysts/top-stocks/+page.svelte
+++ b/src/routes/analysts/top-stocks/+page.svelte
@@ -183,7 +183,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
@@ -322,7 +322,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -351,7 +351,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -381,7 +381,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -411,7 +411,7 @@
                         class="text-base font-semibold leading-4 text-white md:leading-7"
                       >
                         <div
-                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
+                          class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
                         >
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/blog/article/[slug]/+page.svelte b/src/routes/blog/article/[slug]/+page.svelte
index c8ea51d2..693aa52d 100644
--- a/src/routes/blog/article/[slug]/+page.svelte
+++ b/src/routes/blog/article/[slug]/+page.svelte
@@ -1,115 +1,144 @@
-<script lang ='ts'>
-import { numberOfUnreadNotification, discordMembers} from '$lib/store';
-import {getImageURL} from '$lib/utils';
-
-export let data;
-
-
-//let discordURL = import.meta.env.VITE_DISCORD_URL;
-const article = data?.getArticle;
-//const discordData = data?.getDiscordWidget;
-    
-</script>
-
-
-
+<script lang 'ts'></script>
 
 <svelte:head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {article?.title} · stocknear</title>
-    <meta name="description" content="Latest articles on stocks, finance and investing">
-    <!-- Other meta tags -->
-    <meta property="og:title" content="{article?.title}"/>
-    <meta property="og:description" content="{article?.abstract}"/>
-    <meta property="og:type" content="article"/>
-    <!-- Add more Open Graph meta tags as needed -->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {article?.title} · stocknear</title
+  >
+  <meta
+    name="description"
+    content="Latest articles on stocks, finance and investing"
+  />
+  <!-- Other meta tags -->
+  <meta property="og:title" content={article?.title} />
+  <meta property="og:description" content={article?.abstract} />
+  <meta property="og:type" content="article" />
+  <!-- Add more Open Graph meta tags as needed -->
 
-    <!-- Twitter specific meta tags -->
-    <meta name="twitter:card" content="summary_large_image"/>
-    <meta name="twitter:title" content="{article?.title}"/>
-    <meta name="twitter:description" content="{article?.abstract}"/>
-    <!-- Add more Twitter meta tags as needed -->
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={article?.title} />
+  <meta name="twitter:description" content={article?.abstract} />
+  <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-            
-<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
-        
-    <div class="text-sm sm:text-[1rem] breadcrumbs ">
-        <ul>
-          <li><a href="/" class="text-gray-300">Home</a></li> 
-          <li><a href="/blog" class="text-gray-300">All Blog Post</a></li> 
-          <li class="text-gray-300">Post</li>
-        </ul>
-    </div>
+<section
+  class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
+>
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
+    <ul>
+      <li><a href="/" class="text-gray-300">Home</a></li>
+      <li><a href="/blog" class="text-gray-300">All Blog Post</a></li>
+      <li class="text-gray-300">Post</li>
+    </ul>
+  </div>
 
+  <div
+    class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat rounded-lg"
+    style="background-image: url('{article?.cover
+      ? getImageURL(article?.collectionId, article?.id, article?.cover)
+      : ''}');"
+  />
 
-        <div class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat rounded-lg" 
-          style="background-image: url('{article?.cover ? getImageURL(article?.collectionId, article?.id, article?.cover) : ''}');" />
-    
-            <main class="grow m-auto"> 
-                    <div class="w-full max-w-4xl ">
-                        <div class="sm:flex sm:justify-start">
-    
-                            <!-- Main content -->
-                            <div class="md:grow pt-6 pb-12 w-full sm:mr-4 rounded-2xl sm:rounded-none">
-                                <div class="sm:pr-5">
-                                   <!--Start Title-->
-                                   <h1 class="text-white font-bold text-3xl bg-[#111011] sm:bg-[#09090B] p-6 sm:p-3 rounded-t-xl -mt-36 sm:mt-0 bg-opacity-[0.9]">
-                                    {@html article?.title}
-                                    </h1>
-                                   <!--End Title-->
-                                    <!--Start Writer-->
-                                    <div class="flex flex-row items-center pl-3 pr-3 pt-8 pb-6">
-                                        <a href={"/community/user/"+article?.user} class="cursor-pointer text-sm text-slate-200 flex flex-row items-center">
-                                          <img 
-                                          class="rounded-full w-10 h-10 mr-2"
-                                          src={article?.expand?.user?.avatar
-                                            ? getImageURL(article?.expand?.user?.collectionId, article?.expand?.user?.id, article?.expand?.user?.avatar)
-                                            : `https://avatar.vercel.sh/${article?.expand?.user?.username}`} 
-                                            alt="User avatar" loading='lazy'/>
-                                            <div class="flex flex-col items-start">
-                                                <span class="text-white text-sm">
-                                                    mrahimi
-                                                </span>
-                                                <span class="text-white text-opacity-[0.7] text-sm">
-                                                    {article?.readingTime} min read &centerdot; {new Date(article?.created)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                                                </span>
-                                            </div>
-                                        </a>
-                                        
+  <main class="grow m-auto">
+    <div class="w-full max-w-4xl">
+      <div class="sm:flex sm:justify-start">
+        <!-- Main content -->
+        <div
+          class="md:grow pt-6 pb-12 w-full sm:mr-4 rounded-2xl sm:rounded-none"
+        >
+          <div class="sm:pr-5">
+            <!--Start Title-->
+            <h1
+              class="text-white font-bold text-3xl bg-[#111011] sm:bg-[#09090B] p-6 sm:p-3 rounded-t-xl -mt-36 sm:mt-0 bg-opacity-[0.9]"
+            >
+              {@html article?.title}
+            </h1>
+            <!--End Title-->
+            <!--Start Writer-->
+            <div class="flex flex-row items-center pl-3 pr-3 pt-8 pb-6">
+              <a
+                href={"/community/user/" + article?.user}
+                class="cursor-pointer text-sm text-slate-200 flex flex-row items-center"
+              >
+                <img
+                  class="rounded-full w-10 h-10 mr-2"
+                  src={article?.expand?.user?.avatar
+                    ? getImageURL(
+                        article?.expand?.user?.collectionId,
+                        article?.expand?.user?.id,
+                        article?.expand?.user?.avatar,
+                      )
+                    : `https://avatar.vercel.sh/${article?.expand?.user?.username}`}
+                  alt="User avatar"
+                  loading="lazy"
+                />
+                <div class="flex flex-col items-start">
+                  <span class="text-white text-sm"> mrahimi </span>
+                  <span class="text-white text-opacity-[0.7] text-sm">
+                    {article?.readingTime} min read &centerdot; {new Date(
+                      article?.created,
+                    )?.toLocaleString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                      daySuffix: "2-digit",
+                    })}
+                  </span>
+                </div>
+              </a>
+            </div>
+            <!--End Write-->
 
-                                    </div>
-                                    <!--End Write-->
+            <!--Start Description-->
+            <div class="text-white text-lg p-6 sm:p-3">
+              {@html article?.description}
+            </div>
+            <!--End Description-->
 
-                                   
-                                   <!--Start Description-->
-                                   <div class="text-white text-lg p-6 sm:p-3">
-                                      {@html article?.description}                
-                                    </div>
-                                   <!--End Description-->
+            {#if !data?.user}
+              <div
+                class="rounded-lg border border-slate-800 w-11/12 sm:w-full m-auto p-6 mt-16"
+              >
+                <span
+                  class="text-white text-md text-center p-4 mb-3 flex justify-center"
+                >
+                  Stay up to date with the market without the redudant BS
+                </span>
+                <a
+                  class="w-64 flex mb-5 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
+                  href="/register"
+                >
+                  Get Started
+                  <span
+                    class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
+                  >
+                    <svg
+                      class="w-4 h-4"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><g transform="rotate(90 12 12)"
+                        ><g fill="none"
+                          ><path
+                            d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
+                          /><path
+                            fill="white"
+                            d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
+                          /></g
+                        ></g
+                      ></svg
+                    >
+                  </span>
+                </a>
+              </div>
+            {/if}
+          </div>
+        </div>
 
-                                   {#if !data?.user}
-                                    <div class="rounded-lg border border-slate-800 w-11/12 sm:w-full m-auto p-6 mt-16">
-                                    
-                                    <span class="text-white text-md text-center p-4 mb-3 flex justify-center">
-                                        Stay up to date with the market without the redudant BS
-                                    </span>
-                                    <a class="w-64 flex mb-5 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group" href="/register">
-                                        Get Started 
-                                        <span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
-                                            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
-                                        </span>
-                                    </a>
-                                    </div>
-                                    {/if}
-    
-    
-                                </div>
-                            </div>
-    
-                            <!-- Sidebar -->
-                            <!--
+        <!-- Sidebar -->
+        <!--
                             <aside class="hidden sm:inline-block min-h-screen sm:w-96 pt-[1rem]">
     
                               
@@ -199,66 +228,66 @@ const article = data?.getArticle;
     
                             </aside>
                           -->
-    
-                        </div>
-    
-                    </div>
-    
-        </main>
-    </section>
-    
-      
-    
-    
-    
-    
-    <style>
-    
-    #content {
-      position: relative;
-    }
-    
-    #content:before,
-    #content:after {
-      position: absolute;
-      width: 120px;
-      height: 40px;
-      border-color: #FF8C6C; /* or whatever color */
-      border-style: solid; /* or whatever style */
-      content: ' ';
-    }
-    
-    #content:before {
-      top: 0;
-      left: 0;
-      border-width: 1px 0 0 1px;
-    }
-    
-    #content:after {
-      bottom: 0;
-      right: 0;
-      border-width: 0 1px 1px 0;
-    }
-    
-      
-    .grid-background {
-        background: linear-gradient(to bottom, #27272A, #111011);
-        width: 24rem;
-        position: relative;
-    }
-    
-    .grid-background::before {
-      content: "";
-      position: absolute;
-      border-radius: 10%;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: 
-        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 40px),
-        repeating-linear-gradient(to right, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 40px);
-      background-size: 20px 100% 100% 20px; /* Adjust the grid spacing as needed */
-    }
-    
-      </style>
\ No newline at end of file
+      </div>
+    </div>
+  </main>
+</section>
+
+<style>
+  #content {
+    position: relative;
+  }
+
+  #content:before,
+  #content:after {
+    position: absolute;
+    width: 120px;
+    height: 40px;
+    border-color: #ff8c6c; /* or whatever color */
+    border-style: solid; /* or whatever style */
+    content: " ";
+  }
+
+  #content:before {
+    top: 0;
+    left: 0;
+    border-width: 1px 0 0 1px;
+  }
+
+  #content:after {
+    bottom: 0;
+    right: 0;
+    border-width: 0 1px 1px 0;
+  }
+
+  .grid-background {
+    background: linear-gradient(to bottom, #27272a, #111011);
+    width: 24rem;
+    position: relative;
+  }
+
+  .grid-background::before {
+    content: "";
+    position: absolute;
+    border-radius: 10%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15) 0,
+        rgba(255, 255, 255, 0.15) 1px,
+        transparent 1px,
+        transparent 40px
+      ),
+      repeating-linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0.15) 0,
+        rgba(255, 255, 255, 0.15) 1px,
+        transparent 1px,
+        transparent 40px
+      );
+    background-size: 20px 100% 100% 20px; /* Adjust the grid spacing as needed */
+  }
+</style>
diff --git a/src/routes/changelog/+page.svelte b/src/routes/changelog/+page.svelte
index 343f3602..3b1c9899 100644
--- a/src/routes/changelog/+page.svelte
+++ b/src/routes/changelog/+page.svelte
@@ -1,257 +1,312 @@
 <script>
-import { numberOfUnreadNotification } from '$lib/store';
-import ParticleEffect from '$lib/components/ParticleEffect.svelte';
+  import { numberOfUnreadNotification } from "$lib/store";
+  import ParticleEffect from "$lib/components/ParticleEffect.svelte";
 
-export let data;
+  export let data;
 </script>
 
-
-
 <svelte:head>
-  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Changelog · stocknear</title>
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Changelog
+    · stocknear</title
+  >
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
 
   <!-- Other meta tags -->
-  <meta property="og:title" content="Changelog · stocknear"/>
-  <meta property="og:type" content="website"/>
+  <meta property="og:title" content="Changelog · stocknear" />
+  <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content="Changelog · stocknear"/>
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Changelog · stocknear" />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
-	    
 
+<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pb-40">
+  <body class="font-inter antialiased text-slate-100 tracking-tight">
+    <!-- Page wrapper -->
+    <div
+      class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip"
+    >
+      <!-- Page content -->
+      <main class="grow">
+        <!-- Content -->
+        <section class="relative">
+          <!-- Radial gradient -->
+          <div
+            class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-[500px] aspect-square"
+            aria-hidden="true"
+          >
+            <div
+              class="absolute inset-0 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-600 rounded-full blur-[120px] opacity-20"
+            ></div>
+            <div
+              class="absolute w-32 h-32 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-700 rounded-full blur-[80px] opacity-40"
+            ></div>
+          </div>
 
+          <!-- Particles animation -->
+          <div class="absolute inset-0 h-96 z-10" aria-hidden="true">
+            <ParticleEffect quantity={50} staticity={40} ease={60} />
+          </div>
 
-<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen  pb-40">
-    
+          <div class="max-w-6xl mx-auto px-4 sm:px-6">
+            <div class="pt-32 pb-12 md:pt-40 md:pb-20">
+              <!-- Page header -->
+              <div class="text-center pb-12 md:pb-20">
+                <h1
+                  class="text-4xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#E8BB28] to-purple-500 via-slate-200 to-slate-200/60 pb-4"
+                >
+                  What's New
+                </h1>
+                <div class="max-w-3xl m-auto flex justify-center items-center">
+                  <p class="w-5/6 text-center text-xl sm:text-2xl text-white">
+                    New updates and improvements to Stocknear.
+                  </p>
+                </div>
+              </div>
 
-    <body class="font-inter antialiased text-slate-100 tracking-tight">
+              <!-- Content -->
+              <div class="max-w-3xl mx-auto">
+                <div class="relative">
+                  <div
+                    class="absolute h-full top-4 left-[2px] w-0.5 bg-slate-800 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_150px,theme(colors.white))] -z-10 overflow-hidden after:absolute after:h-4 after:top-0 after:-translate-y-full after:left-0 after:w-0.5 after:bg-[linear-gradient(180deg,_transparent,_theme(colors.purple.500/.65)_25%,_theme(colors.purple.200)_50%,_theme(colors.purple.500/.65)_75%,_transparent)] after:animate-shine"
+                    aria-hidden="true"
+                  ></div>
+                  <!-- Post -->
 
-        <!-- Page wrapper -->
-        <div class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
-    
-       
-    
-            <!-- Page content -->
-            <main class="grow">
-    
-                <!-- Content -->
-                <section class="relative">
-    
-                    <!-- Radial gradient -->
-                    <div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-[500px] aspect-square" aria-hidden="true">
-                        <div class="absolute inset-0 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-600 rounded-full blur-[120px] opacity-20"></div>
-                        <div class="absolute w-32 h-32 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-700 rounded-full blur-[80px] opacity-40"></div>
+                  <article class="pt-12 first-of-type:pt-0 group">
+                    <div class="md:flex">
+                      <div class="w-48 shrink-0">
+                        <time
+                          class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
+                        >
+                          <span class="ml-[1.625rem] md:ml-5"
+                            >Aug 05,- Aug 11, 2024</span
+                          >
+                        </time>
+                      </div>
+                      <div
+                        class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
+                      >
+                        <header>
+                          <h2
+                            class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
+                          >
+                            Weekly Update
+                          </h2>
+                        </header>
+                        <ol class="text-white list-disc ml-5 sm:ml-3">
+                          <li class="p-1">
+                            Feature Enhancement: Make echarts tree-shakeable to
+                            increase performance of charts.
+                          </li>
+                          <li class="p-1">
+                            Feature Enhancement: Filter out Market News to
+                            increase signal/noise ratio
+                          </li>
+                        </ol>
+                      </div>
                     </div>
-    
-                    <!-- Particles animation -->
-                    <div class="absolute inset-0 h-96 z-10" aria-hidden="true">
-                        <ParticleEffect quantity={50} staticity={40} ease={60} />
+                  </article>
+
+                  <article class="pt-12 first-of-type:pt-0 group">
+                    <div class="md:flex">
+                      <div class="w-48 shrink-0">
+                        <time
+                          class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
+                        >
+                          <span class="ml-[1.625rem] md:ml-5"
+                            >July 29- Aug 04, 2024</span
+                          >
+                        </time>
+                      </div>
+                      <div
+                        class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
+                      >
+                        <header>
+                          <h2
+                            class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
+                          >
+                            Weekly Update
+                          </h2>
+                        </header>
+                        <ol class="text-white list-disc ml-5 sm:ml-3">
+                          <li class="p-1">New Feature: Dividend Kings</li>
+                          <li class="p-1">New Feature: Dividend Aristocrats</li>
+                          <li class="p-1">
+                            New Feature: Update Dashboard for logged in Users.
+                          </li>
+                          <li class="p-1">
+                            Performance: Increasing the loading time of the
+                            website by 2x.
+                          </li>
+                        </ol>
+                      </div>
                     </div>
-     
-                    <div class="max-w-6xl mx-auto px-4 sm:px-6">
-                        <div class="pt-32 pb-12 md:pt-40 md:pb-20">
-    
-                            <!-- Page header -->
-                            <div class="text-center pb-12 md:pb-20">
-                                <h1 class="text-4xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#E8BB28] to-purple-500 via-slate-200 to-slate-200/60 pb-4">
-                                    What's New
-                                </h1>
-                                <div class="max-w-3xl m-auto flex justify-center items-center">
-                                    <p class="w-5/6 text-center text-xl sm:text-2xl text-white">New updates and improvements to Stocknear.</p>
-                                </div>
-                            </div>
-    
-                            <!-- Content -->
-                            <div class="max-w-3xl mx-auto">
-                                <div class="relative">
-                                    <div class="absolute h-full top-4 left-[2px] w-0.5 bg-slate-800 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_150px,theme(colors.white))] -z-10 overflow-hidden after:absolute after:h-4 after:top-0 after:-translate-y-full after:left-0 after:w-0.5 after:bg-[linear-gradient(180deg,_transparent,_theme(colors.purple.500/.65)_25%,_theme(colors.purple.200)_50%,_theme(colors.purple.500/.65)_75%,_transparent)] after:animate-shine" aria-hidden="true"></div>
-                                    <!-- Post -->
+                  </article>
 
-                                    <article class="pt-12 first-of-type:pt-0 group">
-                                        <div class="md:flex">
-                                            <div class="w-48 shrink-0">
-                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
-                                                    <span class="ml-[1.625rem] md:ml-5">Aug 05,- Aug 11, 2024</span>
-                                                </time>
-                                            </div>
-                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
-                                                <header>
-                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
-                                                        Weekly Update
-                                                    </h2>
-                                                </header>
-                                                    <ol class="text-white list-disc ml-5 sm:ml-3">
-                                                        <li class="p-1">
-                                                            Feature Enhancement: Make echarts tree-shakeable to increase performance of charts.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Feature Enhancement: Filter out Market News to increase signal/noise ratio
-                                                        </li>
-                                                    </ol>
-                                            </div>
-                                        </div>
-                                    </article>
+                  <article class="pt-12 first-of-type:pt-0 group">
+                    <div class="md:flex">
+                      <div class="w-48 shrink-0">
+                        <time
+                          class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
+                        >
+                          <span class="ml-[1.625rem] md:ml-5"
+                            >July 15-21, 2024</span
+                          >
+                        </time>
+                      </div>
+                      <div
+                        class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
+                      >
+                        <header>
+                          <h2
+                            class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
+                          >
+                            Weekly Update
+                          </h2>
+                        </header>
+                        <ol class="text-white list-disc ml-5 sm:ml-3">
+                          <li class="p-1">
+                            New Feature: Add Jim Cramer Tracker.
+                          </li>
+                          <li class="p-1">
+                            New Feature: Add Swap data for stocks.
+                          </li>
+                          <li class="p-1">
+                            New Feature: Adding Dashboard for logged in Users.
+                          </li>
+                          <li class="p-1">Sidebar Improved.</li>
+                          <li class="p-1">
+                            Adding Implied Volatility for ETFs.
+                          </li>
+                          <li class="p-1">
+                            Enhancing UI/UX of Options 0DTE Flow for easier
+                            navigation.
+                          </li>
+                          <li class="p-1">
+                            Bugfixing: Display info box if share statistics
+                            component does not have historical shares.
+                          </li>
+                          <li class="p-1">
+                            Bugfixing: Options bubble crashes if data is empty.
+                          </li>
+                        </ol>
+                      </div>
+                    </div>
+                  </article>
 
-                                    <article class="pt-12 first-of-type:pt-0 group">
-                                        <div class="md:flex">
-                                            <div class="w-48 shrink-0">
-                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
-                                                    <span class="ml-[1.625rem] md:ml-5">July 29- Aug 04, 2024</span>
-                                                </time>
-                                            </div>
-                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
-                                                <header>
-                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
-                                                        Weekly Update
-                                                    </h2>
-                                                </header>
-                                                    <ol class="text-white list-disc ml-5 sm:ml-3">
-                                                        <li class="p-1">
-                                                            New Feature: Dividend Kings
-                                                        </li>
-                                                        <li class="p-1">
-                                                            New Feature: Dividend Aristocrats
-                                                        </li>
-                                                        <li class="p-1">
-                                                            New Feature: Update Dashboard for logged in Users.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Performance: Increasing the loading time of the website by 2x.
-                                                        </li>
-                                                    </ol>
-                                            </div>
-                                        </div>
-                                    </article>
+                  <article class="pt-12 first-of-type:pt-0 group">
+                    <div class="md:flex">
+                      <div class="w-48 shrink-0">
+                        <time
+                          class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
+                        >
+                          <span class="ml-[1.625rem] md:ml-5"
+                            >July 8-12, 2024</span
+                          >
+                        </time>
+                      </div>
+                      <div
+                        class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
+                      >
+                        <header>
+                          <h2
+                            class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
+                          >
+                            Weekly Update
+                          </h2>
+                        </header>
+                        <ol class="text-white list-disc ml-5 sm:ml-3">
+                          <li class="p-1">
+                            New Feature: Adding Realtime Darkpool Trades of
+                            Hedge Funds & Major Institutional Traders
+                          </li>
+                          <li class="p-1">
+                            New Feature: Adding AI Analyst Insight
+                          </li>
+                          <li class="p-1">
+                            Improving frontend and backend code for faster
+                            loading times.
+                          </li>
+                          <li class="p-1">
+                            Enhancing UI/UX for easier navigation.
+                          </li>
+                        </ol>
+                      </div>
+                    </div>
+                  </article>
 
-                                    <article class="pt-12 first-of-type:pt-0 group">
-                                        <div class="md:flex">
-                                            <div class="w-48 shrink-0">
-                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
-                                                    <span class="ml-[1.625rem] md:ml-5">July 15-21, 2024</span>
-                                                </time>
-                                            </div>
-                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
-                                                <header>
-                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
-                                                        Weekly Update
-                                                    </h2>
-                                                </header>
-                                                    <ol class="text-white list-disc ml-5 sm:ml-3">
-                                                        <li class="p-1">
-                                                            New Feature: Add Jim Cramer Tracker.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            New Feature: Add Swap data for stocks.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            New Feature: Adding Dashboard for logged in Users.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Sidebar Improved.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Adding Implied Volatility for ETFs.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Enhancing UI/UX of Options 0DTE Flow for easier navigation.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Bugfixing: Display info box if share statistics component does not have historical shares.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Bugfixing: Options bubble crashes if data is empty.
-                                                        </li>
-                                                    </ol>
-                                            </div>
-                                        </div>
-                                    </article>
+                  <article class="pt-12 first-of-type:pt-0 group">
+                    <div class="md:flex">
+                      <div class="w-48 shrink-0">
+                        <time
+                          class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
+                        >
+                          <span class="ml-[1.625rem] md:ml-5"
+                            >July 1-5, 2024</span
+                          >
+                        </time>
+                      </div>
+                      <div
+                        class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
+                      >
+                        <header>
+                          <h2
+                            class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
+                          >
+                            Weekly Update
+                          </h2>
+                        </header>
+                        <ol class="text-white list-disc ml-5 sm:ml-3">
+                          <li class="p-1">
+                            New Feature: Adding Implied Volatility
+                          </li>
+                          <li class="p-1">
+                            New Feature: Adding Options Net Flow
+                          </li>
+                        </ol>
+                      </div>
+                    </div>
+                  </article>
 
-                                    <article class="pt-12 first-of-type:pt-0 group">
-                                        <div class="md:flex">
-                                            <div class="w-48 shrink-0">
-                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
-                                                    <span class="ml-[1.625rem] md:ml-5">July 8-12, 2024</span>
-                                                </time>
-                                            </div>
-                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
-                                                <header>
-                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
-                                                        Weekly Update
-                                                    </h2>
-                                                </header>
-                                                    <ol class="text-white list-disc ml-5 sm:ml-3">
-                                                        <li class="p-1">
-                                                            New Feature: Adding Realtime Darkpool Trades of Hedge Funds & Major Institutional Traders
-                                                        </li>
-                                                        <li class="p-1">
-                                                            New Feature: Adding AI Analyst Insight
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Improving frontend and backend code for faster loading times.
-                                                        </li>
-                                                        <li class="p-1">
-                                                            Enhancing UI/UX for easier navigation.
-                                                        </li>
-                                                    </ol>
-                                            </div>
-                                        </div>
-                                    </article>
+                  <article class="pt-12 first-of-type:pt-0 group">
+                    <div class="md:flex">
+                      <div class="w-48 shrink-0">
+                        <time
+                          class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
+                        >
+                          <span class="ml-[1.625rem] md:ml-5"
+                            >June 28, 2024</span
+                          >
+                        </time>
+                      </div>
+                      <div
+                        class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
+                      >
+                        <header>
+                          <h2
+                            class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
+                          >
+                            Announcement 🎉
+                          </h2>
+                        </header>
+                        <span class="text-white">
+                          Starting today, I'll keep you updated on the changes
+                          from the past week: new features, improvements, bug
+                          fixes, and more.
+                        </span>
+                      </div>
+                    </div>
+                  </article>
+                </div>
+              </div>
 
-                                    <article class="pt-12 first-of-type:pt-0 group">
-                                        <div class="md:flex">
-                                            <div class="w-48 shrink-0">
-                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
-                                                    <span class="ml-[1.625rem] md:ml-5">July 1-5, 2024</span>
-                                                </time>
-                                            </div>
-                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
-                                                <header>
-                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
-                                                        Weekly Update
-                                                    </h2>
-                                                </header>
-                                                    <ol class="text-white list-disc ml-5 sm:ml-3">
-                                                        <li class="p-1">
-                                                            New Feature: Adding Implied Volatility
-                                                        </li>
-                                                        <li class="p-1">
-                                                            New Feature: Adding Options Net Flow
-                                                        </li>
-                                                    </ol>
-                                            </div>
-                                        </div>
-                                    </article>
-
-                                    <article class="pt-12 first-of-type:pt-0 group">
-                                        <div class="md:flex">
-                                            <div class="w-48 shrink-0">
-                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
-                                                    <span class="ml-[1.625rem] md:ml-5">June 28, 2024</span>
-                                                </time>
-                                            </div>
-                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
-                                                <header>
-                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
-                                                        Announcement 🎉
-                                                    </h2>
-                                                </header>
-                                                    <span class="text-white">
-                                                        Starting today, I'll keep you updated on the changes from the past week: new features, improvements, bug fixes, and more.
-                                                    </span>
-                                            </div>
-                                        </div>
-                                    </article>
-
-                                </div>
-                            </div>
-    
-                            <!-- Pagination -->
-                             <!--
+              <!-- Pagination -->
+              <!--
                             <div class="max-w-3xl mx-auto">
                                 <ul class="flex items-center justify-between mt-12 pl-8 md:pl-48">
                                     <li>
@@ -271,72 +326,101 @@ export let data;
                                 </ul>
                             </div>
                             -->
-    
-                        </div>
-                    </div>
-    
-                </section>
-    
-                <!-- CTA -->
-                {#if !data?.user}
-                <section class="mt-10">
-                    <div class="max-w-6xl mx-auto px-4 sm:px-6">
-                        <div class="relative px-8 py-12 md:py-20 rounded-[3rem] overflow-hidden">
-                            <!-- Radial gradient -->
-                            <div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none -z-10 w-1/3 aspect-square" aria-hidden="true">
-                                <div class="absolute inset-0 translate-z-0 bg-purple-500 rounded-full blur-[120px] opacity-70"></div>
-                                <div class="absolute w-1/4 h-1/4 translate-z-0 bg-purple-400 rounded-full blur-[40px]"></div>
-                            </div>
-                            <!-- Blurred shape -->
-                            <div class="absolute bottom-0 translate-y-1/2 left-0 blur-2xl opacity-50 pointer-events-none -z-10" aria-hidden="true">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="434" height="427">
-                                    <defs>
-                                        <linearGradient id="bs5-a" x1="19.609%" x2="50%" y1="14.544%" y2="100%">
-                                            <stop offset="0%" stop-color="#A855F7" />
-                                            <stop offset="100%" stop-color="#6366F1" stop-opacity="0" />
-                                        </linearGradient>
-                                    </defs>
-                                    <path fill="url(#bs5-a)" fill-rule="evenodd" d="m0 0 461 369-284 58z" transform="matrix(1 0 0 -1 0 427)" />
-                                </svg>
-                            </div>
-                            <!-- Content -->
-                            <div class="max-w-3xl mx-auto text-center">
-                                <div>
-                                    <div class="text-2xl sm:text-4xl font-bold inline-flex pb-3">
-                                        Start your free trial today
-                                    </div>
-                                </div>
-                                <h2 class="text-center m-auto text-[1rem] sm:text-lg text-white font-medium pb-4">
-                                    Try Stocknear Platform for 30 days. No credit card required.
-                                </h2>
-                                    <a href='/register'
-                                    class="animate-shine mt-5 w-56 sm:w-80 m-auto group relative grid overflow-hidden rounded-xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors"
-                                >
-                                    <span>
-                                    <span
-                                        class="spark mask-gradient animate-flip before:animate-kitrotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]"
-                                    />
-                                    </span>
-                                    <span
-                                    class="backdrop absolute inset-px rounded-[11px] bg-[#FBCE3C] transition-colors duration-200 group-hover:bg-[#be9204"
-                                    />
-                                    <span class="z-10 text-black text-[1rem] sm:text-lg font-semibold">
-                                    <slot>Free trial for 30 days</slot>
-                                    </span>
-                                    
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                {/if}
-    
-            </main>
-    
-    
-        </div>
+            </div>
+          </div>
+        </section>
 
-    
-    </body>
-    
-</section>
\ No newline at end of file
+        <!-- CTA -->
+        {#if !data?.user}
+          <section class="mt-10">
+            <div class="max-w-6xl mx-auto px-4 sm:px-6">
+              <div
+                class="relative px-8 py-12 md:py-20 rounded-[3rem] overflow-hidden"
+              >
+                <!-- Radial gradient -->
+                <div
+                  class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none -z-10 w-1/3 aspect-square"
+                  aria-hidden="true"
+                >
+                  <div
+                    class="absolute inset-0 translate-z-0 bg-purple-500 rounded-full blur-[120px] opacity-70"
+                  ></div>
+                  <div
+                    class="absolute w-1/4 h-1/4 translate-z-0 bg-purple-400 rounded-full blur-[40px]"
+                  ></div>
+                </div>
+                <!-- Blurred shape -->
+                <div
+                  class="absolute bottom-0 translate-y-1/2 left-0 blur-2xl opacity-50 pointer-events-none -z-10"
+                  aria-hidden="true"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="434"
+                    height="427"
+                  >
+                    <defs>
+                      <linearGradient
+                        id="bs5-a"
+                        x1="19.609%"
+                        x2="50%"
+                        y1="14.544%"
+                        y2="100%"
+                      >
+                        <stop offset="0%" stop-color="#A855F7" />
+                        <stop
+                          offset="100%"
+                          stop-color="#6366F1"
+                          stop-opacity="0"
+                        />
+                      </linearGradient>
+                    </defs>
+                    <path
+                      fill="url(#bs5-a)"
+                      fill-rule="evenodd"
+                      d="m0 0 461 369-284 58z"
+                      transform="matrix(1 0 0 -1 0 427)"
+                    />
+                  </svg>
+                </div>
+                <!-- Content -->
+                <div class="max-w-3xl mx-auto text-center">
+                  <div>
+                    <div
+                      class="text-2xl sm:text-4xl font-bold inline-flex pb-3"
+                    >
+                      Start your free trial today
+                    </div>
+                  </div>
+                  <h2
+                    class="text-center m-auto text-[1rem] sm:text-lg text-white font-medium pb-4"
+                  >
+                    Try Stocknear Platform for 30 days. No credit card required.
+                  </h2>
+                  <a
+                    href="/register"
+                    class="animate-shine mt-5 w-56 sm:w-80 m-auto group relative grid overflow-hidden rounded-xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors"
+                  >
+                    <span>
+                      <span
+                        class="spark mask-gradient animate-flip before:animate-kitrotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]"
+                      />
+                    </span>
+                    <span
+                      class="backdrop absolute inset-px rounded-[11px] bg-[#fff] transition-colors duration-200 group-hover:bg-[#be9204"
+                    />
+                    <span
+                      class="z-10 text-black text-[1rem] sm:text-lg font-semibold"
+                    >
+                      <slot>Free trial for 30 days</slot>
+                    </span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+        {/if}
+      </main>
+    </div>
+  </body>
+</section>
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index bec21fa0..d197aac4 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -311,7 +311,7 @@
     <main class="m-auto w-full">
       <!--Start Header-->
       <div
-        class="w-full sm:rounded-lg m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat"
+        class="w-full sm:rounded-md m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat"
         style="background-image: url('{communityBanner}');"
       />
       <!--End Header-->
@@ -560,7 +560,7 @@
                       <div class="flex justify-center items-center mb-8 pt-5">
                         <a
                           href="/community/create-post"
-                          class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100"
+                          class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] mb-6 duration-100"
                         >
                           Create Post
                         </a>
@@ -573,7 +573,7 @@
                   {#if discordData?.length !== 0}
                     <div class="space-y-3 mb-5">
                       <div
-                        class="bg-[#141417] border border-gray-800 h-auto sm:w-96 rounded-lg"
+                        class="bg-[#141417] border border-gray-800 h-auto sm:w-96 rounded-md"
                       >
                         <!--Start Image-->
                         <div class="flex flex-row items-center w-full p-3">
@@ -675,7 +675,7 @@
                             href={discordURL}
                             rel="noopener noreferrer"
                             target="_blank"
-                            class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100"
+                            class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] mb-6 duration-100"
                           >
                             Join Us
                           </a>
@@ -689,7 +689,7 @@
                   <!--Community Rules-->
                   <div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">
                     <div
-                      class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg"
+                      class="bg-[#141417] border border-gray-800 sm:w-96 rounded-md"
                     >
                       <!--Start Header-->
                       <div
@@ -702,7 +702,7 @@
                       <!--End Header-->
 
                       <!--Start Content-->
-                      <div class="w-full pl-7 text-gray-300">
+                      <div class="w-full pl-7 text-white">
                         <ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
                           <li class="text-[1rem] mb-3">
                             Avoid Purely Policital Discussion
diff --git a/src/routes/community/create-post/+page.svelte b/src/routes/community/create-post/+page.svelte
index 246fe78c..24ea7b9d 100644
--- a/src/routes/community/create-post/+page.svelte
+++ b/src/routes/community/create-post/+page.svelte
@@ -1,269 +1,284 @@
-<script lang='ts'>
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import Input from "$lib/components/Input.svelte";
+  import TextArea from "$lib/components/TextArea.svelte";
+  import Tags from "$lib/components/Tags.svelte";
+  import toast from "svelte-french-toast";
+  import { numberOfUnreadNotification } from "$lib/store";
 
-	import { enhance } from '$app/forms';
-	import Input from '$lib/components/Input.svelte';
-	import TextArea from '$lib/components/TextArea.svelte';
-	import Tags from '$lib/components/Tags.svelte'
-	import toast from 'svelte-french-toast';
-	import { numberOfUnreadNotification } from '$lib/store';
-	
-	export let form;
-	let isClicked = false;
-	let loading = false;
-	
-	const submitPost = () => {
-		loading = true;
-		return async ({ result, update}) => {
-			switch (result.type) {
-				case 'redirect':
-					isClicked = true;
-					toast.success('Posted successfully!', {
-						style: 'border-radius: 200px; background: #333; color: #fff;'});
-					await update();
-					break;
-				case 'failure':
-					toast.error('Invalid inputs', {
-					style: 'border-radius: 200px; background: #333; color: #fff;'});
-					await update();
-					break;
-	
-				case 'error':
-					toast.error(result.error.message, {
-					style: 'border-radius: 200px; background: #333; color: #fff;'});
-					break;
-				default:
-					await update();
-			}
-			loading = false;
-		}
-	
-		
-	}
-	
-	let postType = 'text';
+  export let form;
+  let isClicked = false;
+  let loading = false;
 
-	async function changePostType(state)
-	{
-		switch (state)
-		{
-			case 'text':
-				postType = 'text';
-				break;
-			case 'image':
-				postType = 'image';
-				break;
-			case 'link':
-				postType = 'link';
-				//title = await getTitle()
-				break;
-		}
-	
-	}
-	  
-		
-	
-	
-	
-	</script>
-		
-	
-	<svelte:head>
-		<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Create a Post · stocknear</title>
-		<meta name="description" content="
-		Create a post to share your insights, latest news and memes to the stocknear community.">
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-	</svelte:head>
-	
-	
-		<div class="flex justify-start items-start m-auto max-w-5xl w-full min-h-screen p-2 pt-10 pb-40">
-			
-			<div class="w-full">
-				<form
-					action= {postType === 'text' ? '?/createPostText' : postType === 'image' ? '?/createPostImage' : '?/createPostLink'}
-					method="POST"
-					class="flex flex-col space-y-2 w-full items-center"
-					enctype="multipart/form-data"
-					use:enhance={submitPost}
-				>
-					<h3 class="text-3xl font-bold mb-3 text-white">Create a Post</h3>
-					<!--<p class="mt-2 text-lg">We'll need the title, tagline, url, and description</p>-->
-					
-					<div class="w-full max-w-3xl pt-10 flex justify-center items-center m-auto pb-5 bg-[#09090B]"  style="top: 4rem;">
-						<!--<svg class="w-4 h-4 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2.66992 7.16979V5.34979C2.66992 4.19979 3.59992 3.27979 4.73992 3.27979H19.2599C20.4099 3.27979 21.3299 4.20979 21.3299 5.34979V7.16979" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M12 20.7199V4.10986" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8.06055 20.7202H15.9405" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>-->
-					   
-						<div class="flex flex-col items-center mr-5 sm:mr-10">
-						  <label class="tab font-semibold hover:text-gray-300 {postType === 'text' ? 'text-gray-200' : 'text-[#9A9996]'}" on:click={() => changePostType('text')}>
-							  <span class="text-lg sm:text-2xl">Text</span>
-							</label> 
-							<div class="{postType === 'text' ? 'bg-[#75D377]' : 'bg-[#09090B]'} h-1 w-[3rem]" />
-					   </div>
-					
-  
-					  <!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="{ postType === 'image' ? 'white' : '#A6ADBB'}" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>-->
-					  <div class="flex flex-col items-center mr-5">
-						  <label class="tab font-semibold hover:text-gray-200 {postType === 'image' ? 'text-gray-200' : 'text-[#9A9996]'}" on:click={() => changePostType('image')}>
-							  <span class="text-lg sm:text-2xl">Image/Video</span>
-						  </label> 
-						  <div class="{postType === 'image' ? 'bg-[#75D377]' : 'bg-[#09090B]'} h-1 w-[8rem] sm:w-[4rem]" />
-					   </div> 
-					  <!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="{ postType === 'link' ? 'white' : '#A6ADBB'}"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z" fill="{ postType === 'link' ? 'white' : '#A6ADBB'}"></path></g></svg>-->
-					  <div class="flex flex-col items-center">
-						  <label class="tab font-semibold hover:text-gray-200 {postType === 'link' ? 'text-gray-200' : 'text-[#9A9996]'}" on:click={() => changePostType('link')}>
-							  <span class="text-lg sm:text-2xl">Link</span>
-							</label> 
-						  <div class="{postType === 'link' ? 'bg-[#75D377]' : 'bg-[#09090B]'} h-1 w-[3rem]" />
-					   </div>   
-					</div>
-	
-	
-				
-	
-	
-					<Input 
-						id="title" 
-						label="" 
-						placeholder='Title'
-						value={form?.data?.title} 
-						errors={form?.errors?.title}
-						disabled={loading}
-						maxLength = {300}
-						showCounter = {true}
-					/>
-	
-					
-					<Input 
-						id="link" 
-						label="" 
-						placeholder='Url'
-						value={form?.data?.link} 
-						errors={form?.errors?.link}
-						hidden={postType === 'link' ? false : true}
-						disabled={loading}
-						useTitle = {true}
-	
-					/>
-					
-					
-					<TextArea
-						id="description"
-						label=""
-						placeholder='Write your Post Content here (optional)'
-						value={form?.data?.description}
-						errors={form?.errors?.description}
-						hidden={postType === 'text' ? false : true}
-						disabled={loading}
-					/>
-		
-					<Input
-						id="thumbnail" 
-						label="" 
-						type="file" 
-						errors={form?.errors?.thumbnail}
-						hidden={postType === 'image' ? false : true}
-						disabled={loading}
-					/>
-	
-					<Tags
-						id = "atLeastOneTag"
-						errors ={form?.errors?.atLeastOneTag}
-						placeholder={'Please pick at least 1 tag but no more than 3' }
-					/>
-	
-					
-					<span class="hidden sm:block text-white text-sm sm:text-[1rem] text-start w-full max-w-2xl">
-						Use <a href="/markdown-guide" rel="noopener noreferrer" target="_blank" class="text-blue-500 sm:hover:text-white">
-							Markdown
-						</a> to format posts.
-					</span>
-					
+  const submitPost = () => {
+    loading = true;
+    return async ({ result, update }) => {
+      switch (result.type) {
+        case "redirect":
+          isClicked = true;
+          toast.success("Posted successfully!", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "failure":
+          toast.error("Invalid inputs", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
 
-					<input type="hidden" name="postType" value={postType}>
-		
-					<div class="w-full max-w-sm sm:max-w-2xl pt-5 sm:pt-3">
+        case "error":
+          toast.error(result.error.message, {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          break;
+        default:
+          await update();
+      }
+      loading = false;
+    };
+  };
 
-						{#if !loading && !isClicked}
-						<button type="submit" class="btn bg-purple-600 hover:bg-purple-500 w-full max-w-2xl normal-case text-lg mb-3">
-							<span class="text-white">Post</span>
-						</button>
-						{:else}
-						<label class="cursor-not-allowed btn bg-purple-600  w-full max-w-2xl normal-case text-lg mb-3">
-							<div class="flex flex-row m-auto">
-								<span class="loading loading-infinity"></span>
-								<span class="text-white ml-2">Loading</span>
-							</div>
-						</label>
-						{/if}
+  let postType = "text";
 
-						<span class="sm:hidden text-white text-sm sm:text-[1rem] text-start w-full max-w-sm sm:max-w-2xl ">
-							Use <a href="/markdown-guide" rel="noopener noreferrer" target="_blank" class="text-blue-500 sm:hover:text-white">
-								Markdown
-							</a> to format posts.
-						</span>
-						
-					</div>
-	
-	
-					
-				</form>
-	
-		
-	
-	
-			</div>
+  async function changePostType(state) {
+    switch (state) {
+      case "text":
+        postType = "text";
+        break;
+      case "image":
+        postType = "image";
+        break;
+      case "link":
+        postType = "link";
+        //title = await getTitle()
+        break;
+    }
+  }
+</script>
 
-			
-            <!-- Sidebar -->
-			<aside class="hidden xl:inline-block pt-[150px] pl-10">
+<svelte:head>
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Create
+    a Post · stocknear</title
+  >
+  <meta
+    name="description"
+    content="
+		Create a post to share your insights, latest news and memes to the stocknear community."
+  />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+</svelte:head>
 
-				
-					<!-- Sidebar content -->
-					<div class="lg:pl-2 z-20 h-full">
-				
-						<!-- Sidebar content -->
+<div
+  class="flex justify-start items-start m-auto max-w-5xl w-full min-h-screen p-2 pt-10 pb-40"
+>
+  <div class="w-full">
+    <form
+      action={postType === "text"
+        ? "?/createPostText"
+        : postType === "image"
+          ? "?/createPostImage"
+          : "?/createPostLink"}
+      method="POST"
+      class="flex flex-col space-y-2 w-full items-center"
+      enctype="multipart/form-data"
+      use:enhance={submitPost}
+    >
+      <h3 class="text-3xl font-bold mb-3 text-white">Create a Post</h3>
+      <!--<p class="mt-2 text-lg">We'll need the title, tagline, url, and description</p>-->
 
-				
-						<!--Community Rules-->
-						<div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">  
-						<div class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg">
-						<!--Start Header-->
-						<div class="bg-[#141417] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg">
-							<span class="text-white text-xl ml-1 font-semibold">
-							Community Rules
-							</span>
-						</div>
-						<!--End Header-->
+      <div
+        class="w-full max-w-3xl pt-10 flex justify-center items-center m-auto pb-5 bg-[#09090B]"
+        style="top: 4rem;"
+      >
+        <!--<svg class="w-4 h-4 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2.66992 7.16979V5.34979C2.66992 4.19979 3.59992 3.27979 4.73992 3.27979H19.2599C20.4099 3.27979 21.3299 4.20979 21.3299 5.34979V7.16979" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M12 20.7199V4.10986" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8.06055 20.7202H15.9405" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>-->
 
-						<!--Start Content-->
-						<div class="w-full pl-7 text-gray-300">
-							<ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
-							<li class="text-[1rem] mb-3">
-								Avoid Purely Policital Discussion
-							</li>
-							<li class="text-[1rem] mb-3">
-								No violence or gory contents
-							</li>
-							<li class="text-[1rem] mb-3">
-								No Advertisement, Self-Promotion, Fundraising, or Begging
-							</li>
-							<li class="text-[1rem]">
-								No illegal activities
-							</li>
-							</ol>
-							
-						</div>
-						<!--End Content-->
+        <div class="flex flex-col items-center mr-5 sm:mr-10">
+          <label
+            class="tab font-semibold hover:text-gray-300 {postType === 'text'
+              ? 'text-gray-200'
+              : 'text-[#9A9996]'}"
+            on:click={() => changePostType("text")}
+          >
+            <span class="text-lg sm:text-2xl">Text</span>
+          </label>
+          <div
+            class="{postType === 'text'
+              ? 'bg-[#75D377]'
+              : 'bg-[#09090B]'} h-1 w-[3rem]"
+          />
+        </div>
 
-						</div>
+        <!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="{ postType === 'image' ? 'white' : '#A6ADBB'}" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>-->
+        <div class="flex flex-col items-center mr-5">
+          <label
+            class="tab font-semibold hover:text-gray-200 {postType === 'image'
+              ? 'text-gray-200'
+              : 'text-[#9A9996]'}"
+            on:click={() => changePostType("image")}
+          >
+            <span class="text-lg sm:text-2xl">Image/Video</span>
+          </label>
+          <div
+            class="{postType === 'image'
+              ? 'bg-[#75D377]'
+              : 'bg-[#09090B]'} h-1 w-[8rem] sm:w-[4rem]"
+          />
+        </div>
+        <!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="{ postType === 'link' ? 'white' : '#A6ADBB'}"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z" fill="{ postType === 'link' ? 'white' : '#A6ADBB'}"></path></g></svg>-->
+        <div class="flex flex-col items-center">
+          <label
+            class="tab font-semibold hover:text-gray-200 {postType === 'link'
+              ? 'text-gray-200'
+              : 'text-[#9A9996]'}"
+            on:click={() => changePostType("link")}
+          >
+            <span class="text-lg sm:text-2xl">Link</span>
+          </label>
+          <div
+            class="{postType === 'link'
+              ? 'bg-[#75D377]'
+              : 'bg-[#09090B]'} h-1 w-[3rem]"
+          />
+        </div>
+      </div>
 
-						</div>
-					<!--End Community Rules-->
-					
-					
-					</div>
+      <Input
+        id="title"
+        label=""
+        placeholder="Title"
+        value={form?.data?.title}
+        errors={form?.errors?.title}
+        disabled={loading}
+        maxLength={300}
+        showCounter={true}
+      />
 
-			</aside>
+      <Input
+        id="link"
+        label=""
+        placeholder="Url"
+        value={form?.data?.link}
+        errors={form?.errors?.link}
+        hidden={postType === "link" ? false : true}
+        disabled={loading}
+        useTitle={true}
+      />
 
-						  
-		</div>
-		
\ No newline at end of file
+      <TextArea
+        id="description"
+        label=""
+        placeholder="Write your Post Content here (optional)"
+        value={form?.data?.description}
+        errors={form?.errors?.description}
+        hidden={postType === "text" ? false : true}
+        disabled={loading}
+      />
+
+      <Input
+        id="thumbnail"
+        label=""
+        type="file"
+        errors={form?.errors?.thumbnail}
+        hidden={postType === "image" ? false : true}
+        disabled={loading}
+      />
+
+      <Tags
+        id="atLeastOneTag"
+        errors={form?.errors?.atLeastOneTag}
+        placeholder={"Please pick at least 1 tag but no more than 3"}
+      />
+
+      <span
+        class="hidden sm:block text-white text-sm sm:text-[1rem] text-start w-full max-w-2xl"
+      >
+        Use <a
+          href="/markdown-guide"
+          rel="noopener noreferrer"
+          target="_blank"
+          class="text-blue-500 sm:hover:text-white"
+        >
+          Markdown
+        </a> to format posts.
+      </span>
+
+      <input type="hidden" name="postType" value={postType} />
+
+      <div class="w-full max-w-sm sm:max-w-2xl pt-5 sm:pt-3">
+        {#if !loading && !isClicked}
+          <button
+            type="submit"
+            class="btn bg-[#fff] sm:hover:bg-gray-300 w-full max-w-2xl normal-case text-lg mb-3"
+          >
+            <span class="text-black">Post</span>
+          </button>
+        {:else}
+          <label
+            class="cursor-not-allowed btn bg-[#fff] w-full max-w-2xl normal-case text-lg mb-3"
+          >
+            <div class="flex flex-row m-auto">
+              <span class="loading loading-infinity"></span>
+              <span class="text-black ml-2">Loading</span>
+            </div>
+          </label>
+        {/if}
+
+        <span
+          class="sm:hidden text-white text-sm sm:text-[1rem] text-start w-full max-w-sm sm:max-w-2xl"
+        >
+          Use <a
+            href="/markdown-guide"
+            rel="noopener noreferrer"
+            target="_blank"
+            class="text-blue-500 sm:hover:text-white"
+          >
+            Markdown
+          </a> to format posts.
+        </span>
+      </div>
+    </form>
+  </div>
+
+  <!-- Sidebar -->
+  <aside class="hidden xl:inline-block pt-[150px] pl-10">
+    <!-- Sidebar content -->
+    <div class="lg:pl-2 z-20 h-full">
+      <!-- Sidebar content -->
+
+      <!--Community Rules-->
+      <div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">
+        <div class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg">
+          <!--Start Header-->
+          <div
+            class="bg-[#141417] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg"
+          >
+            <span class="text-white text-xl ml-1 font-semibold">
+              Community Rules
+            </span>
+          </div>
+          <!--End Header-->
+
+          <!--Start Content-->
+          <div class="w-full pl-7 text-gray-300">
+            <ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
+              <li class="text-[1rem] mb-3">
+                Avoid Purely Policital Discussion
+              </li>
+              <li class="text-[1rem] mb-3">No violence or gory contents</li>
+              <li class="text-[1rem] mb-3">
+                No Advertisement, Self-Promotion, Fundraising, or Begging
+              </li>
+              <li class="text-[1rem]">No illegal activities</li>
+            </ol>
+          </div>
+          <!--End Content-->
+        </div>
+      </div>
+      <!--End Community Rules-->
+    </div>
+  </aside>
+</div>
diff --git a/src/routes/community/post/[postId]/+page.svelte b/src/routes/community/post/[postId]/+page.svelte
index 170c2d4d..96ab0483 100644
--- a/src/routes/community/post/[postId]/+page.svelte
+++ b/src/routes/community/post/[postId]/+page.svelte
@@ -956,7 +956,7 @@
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 256 256"
                         ><path
-                          fill="#FBCE3C"
+                          fill="#fff"
                           d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                         /></svg
                       >
diff --git a/src/routes/community/profile/+page.svelte b/src/routes/community/profile/+page.svelte
index 6ea19271..0e77793e 100644
--- a/src/routes/community/profile/+page.svelte
+++ b/src/routes/community/profile/+page.svelte
@@ -624,7 +624,7 @@
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 512 512"
                                 ><path
-                                  fill="#FBCE3C"
+                                  fill="#fff"
                                   d="M273.857 21.904c-24.193.012-51.198 5.552-81.1 17.467c143.7 12.608 150.35 129.263 84.032 132.814c-85.27 4.565-53.232-57.217-133.34-103.03C200.445 201.48 94.44 190.33 21.054 59.23c12.805 85.755 24.28 116.942 78.26 153.596C261.996 323.294 94.618 347.8 36.82 245.53c14.568 93.454 68.364 132.803 131.707 139.93c-42.753 24.49-99.452 32.49-143.01 25.556c51.025 42.317 131.606 40.94 193.515 8.576c-37.137 36.123-97.446 70.644-116.803 74.728H276.36C517 405.563 530.305 232.45 454.827 124.492c-2.433 26.21-10.08 49.507-25.545 70.23c-18.48-102.394-69.02-172.86-155.426-172.818zm2.82 184.666l141.384 52.155c.286-3.207.86-6.495 1.747-9.807c5.62-20.973 21.605-34.913 35.705-31.135s20.973 23.842 15.353 44.815c-5.62 20.974-21.603 34.914-35.703 31.136a18 18 0 0 1-2.113-.72l-60.58 49.394l70.637 19.584l-140.023 84.71l65.848-68.866l-31.32-7.006l-150.335 122.58l158.06-196.89l-137.39-41.137l137.006 5.654l-68.275-54.467z"
                                 /></svg
                               >
@@ -834,7 +834,7 @@
                             <div class="w-full max-w-lg pt-3">
                               <button
                                 type="submit"
-                                class="btn bg-purple-600 sm:hover:bg-purple-700 duration-100 text-white w-full max-w-lg normal-case"
+                                class="btn bg-[#fff] sm:hover:bg-gray-300 duration-100 text-white w-full max-w-lg normal-case"
                                 >Update your data</button
                               >
                             </div>
@@ -872,7 +872,7 @@
                             <div class="w-full max-w-lg pt-3">
                               <button
                                 type="submit"
-                                class="btn bg-purple-600 text-white hover:bg-purple-500 w-full max-w-lg normal-case text-md"
+                                class="btn bg-[#fff] text-white sm:hover:bg-gray-300 w-full max-w-lg normal-case text-md"
                                 >Update Password</button
                               >
                             </div>
@@ -1029,7 +1029,7 @@
                         {:else if subscriptionData?.status_formatted === "Cancelled"}
                           <label
                             for="reactivateSubscriptionModal"
-                            class="cursor-pointer text-white bg-purple-600 sm:hover:bg-purple-700 text-sm sm:text-[1rem] px-4 py-2 rounded-lg mt-5"
+                            class="cursor-pointer text-white bg-[#fff] sm:hover:bg-gray-300 text-sm sm:text-[1rem] px-4 py-2 rounded-lg mt-5"
                           >
                             Reactivate Subscription
                           </label>
diff --git a/src/routes/cramer-tracker/+page.svelte b/src/routes/cramer-tracker/+page.svelte
index bce0b7a6..304fc145 100644
--- a/src/routes/cramer-tracker/+page.svelte
+++ b/src/routes/cramer-tracker/+page.svelte
@@ -263,7 +263,7 @@
                 viewBox="0 0 256 256"
               >
                 <path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 />
               </svg>
diff --git a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
index 3f821e64..6e4e5b63 100644
--- a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
@@ -173,7 +173,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/crypto/[tickerID]/news/+page.svelte b/src/routes/crypto/[tickerID]/news/+page.svelte
index a3a79caa..7d3bd5f8 100644
--- a/src/routes/crypto/[tickerID]/news/+page.svelte
+++ b/src/routes/crypto/[tickerID]/news/+page.svelte
@@ -165,7 +165,7 @@
           {#if newsList?.length !== rawNews?.length}
             <label
               on:click={loadMoreData}
-              class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
+              class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-[#fff] bg-[#fff] bg-opacity-[0.6]"
             >
               Load More News
             </label>
@@ -179,7 +179,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/crypto/[tickerID]/stats/+page.svelte b/src/routes/crypto/[tickerID]/stats/+page.svelte
index 7836bd8a..b8b19c5e 100644
--- a/src/routes/crypto/[tickerID]/stats/+page.svelte
+++ b/src/routes/crypto/[tickerID]/stats/+page.svelte
@@ -130,7 +130,7 @@ updateYearRange()
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 256 256"
           ><path
-            fill="#FBCE3C"
+            fill="#fff"
             d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
           /></svg
         >
diff --git a/src/routes/dividends-calendar/+page.svelte b/src/routes/dividends-calendar/+page.svelte
index 119d19ac..015849df 100644
--- a/src/routes/dividends-calendar/+page.svelte
+++ b/src/routes/dividends-calendar/+page.svelte
@@ -390,7 +390,7 @@
                       on:click={() => toggleDate(index)}
                       class=" m-auto w-full cursor-pointer h-16 {index ===
                       selectedWeekday
-                        ? 'bg-[#FBCE3C] text-black font-semibold'
+                        ? 'bg-[#fff] text-black font-semibold'
                         : ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
                     >
                       <div
@@ -547,7 +547,7 @@
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 256 256"
                         ><path
-                          fill="#FBCE3C"
+                          fill="#fff"
                           d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                         /></svg
                       >
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index 17d2d8e9..48ce13fc 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -390,7 +390,7 @@
                       on:click={() => toggleDate(index)}
                       class=" m-auto w-full cursor-pointer h-16 {index ===
                       selectedWeekday
-                        ? 'bg-[#FBCE3C] text-black font-semibold'
+                        ? 'bg-[#fff] text-black font-semibold'
                         : ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
                     >
                       <div
@@ -613,7 +613,7 @@
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 256 256"
                         ><path
-                          fill="#FBCE3C"
+                          fill="#fff"
                           d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                         /></svg
                       >
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index bd3d38c2..a0baf7d4 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -252,7 +252,7 @@
                       on:click={() => toggleDate(index)}
                       class=" m-auto w-full cursor-pointer h-16 {index ===
                       selectedWeekday
-                        ? 'bg-[#FBCE3C] text-black font-semibold'
+                        ? 'bg-[#fff] text-black font-semibold'
                         : ''} rounded sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
                     >
                       <div
@@ -704,7 +704,7 @@
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 256 256"
                           ><path
-                            fill="#FBCE3C"
+                            fill="#fff"
                             d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                           /></svg
                         >
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
index b2718e14..9c9ca7eb 100644
--- a/src/routes/economic-indicator/+page.svelte
+++ b/src/routes/economic-indicator/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
+  import { numberOfUnreadNotification } from "$lib/store";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { Chart } from "svelte-echarts";
   import Lazy from "$lib/components/Lazy.svelte";
@@ -660,7 +659,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
@@ -792,10 +791,10 @@
                 <li class="w-full">
                   <label
                     on:click={() => changeTablePeriod("annual")}
-                    class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
+                    class="cursor-pointer rounded-l-md inline-block w-full py-1.5 {filterRule ===
                     'annual'
-                      ? 'bg-purple-600'
-                      : 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
+                      ? 'bg-[#fff] text-black'
+                      : 'bg-[#2A303C] text-white'} font-semibold border-r border-gray-600"
                     aria-current="page"
                   >
                     Annual
@@ -805,10 +804,10 @@
                   {#if data?.user?.tier === "Pro"}
                     <label
                       on:click={() => changeTablePeriod("quarterly")}
-                      class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
+                      class="cursor-pointer inline-block w-full py-1.5 {filterRule ===
                       'quarterly'
-                        ? 'bg-purple-600'
-                        : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
+                        ? 'bg-[#fff] text-black'
+                        : 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
                     >
                       Quartely
                     </label>
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 4575debe..26450715 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -1,249 +1,228 @@
-<script lang='ts'>
+<script lang="ts">
+  import {
+    searchBarData,
+    globalForm,
+    screenWidth,
+    openPriceAlert,
+    currentPortfolioPrice,
+    wsBidPrice,
+    wsAskPrice,
+    realtimePrice,
+    isCrosshairMoveActive,
+    currentPrice,
+    priceIncrease,
+    displayCompanyName,
+    traded,
+    etfTicker,
+    assetType,
+    isOpen,
+  } from "$lib/store";
 
-    import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, wsBidPrice, wsAskPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
+  import { onMount, onDestroy, afterUpdate } from "svelte";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import toast from "svelte-french-toast";
+  import ETFProfileCard from "$lib/components/ETFProfileCard.svelte";
+  import SimilarETFCard from "$lib/components/SimilarETFCard.svelte";
+  import Markethour from "$lib/components/Markethour.svelte";
+  import TopHoldingCard from "$lib/components/TopHoldingCard.svelte";
+  import DividendCard from "$lib/components/DividendCard.svelte";
 
-    import { onMount, onDestroy, afterUpdate} from "svelte";
-    import { goto } from '$app/navigation';
-    import { page } from '$app/stores';
-    import toast from 'svelte-french-toast';
-    import ETFProfileCard from '$lib/components/ETFProfileCard.svelte';
-    import SimilarETFCard from '$lib/components/SimilarETFCard.svelte';
-    import Markethour from '$lib/components/Markethour.svelte';
-  	import TopHoldingCard from '$lib/components/TopHoldingCard.svelte';
-    import DividendCard from '$lib/components/DividendCard.svelte';
+  export let data;
 
-  export let data;  
-    
   //$assetType = 'etf';
-  //$etfTicker = data?.getTicker;  
+  //$etfTicker = data?.getTicker;
   $realtimePrice = null;
-    
-  
 
-async function loadSearchData() {
-    
-    if($searchBarData?.length !== 0)
-    {
-      return
-    }
-    else {
-  
-       // make the GET request to the endpoint
-       const response = await fetch('/api/searchbar-data', {
-      method: 'GET',
-      headers: {
-          "Content-Type": "application/json"
-      },
+  async function loadSearchData() {
+    if ($searchBarData?.length !== 0) {
+      return;
+    } else {
+      // make the GET request to the endpoint
+      const response = await fetch("/api/searchbar-data", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
       });
-  
+
       $searchBarData = await response.json();
     }
-     
-  
   }
-      
-    
-  
-      let previousRealtimePrice = null;
-      let previousTicker;
-      let socket;
-  
-      
-      let isScrolled = false;
-        
-      let userWatchList = data?.getUserWatchlist ?? [];
-      let isTickerIncluded; 
-      let userPortfolio = data?.getUserPortfolio ?? [];
-      let holdingShares = 0;
-      let availableCash = 0;
-      
-      let displaySection = '';
-  
-    
-  
-      let etfProfile = [];
-      let similarTicker = [];
-      let topHoldingList = [];
-      let dividendList = [];
-      
-  
+
+  let previousRealtimePrice = null;
+  let previousTicker;
+  let socket;
+
+  let isScrolled = false;
+
+  let userWatchList = data?.getUserWatchlist ?? [];
+  let isTickerIncluded;
+  let userPortfolio = data?.getUserPortfolio ?? [];
+  let holdingShares = 0;
+  let availableCash = 0;
+
+  let displaySection = "";
+
+  let etfProfile = [];
+  let similarTicker = [];
+  let topHoldingList = [];
+  let dividendList = [];
+
   function shareContent(url) {
-      
     if (navigator.share) {
-        navigator.share({
+      navigator
+        .share({
           title: document.title,
           url,
         })
-          .then(() => console.log('Content shared successfully.'))
-          .catch((error) => console.log('Error sharing content:', error));
-      } else {
-        toast.error('Sharing is not supported by your device', {
-          style: 'background: #333; color: #fff;'
-          });
-  
+        .then(() => console.log("Content shared successfully."))
+        .catch((error) => console.log("Error sharing content:", error));
+    } else {
+      toast.error("Sharing is not supported by your device", {
+        style: "background: #333; color: #fff;",
+      });
     }
-    
   }
-  
-  
-  
-  
-  function handleTypeOfTrade(state:string)
-  {
-    if (state === 'buy')
-    {
+
+  function handleTypeOfTrade(state: string) {
+    if (state === "buy") {
       const closePopup = document.getElementById("buyTradeModal");
-      closePopup?.dispatchEvent(new MouseEvent('click'))
-    }
-  
-    else if (state === 'sell')
-    {
+      closePopup?.dispatchEvent(new MouseEvent("click"));
+    } else if (state === "sell") {
       const closePopup = document.getElementById("sellTradeModal");
-      closePopup?.dispatchEvent(new MouseEvent('click'))
+      closePopup?.dispatchEvent(new MouseEvent("click"));
     }
-  
-    
   }
-  
-  
+
   function scrollToItem(itemId) {
-      const item = document.getElementById(itemId);
-      if (item) {
-        
-        item.scrollIntoView({ behavior: 'smooth' });
-        window.scrollTo(0,0)
-      }
+    const item = document.getElementById(itemId);
+    if (item) {
+      item.scrollIntoView({ behavior: "smooth" });
+      window.scrollTo(0, 0);
     }
-  
-      
+  }
+
   function changeSection(state, item) {
     scrollToItem(item);
-  
+
     const sectionMap = {
-      options: '/options',
+      options: "/options",
       holdings: "/holdings",
-       forecast: "/forecast",
-      dividends: '/dividends',
-      stats: '/stats',
-      news: '/news',
+      forecast: "/forecast",
+      dividends: "/dividends",
+      stats: "/stats",
+      news: "/news",
     };
-  
-    if (state !== 'overview' && sectionMap[state]) {
+
+    if (state !== "overview" && sectionMap[state]) {
       displaySection = state;
       //goto(`/etf/${$etfTicker}${sectionMap[state]}`);
     } else {
-      displaySection = 'overview';
+      displaySection = "overview";
       //goto(`/etf/${$etfTicker}/`);
     }
   }
-  
-    
-  
 
+  async function toggleUserWatchlist(watchListId: string) {
+    try {
+      isTickerIncluded = !isTickerIncluded;
 
-async function toggleUserWatchlist(watchListId: string) {
-  try {
-    isTickerIncluded = !isTickerIncluded;
+      const watchlistIndex = userWatchList?.findIndex(
+        (item) => item?.id === watchListId,
+      );
 
-    const watchlistIndex = userWatchList?.findIndex(item => item?.id === watchListId);
+      if (watchlistIndex !== -1) {
+        const existingTickerIndex =
+          userWatchList[watchlistIndex]?.ticker?.indexOf($etfTicker);
 
-    if (watchlistIndex !== -1) {
-      const existingTickerIndex = userWatchList[watchlistIndex]?.ticker?.indexOf($etfTicker);
+        if (existingTickerIndex !== -1) {
+          // If the $etfTicker exists, remove it from the array
+          userWatchList[watchlistIndex]?.ticker?.splice(existingTickerIndex, 1);
+        } else {
+          // If the $etfTicker doesn't exist, add it to the array
+          userWatchList[watchlistIndex]?.ticker?.push($etfTicker);
+        }
 
-      if (existingTickerIndex !== -1) {
-        // If the $etfTicker exists, remove it from the array
-        userWatchList[watchlistIndex]?.ticker?.splice(existingTickerIndex, 1);
-      } else {
-        // If the $etfTicker doesn't exist, add it to the array
-        userWatchList[watchlistIndex]?.ticker?.push($etfTicker);
+        // Update the userWatchList
+        userWatchList = [...userWatchList];
       }
 
-      // Update the userWatchList
-      userWatchList = [...userWatchList];
+      const postData = {
+        watchListId: watchListId,
+        ticker: $etfTicker,
+      };
+
+      const response = await fetch("/api/update-watchlist", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const output = await response.json();
+
+      // Update the userWatchList with the response from the server
+      if (watchlistIndex !== -1) {
+        userWatchList[watchlistIndex] = output;
+        userWatchList = [...userWatchList];
+      } else {
+        userWatchList = [...userWatchList, output];
+      }
+    } catch (error) {
+      console.error("An error occurred:", error);
+      // Handle the error appropriately (e.g., show an error message to the user)
     }
-
-
-    const postData = {
-      'watchListId': watchListId,
-      'ticker': $etfTicker,
-    };
-
-    const response = await fetch('/api/update-watchlist', {
-      method: 'POST',
-      headers: {
-         "Content-Type": "application/json"
-      },
-      body: JSON.stringify(postData),
-    });
-
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-
-    const output = await response.json();
-
-    // Update the userWatchList with the response from the server
-    if( watchlistIndex !== -1)
-    {
-      userWatchList[watchlistIndex] = output;
-      userWatchList = [...userWatchList];
-    }
-    else {
-      userWatchList = [...userWatchList, output];
-    }
-
-  } catch (error) {
-    console.error('An error occurred:', error);
-    // Handle the error appropriately (e.g., show an error message to the user)
   }
-}
-      
 
-      
-
-  
-  
-  
   function handleScroll() {
-      // Check the scroll position
-      isScrolled = window.scrollY > 0;
-    }
-  
-    
+    // Check the scroll position
+    isScrolled = window.scrollY > 0;
+  }
+
   function sendMessage(message) {
     if (socket && socket.readyState === WebSocket.OPEN) {
       socket.send(message);
     } else {
-      console.error('WebSocket is not open. Unable to send message.');
+      console.error("WebSocket is not open. Unable to send message.");
     }
   }
-  
-  
+
   async function websocketRealtimeData() {
-  
     previousTicker = $etfTicker;
     try {
-      socket = new WebSocket(data?.wsURL+"/realtime-data");
-  
-      socket.addEventListener('open', () => {
+      socket = new WebSocket(data?.wsURL + "/realtime-data");
+
+      socket.addEventListener("open", () => {
         //console.log('WebSocket connection opened');
-        
+
         // Send the initial value of etfTicker
         sendMessage($etfTicker?.toLowerCase());
       });
-      
-  
-      socket.addEventListener('message', (event) => {
+
+      socket.addEventListener("message", (event) => {
         const data = event.data;
         //console.log('Received message:', data);
         try {
-  
-          $realtimePrice = typeof JSON.parse(data)?.lp !== "undefined" ? JSON.parse(data)?.lp : null;
-          $wsBidPrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
-          $wsAskPrice = typeof JSON.parse(data)?.ap !== "undefined" ? JSON.parse(data)?.ap : null;
+          $realtimePrice =
+            typeof JSON.parse(data)?.lp !== "undefined"
+              ? JSON.parse(data)?.lp
+              : null;
+          $wsBidPrice =
+            typeof JSON.parse(data)?.bp !== "undefined"
+              ? JSON.parse(data)?.bp
+              : null;
+          $wsAskPrice =
+            typeof JSON.parse(data)?.ap !== "undefined"
+              ? JSON.parse(data)?.ap
+              : null;
           //console.log('Received message:', $realtimePrice);
-  
-  
+
           if ($realtimePrice > previousRealtimePrice) {
             $priceIncrease = true;
             previousRealtimePrice = $realtimePrice;
@@ -251,117 +230,96 @@ async function toggleUserWatchlist(watchListId: string) {
             $priceIncrease = false;
             previousRealtimePrice = $realtimePrice;
           }
-  
-  
+
           $isCrosshairMoveActive = false;
-  
-  
+        } catch (e) {
+          console.log(e);
         }
-        catch(e) {
-          console.log(e)
-        }
-      
-    
-    });
-  
-  
-  
-    socket.addEventListener('close', (event) => {
-      console.log('WebSocket connection closed:', event.reason);
-      // Handle disconnection, you might want to attempt to reconnect here
-    });
-  } catch (error) {
-    console.error('WebSocket connection error:', error);
-    // Handle connection errors here
+      });
+
+      socket.addEventListener("close", (event) => {
+        console.log("WebSocket connection closed:", event.reason);
+        // Handle disconnection, you might want to attempt to reconnect here
+      });
+    } catch (error) {
+      console.error("WebSocket connection error:", error);
+      // Handle connection errors here
+    }
   }
-  }
-  
-  
+
   let LoginPopup;
   let PriceAlert;
-  
-      
+
   onMount(async () => {
-      
-      if(!data?.user)
-      {
-        LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default;
-      }
-      else {
-        //AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
-        //BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
-        //SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
-        PriceAlert = (await import('$lib/components/PriceAlert.svelte')).default;
-      }
-     
-      //const startTime = currentDateTime.set({ hour: 15, minute: 30 });
-      //const endTime = currentDateTime.set({ hour: 22, minute: 0 });
-      // Check if it's not a weekend and the current time is within the specified range
-  
-    
-      if ($isOpen) //&& currentDateTime > startTime && currentDateTime < endTime
-      {
-        await websocketRealtimeData()
-      }
-    
-  
-      // Add a scroll event listener
-      window.addEventListener('scroll', handleScroll);
-  
-      return () => {
+    if (!data?.user) {
+      LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
+    } else {
+      //AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
+      //BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
+      //SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
+      PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
+    }
+
+    //const startTime = currentDateTime.set({ hour: 15, minute: 30 });
+    //const endTime = currentDateTime.set({ hour: 22, minute: 0 });
+    // Check if it's not a weekend and the current time is within the specified range
+
+    if ($isOpen) {
+      //&& currentDateTime > startTime && currentDateTime < endTime
+      await websocketRealtimeData();
+    }
+
+    // Add a scroll event listener
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
       // Remove the event listener when the component is unmounted
-      window.removeEventListener('scroll', handleScroll);
-      };
-  
+      window.removeEventListener("scroll", handleScroll);
+    };
   });
-  
-  afterUpdate( async () => {
-   
-   if(previousTicker !== $etfTicker && typeof socket !== 'undefined')
-   {
-     previousTicker = $etfTicker;
-     //socket.send('close')
-     socket?.close();
-     await new Promise((resolve, reject) => {
-       socket.addEventListener('close', resolve);
-     });
-    
-     if(socket?.readyState === WebSocket?.CLOSED)
-     {
-       await websocketRealtimeData()
-       console.log('connecting again')
-     }
-     $wsAskPrice = null;
+
+  afterUpdate(async () => {
+    if (previousTicker !== $etfTicker && typeof socket !== "undefined") {
+      previousTicker = $etfTicker;
+      //socket.send('close')
+      socket?.close();
+      await new Promise((resolve, reject) => {
+        socket.addEventListener("close", resolve);
+      });
+
+      if (socket?.readyState === WebSocket?.CLOSED) {
+        await websocketRealtimeData();
+        console.log("connecting again");
+      }
+      $wsAskPrice = null;
       $wsBidPrice = null;
-   }
-  
+    }
   });
-  
-  
+
   onDestroy(() => {
     try {
       //socket?.send('close')
-      socket?.close()
+      socket?.close();
+    } catch (e) {
+      console.log(e);
     }
-    catch(e) {
-      console.log(e)
-    }  
-   
+
     //$displayCompanyName = '';
     $currentPortfolioPrice = null;
     $currentPrice = null;
     $priceIncrease = null;
     $wsAskPrice = null;
     $wsBidPrice = null;
-    $traded = false
-    
+    $traded = false;
   });
-  
-  
-    
+
   $: {
-    if ($etfTicker && $etfTicker?.length !== 0 && typeof window !== 'undefined') // add a check to see if running on client-side
-    {
+    if (
+      $etfTicker &&
+      $etfTicker?.length !== 0 &&
+      typeof window !== "undefined"
+    ) {
+      // add a check to see if running on client-side
       etfProfile = [];
 
       etfProfile = data?.getETFProfile;
@@ -370,265 +328,458 @@ async function toggleUserWatchlist(watchListId: string) {
       dividendList = data?.getStockDividend;
       $currentPortfolioPrice = data?.getStockQuote?.price;
 
-      const asyncFunctions = [
-        ];
-  
-        Promise.all(asyncFunctions)
-            .then((results) => {
-              
-            })
-            .catch((error) => {
-              console.error('An error occurred:', error);
-            });
-  
+      const asyncFunctions = [];
+
+      Promise.all(asyncFunctions)
+        .then((results) => {})
+        .catch((error) => {
+          console.error("An error occurred:", error);
+        });
     }
-  
   }
 
-      
   $: {
-    if(userWatchList)
-    {
-      isTickerIncluded = userWatchList?.some(item => item.user === data?.user?.id && item?.ticker?.includes($etfTicker));
+    if (userWatchList) {
+      isTickerIncluded = userWatchList?.some(
+        (item) =>
+          item.user === data?.user?.id && item?.ticker?.includes($etfTicker),
+      );
     }
   }
-  
 
-
-  
   let charNumber = 50;
-      
-      
-      $: {
-        if($screenWidth < 640)
-        {
-          charNumber =15;
-        }
-        else 
-        {
-          charNumber=50;
-        }
-      }
-      
-  
 
-$: {
-  if($etfTicker && typeof window !== 'undefined' && $page.url.pathname === `/etf/${$etfTicker}`)
-  {
-    displaySection = 'overview';
+  $: {
+    if ($screenWidth < 640) {
+      charNumber = 15;
+    } else {
+      charNumber = 50;
+    }
   }
-}
 
-$: {
-  if($page.url.pathname)
-  {
-      const parts = $page?.url?.pathname?.split('/');
+  $: {
+    if (
+      $etfTicker &&
+      typeof window !== "undefined" &&
+      $page.url.pathname === `/etf/${$etfTicker}`
+    ) {
+      displaySection = "overview";
+    }
+  }
+
+  $: {
+    if ($page.url.pathname) {
+      const parts = $page?.url?.pathname?.split("/");
       const sectionMap = {
-        'stats': 'stats',
-        'forecast': 'forecast',
-        'options': 'options',
-        'holdings': 'holdings',
-        'dividends': 'dividends',
-        'congress-trading': 'congress-trading',
-        'news': 'news'
+        stats: "stats",
+        forecast: "forecast",
+        options: "options",
+        holdings: "holdings",
+        dividends: "dividends",
+        "congress-trading": "congress-trading",
+        news: "news",
       };
-      displaySection = sectionMap[parts?.find(part => Object?.keys(sectionMap)?.includes(part))] || 'overview';
+      displaySection =
+        sectionMap[
+          parts?.find((part) => Object?.keys(sectionMap)?.includes(part))
+        ] || "overview";
+    }
   }
-}
-
-
 </script>
-  
 
-  
-      
-
-<body class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden">    
+<body
+  class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden"
+>
   <!-- Page wrapper -->
   <div class="flex flex-col w-full">
-      <main class="grow w-full">
-          <section class="w-full">
-              <div class="w-full">
-                  <div class="sm:flex sm:justify-start w-full">
-             <!--Start Mobile Navbar-->
-             <div class="fixed top-0 left-0 right-0 z-20 bg-[#09090B] sm:hidden">
+    <main class="grow w-full">
+      <section class="w-full">
+        <div class="w-full">
+          <div class="sm:flex sm:justify-start w-full">
+            <!--Start Mobile Navbar-->
+            <div class="fixed top-0 left-0 right-0 z-20 bg-[#09090B] sm:hidden">
               <div class="navbar w-full px-4 py-2">
-      
-                <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
-        
-                  <div class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2">
-        
-                      <label on:click={() => goto('/')} class="ml-2 cursor-pointer">
-                          <svg class="w-5 h-5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(-90 512 512)"><path fill="white" d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"/></g></svg>
-                      </label>
-        
-                      <div class="{!isScrolled ? 'hidden' : 'flex flex-col items-center ml-6 transition-transform ease-in'}">
-                          <span class="text-white text-[0.70rem] font-medium text-opacity-[0.6]">
-                          {$etfTicker}
-                          </span>
-                          <span class="text-white font-medium text-sm">
-                            {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
-                              {$etfTicker?.includes('.DE') || $etfTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
-                            {:else}
-                            ---
-                            {/if}
-                          </span>
-                      </div>
-                      
-                        <!--Start Search Button-->
-                        <label on:click={loadSearchData} class="ml-auto mr-4" for="searchBarModal">
-                          <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"/></svg>
-                        </label>
-                          <!--End Search Button-->
-        
-  
-                         <!--Start Share Button-->
-                        <label class="mr-4" on:click={() => shareContent('https://stocknear.com/stocks/'+$etfTicker)} >
-                          <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336 192h40a40 40 0 0 1 40 40v192a40 40 0 0 1-40 40H136a40 40 0 0 1-40-40V232a40 40 0 0 1 40-40h40m160-64l-80-80l-80 80m80 193V48"/></svg>
-                        </label>
-                          <!--End Share Button-->
-  
-                  
-        
-                          <!--Start Watchlist-->
-                          {#if data?.user}
-                            <div class="flex flex-col mr-4">
-                              {#if userWatchList?.length !== 0}
-                                <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
-                                  {#if isTickerIncluded}
-                                    <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FBCE3C" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                                    {:else}
-                                    <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                                  {/if}
-                                </label>
+                <div
+                  class="{isScrolled
+                    ? 'border-b border-slate-800 ease-in'
+                    : 'ease-out'} m-auto w-full"
+                >
+                  <div
+                    class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2"
+                  >
+                    <label
+                      on:click={() => goto("/")}
+                      class="ml-2 cursor-pointer"
+                    >
+                      <svg
+                        class="w-5 h-5 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 1024 1024"
+                        ><g transform="rotate(-90 512 512)"
+                          ><path
+                            fill="white"
+                            d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
+                          /></g
+                        ></svg
+                      >
+                    </label>
 
-                              {:else if userWatchList?.length === 0}
-                                <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
-                                  {#if isTickerIncluded}
-                                  <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FBCE3C" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                                  {:else}
-                                  <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                                  {/if}
-                              </label>
-                            
-                              {/if}
-                            </div>
-                            {:else}
-                              <label for="userLogin" class="cursor-pointer flex-shrink-0 text-white mr-4">
-                                <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>
-                              </label>
-                            {/if}
-                          <!--End Watchlist-->
-                        
-                        <!--Start Price Alert-->
-                        <label on:click={() => $openPriceAlert = true} for={data?.user ? 'priceAlertModal' : 'userLogin'} class="mr-2">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 inline-block mt-1" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 5.231L6.15 3M21 5.231L17.85 3"/><circle cx="12" cy="13" r="8"/><path d="M9.5 13h5M12 10.5v5"/></g></svg>
-                        </label>
-                        <!--End Price Alert -->
-        
-                        
+                    <div
+                      class={!isScrolled
+                        ? "hidden"
+                        : "flex flex-col items-center ml-6 transition-transform ease-in"}
+                    >
+                      <span
+                        class="text-white text-[0.70rem] font-medium text-opacity-[0.6]"
+                      >
+                        {$etfTicker}
+                      </span>
+                      <span class="text-white font-medium text-sm">
+                        {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
+                          {$etfTicker?.includes(".DE") ||
+                          $etfTicker?.includes(".F")
+                            ? `${$currentPortfolioPrice}€`
+                            : ` $${$currentPortfolioPrice}`}
+                        {:else}
+                          ---
+                        {/if}
+                      </span>
                     </div>
+
+                    <!--Start Search Button-->
+                    <label
+                      on:click={loadSearchData}
+                      class="ml-auto mr-4"
+                      for="searchBarModal"
+                    >
+                      <svg
+                        class="w-6 h-6 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="none"
+                          stroke="white"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="1.5"
+                          d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
+                        /></svg
+                      >
+                    </label>
+                    <!--End Search Button-->
+
+                    <!--Start Share Button-->
+                    <label
+                      class="mr-4"
+                      on:click={() =>
+                        shareContent(
+                          "https://stocknear.com/stocks/" + $etfTicker,
+                        )}
+                    >
+                      <svg
+                        class="w-6 h-6 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 512 512"
+                        ><path
+                          fill="none"
+                          stroke="white"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="32"
+                          d="M336 192h40a40 40 0 0 1 40 40v192a40 40 0 0 1-40 40H136a40 40 0 0 1-40-40V232a40 40 0 0 1 40-40h40m160-64l-80-80l-80 80m80 193V48"
+                        /></svg
+                      >
+                    </label>
+                    <!--End Share Button-->
+
+                    <!--Start Watchlist-->
+                    {#if data?.user}
+                      <div class="flex flex-col mr-4">
+                        {#if userWatchList?.length !== 0}
+                          <label
+                            for="addWatchListModal"
+                            class="cursor-pointer flex-shrink-0"
+                          >
+                            {#if isTickerIncluded}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="#fff"
+                                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                /></svg
+                              >
+                            {:else}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                /></svg
+                              >
+                            {/if}
+                          </label>
+                        {:else if userWatchList?.length === 0}
+                          <label
+                            on:click={() => toggleUserWatchlist("firstList")}
+                            class="cursor-pointer flex-shrink-0"
+                          >
+                            {#if isTickerIncluded}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="#fff"
+                                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                /></svg
+                              >
+                            {:else}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                /></svg
+                              >
+                            {/if}
+                          </label>
+                        {/if}
+                      </div>
+                    {:else}
+                      <label
+                        for="userLogin"
+                        class="cursor-pointer flex-shrink-0 text-white mr-4"
+                      >
+                        <svg
+                          class="w-6 h-6 inline-block"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 16 16"
+                          ><path
+                            fill="white"
+                            d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                          /></svg
+                        >
+                      </label>
+                    {/if}
+                    <!--End Watchlist-->
+
+                    <!--Start Price Alert-->
+                    <label
+                      on:click={() => ($openPriceAlert = true)}
+                      for={data?.user ? "priceAlertModal" : "userLogin"}
+                      class="mr-2"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-7 h-7 inline-block mt-1"
+                        viewBox="0 0 24 24"
+                        ><g
+                          fill="none"
+                          stroke="white"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="1.5"
+                          ><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
+                            cx="12"
+                            cy="13"
+                            r="8"
+                          /><path d="M9.5 13h5M12 10.5v5" /></g
+                        ></svg
+                      >
+                    </label>
+                    <!--End Price Alert -->
+                  </div>
                 </div>
               </div>
             </div>
             <!--End Mobile Navbar-->
-           
-        
-            <div class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
-                    
-              <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
-                  <!-- Main content -->
-                  <div class="pb-12 md:pb-20 w-full 2xl:max-w-5xl">
-                      <div class="md:pr-6 lg:pr-10">
-                                   
-                                   
-                  
-                                      <!-----Start-Header-CandleChart-Indicators------>
-                                      <div class="m-auto pl-0 sm:pl-4 max-w-5xl overflow-hidden mb-5 md:mt-10">
-      
-                                        <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
-  
-                                            <Markethour />
-  
-                                            <!--Start Watchlist-->
-                                          
-                                            {#if data?.user}
-                                            <div class="flex flex-col ml-auto mr-2">
-                                              {#if userWatchList?.length !== 0}
-                                              <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                                <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
-                                                  {#if isTickerIncluded}
-                                                    <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FBCE3C" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                                                    {:else}
-                                                    <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                                                  {/if}
-                                                </label>
-                                              </div>
-        
-                                              {:else if userWatchList?.length === 0}
-                                              <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                                <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
-                                                  {#if isTickerIncluded}
-                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                                                  {:else}
-                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                                                  {/if}
-                                              </label>
-                                              </div>
-                                             
-                                              {/if}
-                                            </div>
-                                            {:else}
-                                            <div class="flex-shrink-0 ml-auto mr-2 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                              <label for="userLogin" class="cursor-pointer flex-shrink-0 text-white">
-                                                <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>
-                                              </label>
-                                            </div>
-                                            {/if}
-                                          <!--End Watchlist-->
 
-                                         <!--Start Price Alert -->
-                                        
-                                         <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                          <label on:click={() => $openPriceAlert = true} for={data?.user ? 'priceAlertModal' : 'userLogin'} class="cursor-pointer flex-shrink-0 text-white">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 inline-block" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 5.231L6.15 3M21 5.231L17.85 3"/><circle cx="12" cy="13" r="8"/><path d="M9.5 13h5M12 10.5v5"/></g></svg>
-                                          </label>
-                                        </div>
-                                        <!--End Price Alert -->
+            <div
+              class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0"
+            >
+              <div
+                class="md:flex md:justify-between md:divide-x md:divide-slate-800"
+              >
+                <!-- Main content -->
+                <div class="pb-12 md:pb-20 w-full 2xl:max-w-5xl">
+                  <div class="md:pr-6 lg:pr-10">
+                    <!-----Start-Header-CandleChart-Indicators------>
+                    <div
+                      class="m-auto pl-0 sm:pl-4 max-w-5xl overflow-hidden mb-5 md:mt-10"
+                    >
+                      <div
+                        class="hidden sm:flex flex-row w-full justify-between items-center pb-10"
+                      >
+                        <Markethour />
 
-                                        </div>
-        
-                                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                        <!-- svelte-ignore a11y-label-has-associated-control -->
-                                        
-                                        <div class="flex items-center">
-                                          <div class="flex flex-row justify-start items-center mb-5 mt-2">
-                                            
-                                            <div class="rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800">
-                                              <img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${$etfTicker?.toUpperCase()}.png`} loading="lazy"/>
-                                            </div>
-                                            
-                                            
-                                            <div class="flex flex-col items-start ml-2 sm:ml-3">
-                                              <span class="text-xs text-blue-400">
-                                                {$etfTicker?.toUpperCase()}
-                                              </span>
-                                              <span class="text-sm sm:text-xl font-medium text-slate-100">
-                                                {$displayCompanyName?.length > charNumber ? $displayCompanyName?.slice(0,charNumber) + "..." : $displayCompanyName}
-                                              </span>
-                                            </div>
-                                          </div>
-  
-  
-                                      <div class="ml-auto sm:hidden">
-                                        <Markethour />
-                                      </div>
-        
-                                          
-        
-        
-                                            <!--Start Trade-->
-                                            <!--
+                        <!--Start Watchlist-->
+
+                        {#if data?.user}
+                          <div class="flex flex-col ml-auto mr-2">
+                            {#if userWatchList?.length !== 0}
+                              <div
+                                class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                              >
+                                <label
+                                  for="addWatchListModal"
+                                  class="cursor-pointer flex-shrink-0"
+                                >
+                                  {#if isTickerIncluded}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="#fff"
+                                        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                      /></svg
+                                    >
+                                  {:else}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="white"
+                                        d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                      /></svg
+                                    >
+                                  {/if}
+                                </label>
+                              </div>
+                            {:else if userWatchList?.length === 0}
+                              <div
+                                class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                              >
+                                <label
+                                  on:click={() =>
+                                    toggleUserWatchlist("firstList")}
+                                  class="cursor-pointer flex-shrink-0"
+                                >
+                                  {#if isTickerIncluded}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="#9DED1E"
+                                        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                      /></svg
+                                    >
+                                  {:else}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="white"
+                                        d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                      /></svg
+                                    >
+                                  {/if}
+                                </label>
+                              </div>
+                            {/if}
+                          </div>
+                        {:else}
+                          <div
+                            class="flex-shrink-0 ml-auto mr-2 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                          >
+                            <label
+                              for="userLogin"
+                              class="cursor-pointer flex-shrink-0 text-white"
+                            >
+                              <svg
+                                class="w-7 h-7 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                /></svg
+                              >
+                            </label>
+                          </div>
+                        {/if}
+                        <!--End Watchlist-->
+
+                        <!--Start Price Alert -->
+
+                        <div
+                          class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                        >
+                          <label
+                            on:click={() => ($openPriceAlert = true)}
+                            for={data?.user ? "priceAlertModal" : "userLogin"}
+                            class="cursor-pointer flex-shrink-0 text-white"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              class="w-8 h-8 inline-block"
+                              viewBox="0 0 24 24"
+                              ><g
+                                fill="none"
+                                stroke="white"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                ><path
+                                  d="M3 5.231L6.15 3M21 5.231L17.85 3"
+                                /><circle cx="12" cy="13" r="8" /><path
+                                  d="M9.5 13h5M12 10.5v5"
+                                /></g
+                              ></svg
+                            >
+                          </label>
+                        </div>
+                        <!--End Price Alert -->
+                      </div>
+
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-label-has-associated-control -->
+
+                      <div class="flex items-center">
+                        <div
+                          class="flex flex-row justify-start items-center mb-5 mt-2"
+                        >
+                          <div
+                            class="rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800"
+                          >
+                            <img
+                              style="clip-path: circle(50%);"
+                              class="w-6 h-6"
+                              src={`https://financialmodelingprep.com/image-stock/${$etfTicker?.toUpperCase()}.png`}
+                              loading="lazy"
+                            />
+                          </div>
+
+                          <div class="flex flex-col items-start ml-2 sm:ml-3">
+                            <span class="text-xs text-blue-400">
+                              {$etfTicker?.toUpperCase()}
+                            </span>
+                            <span
+                              class="text-sm sm:text-xl font-medium text-slate-100"
+                            >
+                              {$displayCompanyName?.length > charNumber
+                                ? $displayCompanyName?.slice(0, charNumber) +
+                                  "..."
+                                : $displayCompanyName}
+                            </span>
+                          </div>
+                        </div>
+
+                        <div class="ml-auto sm:hidden">
+                          <Markethour />
+                        </div>
+
+                        <!--Start Trade-->
+                        <!--
                                             <div class="hidden sm:flex ml-auto">
                                               {#if holdingShares !== 0 && data?.user}
                                              
@@ -648,120 +799,205 @@ $: {
                                               {/if}
                                             </div>
                                             -->
-                                            <!--End Trade-->
-                       
-                                        </div>
-                                         
-        
-                         
-                                      
-        
-                                      </div>
-                                      <!-----End-Header-CandleChart-Indicators------>
-        
-        
-                                        <!--Start Ticker Section-->
-                                        
-                                        <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
-                                          <div class="sm:ml-4 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
-                                            <ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B]  space-x-3 rtl:space-x-reverse py-2">
-                                              <li class="cursor-pointer flex flex-col items-center">
-                                                <a href={`/etf/${$etfTicker}`} id="item1" on:click={() => (changeSection('overview','item1'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  Overview
-                                                </a>
-                                                <div class="{displaySection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
-                                              </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
-                                                <a href={`/etf/${$etfTicker}/stats`} id="item2" on:click={() => (changeSection('stats','item2'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'stats' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  Stats
-                                                </a>
-                                                <div class="{displaySection === 'stats' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
-                                              </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
-                                                <a href={`/etf/${$etfTicker}/forecast`} id="item10" on:click={() => (changeSection('forecast','item10'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'forecast' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  Forecast
-                                                </a>
-                                                <div class="{displaySection === 'forecast' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]" />
-                                              </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
-                                                <a href={`/etf/${$etfTicker}/options`} id="item3" on:click={() => (changeSection('options','item3'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'options' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  Options
-                                                </a>
-                                                <div class="{displaySection === 'options' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]" />
-                                              </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
-                                                <a href={`/etf/${$etfTicker}/holdings`} id="item4" on:click={() => (changeSection('holdings','item4'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'holdings' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  Holdings
-                                                </a>
-                                                <div class="{displaySection === 'holdings' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]" />
-                                              </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
-                                                <a href={`/etf/${$etfTicker}/dividends`} id="item5" on:click={() => (changeSection('dividends','item5'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'dividends' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  Dividends
-                                                </a>
-                                                <div class="{displaySection === 'dividends' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]" />
-                                              </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
-                                                <a href={`/etf/${$etfTicker}/congress-trading`} id="item5" on:click={() => (changeSection('congress-trading','item5'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'congress-trading' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  Insider
-                                                </a>
-                                                <div class="{displaySection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]" />
-                                              </li>
-                                              <li class="cursor-pointer flex flex-col items-center pr-6">
-                                                <a href={`/etf/${$etfTicker}/news`} id="item7" on:click={() => (changeSection('news','item7'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'news' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                  News
-                                                </a>
-                                                <div class="{displaySection === 'news' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
-                                              </li>
-                                            </ul>
-                                          </div>
-                                          
+                        <!--End Trade-->
+                      </div>
+                    </div>
+                    <!-----End-Header-CandleChart-Indicators------>
 
-                                        <!--Start-Main Content-->
-                                          <slot />
-                                        <!--End Main Content-->
-      
-      
-  
-                
-                              </div>
-                          </div>
-  
-                          <aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
-                            <div class="sm:pl-10">
-                        
-                                <!--Start Company Info -->
-                                
-                                <ETFProfileCard
-                                  data = {data}
-                                  etfProfile = {etfProfile}
-                                />
+                    <!--Start Ticker Section-->
 
-                               
-                                <div class="{topHoldingList?.length === 0 ? 'hidden' : ''}">
-                                <TopHoldingCard
-                                topHoldingList = {topHoldingList}
-                                />
-                                </div>
+                    <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
+                    <div
+                      class="sm:ml-4 w-screen sm:w-full {$screenWidth < 640
+                        ? 'overflow-auto scrollbar no-scrollbar'
+                        : ''} mb-2"
+                    >
+                      <ul
+                        class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
+                      >
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/etf/${$etfTicker}`}
+                            id="item1"
+                            on:click={() => changeSection("overview", "item1")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'overview'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Overview
+                          </a>
+                          <div
+                            class="{displaySection === 'overview'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/etf/${$etfTicker}/stats`}
+                            id="item2"
+                            on:click={() => changeSection("stats", "item2")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'stats'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Stats
+                          </a>
+                          <div
+                            class="{displaySection === 'stats'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/etf/${$etfTicker}/forecast`}
+                            id="item10"
+                            on:click={() => changeSection("forecast", "item10")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'forecast'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Forecast
+                          </a>
+                          <div
+                            class="{displaySection === 'forecast'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/etf/${$etfTicker}/options`}
+                            id="item3"
+                            on:click={() => changeSection("options", "item3")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'options'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Options
+                          </a>
+                          <div
+                            class="{displaySection === 'options'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/etf/${$etfTicker}/holdings`}
+                            id="item4"
+                            on:click={() => changeSection("holdings", "item4")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'holdings'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Holdings
+                          </a>
+                          <div
+                            class="{displaySection === 'holdings'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/etf/${$etfTicker}/dividends`}
+                            id="item5"
+                            on:click={() => changeSection("dividends", "item5")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'dividends'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Dividends
+                          </a>
+                          <div
+                            class="{displaySection === 'dividends'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/etf/${$etfTicker}/congress-trading`}
+                            id="item5"
+                            on:click={() =>
+                              changeSection("congress-trading", "item5")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'congress-trading'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Insider
+                          </a>
+                          <div
+                            class="{displaySection === 'congress-trading'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
+                          />
+                        </li>
+                        <li
+                          class="cursor-pointer flex flex-col items-center pr-6"
+                        >
+                          <a
+                            href={`/etf/${$etfTicker}/news`}
+                            id="item7"
+                            on:click={() => changeSection("news", "item7")}
+                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'news'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            News
+                          </a>
+                          <div
+                            class="{displaySection === 'news'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
+                          />
+                        </li>
+                      </ul>
+                    </div>
 
-                                <div class="{dividendList?.history?.length === 0 ? 'hidden' : ''}">
-                                  <DividendCard
-                                  dividendList = {dividendList}
-                                  />
-                                </div>
-                                <div class="{similarTicker.length === 0 ? 'hidden' : ''}">
-                                    <SimilarETFCard 
-                                    similarTicker = {similarTicker}
-                                    />
-                                </div>
+                    <!--Start-Main Content-->
+                    <slot />
+                    <!--End Main Content-->
+                  </div>
+                </div>
 
-                                
-                                <!--End Company Info -->
-    
-    
-                              </div>
-                          </aside>
-                        <!--
+                <aside
+                  class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20"
+                >
+                  <div class="sm:pl-10">
+                    <!--Start Company Info -->
+
+                    <ETFProfileCard {data} {etfProfile} />
+
+                    <div class={topHoldingList?.length === 0 ? "hidden" : ""}>
+                      <TopHoldingCard {topHoldingList} />
+                    </div>
+
+                    <div
+                      class={dividendList?.history?.length === 0
+                        ? "hidden"
+                        : ""}
+                    >
+                      <DividendCard {dividendList} />
+                    </div>
+                    <div class={similarTicker.length === 0 ? "hidden" : ""}>
+                      <SimilarETFCard {similarTicker} />
+                    </div>
+
+                    <!--End Company Info -->
+                  </div>
+                </aside>
+                <!--
                           {#if $screenWidth < 640 && MobileETFNavbar}
                             <MobileETFNavbar 
                               holdingShares={holdingShares}
@@ -775,7 +1011,7 @@ $: {
                           {/if}
                         -->
 
-                        <!--
+                <!--
                         <div class="sm:hidden fixed z-20 bottom-8 sm:bottom-10 right-5">
                           <div class="h-full mx-auto">        
                             <div class="flex items-center justify-end">
@@ -793,23 +1029,19 @@ $: {
                           </div>
                         </div>
                         -->
-
-
-                                            
-  
-                      </div>
-                  </section>
-              </main>        
+              </div>
+            </div>
           </div>
-      </body>
-                
-              
-  
-  
+        </div>
+      </section>
+    </main>
+  </div>
+</body>
+
 <!--Start Login Modal-->
 {#if LoginPopup}
-<LoginPopup form={$globalForm}/> 
-{/if}   
+  <LoginPopup form={$globalForm} />
+{/if}
 <!--End Login Modal-->
 
 <!--
@@ -835,73 +1067,99 @@ $: {
 -->
 
 {#if PriceAlert}
-<PriceAlert 
-  data = {data}
-/>
+  <PriceAlert {data} />
 {/if}
 
-  
+<!--Start Type of Trade-->
 
-  
-  
-  
-  
-  <!--Start Type of Trade-->
-  
-  
-  <input type="checkbox" id="typeOfTrade" class="modal-toggle" />
-  
-  <dialog id="typeOfTrade" class="modal modal-bottom sm:modal-middle overflow-hidden">
-  
-  
-    <label for="typeOfTrade"  class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"></label>
-    
-    <div class="modal-box w-full bg-[#000] border border-slate-600 pb-10">
-  
-  
-  
-      <div class= "flex flex-col">
-        <div class="text-white text-md flex flex-col flex-shrink-0">
-            <div class="rounded-full w-10 h-10 relative bg-gray-900 mb-2">
-                <img class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://financialmodelingprep.com/image-stock/${$etfTicker}.png`} />
-            </div>
-            <span class="mb-1">
-                {$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0, 30) + "..." : $displayCompanyName}
-            </span>
-            <div class="flex flex-row items-center mb-10">
-  
-              <span class="mb-1 text-sm font-medium">
-                  Current Price: ${$currentPortfolioPrice}
-              </span>
-              <span class="text-blue-400 text-sm font-medium ml-auto">
-                Holding Shares: {holdingShares}
-              </span>
-  
-            </div>
+<input type="checkbox" id="typeOfTrade" class="modal-toggle" />
+
+<dialog
+  id="typeOfTrade"
+  class="modal modal-bottom sm:modal-middle overflow-hidden"
+>
+  <label
+    for="typeOfTrade"
+    class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"
+  ></label>
+
+  <div class="modal-box w-full bg-[#000] border border-slate-600 pb-10">
+    <div class="flex flex-col">
+      <div class="text-white text-md flex flex-col flex-shrink-0">
+        <div class="rounded-full w-10 h-10 relative bg-gray-900 mb-2">
+          <img
+            class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            src={`https://financialmodelingprep.com/image-stock/${$etfTicker}.png`}
+          />
         </div>
+        <span class="mb-1">
+          {$displayCompanyName?.length > 30
+            ? $displayCompanyName?.slice(0, 30) + "..."
+            : $displayCompanyName}
+        </span>
+        <div class="flex flex-row items-center mb-10">
+          <span class="mb-1 text-sm font-medium">
+            Current Price: ${$currentPortfolioPrice}
+          </span>
+          <span class="text-blue-400 text-sm font-medium ml-auto">
+            Holding Shares: {holdingShares}
+          </span>
+        </div>
+      </div>
     </div>
-  
-  
+
     <div class="text-white">
-      <h3 class="font-bold text-2xl mb-5">
-        Type of Trade
-      </h3>
-  
-  
+      <h3 class="font-bold text-2xl mb-5">Type of Trade</h3>
+
       <ul class="menu dropdown-content text-white bg-[#000] rounded -ml-6">
         <li class="mb-3">
-          <label for="typeOfTrade" on:click={() => handleTypeOfTrade('buy')} class="cursor-pointer flex flex-row justify-start items-center">
+          <label
+            for="typeOfTrade"
+            on:click={() => handleTypeOfTrade("buy")}
+            class="cursor-pointer flex flex-row justify-start items-center"
+          >
             <div class="rounded-full w-10 h-10 relative bg-gray-800">
-              <svg class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="green"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="16" height="16" id="icon-bound" fill="none"></rect> <path d="M0,11h11.2l-2.6,2.6L10,15l6-6H0V11z M4.8,5l2.6-2.6L6,1L0,7h16V5H4.8z"></path> </g></svg>
+              <svg
+                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                viewBox="0 0 16 16"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                fill="green"
+                ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g><g id="SVGRepo_iconCarrier">
+                  <rect width="16" height="16" id="icon-bound" fill="none"
+                  ></rect>
+                  <path
+                    d="M0,11h11.2l-2.6,2.6L10,15l6-6H0V11z M4.8,5l2.6-2.6L6,1L0,7h16V5H4.8z"
+                  ></path>
+                </g></svg
+              >
             </div>
-            <span class="ml-1 text-white text-lg font-medium">Buy {$etfTicker} Shares</span>
-            
+            <span class="ml-1 text-white text-lg font-medium"
+              >Buy {$etfTicker} Shares</span
+            >
           </label>
         </li>
         <li class="mb-3">
-          <label for="typeOfTrade" on:click={() => handleTypeOfTrade('sell')} class="cursor-pointer flex flex-row justify-start items-center">
+          <label
+            for="typeOfTrade"
+            on:click={() => handleTypeOfTrade("sell")}
+            class="cursor-pointer flex flex-row justify-start items-center"
+          >
             <div class="rounded-full w-10 h-10 relative bg-gray-800">
-              <svg class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M14.25 21.4q-.575.575-1.425.575T11.4 21.4l-8.8-8.8q-.275-.275-.438-.65T2 11.15V4q0-.825.588-1.413T4 2h7.15q.425 0 .8.163t.65.437l8.8 8.825q.575.575.575 1.413T21.4 14.25l-7.15 7.15ZM6.5 8q.625 0 1.063-.438T8 6.5q0-.625-.438-1.063T6.5 5q-.625 0-1.063.438T5 6.5q0 .625.438 1.063T6.5 8Z"/></svg>
+              <svg
+                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                ><path
+                  fill="red"
+                  d="M14.25 21.4q-.575.575-1.425.575T11.4 21.4l-8.8-8.8q-.275-.275-.438-.65T2 11.15V4q0-.825.588-1.413T4 2h7.15q.425 0 .8.163t.65.437l8.8 8.825q.575.575.575 1.413T21.4 14.25l-7.15 7.15ZM6.5 8q.625 0 1.063-.438T8 6.5q0-.625-.438-1.063T6.5 5q-.625 0-1.063.438T5 6.5q0 .625.438 1.063T6.5 8Z"
+                /></svg
+              >
             </div>
             <span class="ml-1 text-white text-lg font-medium">
               Sell {$etfTicker} Shares
@@ -910,50 +1168,91 @@ $: {
         </li>
       </ul>
     </div>
-    </div>
-  </dialog>
-  
-  <!--End Type of Trade-->
-  
-  
-    
-  
-  
-  
-  
-  <!--Start Add Watchlist Modal-->
+  </div>
+</dialog>
+
+<!--End Type of Trade-->
+
+<!--Start Add Watchlist Modal-->
 <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
 
-<dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]">
-  <label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop"></label>
+<dialog
+  id="addWatchListModal"
+  class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]"
+>
+  <label
+    id="addWatchListModal"
+    for="addWatchListModal"
+    class="cursor-pointer modal-backdrop"
+  ></label>
 
   <div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
-    <label for="addWatchListModal" class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"> ✕ </label>
+    <label
+      for="addWatchListModal"
+      class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"
+    >
+      ✕
+    </label>
 
     <div class="text-white">
       <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
       <div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
         {#each userWatchList as item}
-          <label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-            <div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($etfTicker) ? 'ring-2 ring-[#04E000]' : ''}">
+          <label
+            on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
+            class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
+          >
+            <div
+              class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes(
+                $etfTicker,
+              )
+                ? 'ring-2 ring-[#04E000]'
+                : ''}"
+            >
               <div class="flex flex-col items-center w-full">
                 <span class="ml-1 text-white font-medium mr-auto">
                   {item?.title}
                 </span>
-                <span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
+                <span
+                  class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"
+                >
                   {item?.ticker?.length}
                   {item?.ticker?.length !== 1 ? "Companies" : "Company"}
                 </span>
               </div>
 
-              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
+              <div
+                class="rounded-full w-8 h-8 relative border border-[#737373]"
+              >
                 {#if item?.ticker?.includes($etfTicker)}
-                  <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"
-                    ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
-                      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc>
-                      <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                        <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero">
+                  <svg
+                    class="w-full h-full rounded-full"
+                    viewBox="0 0 48 48"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    fill="#09090B000"
+                    ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                      id="SVGRepo_tracerCarrier"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></g><g id="SVGRepo_iconCarrier">
+                      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+                      <title>ic_fluent_checkmark_circle_48_filled</title>
+                      <desc>Created with Sketch.</desc>
+                      <g
+                        id="🔍-Product-Icons"
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd"
+                      >
+                        <g
+                          id="ic_fluent_checkmark_circle_48_filled"
+                          fill="#04E000"
+                          fill-rule="nonzero"
+                        >
                           <path
                             d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
                             id="🎨-Color"
@@ -973,48 +1272,42 @@ $: {
   </div>
 </dialog>
 
-  <!--End Add Watchlist Modal-->
-      
-  
-  
-  <style lang='scss'>
-       
+<!--End Add Watchlist Modal-->
 
-    .scrollbar {
-        display: grid;
-        grid-gap: 17px;
-        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
-        grid-auto-flow: column;
-        overflow-x: auto;
-        scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
-        scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
-    }
-    
-    /* Custom scrollbar for Webkit (Chrome, Safari) */
-    .scrollbar::-webkit-scrollbar {
-        width: 0; /* Hide the width of the scrollbar */
-        height: 0; /* Hide the height of the scrollbar */
-    }
-    
-    .scrollbar::-webkit-scrollbar-thumb {
-        background: transparent; /* Make the thumb transparent */
-    }
-    
-    ::-webkit-scrollbar {
-        height: 7px;
-        width: 10px;
-        background: #09090B;
-    }
-    
-    ::-webkit-scrollbar-thumb {
-        background: #6B6F79;
-        -webkit-border-radius: 1ex;
-        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
-    }
-    
-    ::-webkit-scrollbar-corner {
-        background: #09090B;
-    }
-    
-    
-    </style>
\ No newline at end of file
+<style lang="scss">
+  .scrollbar {
+    display: grid;
+    grid-gap: 17px;
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    grid-auto-flow: column;
+    overflow-x: auto;
+    scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
+    scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
+  }
+
+  /* Custom scrollbar for Webkit (Chrome, Safari) */
+  .scrollbar::-webkit-scrollbar {
+    width: 0; /* Hide the width of the scrollbar */
+    height: 0; /* Hide the height of the scrollbar */
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: transparent; /* Make the thumb transparent */
+  }
+
+  ::-webkit-scrollbar {
+    height: 7px;
+    width: 10px;
+    background: #09090b;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #6b6f79;
+    -webkit-border-radius: 1ex;
+    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: #09090b;
+  }
+</style>
diff --git a/src/routes/etf/[tickerID]/congress-trading/+page.svelte b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
index 47ca88c3..c30dbfca 100644
--- a/src/routes/etf/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
@@ -173,7 +173,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte
index ae1690ef..89fb19ce 100644
--- a/src/routes/etf/[tickerID]/dividends/+page.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+page.svelte
@@ -153,7 +153,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index d30605ac..6c0e9d18 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -198,7 +198,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/etf/[tickerID]/news/+page.svelte b/src/routes/etf/[tickerID]/news/+page.svelte
index 5d65d3d7..b3f56bac 100644
--- a/src/routes/etf/[tickerID]/news/+page.svelte
+++ b/src/routes/etf/[tickerID]/news/+page.svelte
@@ -165,7 +165,7 @@
           {#if newsList?.length !== rawNews?.length}
             <label
               on:click={loadMoreData}
-              class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
+              class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-[#fff] bg-[#fff] bg-opacity-[0.6]"
             >
               Load More News
             </label>
@@ -179,7 +179,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 109340b7..fbf7dec5 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -595,7 +595,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
@@ -732,7 +732,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 256 256"
                     ><path
-                      fill="#FBCE3C"
+                      fill="#fff"
                       d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                     /></svg
                   >
@@ -761,9 +761,7 @@
                     : ''} "
                 >
                   {#if activeEX === i}
-                    <div
-                      class="absolute inset-0 rounded-lg bg-purple-600"
-                    ></div>
+                    <div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
                   {/if}
                   <span
                     class="relative text-sm block font-medium duration-200 text-white"
@@ -796,9 +794,7 @@
                     : ''} "
                 >
                   {#if activeIdx === i}
-                    <div
-                      class="absolute inset-0 rounded-lg bg-purple-600"
-                    ></div>
+                    <div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
                   {/if}
                   <span
                     class="relative text-sm block font-medium duration-200 text-white"
@@ -928,7 +924,7 @@
                             </div>
                           {:else if item?.neutral_ratio > (item?.bull_ratio ?? 0) && item?.neutral_ratio > (item?.bear_ratio ?? 0)}
                             <div
-                              class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
+                              class="badge bg-[#fff] text-black font-semibold gap-2"
                             >
                               {item?.neutral_ratio?.toFixed(0)}% Neutral
                             </div>
@@ -976,7 +972,7 @@
                             </div>
                           {:else if item?.midpoint_ratio > (item?.ask_ratio ?? 0) && item?.midpoint_ratio > (item?.bid_ratio ?? 0)}
                             <div
-                              class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
+                              class="badge bg-[#fff] text-black font-semibold gap-2"
                             >
                               {item?.midpoint_ratio?.toFixed(0)}% Midpoint
                             </div>
@@ -1093,7 +1089,7 @@
                             : 'text-[#FF2F1F]'} text-end"
                         >
                           <div
-                            class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#FBCE3C] text-black m-auto flex justify-center items-center"
+                            class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#fff] text-black m-auto flex justify-center items-center"
                           >
                             {item?.strike_price}
                           </div>
@@ -1137,7 +1133,7 @@
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 256 256"
                   ><path
-                    fill="#FBCE3C"
+                    fill="#fff"
                     d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                   /></svg
                 >
diff --git a/src/routes/etf/[tickerID]/stats/+page.svelte b/src/routes/etf/[tickerID]/stats/+page.svelte
index 3992df5e..6c8b976b 100644
--- a/src/routes/etf/[tickerID]/stats/+page.svelte
+++ b/src/routes/etf/[tickerID]/stats/+page.svelte
@@ -130,7 +130,7 @@ updateYearRange()
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 256 256"
           ><path
-            fill="#FBCE3C"
+            fill="#fff"
             d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
           /></svg
         >
diff --git a/src/routes/etf/etf-providers/+page.svelte b/src/routes/etf/etf-providers/+page.svelte
index f9bd2107..ae486e4c 100644
--- a/src/routes/etf/etf-providers/+page.svelte
+++ b/src/routes/etf/etf-providers/+page.svelte
@@ -52,7 +52,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index da22ad4b..46183904 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -157,7 +157,7 @@
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 256 256"
         ><path
-          fill="#FBCE3C"
+          fill="#fff"
           d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
         /></svg
       >
diff --git a/src/routes/fda-calendar/+page.svelte b/src/routes/fda-calendar/+page.svelte
index da2cce36..5b6c55b2 100644
--- a/src/routes/fda-calendar/+page.svelte
+++ b/src/routes/fda-calendar/+page.svelte
@@ -152,7 +152,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
diff --git a/src/routes/heatmaps/+page.svelte b/src/routes/heatmaps/+page.svelte
index a7510595..cc34ce9e 100644
--- a/src/routes/heatmaps/+page.svelte
+++ b/src/routes/heatmaps/+page.svelte
@@ -381,7 +381,7 @@ async function exportTreemap() {
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 256 256"
                   ><path
-                    fill="#FBCE3C"
+                    fill="#fff"
                     d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                   /></svg
                 >
@@ -401,8 +401,8 @@ async function exportTreemap() {
                     class="cursor-pointer text-blue-400 sm:hover:text-white"
                     >{highestAvgCategory}</label
                   >
-                  surged ahead as the top performer with an impressive average
-                  return of
+                  surged ahead as the top performer with an impressive average return
+                  of
                   <span class="text-white font-medium"
                     >{highestAvg?.toFixed(2)}%</span
                   >.
diff --git a/src/routes/hedge-funds/[slug]/+page.svelte b/src/routes/hedge-funds/[slug]/+page.svelte
index 6d8fa87e..4612f938 100644
--- a/src/routes/hedge-funds/[slug]/+page.svelte
+++ b/src/routes/hedge-funds/[slug]/+page.svelte
@@ -6,7 +6,7 @@
     displayCompanyName,
   } from "$lib/store";
   import cardBackground from "$lib/images/bg-hedge-funds.png";
-  import { abbreviateNumber, formatString } from "$lib/utils";
+  import { abbreviateNumber, formatString, sectorNavigation } from "$lib/utils";
 
   import PercentIcon from "lucide-svelte/icons/percent";
   import MoneyIcon from "lucide-svelte/icons/circle-dollar-sign";
@@ -23,55 +23,6 @@
   export let data;
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
-  function sectorSelector(sector) {
-    let path;
-    switch (sector) {
-      case "Financials":
-        path = "financial";
-        break;
-      case "Healthcare":
-        path = "healthcare";
-        break;
-      case "Information Technology":
-        path = "technology";
-        break;
-      case "Technology":
-        path = "technology";
-        break;
-      case "Financial Services":
-        path = "financial";
-        break;
-      case "Industrials":
-        path = "industrials";
-        break;
-      case "Energy":
-        path = "energy";
-        break;
-      case "Utilities":
-        path = "utilities";
-        break;
-      case "Consumer Cyclical":
-        path = "consumer-cyclical";
-        break;
-      case "Real Estate":
-        path = "real-estate";
-        break;
-      case "Basic Materials":
-        path = "basic-materials";
-        break;
-      case "Communication Services":
-        path = "communication-services";
-        break;
-      case "Consumer Defensive":
-        path = "consumer-defensive";
-        break;
-      default:
-        // Handle default case if needed
-        break;
-    }
-    return path;
-  }
-
   let isLoaded = false;
   let rawData = data?.getHedgeFundsData;
   displayCompanyName.update(() => rawData?.name ?? "Company Data");
@@ -408,7 +359,7 @@
           type: "bar",
           showSymbol: false,
           itemStyle: {
-            color: "#FBCE3C", // Change bar color to white
+            color: "#fff", // Change bar color to white
           },
         },
         {
@@ -582,14 +533,14 @@
         <aside class="relative fixed w-full sm:w-1/3">
           <!--Start Card-->
           <div
-            class="w-full bg-[#141417] border border-gray-800 rounded-lg h-auto pb-4"
+            class="w-full bg-[#141417] border border-gray-800 rounded-md h-auto pb-4"
           >
             <div class="flex flex-col relative">
               <img
-                class="absolute w-full m-auto rounded-lg"
+                class="absolute w-full m-auto rounded-md"
                 src={cardBackground}
               />
-              <div class="flex flex-col justify-center items-center rounded-lg">
+              <div class="flex flex-col justify-center items-center rounded-md">
                 <div
                   class="mt-10 rounded-full border border-slate-600 w-24 h-24 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center"
                 >
@@ -666,7 +617,7 @@
           </div>
 
           <div
-            class="w-full bg-[#141417] border border-gray-800 rounded-lg h-fit pb-4 mt-5"
+            class="w-full bg-[#141417] border border-gray-800 rounded-md h-fit pb-4 mt-5"
           >
             <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
               <h2
@@ -699,7 +650,9 @@
                           >
                             <td class="text-[1rem] whitespace-nowrap">
                               <a
-                                href={"/list/sector/" + sectorSelector(name)}
+                                href={sectorNavigation?.find(
+                                  (item) => item?.title === name,
+                                )?.link}
                                 class="text-blue-400 sm:hover:text-white"
                               >
                                 {name}
@@ -737,7 +690,7 @@
             >
               <!--Start Total Amount Traded-->
               <div
-                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-lg h-20"
+                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-sm">AUM</span>
@@ -752,7 +705,7 @@
 
               <!--Start-->
               <div
-                class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span
@@ -829,7 +782,7 @@
 
               <!--Start-->
               <div
-                class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span
@@ -906,7 +859,7 @@
 
               <!--Start-->
               <div
-                class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span
@@ -993,7 +946,7 @@
 
         <main class="w-full mt-10 sm:mt-0 sm:pl-10">
           {#if isLoaded && Object?.keys(optionsData)?.length !== 0}
-            <div class="bg-[#09090B] rounded-lg sm:min-h-[330px] mb-10 sm:mb-6">
+            <div class="bg-[#09090B] rounded-md sm:min-h-[330px] mb-10 sm:mb-6">
               <div class="flex flex-row justify-start items-center">
                 {#if activePlotIdx === 0}
                   <PercentIcon class="h-6 w-6 shrink-0 inline-block" />
@@ -1009,7 +962,7 @@
               </div>
 
               <div
-                class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-5"
+                class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-5"
               >
                 {#each plotTabs as item, i}
                   <button
@@ -1020,12 +973,13 @@
                       : ''} "
                   >
                     {#if activePlotIdx === i}
-                      <div
-                        class="absolute inset-0 rounded-lg sm:rounded-lg bg-purple-600"
-                      ></div>
+                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
                     {/if}
                     <span
-                      class="relative block text-sm font-medium duration-200 text-white"
+                      class="relative block text-sm font-semibold {activePlotIdx ===
+                      i
+                        ? 'text-black'
+                        : 'text-white'}"
                     >
                       {item?.title}
                     </span>
@@ -1088,7 +1042,7 @@
             <div class="w-full grid grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3">
               <!--Start Total Amount Traded-->
               <div
-                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-lg h-20"
+                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-[1rem]">AUM</span>
@@ -1103,7 +1057,7 @@
 
               <!--Start-->
               <div
-                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-[1rem]"
@@ -1171,7 +1125,7 @@
 
               <!--Start-->
               <div
-                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-[1rem]"
@@ -1239,7 +1193,7 @@
 
               <!--Start-->
               <div
-                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
               >
                 <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-[1rem]"
@@ -1320,26 +1274,29 @@
               </span>
 
               <div class="w-64 mt-5">
-                <div class="relative right-0 bg-[#313131] rounded-lg">
+                <div class="relative right-0 bg-[#313131] rounded-md">
                   <div
-                    class="relative flex flex-row items-center p-1 list-none rounded-lg"
+                    class="relative flex flex-row items-center p-1 list-none rounded-md"
                   >
                     {#each tabs as item, i}
                       <button
                         on:click={() => changeTab(i)}
-                        class="group relative z-[1] rounded-lg px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx ===
+                        class="group relative z-[1] rounded-md px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx ===
                         i
                           ? 'z-0'
                           : ''} "
                       >
                         {#if activeIdx === i}
                           <div
-                            class="absolute inset-0 rounded-lg sm:rounded-lg bg-purple-600"
+                            class="absolute inset-0 rounded-md bg-[#fff]"
                           ></div>
                         {/if}
 
                         <span
-                          class="relative text-sm block font-medium duration-200 text-white"
+                          class="relative text-sm block font-semibold {activeIdx ===
+                          i
+                            ? 'text-black'
+                            : 'text-white'}"
                         >
                           {item?.title}
                         </span>
@@ -1706,14 +1663,14 @@
                   class="flex justify-center items-center m-auto sm:mt-24 mt-32 mb-6"
                 >
                   <div
-                    class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-gray-800 p-4"
+                    class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-800 p-4"
                   >
                     <svg
                       class="w-5 h-5 inline-block mr-2 flex-shrink-0"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 256 256"
                       ><path
-                        fill="#FBCE3C"
+                        fill="#fff"
                         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                       /></svg
                     >
diff --git a/src/routes/industry/+page.svelte b/src/routes/industry/+page.svelte
index b4df735a..5e2f796b 100644
--- a/src/routes/industry/+page.svelte
+++ b/src/routes/industry/+page.svelte
@@ -18,7 +18,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/insider-tracker/+page.svelte b/src/routes/insider-tracker/+page.svelte
index fd5c3e13..2205a3d8 100644
--- a/src/routes/insider-tracker/+page.svelte
+++ b/src/routes/insider-tracker/+page.svelte
@@ -193,7 +193,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index 7756ee3a..47bd0746 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -53,7 +53,7 @@
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 256 256"
           ><path
-            fill="#FBCE3C"
+            fill="#fff"
             d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
           /></svg
         >
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index be2d174b..bfc29bd3 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -89,7 +89,7 @@
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 256 256"
           ><path
-            fill="#FBCE3C"
+            fill="#fff"
             d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
           /></svg
         >
@@ -239,7 +239,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/list/amex-stocks/+page.svelte b/src/routes/list/amex-stocks/+page.svelte
index 08f27227..de87acdf 100644
--- a/src/routes/list/amex-stocks/+page.svelte
+++ b/src/routes/list/amex-stocks/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/bitcoin-etfs/+page.svelte b/src/routes/list/bitcoin-etfs/+page.svelte
index d9b998d9..3f38d442 100644
--- a/src/routes/list/bitcoin-etfs/+page.svelte
+++ b/src/routes/list/bitcoin-etfs/+page.svelte
@@ -27,7 +27,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/canadian-stocks-us/+page.svelte b/src/routes/list/canadian-stocks-us/+page.svelte
index 867e2177..11b84577 100644
--- a/src/routes/list/canadian-stocks-us/+page.svelte
+++ b/src/routes/list/canadian-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/chinese-stocks-us/+page.svelte b/src/routes/list/chinese-stocks-us/+page.svelte
index 98ee55cf..f78772b7 100644
--- a/src/routes/list/chinese-stocks-us/+page.svelte
+++ b/src/routes/list/chinese-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/delisted-stocks/+page.svelte b/src/routes/list/delisted-stocks/+page.svelte
index 2b7a70dc..4763d87e 100644
--- a/src/routes/list/delisted-stocks/+page.svelte
+++ b/src/routes/list/delisted-stocks/+page.svelte
@@ -42,7 +42,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/dividend-aristocrats/+page.svelte b/src/routes/list/dividend-aristocrats/+page.svelte
index 602a6d36..69276d98 100644
--- a/src/routes/list/dividend-aristocrats/+page.svelte
+++ b/src/routes/list/dividend-aristocrats/+page.svelte
@@ -36,7 +36,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/dividend-kings/+page.svelte b/src/routes/list/dividend-kings/+page.svelte
index d9a19dcb..11ad538d 100644
--- a/src/routes/list/dividend-kings/+page.svelte
+++ b/src/routes/list/dividend-kings/+page.svelte
@@ -36,7 +36,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/dow-jones-stocks/+page.svelte b/src/routes/list/dow-jones-stocks/+page.svelte
index 34d31738..e140e9d4 100644
--- a/src/routes/list/dow-jones-stocks/+page.svelte
+++ b/src/routes/list/dow-jones-stocks/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/german-stocks-us/+page.svelte b/src/routes/list/german-stocks-us/+page.svelte
index 137fb4d5..bfac03a4 100644
--- a/src/routes/list/german-stocks-us/+page.svelte
+++ b/src/routes/list/german-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/indian-stocks-us/+page.svelte b/src/routes/list/indian-stocks-us/+page.svelte
index 620bf7cc..3f921c80 100644
--- a/src/routes/list/indian-stocks-us/+page.svelte
+++ b/src/routes/list/indian-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/industry/[slug]/+page.svelte b/src/routes/list/industry/[slug]/+page.svelte
index b59503f9..ce28c3bf 100644
--- a/src/routes/list/industry/[slug]/+page.svelte
+++ b/src/routes/list/industry/[slug]/+page.svelte
@@ -225,7 +225,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/israeli-stocks-us/+page.svelte b/src/routes/list/israeli-stocks-us/+page.svelte
index 5c839aff..0359bfb7 100644
--- a/src/routes/list/israeli-stocks-us/+page.svelte
+++ b/src/routes/list/israeli-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/japanese-stocks-us/+page.svelte b/src/routes/list/japanese-stocks-us/+page.svelte
index 3c808732..c4e13ca7 100644
--- a/src/routes/list/japanese-stocks-us/+page.svelte
+++ b/src/routes/list/japanese-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/magnificent-seven/+page.svelte b/src/routes/list/magnificent-seven/+page.svelte
index 025edab0..5b1c8f57 100644
--- a/src/routes/list/magnificent-seven/+page.svelte
+++ b/src/routes/list/magnificent-seven/+page.svelte
@@ -30,7 +30,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/nasdaq-100-stocks/+page.svelte b/src/routes/list/nasdaq-100-stocks/+page.svelte
index 711798fc..3d13ed29 100644
--- a/src/routes/list/nasdaq-100-stocks/+page.svelte
+++ b/src/routes/list/nasdaq-100-stocks/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/nasdaq-stocks/+page.svelte b/src/routes/list/nasdaq-stocks/+page.svelte
index 7b48b102..7d9fabd1 100644
--- a/src/routes/list/nasdaq-stocks/+page.svelte
+++ b/src/routes/list/nasdaq-stocks/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/nyse-stocks/+page.svelte b/src/routes/list/nyse-stocks/+page.svelte
index 835690ab..a37286b8 100644
--- a/src/routes/list/nyse-stocks/+page.svelte
+++ b/src/routes/list/nyse-stocks/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/reit-stocks/+page.svelte b/src/routes/list/reit-stocks/+page.svelte
index 7a0ab8c8..7cc00420 100644
--- a/src/routes/list/reit-stocks/+page.svelte
+++ b/src/routes/list/reit-stocks/+page.svelte
@@ -36,7 +36,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/sp-500-stocks/+page.svelte b/src/routes/list/sp-500-stocks/+page.svelte
index 20cd6647..a3f55d5e 100644
--- a/src/routes/list/sp-500-stocks/+page.svelte
+++ b/src/routes/list/sp-500-stocks/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/uk-stocks-us/+page.svelte b/src/routes/list/uk-stocks-us/+page.svelte
index 73b37eab..fa4b5f02 100644
--- a/src/routes/list/uk-stocks-us/+page.svelte
+++ b/src/routes/list/uk-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/list/xetra-stocks/+page.svelte b/src/routes/list/xetra-stocks/+page.svelte
index 3a24fd8f..c756c2aa 100644
--- a/src/routes/list/xetra-stocks/+page.svelte
+++ b/src/routes/list/xetra-stocks/+page.svelte
@@ -48,7 +48,7 @@
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       ><path
-        fill="#FBCE3C"
+        fill="#fff"
         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
       /></svg
     >
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 55a32805..79c09c6d 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,242 +1,831 @@
 <script>
-	import { enhance } from '$app/forms';
-	import Input from '$lib/components/Input.svelte';
-	import toast from 'svelte-french-toast';
-	//import { trackPageDuration, trackButtonClick} from '$lib/mixpanel';
-	import { numberOfUnreadNotification } from '$lib/store';
-	export let form;
-	
-	
-	let isClicked = false;
-	let loading = false;
-	let oauthLoading = false;
+  import { enhance } from "$app/forms";
+  import Input from "$lib/components/Input.svelte";
+  import toast from "svelte-french-toast";
+  //import { trackPageDuration, trackButtonClick} from '$lib/mixpanel';
+  import { numberOfUnreadNotification } from "$lib/store";
+  export let form;
 
-	const submitLogin = () => {
-		loading = true;
-		return async ({ result, update}) => {
-			switch (result.type) {
-				case 'success':
-					if (form?.notVerified)
-					{
-						toast.error('Please verify your email first', {
-						style: 'border-radius: 200px; background: #333; color: #fff;'});
-						await update();
-						break;
-					}
-					else (form?.notVerified === false)
-					{
-						toast.success('Login successfully!', {
-						style: 'border-radius: 200px; background: #333; color: #fff;'});
-						await update();
-						break;
-					}
-				case 'redirect':
-					isClicked = true;
-					toast.success('Login successfully!', {
-						style: 'border-radius: 200px; background: #333; color: #fff;'});
-					await update();
-					break;
-				case 'failure':
-					toast.error('Invalid credentials', {
-					style: 'border-radius: 200px; background: #333; color: #fff;'});
-					await update();
-					break;
-				case 'error':
-					toast.error(result.error.message, {
-					style: 'border-radius: 200px; background: #333; color: #fff;'});
-					break;
-				default:
-					await update();
-			}
-			loading = false;
-		}
-	
-		
-	}
-	
-	
-	
-		let isHoveredGoogle = false;
-		let isHoveredDiscord = false;
-		let isHoveredGithub = false;
-	
-	
-	  function handleHoverGoogle() {
-		isHoveredGoogle = !isHoveredGoogle;
-	  }
-	
-	  function handleHoverDiscord() {
-		isHoveredDiscord = !isHoveredDiscord;
-	  }
+  let isClicked = false;
+  let loading = false;
+  let oauthLoading = false;
 
-	  function handleHoverGithub() {
-		isHoveredGithub = !isHoveredGithub;
-	  }
-	</script>
-	
-	
+  const submitLogin = () => {
+    loading = true;
+    return async ({ result, update }) => {
+      switch (result.type) {
+        case "success":
+          if (form?.notVerified) {
+            toast.error("Please verify your email first", {
+              style: "border-radius: 200px; background: #333; color: #fff;",
+            });
+            await update();
+            break;
+          } else form?.notVerified === false;
+          {
+            toast.success("Login successfully!", {
+              style: "border-radius: 200px; background: #333; color: #fff;",
+            });
+            await update();
+            break;
+          }
+        case "redirect":
+          isClicked = true;
+          toast.success("Login successfully!", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "failure":
+          toast.error("Invalid credentials", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "error":
+          toast.error(result.error.message, {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          break;
+        default:
+          await update();
+      }
+      loading = false;
+    };
+  };
 
+  let isHoveredGoogle = false;
+  let isHoveredDiscord = false;
+  let isHoveredGithub = false;
+
+  function handleHoverGoogle() {
+    isHoveredGoogle = !isHoveredGoogle;
+  }
+
+  function handleHoverDiscord() {
+    isHoveredDiscord = !isHoveredDiscord;
+  }
+
+  function handleHoverGithub() {
+    isHoveredGithub = !isHoveredGithub;
+  }
+</script>
 
 <svelte:head>
-  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Sign In · stocknear</title>
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Sign
+    In · stocknear</title
+  >
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
 
-  <meta name="description" content="Sign In to to improve your stock analysis for free">
+  <meta
+    name="description"
+    content="Sign In to to improve your stock analysis for free"
+  />
   <!-- Other meta tags -->
-  <meta property="og:title" content="Sign In · stocknear"/>
-  <meta property="og:description" content="Sign In to to improve your stock analysis for free">
-  <meta property="og:type" content="website"/>
+  <meta property="og:title" content="Sign In · stocknear" />
+  <meta
+    property="og:description"
+    content="Sign In to to improve your stock analysis for free"
+  />
+  <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content="Sign In · stocknear"/>
-  <meta name="twitter:description" content="Sign In to to improve your stock analysis for free">
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Sign In · stocknear" />
+  <meta
+    name="twitter:description"
+    content="Sign In to to improve your stock analysis for free"
+  />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
-	
 
-	<div class="relative w-full max-w-3xl mx-auto min-h-screen pb-40 sm:mt-10 {oauthLoading ? 'opacity-[0.2]' : ''}">
-	
-			<div class="grid grid-cols-1 gap-4" >
-				<div class="relative">
-					<h2 class="text-center text-white text-2xl sm:text-3xl pt-10 sm:pt-0 font-semibold">
-						Sign In
-					</h2>
-				</div>
+<div
+  class="relative w-full max-w-3xl mx-auto min-h-screen pb-40 sm:mt-10 {oauthLoading
+    ? 'opacity-[0.2]'
+    : ''}"
+>
+  <div class="grid grid-cols-1 gap-4">
+    <div class="relative">
+      <h2
+        class="text-center text-white text-2xl sm:text-3xl pt-10 sm:pt-0 font-semibold"
+      >
+        Sign In
+      </h2>
+    </div>
 
-				<span class="text-gray-400 text-center">
-					Welcome back!
-				</span>	
-	
-				
-	
+    <span class="text-gray-400 text-center"> Welcome back! </span>
 
-	
-	
-				<div class="relative w-full max-w-lg m-auto">
-	
-					<form action="?/login" method="POST" use:enhance={submitLogin} class="flex flex-col items-center space-y-2 pt-4 pl-3 pr-3 sm:pl-0 sm:pr-0 ml-auto mr-auto">
-						<Input
-                            type="email"
-                            id="email"
-                            label="Email"
-                            value={form?.data?.email ?? ''}
-                            errors={form?.errors?.email}
-                        />
-                        <Input
-                            type="password"
-                            id="password" 
-                            label="Password" 
-                            errors={form?.errors?.password} 
-                        />
-						<div class="w-full max-w-lg">
-							<a href="/reset-password" class="text-sm font-medium text-[#FAC109] hover:cursor-pointer hover:underline">Forgot Password?</a>
-						</div>
+    <div class="relative w-full max-w-lg m-auto">
+      <form
+        action="?/login"
+        method="POST"
+        use:enhance={submitLogin}
+        class="flex flex-col items-center space-y-2 pt-4 pl-3 pr-3 sm:pl-0 sm:pr-0 ml-auto mr-auto"
+      >
+        <Input
+          type="email"
+          id="email"
+          label="Email"
+          value={form?.data?.email ?? ""}
+          errors={form?.errors?.email}
+        />
+        <Input
+          type="password"
+          id="password"
+          label="Password"
+          errors={form?.errors?.password}
+        />
+        <div class="w-full max-w-lg">
+          <a
+            href="/reset-password"
+            class="text-sm font-medium text-blue-400 sm:hover:text-white sm:hover:underline"
+            >Forgot Password?</a
+          >
+        </div>
 
-						<div class="w-full max-w-lg pt-5 m-auto pb-5">
-							
-							{#if !loading && !isClicked}
-								<button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-									<span class="text-white">Login</span>
-								</button>
-							{:else}
-								<label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-									<div class="flex flex-row m-auto items-center">
-										<span class="loading loading-infinity"></span>
-										<span class="text-white ml-1.5">Signing Up</span>
-									</div>
-								</label>
-							{/if}
-						</div>
-						
+        <div class="w-full max-w-lg pt-5 m-auto pb-5">
+          {#if !loading && !isClicked}
+            <button
+              type="submit"
+              class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
+            >
+              <span>Login</span>
+            </button>
+          {:else}
+            <label
+              class="cursor-not-allowed btn bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto 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">Signing Up</span>
+              </div>
+            </label>
+          {/if}
+        </div>
 
+        <div class="divider divider-[#fff] pt-5 pb-10">
+          <span class="text-white text-[1rem] z-10">Or login using</span>
+        </div>
 
-						<div class="divider divider-[#fff] pt-5 pb-10">
-							<span class="text-white text-[1rem] z-10">Or login using</span>
-						</div>
+        <div class="flex flex-row items-center gap-x-5 pb-6">
+          <form method="post" action="?/oauth2">
+            <input class="hidden" name="provider" value="google" />
+            <button
+              on:click={() => (oauthLoading = !oauthLoading)}
+              on:mouseenter={handleHoverGoogle}
+              on:mouseleave={handleHoverGoogle}
+              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+            >
+              <svg
+                class="{isHoveredGoogle
+                  ? 'shake-logo'
+                  : ''} w-6 h-6 inline-block"
+                viewBox="-3 0 262 262"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                preserveAspectRatio="xMidYMid"
+                fill="#000000"
+                ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g><g id="SVGRepo_iconCarrier">
+                  <g>
+                    <path
+                      d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
+                      fill="#4285F4"
+                    >
+                    </path>
+                    <path
+                      d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
+                      fill="#34A853"
+                    >
+                    </path>
+                    <path
+                      d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
+                      fill="#FBBC05"
+                    >
+                    </path>
+                    <path
+                      d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
+                      fill="#EB4335"
+                    >
+                    </path>
+                  </g>
+                </g></svg
+              >
+            </button>
+          </form>
+          <form method="post" action="?/oauth2">
+            <input class="hidden" name="provider" value="discord" />
+            <button
+              on:click={() => (oauthLoading = !oauthLoading)}
+              on:mouseenter={handleHoverDiscord}
+              on:mouseleave={handleHoverDiscord}
+              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+            >
+              <svg
+                class="{isHoveredDiscord
+                  ? 'shake-logo'
+                  : ''}  w-7 h-7 inline-block"
+                viewBox="0 0 100 100"
+                version="1.1"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                fill="#000000"
+                ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g><g id="SVGRepo_iconCarrier">
+                  <style type="text/css">
+                    .st0 {
+                      fill: #ffffff;
+                    }
+                    .st1 {
+                      fill: #f5bb41;
+                    }
+                    .st2 {
+                      fill: #2167d1;
+                    }
+                    .st3 {
+                      fill: #3d84f3;
+                    }
+                    .st4 {
+                      fill: #4ca853;
+                    }
+                    .st5 {
+                      fill: #398039;
+                    }
+                    .st6 {
+                      fill: #d74f3f;
+                    }
+                    .st7 {
+                      fill: #d43c89;
+                    }
+                    .st8 {
+                      fill: #b2005f;
+                    }
+                    .st9 {
+                      fill: none;
+                      stroke: #000000;
+                      stroke-width: 3;
+                      stroke-linecap: round;
+                      stroke-linejoin: round;
+                      stroke-miterlimit: 10;
+                    }
+                    .st10 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: none;
+                      stroke: #000000;
+                      stroke-width: 3;
+                      stroke-linecap: round;
+                      stroke-linejoin: round;
+                      stroke-miterlimit: 10;
+                    }
+                    .st11 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: none;
+                      stroke: #040404;
+                      stroke-width: 3;
+                      stroke-linecap: round;
+                      stroke-linejoin: round;
+                      stroke-miterlimit: 10;
+                    }
+                    .st12 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                    }
+                    .st13 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #040404;
+                    }
+                    .st14 {
+                      fill: url(#SVGID_1_);
+                    }
+                    .st15 {
+                      fill: url(#SVGID_2_);
+                    }
+                    .st16 {
+                      fill: url(#SVGID_3_);
+                    }
+                    .st17 {
+                      fill: url(#SVGID_4_);
+                    }
+                    .st18 {
+                      fill: url(#SVGID_5_);
+                    }
+                    .st19 {
+                      fill: url(#SVGID_6_);
+                    }
+                    .st20 {
+                      fill: url(#SVGID_7_);
+                    }
+                    .st21 {
+                      fill: url(#SVGID_8_);
+                    }
+                    .st22 {
+                      fill: url(#SVGID_9_);
+                    }
+                    .st23 {
+                      fill: url(#SVGID_10_);
+                    }
+                    .st24 {
+                      fill: url(#SVGID_11_);
+                    }
+                    .st25 {
+                      fill: url(#SVGID_12_);
+                    }
+                    .st26 {
+                      fill: url(#SVGID_13_);
+                    }
+                    .st27 {
+                      fill: url(#SVGID_14_);
+                    }
+                    .st28 {
+                      fill: url(#SVGID_15_);
+                    }
+                    .st29 {
+                      fill: url(#SVGID_16_);
+                    }
+                    .st30 {
+                      fill: url(#SVGID_17_);
+                    }
+                    .st31 {
+                      fill: url(#SVGID_18_);
+                    }
+                    .st32 {
+                      fill: url(#SVGID_19_);
+                    }
+                    .st33 {
+                      fill: url(#SVGID_20_);
+                    }
+                    .st34 {
+                      fill: url(#SVGID_21_);
+                    }
+                    .st35 {
+                      fill: url(#SVGID_22_);
+                    }
+                    .st36 {
+                      fill: url(#SVGID_23_);
+                    }
+                    .st37 {
+                      fill: url(#SVGID_24_);
+                    }
+                    .st38 {
+                      fill: url(#SVGID_25_);
+                    }
+                    .st39 {
+                      fill: url(#SVGID_26_);
+                    }
+                    .st40 {
+                      fill: url(#SVGID_27_);
+                    }
+                    .st41 {
+                      fill: url(#SVGID_28_);
+                    }
+                    .st42 {
+                      fill: url(#SVGID_29_);
+                    }
+                    .st43 {
+                      fill: url(#SVGID_30_);
+                    }
+                    .st44 {
+                      fill: url(#SVGID_31_);
+                    }
+                    .st45 {
+                      fill: url(#SVGID_32_);
+                    }
+                    .st46 {
+                      fill: url(#SVGID_33_);
+                    }
+                    .st47 {
+                      fill: url(#SVGID_34_);
+                    }
+                    .st48 {
+                      fill: url(#SVGID_35_);
+                    }
+                    .st49 {
+                      fill: url(#SVGID_36_);
+                    }
+                    .st50 {
+                      fill: url(#SVGID_37_);
+                    }
+                    .st51 {
+                      fill: url(#SVGID_38_);
+                    }
+                    .st52 {
+                      fill: url(#SVGID_39_);
+                    }
+                    .st53 {
+                      fill: url(#SVGID_40_);
+                    }
+                    .st54 {
+                      fill: url(#SVGID_41_);
+                    }
+                    .st55 {
+                      fill: url(#SVGID_42_);
+                    }
+                    .st56 {
+                      fill: url(#SVGID_43_);
+                    }
+                    .st57 {
+                      fill: url(#SVGID_44_);
+                    }
+                    .st58 {
+                      fill: url(#SVGID_45_);
+                    }
+                    .st59 {
+                      fill: #040404;
+                    }
+                    .st60 {
+                      fill: url(#SVGID_46_);
+                    }
+                    .st61 {
+                      fill: url(#SVGID_47_);
+                    }
+                    .st62 {
+                      fill: url(#SVGID_48_);
+                    }
+                    .st63 {
+                      fill: url(#SVGID_49_);
+                    }
+                    .st64 {
+                      fill: url(#SVGID_50_);
+                    }
+                    .st65 {
+                      fill: url(#SVGID_51_);
+                    }
+                    .st66 {
+                      fill: url(#SVGID_52_);
+                    }
+                    .st67 {
+                      fill: url(#SVGID_53_);
+                    }
+                    .st68 {
+                      fill: url(#SVGID_54_);
+                    }
+                    .st69 {
+                      fill: url(#SVGID_55_);
+                    }
+                    .st70 {
+                      fill: url(#SVGID_56_);
+                    }
+                    .st71 {
+                      fill: url(#SVGID_57_);
+                    }
+                    .st72 {
+                      fill: url(#SVGID_58_);
+                    }
+                    .st73 {
+                      fill: url(#SVGID_59_);
+                    }
+                    .st74 {
+                      fill: url(#SVGID_60_);
+                    }
+                    .st75 {
+                      fill: url(#SVGID_61_);
+                    }
+                    .st76 {
+                      fill: url(#SVGID_62_);
+                    }
+                    .st77 {
+                      fill: none;
+                      stroke: #000000;
+                      stroke-width: 3;
+                      stroke-miterlimit: 10;
+                    }
+                    .st78 {
+                      fill: none;
+                      stroke: #ffffff;
+                      stroke-miterlimit: 10;
+                    }
+                    .st79 {
+                      fill: #4bc9ff;
+                    }
+                    .st80 {
+                      fill: #5500dd;
+                    }
+                    .st81 {
+                      fill: #ff3a00;
+                    }
+                    .st82 {
+                      fill: #e6162d;
+                    }
+                    .st83 {
+                      fill: #f1f1f1;
+                    }
+                    .st84 {
+                      fill: #ff9933;
+                    }
+                    .st85 {
+                      fill: #b92b27;
+                    }
+                    .st86 {
+                      fill: #00aced;
+                    }
+                    .st87 {
+                      fill: #bd2125;
+                    }
+                    .st88 {
+                      fill: #1877f2;
+                    }
+                    .st89 {
+                      fill: #fff;
+                    }
+                    .st90 {
+                      fill: #ce3056;
+                    }
+                    .st91 {
+                      fill: #5bb381;
+                    }
+                    .st92 {
+                      fill: #61c3ec;
+                    }
+                    .st93 {
+                      fill: #e4b34b;
+                    }
+                    .st94 {
+                      fill: #181ef2;
+                    }
+                    .st95 {
+                      fill: #ff0000;
+                    }
+                    .st96 {
+                      fill: #fe466c;
+                    }
+                    .st97 {
+                      fill: #fa4778;
+                    }
+                    .st98 {
+                      fill: #ff7700;
+                    }
+                    .st99 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #1f6bf6;
+                    }
+                    .st100 {
+                      fill: #520094;
+                    }
+                    .st101 {
+                      fill: #4477e8;
+                    }
+                    .st102 {
+                      fill: #3d1d1c;
+                    }
+                    .st103 {
+                      fill: #ffe812;
+                    }
+                    .st104 {
+                      fill: #344356;
+                    }
+                    .st105 {
+                      fill: #00cc76;
+                    }
+                    .st106 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #345e90;
+                    }
+                    .st107 {
+                      fill: #1f65d8;
+                    }
+                    .st108 {
+                      fill: #eb3587;
+                    }
+                    .st109 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #603a88;
+                    }
+                    .st110 {
+                      fill: #e3ce99;
+                    }
+                    .st111 {
+                      fill: #783af9;
+                    }
+                    .st112 {
+                      fill: #ff515e;
+                    }
+                    .st113 {
+                      fill: #ff4906;
+                    }
+                    .st114 {
+                      fill: #503227;
+                    }
+                    .st115 {
+                      fill: #4c7bd9;
+                    }
+                    .st116 {
+                      fill: #69c9d0;
+                    }
+                    .st117 {
+                      fill: #1b92d1;
+                    }
+                    .st118 {
+                      fill: #eb4f4a;
+                    }
+                    .st119 {
+                      fill: #513728;
+                    }
+                    .st120 {
+                      fill: #ff6600;
+                    }
+                    .st121 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #b61438;
+                    }
+                    .st122 {
+                      fill: #fffc00;
+                    }
+                    .st123 {
+                      fill: #141414;
+                    }
+                    .st124 {
+                      fill: #94d137;
+                    }
+                    .st125 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #f1f1f1;
+                    }
+                    .st126 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #66e066;
+                    }
+                    .st127 {
+                      fill: #2d8cff;
+                    }
+                    .st128 {
+                      fill: #f1a300;
+                    }
+                    .st129 {
+                      fill: #4ba2f2;
+                    }
+                    .st130 {
+                      fill: #1a5099;
+                    }
+                    .st131 {
+                      fill: #ee6060;
+                    }
+                    .st132 {
+                      fill-rule: evenodd;
+                      clip-rule: evenodd;
+                      fill: #f48120;
+                    }
+                    .st133 {
+                      fill: #222222;
+                    }
+                    .st134 {
+                      fill: url(#SVGID_63_);
+                    }
+                    .st135 {
+                      fill: #0077b5;
+                    }
+                    .st136 {
+                      fill: #ffcc00;
+                    }
+                    .st137 {
+                      fill: #eb3352;
+                    }
+                    .st138 {
+                      fill: #f9d265;
+                    }
+                    .st139 {
+                      fill: #f5b955;
+                    }
+                    .st140 {
+                      fill: #dd2a7b;
+                    }
+                    .st141 {
+                      fill: #66e066;
+                    }
+                    .st142 {
+                      fill: #eb4e00;
+                    }
+                    .st143 {
+                      fill: #ffc794;
+                    }
+                    .st144 {
+                      fill: #b5332a;
+                    }
+                    .st145 {
+                      fill: #4e85eb;
+                    }
+                    .st146 {
+                      fill: #58a45c;
+                    }
+                    .st147 {
+                      fill: #f2bc42;
+                    }
+                    .st148 {
+                      fill: #d85040;
+                    }
+                    .st149 {
+                      fill: #464eb8;
+                    }
+                    .st150 {
+                      fill: #7b83eb;
+                    }
+                  </style> <g id="Layer_1"></g>
+                  <g id="Layer_2">
+                    <g>
+                      <g>
+                        <path
+                          class="st89"
+                          d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
+                        ></path>
+                      </g>
+                    </g>
+                  </g>
+                </g></svg
+              >
+            </button>
+          </form>
 
-						<div class="flex flex-row items-center gap-x-5 pb-6">
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='google'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverGoogle}
-									on:mouseleave={handleHoverGoogle}	
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block" viewBox="-3 0 262 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451" fill="#4285F4"> </path> <path d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"> </path> <path d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"> </path> <path d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479" fill="#EB4335"> </path> </g> </g></svg>
-								</button>
-							</form>
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='discord'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverDiscord}
-									on:mouseleave={handleHoverDiscord}
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredDiscord ? 'shake-logo' : ''}  w-7 h-7 inline-block" viewBox="0 0 100 100" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#F5BB41;} .st2{fill:#2167D1;} .st3{fill:#3D84F3;} .st4{fill:#4CA853;} .st5{fill:#398039;} .st6{fill:#D74F3F;} .st7{fill:#D43C89;} .st8{fill:#B2005F;} .st9{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st10{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st11{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#040404;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill-rule:evenodd;clip-rule:evenodd;} .st13{fill-rule:evenodd;clip-rule:evenodd;fill:#040404;} .st14{fill:url(#SVGID_1_);} .st15{fill:url(#SVGID_2_);} .st16{fill:url(#SVGID_3_);} .st17{fill:url(#SVGID_4_);} .st18{fill:url(#SVGID_5_);} .st19{fill:url(#SVGID_6_);} .st20{fill:url(#SVGID_7_);} .st21{fill:url(#SVGID_8_);} .st22{fill:url(#SVGID_9_);} .st23{fill:url(#SVGID_10_);} .st24{fill:url(#SVGID_11_);} .st25{fill:url(#SVGID_12_);} .st26{fill:url(#SVGID_13_);} .st27{fill:url(#SVGID_14_);} .st28{fill:url(#SVGID_15_);} .st29{fill:url(#SVGID_16_);} .st30{fill:url(#SVGID_17_);} .st31{fill:url(#SVGID_18_);} .st32{fill:url(#SVGID_19_);} .st33{fill:url(#SVGID_20_);} .st34{fill:url(#SVGID_21_);} .st35{fill:url(#SVGID_22_);} .st36{fill:url(#SVGID_23_);} .st37{fill:url(#SVGID_24_);} .st38{fill:url(#SVGID_25_);} .st39{fill:url(#SVGID_26_);} .st40{fill:url(#SVGID_27_);} .st41{fill:url(#SVGID_28_);} .st42{fill:url(#SVGID_29_);} .st43{fill:url(#SVGID_30_);} .st44{fill:url(#SVGID_31_);} .st45{fill:url(#SVGID_32_);} .st46{fill:url(#SVGID_33_);} .st47{fill:url(#SVGID_34_);} .st48{fill:url(#SVGID_35_);} .st49{fill:url(#SVGID_36_);} .st50{fill:url(#SVGID_37_);} .st51{fill:url(#SVGID_38_);} .st52{fill:url(#SVGID_39_);} .st53{fill:url(#SVGID_40_);} .st54{fill:url(#SVGID_41_);} .st55{fill:url(#SVGID_42_);} .st56{fill:url(#SVGID_43_);} .st57{fill:url(#SVGID_44_);} .st58{fill:url(#SVGID_45_);} .st59{fill:#040404;} .st60{fill:url(#SVGID_46_);} .st61{fill:url(#SVGID_47_);} .st62{fill:url(#SVGID_48_);} .st63{fill:url(#SVGID_49_);} .st64{fill:url(#SVGID_50_);} .st65{fill:url(#SVGID_51_);} .st66{fill:url(#SVGID_52_);} .st67{fill:url(#SVGID_53_);} .st68{fill:url(#SVGID_54_);} .st69{fill:url(#SVGID_55_);} .st70{fill:url(#SVGID_56_);} .st71{fill:url(#SVGID_57_);} .st72{fill:url(#SVGID_58_);} .st73{fill:url(#SVGID_59_);} .st74{fill:url(#SVGID_60_);} .st75{fill:url(#SVGID_61_);} .st76{fill:url(#SVGID_62_);} .st77{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;} .st78{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;} .st79{fill:#4BC9FF;} .st80{fill:#5500DD;} .st81{fill:#FF3A00;} .st82{fill:#E6162D;} .st83{fill:#F1F1F1;} .st84{fill:#FF9933;} .st85{fill:#B92B27;} .st86{fill:#00ACED;} .st87{fill:#BD2125;} .st88{fill:#1877F2;} .st89{fill:#fff;} .st90{fill:#CE3056;} .st91{fill:#5BB381;} .st92{fill:#61C3EC;} .st93{fill:#E4B34B;} .st94{fill:#181EF2;} .st95{fill:#FF0000;} .st96{fill:#FE466C;} .st97{fill:#FA4778;} .st98{fill:#FF7700;} .st99{fill-rule:evenodd;clip-rule:evenodd;fill:#1F6BF6;} .st100{fill:#520094;} .st101{fill:#4477E8;} .st102{fill:#3D1D1C;} .st103{fill:#FFE812;} .st104{fill:#344356;} .st105{fill:#00CC76;} .st106{fill-rule:evenodd;clip-rule:evenodd;fill:#345E90;} .st107{fill:#1F65D8;} .st108{fill:#EB3587;} .st109{fill-rule:evenodd;clip-rule:evenodd;fill:#603A88;} .st110{fill:#E3CE99;} .st111{fill:#783AF9;} .st112{fill:#FF515E;} .st113{fill:#FF4906;} .st114{fill:#503227;} .st115{fill:#4C7BD9;} .st116{fill:#69C9D0;} .st117{fill:#1B92D1;} .st118{fill:#EB4F4A;} .st119{fill:#513728;} .st120{fill:#FF6600;} .st121{fill-rule:evenodd;clip-rule:evenodd;fill:#B61438;} .st122{fill:#FFFC00;} .st123{fill:#141414;} .st124{fill:#94D137;} .st125{fill-rule:evenodd;clip-rule:evenodd;fill:#F1F1F1;} .st126{fill-rule:evenodd;clip-rule:evenodd;fill:#66E066;} .st127{fill:#2D8CFF;} .st128{fill:#F1A300;} .st129{fill:#4BA2F2;} .st130{fill:#1A5099;} .st131{fill:#EE6060;} .st132{fill-rule:evenodd;clip-rule:evenodd;fill:#F48120;} .st133{fill:#222222;} .st134{fill:url(#SVGID_63_);} .st135{fill:#0077B5;} .st136{fill:#FFCC00;} .st137{fill:#EB3352;} .st138{fill:#F9D265;} .st139{fill:#F5B955;} .st140{fill:#DD2A7B;} .st141{fill:#66E066;} .st142{fill:#EB4E00;} .st143{fill:#FFC794;} .st144{fill:#B5332A;} .st145{fill:#4E85EB;} .st146{fill:#58A45C;} .st147{fill:#F2BC42;} .st148{fill:#D85040;} .st149{fill:#464EB8;} .st150{fill:#7B83EB;} </style> <g id="Layer_1"></g> <g id="Layer_2"> <g> <g> <path class="st89" d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"></path> </g> </g> </g> </g></svg>
-								</button>
-							</form>
+          <form method="post" action="?/oauth2">
+            <input class="hidden" name="provider" value="github" />
+            <button
+              on:click={() => (oauthLoading = !oauthLoading)}
+              on:mouseenter={handleHoverGithub}
+              on:mouseleave={handleHoverGithub}
+              class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+            >
+              <svg
+                class="{isHoveredGithub
+                  ? 'shake-logo'
+                  : ''}  w-7 h-7 inline-block"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                ><path
+                  fill="white"
+                  d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+                /></svg
+              >
+            </button>
+          </form>
+        </div>
 
-							<form method="post" action="?/oauth2">
-								<input class="hidden" name='provider' value='github'/>
-								<button
-									on:click={() => oauthLoading = !oauthLoading}
-									on:mouseenter={handleHoverGithub}
-									on:mouseleave={handleHoverGithub}
-									class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-									<svg class="{isHoveredGithub ? 'shake-logo' : ''}  w-7 h-7 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
-								</button>
-							</form>
+        <p
+          class="pb-1 text-sm w-full max-w-lg text-white flex justify-center items-center"
+        >
+          You don't have an account?
+          <a
+            href="/register"
+            class="text-blue-400 font-medium hover:underline ml-1">Sign up</a
+          >
+        </p>
+      </form>
+    </div>
+  </div>
+</div>
 
+{#if oauthLoading}
+  <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
+    <div class="relative">
+      <label
+        class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      >
+        <span class="loading loading-spinner loading-md text-gray-400"></span>
+      </label>
+    </div>
+  </div>
+{/if}
 
-						</div>
-	
-						<p class="pb-1 text-sm w-full max-w-lg text-white flex justify-center items-center">You don't have an account?
-							<a href="/register" class="text-blue-400 font-medium hover:underline ml-1">Sign up</a>
-						</p>
-	
-						
-					</form>
-	
-		
-					
-				</div>
-				
-	
-				
-			  
-			</div>
+<style>
+  .shake-logo {
+    animation-name: shake;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+  }
 
-	
-		</div>
-
-	{#if oauthLoading}
-	<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
-		<div class="relative">
-			<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-				<span class="loading loading-spinner loading-md text-gray-400"></span>
-			</label>
-		</div>  
-	</div>
-	{/if}
-	
-	<style>
-	.shake-logo{
-	  animation-name: shake;
-	  animation-duration: 0.5s;
-	  animation-iteration-count: infinite;
-	  animation-timing-function: ease-in-out;
-	  }
-	  
-	  
-	  @keyframes shake {
-		0% { transform: rotate(0deg); }
-		25% { transform: rotate(10deg); }
-		50% { transform: rotate(0deg); }
-		75% { transform: rotate(-10deg); }
-		100% { transform: rotate(0deg); }
-	  }
-	  
-	</style>
\ No newline at end of file
+  @keyframes shake {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    75% {
+      transform: rotate(-10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+</style>
diff --git a/src/routes/most-retail-volume/+page.svelte b/src/routes/most-retail-volume/+page.svelte
index 743fc90a..09fde9e5 100644
--- a/src/routes/most-retail-volume/+page.svelte
+++ b/src/routes/most-retail-volume/+page.svelte
@@ -164,7 +164,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
diff --git a/src/routes/newsletter/+page.svelte b/src/routes/newsletter/+page.svelte
index 75ac9557..4ee1b608 100644
--- a/src/routes/newsletter/+page.svelte
+++ b/src/routes/newsletter/+page.svelte
@@ -162,7 +162,7 @@
 
     {#if !data?.user}
       <a
-        class="w-96 mt-6 m-auto flex m-auto justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
+        class="w-96 mt-6 m-auto flex m-auto justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
         href="/register"
       >
         Get Newsletter
@@ -200,7 +200,7 @@
                 errors=''
             />
             <div class="w-full sm:w-5/6 max-w-lg m-auto pb-5">
-                <button type="submit" class="py-3 bg-purple-600 text-white hover:bg-purple-500 w-full rounded-lg m-auto font-bold text-md">
+                <button type="submit" class="py-3 bg-[#fff] text-white sm:hover:bg-gray-300 w-full rounded-lg m-auto font-bold text-md">
                     Subscribe
                 </button>
             </div>
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index ecc2291e..3576687b 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -62,7 +62,19 @@
     },
     cost_basis: {
       label: "Premium",
-      step: ["10M", "5M", "1M", "500K", "100K", "50K", "10K", "5K"],
+      step: [
+        "10M",
+        "5M",
+        "1M",
+        "500K",
+        "400K",
+        "300K",
+        "200K",
+        "100K",
+        "50K",
+        "10K",
+        "5K",
+      ],
       defaultCondition: "over",
       defaultValue: "any",
     },
@@ -1304,7 +1316,7 @@ function sendMessage(message) {
                                   >
                                     <input
                                       type="radio"
-                                      class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
+                                      class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
                                       checked={ruleCondition[row?.rule] ===
                                         "under"}
                                       name={row?.rule}
@@ -1320,7 +1332,7 @@ function sendMessage(message) {
                                   >
                                     <input
                                       type="radio"
-                                      class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
+                                      class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
                                       checked={ruleCondition[row?.rule] ===
                                         "over"}
                                       name={row?.rule}
@@ -1418,7 +1430,7 @@ function sendMessage(message) {
                     : flowSentiment === 'Bearish'
                       ? 'text-[#FF2F1F]'
                       : flowSentiment === 'Neutral'
-                        ? 'text-[#FBCE3C]'
+                        ? 'text-[#fff]'
                         : 'text-white'}">{flowSentiment}</span
                 >
               </div>
@@ -1951,7 +1963,7 @@ function sendMessage(message) {
                         class="td {optionsWatchlist.optionsId?.includes(
                           displayedData[index]?.id,
                         )
-                          ? 'text-[#FBCE3C]'
+                          ? 'text-[#fff]'
                           : 'text-white'}"
                       >
                         <svg
@@ -2081,7 +2093,7 @@ function sendMessage(message) {
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte
index 93d613d0..0e5bff75 100644
--- a/src/routes/politicians/[slug]/+page.svelte
+++ b/src/routes/politicians/[slug]/+page.svelte
@@ -869,7 +869,7 @@
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 256 256"
                       ><path
-                        fill="#FBCE3C"
+                        fill="#fff"
                         d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                       /></svg
                     >
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index 17f90c36..d00c97df 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -311,7 +311,7 @@
                 </span>
                 {#if !data?.user}
                   <a
-                    class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
+                    class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
                     href="/register"
                   >
                     Get Started
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 664664c0..26938e54 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -112,7 +112,7 @@ function toggleMode()
 >
   <!--
 {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial === true}
-  <div class="mb-5 -mt-10 sm:-mt-5 relative sm:rounded isolate text-center flex justify-center items-center gap-x-6 overflow-hidden bg-purple-600 px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1">
+  <div class="mb-5 -mt-10 sm:-mt-5 relative sm:rounded isolate text-center flex justify-center items-center gap-x-6 overflow-hidden bg-[#fff] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1">
   <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
     <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
   </div>
@@ -122,7 +122,7 @@ function toggleMode()
   <div class="w-full m-auto flex flex-col sm:flex-row justify-center items-center gap-x-4 gap-y-2">
     <p class="text-[1rem] text-white">
       <strong class="font-semibold text-lg text-[1rem] text-white">🎃 Limited Halloween Special</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>
-        Save <strong class="text-[#FBCE3C]">16%</strong> with Promo Code: <strong class="text-[#FBCE3C]">HALLOWEEN</strong>
+        Save <strong class="text-[#fff]">16%</strong> with Promo Code: <strong class="text-[#fff]">HALLOWEEN</strong>
     </p>
   </div>
 </div>
@@ -138,7 +138,7 @@ function toggleMode()
         Flexible plans and features
       </h1>
       <div
-        class="w-full flex justify-center items-center h-16 bg-[#09090B] rounded-lg"
+        class="w-full flex justify-center items-center h-16 bg-[#09090B] rounded-md"
       >
         <p
           class="font-medium font-serif text-center w-3/4 sm:w-full text-white text-[1rem] sm:text-xl italic"
@@ -163,7 +163,7 @@ function toggleMode()
                     <span class="text-sm font-semibold text-white">
                         Pay Yearly
                     </span>
-                    <span class="text-[#FBCE3C] text-sm font-semibold">
+                    <span class="text-[#fff] text-sm font-semibold">
                         Save up 16%
                     </span>
                 </div>
@@ -179,7 +179,7 @@ function toggleMode()
     >
       <!-- Pricing Card -->
       <div
-        class="order-last sm:order-1 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white border border-gray-800 bg-[#09090B] rounded-lg"
+        class="order-last sm:order-1 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white border border-gray-800 bg-[#09090B] rounded-md"
       >
         <div class="flex flex-row items-center justify-start items-center mt-2">
           <img
@@ -316,7 +316,7 @@ function toggleMode()
         {#if !data?.user}
           <label
             for="userLogin"
-            class="py-3 cursor-pointer rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
+            class="py-3 cursor-pointer rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
           >
             Get Sign In
             <span
@@ -331,7 +331,7 @@ function toggleMode()
                     ><path
                       d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
                     /><path
-                      fill="white"
+                      fill="black"
                       d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
                     /></g
                   ></g
@@ -345,7 +345,7 @@ function toggleMode()
 
       <!-- Pricing Card -->
       <div
-        class="sm:order-2 rounded-lg box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#27272A]"
+        class="sm:order-2 rounded-md box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#27272A]"
       >
         <!--<div class="{!mode ? 'hidden' : ''} ribbon ribbon-top-right"><span class="text-white">Discount</span></div>-->
 
@@ -721,7 +721,7 @@ function toggleMode()
         </div>
         {#if data?.user?.tier === "Pro" && !data?.user?.freeTrial}
           <a
-            class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-150 ease-in-out group"
+            class="py-3 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
             href="#"
           >
             Active Plan
@@ -730,7 +730,7 @@ function toggleMode()
           <label
             for={!data?.user ? "userLogin" : ""}
             on:click={() => purchasePlan()}
-            class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
+            class="cursor-pointer py-3 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
           >
             Get Pro
             <span
@@ -745,7 +745,7 @@ function toggleMode()
                     ><path
                       d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
                     /><path
-                      fill="white"
+                      fill="black"
                       d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
                     /></g
                   ></g
@@ -757,7 +757,7 @@ function toggleMode()
           <label
             for={!data?.user ? "userLogin" : ""}
             on:click={() => purchasePlan()}
-            class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
+            class="cursor-pointer py-3 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
           >
             Get Pro
             <span
@@ -772,7 +772,7 @@ function toggleMode()
                     ><path
                       d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
                     /><path
-                      fill="white"
+                      fill="black"
                       d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
                     /></g
                   ></g
@@ -790,7 +790,7 @@ function toggleMode()
 
       <!--Start Pricing Card-->
       <!--
-             <div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-lg w-full text-center text-white">
+             <div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-md w-full text-center text-white">
 
                 <div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row border-l border-r border-b border-gray-400 items-center p-2">
                     <span class="text-white text-md font-semibold px-3">
@@ -837,19 +837,19 @@ function toggleMode()
                 </div>  
 
                 {#if data?.user?.tier === 'Pro' && !data?.user?.freeTrial}
-                <a class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group" href="#">
+                <a class="py-3 rounded-md text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group" href="#">
                     Active Plan
                </a>
                {:else if data?.user?.tier === 'Pro' && data?.user?.freeTrial === true}
 
-                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
+                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-md text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
                     Get Lifetime Access
                    <span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
                    </span>
                 </label>
                 {:else}
-                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
+                <label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-md text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
                     Get Lifetime Access
                    <span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
                        <svg class="w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
@@ -1327,7 +1327,7 @@ function toggleMode()
               <label
                 for={!data?.user ? "userLogin" : ""}
                 on:click={() => purchasePlan()}
-                class="cursor-pointer w-56 py-3 px-6 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
+                class="cursor-pointer w-56 py-3 px-6 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
               >
                 Become a Pro
                 <span
@@ -1342,7 +1342,7 @@ function toggleMode()
                         ><path
                           d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
                         /><path
-                          fill="white"
+                          fill="black"
                           d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
                         /></g
                       ></g
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 6288a7f0..443ffa6f 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -1,48 +1,46 @@
 <script>
-	
-	import { enhance } from '$app/forms';
-	import Input from '$lib/components/Input.svelte';
-	
-	import toast from 'svelte-french-toast';
+  import { enhance } from "$app/forms";
+  import Input from "$lib/components/Input.svelte";
 
-	export let form;
+  import toast from "svelte-french-toast";
 
-	let isClicked = false;
-	let loading = false;
-	let oauthLoading = false;
-	
+  export let form;
 
-	const submitRegistration= () => {
-		loading = true;
-		return async ({ result, update}) => {
-			switch (result.type) {
-				case 'success':
-				case 'redirect':
-					isClicked = true;
-					toast.success('Registration successfully!', {
-						style: 'border-radius: 200px; background: #333; color: #fff;'});
-					await update();
-					break;
-				case 'failure':
-					toast.error('Invalid credentials', {
-						style: 'border-radius: 200px; background: #333; color: #fff;'});
-					await update();
-					break;
-				case 'error':
-					toast.error(result.error.message, {
-						style: 'border-radius: 200px; background: #333; color: #fff;'});
-					break;
-				default:
-					await update();
-			}
-			loading = false;
-		}
-	}
-	
-	
-	
-	
-	/*
+  let isClicked = false;
+  let loading = false;
+  let oauthLoading = false;
+
+  const submitRegistration = () => {
+    loading = true;
+    return async ({ result, update }) => {
+      switch (result.type) {
+        case "success":
+        case "redirect":
+          isClicked = true;
+          toast.success("Registration successfully!", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "failure":
+          toast.error("Invalid credentials", {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          await update();
+          break;
+        case "error":
+          toast.error(result.error.message, {
+            style: "border-radius: 200px; background: #333; color: #fff;",
+          });
+          break;
+        default:
+          await update();
+      }
+      loading = false;
+    };
+  };
+
+  /*
 	function checkPassword() {
 		hasLetter = /[a-zA-Z]/.test(password);
 		hasNumber = /\d/.test(password);
@@ -50,37 +48,36 @@
 		hasSpecialChar = /[!@#$%^&*()]/.test(password);
 	  }
 	*/
-	
-	
-	let isHoveredGoogle = false;
-	let isHoveredDiscord = false;
-	let isHoveredGithub = false;
 
-	
-	function handleHoverGoogle() {
-		isHoveredGoogle = !isHoveredGoogle;
-	}
-	
-	  function handleHoverDiscord() {
-		isHoveredDiscord = !isHoveredDiscord;
-	  }
+  let isHoveredGoogle = false;
+  let isHoveredDiscord = false;
+  let isHoveredGithub = false;
 
-	  function handleHoverGithub() {
-		isHoveredGithub = !isHoveredGithub;
-	  }
-	
-	</script>
-	
-	<!-- HEADER FOR BETTER SEO -->
-	<svelte:head>
-		<meta charset="utf-8">
-		<title> Sign Up · stocknear</title>
-		<meta name="viewport" content="width=device-width,initial-scale=1">
-		<meta name="description" content="Sign Up to stocknear to become part of the largest trading community in the world.">
-	</svelte:head>
-	
-		
-			<!--
+  function handleHoverGoogle() {
+    isHoveredGoogle = !isHoveredGoogle;
+  }
+
+  function handleHoverDiscord() {
+    isHoveredDiscord = !isHoveredDiscord;
+  }
+
+  function handleHoverGithub() {
+    isHoveredGithub = !isHoveredGithub;
+  }
+</script>
+
+<!-- HEADER FOR BETTER SEO -->
+<svelte:head>
+  <meta charset="utf-8" />
+  <title>Sign Up · stocknear</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta
+    name="description"
+    content="Sign Up to stocknear to become part of the largest trading community in the world."
+  />
+</svelte:head>
+
+<!--
 	<label class="w-full max-w-lg">
 		<input
 		  class="input input-bordered w-full max-w-lg bg-[#2A303C] whitespace-normal ring-2"
@@ -101,172 +98,767 @@
 	</div>
 	
 	-->
-	
-	
-	
-	
-	<div class="relative w-full max-w-3xl mx-auto min-h-screen pb-40 sm:mt-10 {oauthLoading ? 'opacity-[0.2]' : ''}">
-	
-		<div class="grid grid-cols-1 gap-4" >
-			<div class="relative">
-				<h2 class="text-center text-white text-2xl sm:text-3xl pt-10 sm:pt-0 font-semibold">
-					Getting Started
-				</h2>
-			</div>
 
-			<span class="text-gray-400 text-center">
-				Create an Account for a 30-Day Free Trial
-			</span>	
-		
+<div
+  class="relative w-full max-w-3xl mx-auto min-h-screen pb-40 sm:mt-10 {oauthLoading
+    ? 'opacity-[0.2]'
+    : ''}"
+>
+  <div class="grid grid-cols-1 gap-4">
+    <div class="relative">
+      <h2
+        class="text-center text-white text-2xl sm:text-3xl pt-10 sm:pt-0 font-semibold"
+      >
+        Getting Started
+      </h2>
+    </div>
 
-	
-	
-				<form action="?/register" method="POST" use:enhance={submitRegistration} class="flex flex-col items-center space-y-2 w-full max-w-lg pt-4 pl-3 pr-3 sm:pl-0 sm:pr-0 ml-auto mr-auto">
-					<!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
-					<Input
-						id="username"
-						label="Username"
-						value={form?.data?.username}
-						errors={form?.errors?.username}
-						disabled={loading} 
-					/>
-					<Input
-						type="email"
-						id="email"
-						label="Email"
-						value={form?.data?.email}
-						errors={form?.errors?.email}
-						disabled={loading} 
-					/>
-					
-					<Input 
-						type="password" 
-						id="password" 
-						label="Password" 
-						errors={form?.errors?.password} 
-						disabled={loading} 
-					/>
-					
-				
+    <span class="text-gray-400 text-center">
+      Create an account & start your stock analysis
+    </span>
 
-					<Input
-						type="password"
-						id="passwordConfirm"
-						label="Confirm Password"
-						errors={form?.errors?.passwordConfirm}
-						disabled={loading} 
-					/>
-	
-					<div class="w-full max-w-lg pt-5 m-auto pb-5">
-						{#if !loading && !isClicked}
-							<button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-								<span class="text-white">Register</span>
-							</button>
-						{:else}
-							<label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
-								<div class="flex flex-row m-auto items-center">
-									<span class="loading loading-infinity"></span>
-									<span class="text-white ml-1.5">Signing Up</span>
-								</div>
-							</label>
-						{/if}
+    <form
+      action="?/register"
+      method="POST"
+      use:enhance={submitRegistration}
+      class="flex flex-col items-center space-y-2 w-full max-w-lg pt-4 pl-3 pr-3 sm:pl-0 sm:pr-0 ml-auto mr-auto"
+    >
+      <!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
+      <Input
+        id="username"
+        label="Username"
+        value={form?.data?.username}
+        errors={form?.errors?.username}
+        disabled={loading}
+      />
+      <Input
+        type="email"
+        id="email"
+        label="Email"
+        value={form?.data?.email}
+        errors={form?.errors?.email}
+        disabled={loading}
+      />
 
-					</div>
-					<p class="hidden sm:block pb-1 text-xs text-center w-full max-w-lg text-white">By registering you agree to stocknear's
-						<a href="/terms-of-use" class="text-blue-400 hover:underline">Terms of Use</a>
-						and acknowledge that you've read our <a href="/privacy-policy" class="text-blue-400 hover:underline">Privacy Policy</a>.
-					</p>
+      <Input
+        type="password"
+        id="password"
+        label="Password"
+        errors={form?.errors?.password}
+        disabled={loading}
+      />
 
-					<div class="divider divider-[#fff] pt-10 pb-10">
-						<span class="text-white text-[1rem] z-10">Or register using</span>
-					</div>
+      <Input
+        type="password"
+        id="passwordConfirm"
+        label="Confirm Password"
+        errors={form?.errors?.passwordConfirm}
+        disabled={loading}
+      />
 
-					<div class="flex flex-row items-center gap-x-5 pb-6">
-						<form method="post" action="?/oauth2">
-							<input class="hidden" name='provider' value='google'/>
-							<button
-								on:click={() => oauthLoading = !oauthLoading}
-								on:mouseenter={handleHoverGoogle}
-								on:mouseleave={handleHoverGoogle}	
-								class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-								<svg class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block" viewBox="-3 0 262 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451" fill="#4285F4"> </path> <path d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"> </path> <path d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"> </path> <path d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479" fill="#EB4335"> </path> </g> </g></svg>
-							</button>
-						</form>
-						<form method="post" action="?/oauth2">
-							<input class="hidden" name='provider' value='discord'/>
-							<button
-								on:click={() => oauthLoading = !oauthLoading}
-								on:mouseenter={handleHoverDiscord}
-								on:mouseleave={handleHoverDiscord}
-								class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-								<svg class="{isHoveredDiscord ? 'shake-logo' : ''}  w-7 h-7 inline-block" viewBox="0 0 100 100" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#F5BB41;} .st2{fill:#2167D1;} .st3{fill:#3D84F3;} .st4{fill:#4CA853;} .st5{fill:#398039;} .st6{fill:#D74F3F;} .st7{fill:#D43C89;} .st8{fill:#B2005F;} .st9{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st10{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st11{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#040404;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill-rule:evenodd;clip-rule:evenodd;} .st13{fill-rule:evenodd;clip-rule:evenodd;fill:#040404;} .st14{fill:url(#SVGID_1_);} .st15{fill:url(#SVGID_2_);} .st16{fill:url(#SVGID_3_);} .st17{fill:url(#SVGID_4_);} .st18{fill:url(#SVGID_5_);} .st19{fill:url(#SVGID_6_);} .st20{fill:url(#SVGID_7_);} .st21{fill:url(#SVGID_8_);} .st22{fill:url(#SVGID_9_);} .st23{fill:url(#SVGID_10_);} .st24{fill:url(#SVGID_11_);} .st25{fill:url(#SVGID_12_);} .st26{fill:url(#SVGID_13_);} .st27{fill:url(#SVGID_14_);} .st28{fill:url(#SVGID_15_);} .st29{fill:url(#SVGID_16_);} .st30{fill:url(#SVGID_17_);} .st31{fill:url(#SVGID_18_);} .st32{fill:url(#SVGID_19_);} .st33{fill:url(#SVGID_20_);} .st34{fill:url(#SVGID_21_);} .st35{fill:url(#SVGID_22_);} .st36{fill:url(#SVGID_23_);} .st37{fill:url(#SVGID_24_);} .st38{fill:url(#SVGID_25_);} .st39{fill:url(#SVGID_26_);} .st40{fill:url(#SVGID_27_);} .st41{fill:url(#SVGID_28_);} .st42{fill:url(#SVGID_29_);} .st43{fill:url(#SVGID_30_);} .st44{fill:url(#SVGID_31_);} .st45{fill:url(#SVGID_32_);} .st46{fill:url(#SVGID_33_);} .st47{fill:url(#SVGID_34_);} .st48{fill:url(#SVGID_35_);} .st49{fill:url(#SVGID_36_);} .st50{fill:url(#SVGID_37_);} .st51{fill:url(#SVGID_38_);} .st52{fill:url(#SVGID_39_);} .st53{fill:url(#SVGID_40_);} .st54{fill:url(#SVGID_41_);} .st55{fill:url(#SVGID_42_);} .st56{fill:url(#SVGID_43_);} .st57{fill:url(#SVGID_44_);} .st58{fill:url(#SVGID_45_);} .st59{fill:#040404;} .st60{fill:url(#SVGID_46_);} .st61{fill:url(#SVGID_47_);} .st62{fill:url(#SVGID_48_);} .st63{fill:url(#SVGID_49_);} .st64{fill:url(#SVGID_50_);} .st65{fill:url(#SVGID_51_);} .st66{fill:url(#SVGID_52_);} .st67{fill:url(#SVGID_53_);} .st68{fill:url(#SVGID_54_);} .st69{fill:url(#SVGID_55_);} .st70{fill:url(#SVGID_56_);} .st71{fill:url(#SVGID_57_);} .st72{fill:url(#SVGID_58_);} .st73{fill:url(#SVGID_59_);} .st74{fill:url(#SVGID_60_);} .st75{fill:url(#SVGID_61_);} .st76{fill:url(#SVGID_62_);} .st77{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;} .st78{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;} .st79{fill:#4BC9FF;} .st80{fill:#5500DD;} .st81{fill:#FF3A00;} .st82{fill:#E6162D;} .st83{fill:#F1F1F1;} .st84{fill:#FF9933;} .st85{fill:#B92B27;} .st86{fill:#00ACED;} .st87{fill:#BD2125;} .st88{fill:#1877F2;} .st89{fill:#fff;} .st90{fill:#CE3056;} .st91{fill:#5BB381;} .st92{fill:#61C3EC;} .st93{fill:#E4B34B;} .st94{fill:#181EF2;} .st95{fill:#FF0000;} .st96{fill:#FE466C;} .st97{fill:#FA4778;} .st98{fill:#FF7700;} .st99{fill-rule:evenodd;clip-rule:evenodd;fill:#1F6BF6;} .st100{fill:#520094;} .st101{fill:#4477E8;} .st102{fill:#3D1D1C;} .st103{fill:#FFE812;} .st104{fill:#344356;} .st105{fill:#00CC76;} .st106{fill-rule:evenodd;clip-rule:evenodd;fill:#345E90;} .st107{fill:#1F65D8;} .st108{fill:#EB3587;} .st109{fill-rule:evenodd;clip-rule:evenodd;fill:#603A88;} .st110{fill:#E3CE99;} .st111{fill:#783AF9;} .st112{fill:#FF515E;} .st113{fill:#FF4906;} .st114{fill:#503227;} .st115{fill:#4C7BD9;} .st116{fill:#69C9D0;} .st117{fill:#1B92D1;} .st118{fill:#EB4F4A;} .st119{fill:#513728;} .st120{fill:#FF6600;} .st121{fill-rule:evenodd;clip-rule:evenodd;fill:#B61438;} .st122{fill:#FFFC00;} .st123{fill:#141414;} .st124{fill:#94D137;} .st125{fill-rule:evenodd;clip-rule:evenodd;fill:#F1F1F1;} .st126{fill-rule:evenodd;clip-rule:evenodd;fill:#66E066;} .st127{fill:#2D8CFF;} .st128{fill:#F1A300;} .st129{fill:#4BA2F2;} .st130{fill:#1A5099;} .st131{fill:#EE6060;} .st132{fill-rule:evenodd;clip-rule:evenodd;fill:#F48120;} .st133{fill:#222222;} .st134{fill:url(#SVGID_63_);} .st135{fill:#0077B5;} .st136{fill:#FFCC00;} .st137{fill:#EB3352;} .st138{fill:#F9D265;} .st139{fill:#F5B955;} .st140{fill:#DD2A7B;} .st141{fill:#66E066;} .st142{fill:#EB4E00;} .st143{fill:#FFC794;} .st144{fill:#B5332A;} .st145{fill:#4E85EB;} .st146{fill:#58A45C;} .st147{fill:#F2BC42;} .st148{fill:#D85040;} .st149{fill:#464EB8;} .st150{fill:#7B83EB;} </style> <g id="Layer_1"></g> <g id="Layer_2"> <g> <g> <path class="st89" d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"></path> </g> </g> </g> </g></svg>
-							</button>
-						</form>
+      <div class="w-full max-w-lg pt-5 m-auto pb-5">
+        {#if !loading && !isClicked}
+          <button
+            type="submit"
+            class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
+          >
+            <span>Register</span>
+          </button>
+        {:else}
+          <label
+            class="cursor-not-allowed btn bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
+          >
+            <div class="flex flex-row m-auto items-center">
+              <span class="loading loading-infinity"></span>
+              <span class="ml-1.5">Signing Up</span>
+            </div>
+          </label>
+        {/if}
+      </div>
+      <p
+        class="hidden sm:block pb-1 text-xs text-center w-full max-w-lg text-white"
+      >
+        By registering you agree to stocknear's
+        <a href="/terms-of-use" class="text-blue-400 hover:underline"
+          >Terms of Use</a
+        >
+        and acknowledge that you've read our
+        <a href="/privacy-policy" class="text-blue-400 hover:underline"
+          >Privacy Policy</a
+        >.
+      </p>
 
-						<form method="post" action="?/oauth2">
-							<input class="hidden" name='provider' value='github'/>
-							<button
-								on:click={() => oauthLoading = !oauthLoading}
-								on:mouseenter={handleHoverGithub}
-								on:mouseleave={handleHoverGithub}
-								class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white">
-								<svg class="{isHoveredGithub ? 'shake-logo' : ''}  w-7 h-7 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
-							</button>
-						</form>
+      <div class="divider divider-[#fff] pt-10 pb-10">
+        <span class="text-white text-[1rem] z-10">Or register using</span>
+      </div>
 
-					</div>
-	
-					<p class="pt-2 pb-1 text-sm w-full max-w-lg text-white flex justify-center items-center">You already have an account?
-						<a href="/login" class="text-blue-400 font-medium hover:underline ml-1">Sign in</a>
-					</p>
-	
-					
-				</form>
-	
-				
-			
-			</div>
+      <div class="flex flex-row items-center gap-x-5 pb-6">
+        <form method="post" action="?/oauth2">
+          <input class="hidden" name="provider" value="google" />
+          <button
+            on:click={() => (oauthLoading = !oauthLoading)}
+            on:mouseenter={handleHoverGoogle}
+            on:mouseleave={handleHoverGoogle}
+            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+          >
+            <svg
+              class="{isHoveredGoogle ? 'shake-logo' : ''} w-6 h-6 inline-block"
+              viewBox="-3 0 262 262"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              preserveAspectRatio="xMidYMid"
+              fill="#000000"
+              ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g><g id="SVGRepo_iconCarrier">
+                <g>
+                  <path
+                    d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451"
+                    fill="#4285F4"
+                  >
+                  </path>
+                  <path
+                    d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1"
+                    fill="#34A853"
+                  >
+                  </path>
+                  <path
+                    d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37"
+                    fill="#FBBC05"
+                  >
+                  </path>
+                  <path
+                    d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479"
+                    fill="#EB4335"
+                  >
+                  </path>
+                </g>
+              </g></svg
+            >
+          </button>
+        </form>
+        <form method="post" action="?/oauth2">
+          <input class="hidden" name="provider" value="discord" />
+          <button
+            on:click={() => (oauthLoading = !oauthLoading)}
+            on:mouseenter={handleHoverDiscord}
+            on:mouseleave={handleHoverDiscord}
+            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+          >
+            <svg
+              class="{isHoveredDiscord
+                ? 'shake-logo'
+                : ''}  w-7 h-7 inline-block"
+              viewBox="0 0 100 100"
+              version="1.1"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              fill="#000000"
+              ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g><g id="SVGRepo_iconCarrier">
+                <style type="text/css">
+                  .st0 {
+                    fill: #ffffff;
+                  }
+                  .st1 {
+                    fill: #f5bb41;
+                  }
+                  .st2 {
+                    fill: #2167d1;
+                  }
+                  .st3 {
+                    fill: #3d84f3;
+                  }
+                  .st4 {
+                    fill: #4ca853;
+                  }
+                  .st5 {
+                    fill: #398039;
+                  }
+                  .st6 {
+                    fill: #d74f3f;
+                  }
+                  .st7 {
+                    fill: #d43c89;
+                  }
+                  .st8 {
+                    fill: #b2005f;
+                  }
+                  .st9 {
+                    fill: none;
+                    stroke: #000000;
+                    stroke-width: 3;
+                    stroke-linecap: round;
+                    stroke-linejoin: round;
+                    stroke-miterlimit: 10;
+                  }
+                  .st10 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: none;
+                    stroke: #000000;
+                    stroke-width: 3;
+                    stroke-linecap: round;
+                    stroke-linejoin: round;
+                    stroke-miterlimit: 10;
+                  }
+                  .st11 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: none;
+                    stroke: #040404;
+                    stroke-width: 3;
+                    stroke-linecap: round;
+                    stroke-linejoin: round;
+                    stroke-miterlimit: 10;
+                  }
+                  .st12 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                  }
+                  .st13 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #040404;
+                  }
+                  .st14 {
+                    fill: url(#SVGID_1_);
+                  }
+                  .st15 {
+                    fill: url(#SVGID_2_);
+                  }
+                  .st16 {
+                    fill: url(#SVGID_3_);
+                  }
+                  .st17 {
+                    fill: url(#SVGID_4_);
+                  }
+                  .st18 {
+                    fill: url(#SVGID_5_);
+                  }
+                  .st19 {
+                    fill: url(#SVGID_6_);
+                  }
+                  .st20 {
+                    fill: url(#SVGID_7_);
+                  }
+                  .st21 {
+                    fill: url(#SVGID_8_);
+                  }
+                  .st22 {
+                    fill: url(#SVGID_9_);
+                  }
+                  .st23 {
+                    fill: url(#SVGID_10_);
+                  }
+                  .st24 {
+                    fill: url(#SVGID_11_);
+                  }
+                  .st25 {
+                    fill: url(#SVGID_12_);
+                  }
+                  .st26 {
+                    fill: url(#SVGID_13_);
+                  }
+                  .st27 {
+                    fill: url(#SVGID_14_);
+                  }
+                  .st28 {
+                    fill: url(#SVGID_15_);
+                  }
+                  .st29 {
+                    fill: url(#SVGID_16_);
+                  }
+                  .st30 {
+                    fill: url(#SVGID_17_);
+                  }
+                  .st31 {
+                    fill: url(#SVGID_18_);
+                  }
+                  .st32 {
+                    fill: url(#SVGID_19_);
+                  }
+                  .st33 {
+                    fill: url(#SVGID_20_);
+                  }
+                  .st34 {
+                    fill: url(#SVGID_21_);
+                  }
+                  .st35 {
+                    fill: url(#SVGID_22_);
+                  }
+                  .st36 {
+                    fill: url(#SVGID_23_);
+                  }
+                  .st37 {
+                    fill: url(#SVGID_24_);
+                  }
+                  .st38 {
+                    fill: url(#SVGID_25_);
+                  }
+                  .st39 {
+                    fill: url(#SVGID_26_);
+                  }
+                  .st40 {
+                    fill: url(#SVGID_27_);
+                  }
+                  .st41 {
+                    fill: url(#SVGID_28_);
+                  }
+                  .st42 {
+                    fill: url(#SVGID_29_);
+                  }
+                  .st43 {
+                    fill: url(#SVGID_30_);
+                  }
+                  .st44 {
+                    fill: url(#SVGID_31_);
+                  }
+                  .st45 {
+                    fill: url(#SVGID_32_);
+                  }
+                  .st46 {
+                    fill: url(#SVGID_33_);
+                  }
+                  .st47 {
+                    fill: url(#SVGID_34_);
+                  }
+                  .st48 {
+                    fill: url(#SVGID_35_);
+                  }
+                  .st49 {
+                    fill: url(#SVGID_36_);
+                  }
+                  .st50 {
+                    fill: url(#SVGID_37_);
+                  }
+                  .st51 {
+                    fill: url(#SVGID_38_);
+                  }
+                  .st52 {
+                    fill: url(#SVGID_39_);
+                  }
+                  .st53 {
+                    fill: url(#SVGID_40_);
+                  }
+                  .st54 {
+                    fill: url(#SVGID_41_);
+                  }
+                  .st55 {
+                    fill: url(#SVGID_42_);
+                  }
+                  .st56 {
+                    fill: url(#SVGID_43_);
+                  }
+                  .st57 {
+                    fill: url(#SVGID_44_);
+                  }
+                  .st58 {
+                    fill: url(#SVGID_45_);
+                  }
+                  .st59 {
+                    fill: #040404;
+                  }
+                  .st60 {
+                    fill: url(#SVGID_46_);
+                  }
+                  .st61 {
+                    fill: url(#SVGID_47_);
+                  }
+                  .st62 {
+                    fill: url(#SVGID_48_);
+                  }
+                  .st63 {
+                    fill: url(#SVGID_49_);
+                  }
+                  .st64 {
+                    fill: url(#SVGID_50_);
+                  }
+                  .st65 {
+                    fill: url(#SVGID_51_);
+                  }
+                  .st66 {
+                    fill: url(#SVGID_52_);
+                  }
+                  .st67 {
+                    fill: url(#SVGID_53_);
+                  }
+                  .st68 {
+                    fill: url(#SVGID_54_);
+                  }
+                  .st69 {
+                    fill: url(#SVGID_55_);
+                  }
+                  .st70 {
+                    fill: url(#SVGID_56_);
+                  }
+                  .st71 {
+                    fill: url(#SVGID_57_);
+                  }
+                  .st72 {
+                    fill: url(#SVGID_58_);
+                  }
+                  .st73 {
+                    fill: url(#SVGID_59_);
+                  }
+                  .st74 {
+                    fill: url(#SVGID_60_);
+                  }
+                  .st75 {
+                    fill: url(#SVGID_61_);
+                  }
+                  .st76 {
+                    fill: url(#SVGID_62_);
+                  }
+                  .st77 {
+                    fill: none;
+                    stroke: #000000;
+                    stroke-width: 3;
+                    stroke-miterlimit: 10;
+                  }
+                  .st78 {
+                    fill: none;
+                    stroke: #ffffff;
+                    stroke-miterlimit: 10;
+                  }
+                  .st79 {
+                    fill: #4bc9ff;
+                  }
+                  .st80 {
+                    fill: #5500dd;
+                  }
+                  .st81 {
+                    fill: #ff3a00;
+                  }
+                  .st82 {
+                    fill: #e6162d;
+                  }
+                  .st83 {
+                    fill: #f1f1f1;
+                  }
+                  .st84 {
+                    fill: #ff9933;
+                  }
+                  .st85 {
+                    fill: #b92b27;
+                  }
+                  .st86 {
+                    fill: #00aced;
+                  }
+                  .st87 {
+                    fill: #bd2125;
+                  }
+                  .st88 {
+                    fill: #1877f2;
+                  }
+                  .st89 {
+                    fill: #fff;
+                  }
+                  .st90 {
+                    fill: #ce3056;
+                  }
+                  .st91 {
+                    fill: #5bb381;
+                  }
+                  .st92 {
+                    fill: #61c3ec;
+                  }
+                  .st93 {
+                    fill: #e4b34b;
+                  }
+                  .st94 {
+                    fill: #181ef2;
+                  }
+                  .st95 {
+                    fill: #ff0000;
+                  }
+                  .st96 {
+                    fill: #fe466c;
+                  }
+                  .st97 {
+                    fill: #fa4778;
+                  }
+                  .st98 {
+                    fill: #ff7700;
+                  }
+                  .st99 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #1f6bf6;
+                  }
+                  .st100 {
+                    fill: #520094;
+                  }
+                  .st101 {
+                    fill: #4477e8;
+                  }
+                  .st102 {
+                    fill: #3d1d1c;
+                  }
+                  .st103 {
+                    fill: #ffe812;
+                  }
+                  .st104 {
+                    fill: #344356;
+                  }
+                  .st105 {
+                    fill: #00cc76;
+                  }
+                  .st106 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #345e90;
+                  }
+                  .st107 {
+                    fill: #1f65d8;
+                  }
+                  .st108 {
+                    fill: #eb3587;
+                  }
+                  .st109 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #603a88;
+                  }
+                  .st110 {
+                    fill: #e3ce99;
+                  }
+                  .st111 {
+                    fill: #783af9;
+                  }
+                  .st112 {
+                    fill: #ff515e;
+                  }
+                  .st113 {
+                    fill: #ff4906;
+                  }
+                  .st114 {
+                    fill: #503227;
+                  }
+                  .st115 {
+                    fill: #4c7bd9;
+                  }
+                  .st116 {
+                    fill: #69c9d0;
+                  }
+                  .st117 {
+                    fill: #1b92d1;
+                  }
+                  .st118 {
+                    fill: #eb4f4a;
+                  }
+                  .st119 {
+                    fill: #513728;
+                  }
+                  .st120 {
+                    fill: #ff6600;
+                  }
+                  .st121 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #b61438;
+                  }
+                  .st122 {
+                    fill: #fffc00;
+                  }
+                  .st123 {
+                    fill: #141414;
+                  }
+                  .st124 {
+                    fill: #94d137;
+                  }
+                  .st125 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #f1f1f1;
+                  }
+                  .st126 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #66e066;
+                  }
+                  .st127 {
+                    fill: #2d8cff;
+                  }
+                  .st128 {
+                    fill: #f1a300;
+                  }
+                  .st129 {
+                    fill: #4ba2f2;
+                  }
+                  .st130 {
+                    fill: #1a5099;
+                  }
+                  .st131 {
+                    fill: #ee6060;
+                  }
+                  .st132 {
+                    fill-rule: evenodd;
+                    clip-rule: evenodd;
+                    fill: #f48120;
+                  }
+                  .st133 {
+                    fill: #222222;
+                  }
+                  .st134 {
+                    fill: url(#SVGID_63_);
+                  }
+                  .st135 {
+                    fill: #0077b5;
+                  }
+                  .st136 {
+                    fill: #ffcc00;
+                  }
+                  .st137 {
+                    fill: #eb3352;
+                  }
+                  .st138 {
+                    fill: #f9d265;
+                  }
+                  .st139 {
+                    fill: #f5b955;
+                  }
+                  .st140 {
+                    fill: #dd2a7b;
+                  }
+                  .st141 {
+                    fill: #66e066;
+                  }
+                  .st142 {
+                    fill: #eb4e00;
+                  }
+                  .st143 {
+                    fill: #ffc794;
+                  }
+                  .st144 {
+                    fill: #b5332a;
+                  }
+                  .st145 {
+                    fill: #4e85eb;
+                  }
+                  .st146 {
+                    fill: #58a45c;
+                  }
+                  .st147 {
+                    fill: #f2bc42;
+                  }
+                  .st148 {
+                    fill: #d85040;
+                  }
+                  .st149 {
+                    fill: #464eb8;
+                  }
+                  .st150 {
+                    fill: #7b83eb;
+                  }
+                </style> <g id="Layer_1"></g>
+                <g id="Layer_2">
+                  <g>
+                    <g>
+                      <path
+                        class="st89"
+                        d="M85.22,24.958c-11.459-8.575-22.438-8.334-22.438-8.334l-1.122,1.282 c13.623,4.087,19.954,10.097,19.954,10.097c-19.491-10.731-44.317-10.654-64.59,0c0,0,6.571-6.331,20.996-10.418l-0.801-0.962 c0,0-10.899-0.24-22.438,8.334c0,0-11.54,20.755-11.54,46.319c0,0,6.732,11.54,24.442,12.101c0,0,2.965-3.526,5.369-6.571 c-10.177-3.045-14.024-9.376-14.024-9.376c6.394,4.001,12.859,6.505,20.916,8.094c13.108,2.698,29.413-0.076,41.591-8.094 c0,0-4.007,6.491-14.505,9.456c2.404,2.965,5.289,6.411,5.289,6.411c17.71-0.561,24.441-12.101,24.441-12.02 C96.759,45.713,85.22,24.958,85.22,24.958z M35.055,63.824c-4.488,0-8.174-3.927-8.174-8.815 c0.328-11.707,16.102-11.671,16.348,0C43.229,59.897,39.622,63.824,35.055,63.824z M64.304,63.824 c-4.488,0-8.174-3.927-8.174-8.815c0.36-11.684,15.937-11.689,16.348,0C72.478,59.897,68.872,63.824,64.304,63.824z"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g></svg
+            >
+          </button>
+        </form>
 
-			
-	</div>
+        <form method="post" action="?/oauth2">
+          <input class="hidden" name="provider" value="github" />
+          <button
+            on:click={() => (oauthLoading = !oauthLoading)}
+            on:mouseenter={handleHoverGithub}
+            on:mouseleave={handleHoverGithub}
+            class="cursor-pointer flex-shrink-0 rounded-full w-12 h-12 relative bg-[#09090B] flex items-center justify-center border border-gray-600 sm:hover:bg-[#313131] text-white"
+          >
+            <svg
+              class="{isHoveredGithub
+                ? 'shake-logo'
+                : ''}  w-7 h-7 inline-block"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="white"
+                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+              /></svg
+            >
+          </button>
+        </form>
+      </div>
 
-	<div class="relative sm:hidden w-5/6 flex justify-center items-center m-auto">
-		<p class="absolute bottom-5 pb-1 text-xs text-center w-full max-w-lg text-gray-300">By registering you agree to stocknear's
-			<a href="/terms-of-use" class="text-blue-400 hover:underline">Terms of Use</a>
-			and acknowledge that you've read our <a href="/privacy-policy" class="text-blue-400 hover:underline">Privacy Policy</a>.
-		</p>
-	</div>
+      <p
+        class="pt-2 pb-1 text-sm w-full max-w-lg text-white flex justify-center items-center"
+      >
+        You already have an account?
+        <a href="/login" class="text-blue-400 font-medium hover:underline ml-1"
+          >Sign in</a
+        >
+      </p>
+    </form>
+  </div>
+</div>
 
+<div class="relative sm:hidden w-5/6 flex justify-center items-center m-auto">
+  <p
+    class="absolute bottom-5 pb-1 text-xs text-center w-full max-w-lg text-gray-300"
+  >
+    By registering you agree to stocknear's
+    <a href="/terms-of-use" class="text-blue-400 hover:underline"
+      >Terms of Use</a
+    >
+    and acknowledge that you've read our
+    <a href="/privacy-policy" class="text-blue-400 hover:underline"
+      >Privacy Policy</a
+    >.
+  </p>
+</div>
 
-	{#if oauthLoading}
-	<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
-		<div class="relative">
-			<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-				<span class="loading loading-spinner loading-md text-gray-400"></span>
-			</label>
-		</div>  
-	</div>
-	{/if}
+{#if oauthLoading}
+  <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
+    <div class="relative">
+      <label
+        class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      >
+        <span class="loading loading-spinner loading-md text-gray-400"></span>
+      </label>
+    </div>
+  </div>
+{/if}
 
-	
-	
-	
-	
-	<style>
-		.shake-logo{
-	animation-name: shake;
-	animation-duration: 0.5s;
-	animation-iteration-count: infinite;
-	animation-timing-function: ease-in-out;
-	}
-	
-	
-	@keyframes shake {
-	0% { transform: rotate(0deg); }
-	25% { transform: rotate(10deg); }
-	50% { transform: rotate(0deg); }
-	75% { transform: rotate(-10deg); }
-	100% { transform: rotate(0deg); }
-	}
-	
-	</style>
\ No newline at end of file
+<style>
+  .shake-logo {
+    animation-name: shake;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+  }
+
+  @keyframes shake {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    75% {
+      transform: rotate(-10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+</style>
diff --git a/src/routes/sentiment-tracker/+page.svelte b/src/routes/sentiment-tracker/+page.svelte
index 6cff7ca2..ed1265bb 100644
--- a/src/routes/sentiment-tracker/+page.svelte
+++ b/src/routes/sentiment-tracker/+page.svelte
@@ -173,7 +173,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index 00e3d798..3fc45ce2 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -2506,7 +2506,7 @@ const handleKeyDown = (event) => {
                                 >
                                   <input
                                     type="radio"
-                                    class="radio ring-0 checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
+                                    class="radio ring-0 checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
                                     checked={ruleCondition[row?.rule] ===
                                       "under"}
                                     name={row?.rule}
@@ -2522,7 +2522,7 @@ const handleKeyDown = (event) => {
                                 >
                                   <input
                                     type="radio"
-                                    class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
+                                    class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
                                     checked={ruleCondition[row?.rule] ===
                                       "over"}
                                     name={row?.rule}
@@ -2651,7 +2651,7 @@ const handleKeyDown = (event) => {
                       <div class="text-white font-bold text-xl sm:text-2xl flex justify-start items-center">
                         {ruleOfList.length} Rules Preview
                       </div>
-                      <label on:click={handleResetAll} class="ml-auto cursor-pointer transition  bg-purple-600 sm:hover:bg-purple-700 border border-slate-800 py-2 px-3 rounded-lg text-white text-sm">
+                      <label on:click={handleResetAll} class="ml-auto cursor-pointer transition  bg-[#fff] sm:hover:bg-gray-300 border border-slate-800 py-2 px-3 rounded-lg text-white text-sm">
                         Reset All
                       </label>
                     </div>
@@ -3053,7 +3053,7 @@ const handleKeyDown = (event) => {
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 256 256"
           ><path
-            fill="#FBCE3C"
+            fill="#fff"
             d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
           /></svg
         >
@@ -3241,7 +3241,7 @@ const handleKeyDown = (event) => {
 
       <button
         type="submit"
-        class="mt-10 btn bg-purple-600 sm:hover:bg-purple-700 duration-100 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
+        class="mt-10 btn bg-[#fff] sm:hover:bg-gray-300 duration-100 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
       >
         Create Strategy
       </button>
@@ -3275,7 +3275,7 @@ const handleKeyDown = (event) => {
       <label
         for="deleteStrategy"
         on:click={handleDeleteStrategy}
-        class="mt-5 btn bg-purple-600 hover:bg-purple-500 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
+        class="mt-5 btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
       >
         Proceed
       </label>
diff --git a/src/routes/stock-splits-calendar/+page.svelte b/src/routes/stock-splits-calendar/+page.svelte
index 06117331..f67dc950 100644
--- a/src/routes/stock-splits-calendar/+page.svelte
+++ b/src/routes/stock-splits-calendar/+page.svelte
@@ -359,8 +359,8 @@
                       on:click={() => toggleDate(index)}
                       class="w-11/12 sm:w-full m-auto cursor-pointer h-16 {index ===
                       selectedWeekday
-                        ? 'bg-purple-600 sm:hover:bg-purple-700'
-                        : ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
+                        ? 'bg-[#fff] sm:hover:bg-gray-300'
+                        : ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-[#fff] transition duration-50 border border-gray-600 mb-3"
                     >
                       <div
                         class=" flex flex-row justify-center items-center w-full"
@@ -518,7 +518,7 @@
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 256 256"
                         ><path
-                          fill="#FBCE3C"
+                          fill="#fff"
                           d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                         /></svg
                       >
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index dbc6ffef..d80563ca 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -452,7 +452,7 @@ function handleTypeOfTrade(state:string)
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 16 16"
                                 ><path
-                                  fill="#FBCE3C"
+                                  fill="#fff"
                                   d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                 /></svg
                               >
@@ -479,7 +479,7 @@ function handleTypeOfTrade(state:string)
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 16 16"
                                 ><path
-                                  fill="#FBCE3C"
+                                  fill="#fff"
                                   d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                 /></svg
                               >
@@ -581,7 +581,7 @@ function handleTypeOfTrade(state:string)
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="#FBCE3C"
+                                        fill="#fff"
                                         d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                       /></svg
                                     >
@@ -613,7 +613,7 @@ function handleTypeOfTrade(state:string)
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="#FBCE3C"
+                                        fill="#fff"
                                         d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                       /></svg
                                     >
@@ -742,7 +742,7 @@ function handleTypeOfTrade(state:string)
                       class="sm:ml-4 border-b-[2px] overflow-x-scroll md:overflow-hidden whitespace-nowrap"
                     >
                       <ul
-                        class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
+                        class="flex flex-row items-center w-full text-[1rem] text-white"
                       >
                         <a
                           href={`/stocks/${$stockTicker}`}
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index fac293bc..7c0726ee 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -82,7 +82,7 @@
           type: "bar",
           smooth: true,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -154,7 +154,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index 3dd1029b..6966d679 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -220,7 +220,7 @@
           type: "bar",
           smooth: true,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -399,7 +399,7 @@
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 256 256"
                   ><path
-                    fill="#FBCE3C"
+                    fill="#fff"
                     d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                   /></svg
                 >
@@ -421,10 +421,10 @@
                 <li class="w-full">
                   <label
                     on:click={() => (filterRule = "annual")}
-                    class="cursor-pointer rounded-l-lg inline-block w-full py-1.5 sm:py-2.5 text-white {filterRule ===
+                    class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
                     'annual'
-                      ? 'bg-purple-600'
-                      : 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
+                      ? 'bg-[#fff] text-black'
+                      : 'bg-[#2A303C] text-white'} font-semibold"
                     aria-current="page"
                   >
                     Annual
@@ -434,17 +434,17 @@
                   {#if data?.user?.tier === "Pro"}
                     <label
                       on:click={() => (filterRule = "quartely")}
-                      class="cursor-pointer inline-block w-full py-1.5 sm:py-2.5 {filterRule ===
+                      class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
                       'quartely'
-                        ? 'bg-purple-600'
-                        : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
+                        ? 'bg-[#fff] text-black'
+                        : 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
                     >
                       Quartely
                     </label>
                   {:else}
                     <a
                       href="/pricing"
-                      class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
+                      class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
                     >
                       <span class="">Quarterly</span>
                       <svg
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
index 612e2a79..c48631ee 100644
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
@@ -300,7 +300,7 @@
           type: "bar",
           smooth: true,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -484,7 +484,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
@@ -501,15 +501,15 @@
             </div>
 
             <ul
-              class="text-[0.8rem] font-medium text-center w-56 sm:w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
+              class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
             >
               <li class="w-full">
                 <label
                   on:click={() => (filterRule = "annual")}
-                  class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
+                  class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
                   'annual'
-                    ? 'bg-purple-600'
-                    : 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
+                    ? 'bg-[#fff] text-black'
+                    : 'bg-[#2A303C] text-white'} font-semibold"
                   aria-current="page"
                 >
                   Annual
@@ -519,17 +519,17 @@
                 {#if data?.user?.tier === "Pro"}
                   <label
                     on:click={() => (filterRule = "quartely")}
-                    class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
+                    class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
                     'quartely'
-                      ? 'bg-purple-600'
-                      : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
+                      ? 'bg-[#fff] text-black'
+                      : 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
                   >
                     Quartely
                   </label>
                 {:else}
                   <a
                     href="/pricing"
-                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
+                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
                   >
                     <span class="">Quarterly</span>
                     <svg
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
index c9c5c370..3cd169e8 100644
--- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
@@ -244,7 +244,7 @@
           type: "bar",
           smooth: true,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -427,7 +427,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
@@ -444,15 +444,15 @@
             </div>
 
             <ul
-              class="text-[0.8rem] font-medium text-center w-56 sm:w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
+              class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
             >
               <li class="w-full">
                 <label
                   on:click={() => (filterRule = "annual")}
-                  class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
+                  class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
                   'annual'
-                    ? 'bg-purple-600'
-                    : 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
+                    ? 'bg-[#fff] text-black'
+                    : 'bg-[#2A303C] text-white'} font-semibold"
                   aria-current="page"
                 >
                   Annual
@@ -462,17 +462,17 @@
                 {#if data?.user?.tier === "Pro"}
                   <label
                     on:click={() => (filterRule = "quartely")}
-                    class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
+                    class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
                     'quartely'
-                      ? 'bg-purple-600'
-                      : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
+                      ? 'bg-[#fff] text-black'
+                      : 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
                   >
                     Quartely
                   </label>
                 {:else}
                   <a
                     href="/pricing"
-                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
+                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
                   >
                     <span class="">Quarterly</span>
                     <svg
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
index 1c2ef949..a393b13d 100644
--- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
@@ -208,7 +208,7 @@
           type: "bar",
           smooth: true,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -391,7 +391,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
@@ -408,15 +408,15 @@
             </div>
 
             <ul
-              class="text-[0.8rem] font-medium text-center w-56 sm:w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
+              class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
             >
               <li class="w-full">
                 <label
                   on:click={() => (filterRule = "annual")}
-                  class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
+                  class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
                   'annual'
-                    ? 'bg-purple-600'
-                    : 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
+                    ? 'bg-[#fff] text-black'
+                    : 'bg-[#2A303C] text-white'} font-semibold"
                   aria-current="page"
                 >
                   Annual
@@ -426,17 +426,17 @@
                 {#if data?.user?.tier === "Pro"}
                   <label
                     on:click={() => (filterRule = "quartely")}
-                    class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
+                    class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
                     'quartely'
-                      ? 'bg-purple-600'
-                      : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
+                      ? 'bg-[#fff] text-black'
+                      : 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
                   >
                     Quartely
                   </label>
                 {:else}
                   <a
                     href="/pricing"
-                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
+                    class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
                   >
                     <span class="">Quarterly</span>
                     <svg
diff --git a/src/routes/stocks/[tickerID]/forecast/+page.svelte b/src/routes/stocks/[tickerID]/forecast/+page.svelte
index 812c2e32..77e5d4dd 100644
--- a/src/routes/stocks/[tickerID]/forecast/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+page.svelte
@@ -97,7 +97,7 @@
 
     // Define categories in the exact order you specified
     const categories = ["Strong Sell", "Sell", "Hold", "Buy", "Strong Buy"];
-    const colors = ["#9E190A", "#D9220E", "#FBCE3C", "#31B800", "#008A00"];
+    const colors = ["#9E190A", "#D9220E", "#FF9E21", "#31B800", "#008A00"];
 
     // Create a consistent mapping for data
     const formattedData = rawAnalystList.map((item) =>
@@ -216,7 +216,7 @@
               color: [
                 [0.2, "#9E190A"],
                 [0.4, "#D9220E"],
-                [0.6, "#FBCE3C"],
+                [0.6, "#FF9E21"],
                 [0.8, "#31B800"],
                 [1, "#008A00"],
               ],
@@ -409,7 +409,7 @@
           symbol: "none",
           lineStyle: {
             type: "dashed",
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
         {
@@ -533,7 +533,7 @@
                       ? 'text-[#00FC50]'
                       : ['Strong Sell', 'Sell']?.includes(consensusRating)
                         ? 'text-[#FF2F1F]'
-                        : 'text-[#FBCE3C]'}">{consensusRating}</span
+                        : 'text-[#fff]'}">{consensusRating}</span
                   >
                 </div>
               </div>
@@ -609,7 +609,7 @@
                   <h2 class="mb-1 text-xl font-bold">Latest Analyst Report</h2>
                   {#if latestInfoDate(data?.getAnalystInsight?.date)}
                     <label
-                      class="bg-[#FBCE3C] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
+                      class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
                       >New</label
                     >
                   {/if}
@@ -948,7 +948,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
diff --git a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
index 0cc5cde2..93b57be9 100644
--- a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
@@ -180,11 +180,14 @@
                     >
                       {#if activeIdx === i}
                         <div
-                          class="absolute inset-0 rounded-md bg-purple-600"
+                          class="absolute inset-0 rounded-md bg-[#fff]"
                         ></div>
                       {/if}
                       <span
-                        class="relative text-sm block font-medium duration-200 text-white"
+                        class="relative text-sm block font-semibold {activeIdx ===
+                        i
+                          ? 'text-black'
+                          : 'text-white'}"
                       >
                         {item.title}
                       </span>
@@ -308,7 +311,7 @@
                             {#each Array.from({ length: 5 }) as _, i}
                               {#if i < Math.floor(item?.analystScore)}
                                 <svg
-                                  class="w-3 h-3 text-yellow-300"
+                                  class="w-3 h-3 text-[#FBCE3C]"
                                   aria-hidden="true"
                                   xmlns="http://www.w3.org/2000/svg"
                                   fill="currentColor"
@@ -449,7 +452,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index dd1c4c85..59e779e2 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -279,7 +279,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 256 256"
                 ><path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 /></svg
               >
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index 7e07dc7f..ca557015 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -258,7 +258,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index 1e155ae6..11db2ac3 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -95,7 +95,7 @@
           smooth: true,
           symbol: "none",
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 1339b885..b93f5817 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -228,7 +228,7 @@
           yAxisIndex: 1, // Use the second y-axis on the right
           data: ivData, // iv60Data (assumed to be passed as ivData)
           itemStyle: {
-            color: "#FFD700", // Choose a color for the line (gold in this case)
+            color: "#fff", // Choose a color for the line (gold in this case)
           },
           lineStyle: {
             width: 2, // Set the width of the line
@@ -311,7 +311,7 @@
           type: "line",
           yAxisIndex: 0,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
           showSymbol: false,
         },
@@ -595,7 +595,7 @@
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               ><path
-                fill="#FBCE3C"
+                fill="#fff"
                 d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
               /></svg
             >
@@ -732,7 +732,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 256 256"
                     ><path
-                      fill="#FBCE3C"
+                      fill="#fff"
                       d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                     /></svg
                   >
@@ -761,12 +761,12 @@
                     : ''} "
                 >
                   {#if activeEX === i}
-                    <div
-                      class="absolute inset-0 rounded-lg bg-purple-600"
-                    ></div>
+                    <div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
                   {/if}
                   <span
-                    class="relative text-sm block font-medium duration-200 text-white"
+                    class="relative text-sm block font-semibold {activeEX === i
+                      ? 'text-black'
+                      : 'text-white'}"
                   >
                     {item.title}
                   </span>
@@ -796,12 +796,12 @@
                     : ''} "
                 >
                   {#if activeIdx === i}
-                    <div
-                      class="absolute inset-0 rounded-lg bg-purple-600"
-                    ></div>
+                    <div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
                   {/if}
                   <span
-                    class="relative text-sm block font-medium duration-200 text-white"
+                    class="relative text-sm block font-semibold {activeIdx === i
+                      ? 'text-black'
+                      : 'text-white'}"
                   >
                     {item.title}
                   </span>
@@ -928,7 +928,7 @@
                             </div>
                           {:else if item?.neutral_ratio > (item?.bull_ratio ?? 0) && item?.neutral_ratio > (item?.bear_ratio ?? 0)}
                             <div
-                              class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
+                              class="badge bg-[#fff] text-black font-semibold gap-2"
                             >
                               {item?.neutral_ratio?.toFixed(0)}% Neutral
                             </div>
@@ -976,7 +976,7 @@
                             </div>
                           {:else if item?.midpoint_ratio > (item?.ask_ratio ?? 0) && item?.midpoint_ratio > (item?.bid_ratio ?? 0)}
                             <div
-                              class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
+                              class="badge bg-[#fff] text-black font-semibold gap-2"
                             >
                               {item?.midpoint_ratio?.toFixed(0)}% Midpoint
                             </div>
@@ -1093,7 +1093,7 @@
                             : 'text-[#FF2F1F]'} text-end"
                         >
                           <div
-                            class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#FBCE3C] text-black m-auto flex justify-center items-center"
+                            class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#fff] text-black m-auto flex justify-center items-center"
                           >
                             {item?.strike_price}
                           </div>
@@ -1137,7 +1137,7 @@
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 256 256"
                   ><path
-                    fill="#FBCE3C"
+                    fill="#fff"
                     d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                   /></svg
                 >
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte
index be043645..0a3c9a73 100644
--- a/src/routes/stocks/[tickerID]/statistics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte
@@ -274,7 +274,7 @@
               </table>
               <a
                 href={`/stocks/${$stockTicker}/financials/ratios`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
               >
                 Financial Ratio History
               </a>
@@ -653,7 +653,7 @@
               </table>
               <a
                 href={`/stocks/${$stockTicker}/financials`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
               >
                 Full Income Statement
               </a>
@@ -732,7 +732,7 @@
               </table>
               <a
                 href={`/stocks/${$stockTicker}/financials/balance-sheet`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
               >
                 Full Balance Sheet
               </a>
@@ -795,7 +795,7 @@
               </table>
               <a
                 href={`/stocks/${$stockTicker}/financials/cash-flow`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
               >
                 Full Cash Flow Statement
               </a>
@@ -951,7 +951,7 @@
               </table>
               <a
                 href={`/stocks/${$stockTicker}/dividends`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
               >
                 Dividend Details
               </a>
@@ -1018,7 +1018,7 @@
               </table>
               <a
                 href={`/stocks/${$stockTicker}/forecast/analyst`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
               >
                 Stock Forecasts
               </a>
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
index a67f2cd2..e6f572b9 100644
--- a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
@@ -94,7 +94,7 @@
           type: "bar",
           smooth: true,
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -381,7 +381,7 @@
                 viewBox="0 0 256 256"
               >
                 <path
-                  fill="#FBCE3C"
+                  fill="#fff"
                   d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                 />
               </svg>
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index 677f59e3..9ceea3a3 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -295,7 +295,7 @@
           smooth: true,
           symbol: "none",
           itemStyle: {
-            color: "#FBCE3C",
+            color: "#fff",
           },
         },
       ],
@@ -414,7 +414,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 256 256"
                     ><path
-                      fill="#FBCE3C"
+                      fill="#fff"
                       d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                     /></svg
                   >
@@ -594,7 +594,7 @@
                       on:click={() => changeTablePeriod("annual")}
                       class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
                       'annual'
-                        ? 'bg-purple-600'
+                        ? 'bg-[#fff]'
                         : 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
                       aria-current="page"
                     >
@@ -607,7 +607,7 @@
                         on:click={() => changeTablePeriod("quarterly")}
                         class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
                         'quarterly'
-                          ? 'bg-purple-600'
+                          ? 'bg-[#fff]'
                           : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
                       >
                         Quartely
diff --git a/src/routes/watchlist/options/+page.svelte b/src/routes/watchlist/options/+page.svelte
index bbe183e2..f25fb247 100644
--- a/src/routes/watchlist/options/+page.svelte
+++ b/src/routes/watchlist/options/+page.svelte
@@ -178,6 +178,9 @@
           {#if isLoaded}
             {#if optionsWatchlist?.length !== 0}
               <div class="flex flex-row justify-end items-center pb-2">
+                <h2 class="font-semibold text-white text-xl mr-auto">
+                  {optionsWatchlist?.length} Options
+                </h2>
                 {#if editMode}
                   <label
                     on:click={handleDelete}
@@ -198,10 +201,6 @@
                   </label>
                 {/if}
 
-                <h2 class="font-semibold text-white text-xl mr-auto">
-                  {optionsWatchlist?.length} Options
-                </h2>
-
                 <label
                   on:click={() => (editMode = !editMode)}
                   class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 5d32f727..6bd36bd0 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -1070,7 +1070,7 @@
                 </span>
                 {#if !data?.user}
                   <a
-                    class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
+                    class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
                     href="/register"
                   >
                     Get Started
@@ -1363,7 +1363,7 @@
 
         <button
           type="submit"
-          class="mt-10 btn bg-purple-600 sm:hover:bg-purple-700 btn-md w-full rounded-md m-auto text-white font-bold text-md"
+          class="mt-10 btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-md m-auto text-white font-bold text-md"
         >
           Create List
         </button>
@@ -1399,7 +1399,7 @@
       <label
         for="deleteWatchlist"
         on:click={deleteWatchlist}
-        class="mt-5 btn bg-purple-600 hover:bg-purple-500 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
+        class="mt-5 btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
       >
         Proceed
       </label>