diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 01e4a672..1381ce73 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -1,305 +1,242 @@
-<script lang='ts'>
+<script lang="ts">
   //import ProgressBar from 'progressbar.js';
-  import {stockTicker, screenWidth} from '$lib/store';
-  import { abbreviateNumber } from '$lib/utils';
-  
+  import { stockTicker, screenWidth } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
+
   export let lastPrice;
   export let analystRating = {};
-  
 
   let buyCount = 0;
   let holdCount = 0;
   let sellCount = 0;
-  let priceTarget = 'n/a';
+  let priceTarget = "n/a";
   let numOfAnalyst = 0;
-  let consensusRating = 'n/a';
-  let changesPercentage = 0;  
-  
-  
-  
+  let consensusRating = "n/a";
+  let changesPercentage = 0;
+
   $: {
-    
-if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'undefined' && Object?.keys(analystRating)?.length !== 0)
-  { 
-    numOfAnalyst = analystRating?.numOfAnalyst;
-    buyCount = (analystRating?.Buy/numOfAnalyst * 100)?.toFixed(2);
-    holdCount = (analystRating?.Hold/numOfAnalyst * 100)?.toFixed(2);
-    sellCount = (analystRating?.Sell/numOfAnalyst * 100)?.toFixed(2);
-    priceTarget = analystRating?.priceTarget
-    consensusRating = analystRating?.consensusRating;
-    console.log(lastPrice)
-    try {
-        changesPercentage = ((priceTarget/lastPrice -1)*100)?.toFixed(2) ?? 0;
-      } catch(e) {
+    if ($stockTicker && typeof window !== "undefined" && typeof analystRating !== "undefined" && Object?.keys(analystRating)?.length !== 0) {
+      numOfAnalyst = analystRating?.numOfAnalyst;
+      buyCount = ((analystRating?.Buy / numOfAnalyst) * 100)?.toFixed(2);
+      holdCount = ((analystRating?.Hold / numOfAnalyst) * 100)?.toFixed(2);
+      sellCount = ((analystRating?.Sell / numOfAnalyst) * 100)?.toFixed(2);
+      priceTarget = analystRating?.priceTarget;
+      consensusRating = analystRating?.consensusRating;
+      console.log(lastPrice);
+      try {
+        changesPercentage = ((priceTarget / lastPrice - 1) * 100)?.toFixed(2) ?? 0;
+      } catch (e) {
         changesPercentage = 0;
       }
-    
+    }
   }
-}
-  
-  </script>
-  
+</script>
 
+<!--Start Analyst Card -->
+<div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
+    <!--Start Content-->
+    <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
+      <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">Analyst Rating</h2>
 
-  
-  
-  <!--Start Analyst Card -->
-  <div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">  
-    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
-     
-      <!--Start Content-->
-      <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
-        <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
-          Analyst Rating
-        </h2>
-  
-        <div class="flex flex-col mt-5 w-full">
-            <div class="flex flex-row m-auto w-full">
-                <span class="text-start mr-auto ml-5 text-white font-medium text-xl">
-                    Signal
-                </span>
-                <span class="mr-5 text-white font-medium text-xl">
-                    Price Target
-                </span>
-            </div>
-            <div class="flex flex-row m-auto w-full">
-                    {#if consensusRating === 'Buy' || consensusRating === 'Strong Buy'}
-                    <span class="text-start font-semibold text-[#10DB06] mr-auto ml-5 mt-2 text-xl">
-                    {consensusRating}
-                    </span>
-                    {:else if consensusRating === 'Sell' || consensusRating === 'Strong Sell' }
-                    <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
-                        {consensusRating}
-                    </span>
-                    {:else}
-                    <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
-                        {consensusRating}
-                    </span>
-                    {/if}
-              
-              <span class="mr-5 mt-2 font-semibold text-xl text-white">
-                {#if priceTarget !== 'n/a'}  
-                  ${priceTarget}
-                {:else}
-                  -
-                {/if}
-              </span>
-                
-                
-            </div>
+      <div class="flex flex-col mt-5 w-full">
+        <div class="flex flex-row m-auto w-full">
+          <span class="text-start mr-auto ml-5 text-white font-medium text-xl"> Signal </span>
+          <span class="mr-5 text-white font-medium text-xl"> Price Target </span>
         </div>
-        
-
-        <div class="text-white pl-4 pr-4 mt-6">
-          {#if changesPercentage < 0 }
-              The Stock Price has a downside of
-              <span style="color: #FF2F1F; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
-          {:else if changesPercentage >= 0 }
-              The Stock Price has an upside of
-              <span style="color: #10DB06; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
-          {/if}
-          based on <span style="font-weight: 600">{numOfAnalyst}</span> analysts in the past 12 months.
-      </div>
-      
-
-
-  
-      
-          <div class="mt-5 w-full rounded-full flex justify-center items-center mb-5">
-            <div class="flex flex-col items-center w-full">
-              <!--Start Progress-->
-  
-                  
-             
-              <div class="flex flex-col items-center w-full">
-                <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
-                  <span class="text-white font-medium text-start mr-auto">
-                    Buy
-                  </span>
-                  <span class="text-white text-md font-medium ml-auto">
-                    {buyCount}%
-                  </span>
-                </div>
-                <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]" value={buyCount} max="100"></progress>
-              </div>
-              
-              <div class="flex flex-col items-center w-full">
-                <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
-                  <span class="text-white font-medium text-start mr-auto">
-                    Hold
-                  </span>
-                  <span class="text-white text-md font-medium ml-auto">
-                    {holdCount}%
-                  </span>
-                </div>
-                <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#fff] [&::-moz-progress-bar]:bg-[#fff]" value={holdCount} max="100"></progress>
-              </div>
-            
-              <div class="flex flex-col items-center w-full">
-                <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
-                  <span class="text-white font-medium text-start mr-auto">
-                    Sell
-                  </span>
-                  <span class="text-white text-md font-medium ml-auto">
-                    {sellCount}%
-                  </span>
-                </div>
-                <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]" value={sellCount} max="100"></progress>
-              </div>
-
-              
-              <!--End Progress-->
-            
-
-            </div>
-          </div>
-        
-          <a href={`/stocks/${$stockTicker}/analyst`} class="rounded-lg 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">
-            Analyst Ratings
-          </a>
-
-        </div>
-    </div>
-  </div>
-  
-  <!--End Analyst Card-->
-
-
-
-
-  <!--Start Mobile Analyst Card-->
-<div class="space-y-3 sm:pt-5 sm:hidden">  
-  
-  <div class="bg-[#000] h-auto w-screen">
-  
-   <!--Start Header-->
-   <div class="bg-[#09090B] w-full  p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
-    <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
-      Analyst Rating
-    </h2>
-
-    <div class="flex flex-col items-center mt-10 w-full">
-
-      <div class="flex flex-row justify-between items-center w-full mb-5">
-
-
-        <div class="flex flex-col items-start ml-3 ">
-          <span class="text-white text-lg font-medium inline-block">
-            Recommendation:
-          </span>
-          <span class="text-white text-2xl font-medium inline-block">
-              {#if consensusRating === 'Buy' || consensusRating === 'Strong Buy'}
-              <span class="text-start font-medium text-[#10DB06] text-2xl">
+        <div class="flex flex-row m-auto w-full">
+          {#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
+            <span class="text-start font-semibold text-[#10DB06] mr-auto ml-5 mt-2 text-xl">
               {consensusRating}
-              </span>
-              {:else if consensusRating === 'Sell' || consensusRating === 'Strong Sell' }
-              <span class="text-start font-medium text-[#FF2F1F] text-2xl">
-                  {consensusRating}
-              </span>
-              {:else if consensusRating === 'Hold'}
-              <span class="text-start font-medium text-[#FF2F1F] text-2xl">
-                  {consensusRating ?? 'n/a'}
-              </span>
-              {:else}
-              <span class="text-start font-medium text-white text-2xl">
-                n/a
             </span>
-              {/if}
-          </span>
-        </div>
+          {:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
+            <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
+              {consensusRating}
+            </span>
+          {:else}
+            <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
+              {consensusRating}
+            </span>
+          {/if}
 
-
-
-        <div class="flex flex-col items-start mr-5">
-          <span class="text-white ml-auto text-lg font-medium inline-block">
-            Price Target:
-          </span>
-          <span class="text-white ml-auto text-2xl font-medium inline-block">
-            {#if priceTarget !== 'n/a'}  
+          <span class="mr-5 mt-2 font-semibold text-xl text-white">
+            {#if priceTarget !== "n/a"}
               ${priceTarget}
             {:else}
               -
             {/if}
           </span>
         </div>
-    
       </div>
 
-      {#if changesPercentage < 0 }
-      <div class="text-white p-4 text-center">
+      <div class="text-white pl-4 pr-4 mt-6">
+        {#if changesPercentage < 0}
           The Stock Price has a downside of
-          <span class="text-[#FF2F1F] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
-          based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
-      </div>
-      {:else if changesPercentage >= 0 }
-      <div class="text-white p-4 text-center">
+          <span style="color: #FF2F1F; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
+        {:else if changesPercentage >= 0}
           The Stock Price has an upside of
-          <span class="text-[#10DB06] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
-          based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
+          <span style="color: #10DB06; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
+        {/if}
+        based on <span style="font-weight: 600">{numOfAnalyst}</span> analysts in the past 12 months.
       </div>
-      {/if}
 
+      <div class="mt-5 w-full rounded-full flex justify-center items-center mb-5">
+        <div class="flex flex-col items-center w-full">
+          <!--Start Progress-->
+
+          <div class="flex flex-col items-center w-full">
+            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
+              <span class="text-white font-medium text-start mr-auto"> Buy </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {buyCount}%
+              </span>
+            </div>
+            <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]" value={buyCount} max="100"></progress>
+          </div>
+
+          <div class="flex flex-col items-center w-full">
+            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
+              <span class="text-white font-medium text-start mr-auto"> Hold </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {holdCount}%
+              </span>
+            </div>
+            <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#fff] [&::-moz-progress-bar]:bg-[#fff]" value={holdCount} max="100"></progress>
+          </div>
+
+          <div class="flex flex-col items-center w-full">
+            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
+              <span class="text-white font-medium text-start mr-auto"> Sell </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {sellCount}%
+              </span>
+            </div>
+            <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]" value={sellCount} max="100"></progress>
+          </div>
+
+          <!--End Progress-->
+        </div>
+      </div>
+
+      <a href={`/stocks/${$stockTicker}/forecast/analyst`} class="rounded-lg 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"> Analyst Ratings </a>
     </div>
   </div>
-  <!--End Header-->
+</div>
+
+<!--End Analyst Card-->
+
+<!--Start Mobile Analyst Card-->
+<div class="space-y-3 sm:pt-5 sm:hidden">
+  <div class="bg-[#000] h-auto w-screen">
+    <!--Start Header-->
+    <div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
+      <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">Analyst Rating</h2>
+
+      <div class="flex flex-col items-center mt-10 w-full">
+        <div class="flex flex-row justify-between items-center w-full mb-5">
+          <div class="flex flex-col items-start ml-3">
+            <span class="text-white text-lg font-medium inline-block"> Recommendation: </span>
+            <span class="text-white text-2xl font-medium inline-block">
+              {#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
+                <span class="text-start font-medium text-[#10DB06] text-2xl">
+                  {consensusRating}
+                </span>
+              {:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
+                <span class="text-start font-medium text-[#FF2F1F] text-2xl">
+                  {consensusRating}
+                </span>
+              {:else if consensusRating === "Hold"}
+                <span class="text-start font-medium text-[#FF2F1F] text-2xl">
+                  {consensusRating ?? "n/a"}
+                </span>
+              {:else}
+                <span class="text-start font-medium text-white text-2xl"> n/a </span>
+              {/if}
+            </span>
+          </div>
+
+          <div class="flex flex-col items-start mr-5">
+            <span class="text-white ml-auto text-lg font-medium inline-block"> Price Target: </span>
+            <span class="text-white ml-auto text-2xl font-medium inline-block">
+              {#if priceTarget !== "n/a"}
+                ${priceTarget}
+              {:else}
+                -
+              {/if}
+            </span>
+          </div>
+        </div>
+
+        {#if changesPercentage < 0}
+          <div class="text-white p-4 text-center">
+            The Stock Price has a downside of
+            <span class="text-[#FF2F1F] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
+            based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
+          </div>
+        {:else if changesPercentage >= 0}
+          <div class="text-white p-4 text-center">
+            The Stock Price has an upside of
+            <span class="text-[#10DB06] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
+            based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
+          </div>
+        {/if}
+      </div>
+    </div>
+    <!--End Header-->
 
     {#if numOfAnalyst !== 0}
-    <div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
-
-
-      <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5  flex flex-row items-center">
-        <div class="flex flex-col -mt-2 w-full">
+      <div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
+        <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
+          <div class="flex flex-col -mt-2 w-full">
             <div class="flex flex-row items-center w-full">
-                <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
-                  Buy
-                </span>
-            <span class="text-white text-md font-medium ml-auto">
-              {buyCount}%
-            </span>
+              <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Buy </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {buyCount}%
+              </span>
             </div>
-            <progress class="progress w-full {buyCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]'  : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={buyCount} max="100"></progress>
+            <progress
+              class="progress w-full {buyCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
+              value={buyCount}
+              max="100"
+            ></progress>
+          </div>
+        </div>
+
+        <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
+          <div class="flex flex-col -mt-2 w-full">
+            <div class="flex flex-row items-center w-full">
+              <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Hold </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {holdCount}%
+              </span>
+            </div>
+            <progress
+              class="progress w-full {holdCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
+              value={holdCount}
+              max="100"
+            ></progress>
+          </div>
+        </div>
+
+        <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
+          <div class="flex flex-col -mt-2 w-full">
+            <div class="flex flex-row items-center w-full">
+              <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Sell </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {sellCount}
+              </span>
+            </div>
+            <progress
+              class="progress w-full {sellCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
+              value={sellCount}
+              max="100"
+            ></progress>
+          </div>
         </div>
       </div>
-
-      <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5  flex flex-row items-center">
-        <div class="flex flex-col -mt-2 w-full">
-            <div class="flex flex-row items-center w-full">
-                <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
-                  Hold
-                </span>
-            <span class="text-white text-md font-medium ml-auto">
-              {holdCount}%
-            </span>
-            </div>
-            <progress class="progress w-full {holdCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]'  : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={holdCount} max="100"></progress>
-        </div>
-      </div>
-
-      <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5  flex flex-row items-center">
-        <div class="flex flex-col -mt-2 w-full">
-            <div class="flex flex-row items-center w-full">
-                <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
-                  Sell
-                </span>
-            <span class="text-white text-md font-medium ml-auto">
-              {sellCount}
-            </div>
-            <progress class="progress w-full {sellCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]'  : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={sellCount} max="100"></progress>
-        </div>
-      </div>
-
-    
-    
-
-     
-    </div>
     {:else}
-      <div class=" mt-20 flex justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-        No data available
-      </div>
+      <div class=" mt-20 flex justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</div>
     {/if}
-
-  </div>
   </div>
+</div>
 <!--End Mobile Analyst Card-->
-  
diff --git a/src/lib/components/AnalystInsight.svelte b/src/lib/components/AnalystInsight.svelte
index ebffc5cf..7ac7c46a 100644
--- a/src/lib/components/AnalystInsight.svelte
+++ b/src/lib/components/AnalystInsight.svelte
@@ -1,15 +1,14 @@
-<script lang ='ts'>
-    import { analystInsightComponent, stockTicker, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-  
-    export let data;
-  
-    let isLoaded = false;  
-  
-    let rawData = {};
+<script lang="ts">
+  import { analystInsightComponent, stockTicker, getCache, setCache } from "$lib/store";
+  import InfoModal from "$lib/components/InfoModal.svelte";
 
+  export let data;
 
-function latestInfoDate(inputDate) {
+  let isLoaded = false;
+
+  let rawData = {};
+
+  function latestInfoDate(inputDate) {
     // Convert the input date string to milliseconds since epoch
     const inputDateMs = Date?.parse(inputDate);
 
@@ -23,179 +22,145 @@ function latestInfoDate(inputDate) {
     const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
 
     // Return the difference in days
-    return differenceInDays <=1;
-}
-
+    return differenceInDays <= 1;
+  }
 
   const getAnalystInsight = async (ticker) => {
     // Get cached data for the specific tickerID
-    const cachedData = getCache(ticker, 'getAnalystInsight');
+    const cachedData = getCache(ticker, "getAnalystInsight");
     if (cachedData) {
       rawData = cachedData;
     } else {
-  
-      const postData = {'ticker': ticker};
+      const postData = { ticker: ticker };
       // make the POST request to the endpoint
-      const response = await fetch(data?.apiURL + '/analyst-insight', {
-        method: 'POST',
+      const response = await fetch(data?.apiURL + "/analyst-insight", {
+        method: "POST",
         headers: {
-          "Content-Type": "application/json", "X-API-KEY": data?.apiKey
+          "Content-Type": "application/json",
+          "X-API-KEY": data?.apiKey,
         },
-        body: JSON.stringify(postData)
+        body: JSON.stringify(postData),
       });
-  
+
       rawData = await response.json();
       // Cache the data for this specific tickerID with a specific name 'getAnalystInsight'
-      setCache(ticker, rawData, 'getAnalystInsight');
+      setCache(ticker, rawData, "getAnalystInsight");
     }
-    
-    if(Object?.keys(rawData)?.length !== 0) {
+
+    if (Object?.keys(rawData)?.length !== 0) {
       $analystInsightComponent = true;
     } else {
       $analystInsightComponent = false;
     }
   };
-  
-  
-  
+
   $: {
-  if($stockTicker && typeof window !== 'undefined') {
-    isLoaded=false;
-    const ticker = $stockTicker;
-    const asyncFunctions = [
-      getAnalystInsight(ticker)
-      ];
+    if ($stockTicker && typeof window !== "undefined") {
+      isLoaded = false;
+      const ticker = $stockTicker;
+      const asyncFunctions = [getAnalystInsight(ticker)];
       Promise.all(asyncFunctions)
-          .then((results) => {
-          })
-          .catch((error) => {
-            console.error('An error occurred:', error);
-          });
-    isLoaded = true;
-  
+        .then((results) => {})
+        .catch((error) => {
+          console.error("An error occurred:", error);
+        });
+      isLoaded = true;
+    }
   }
-  }
-  
-  
-  </script>
-    
-    
-    
-  <section class="overflow-hidden text-white h-full pb-8">
-    <main class="overflow-hidden ">
-                    
-        <div class="flex flex-row items-center">
-            <label for="analystInsightInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-              <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block mr-1 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"/></svg>
-              AI Analyst Insight
-            </label>
-            <InfoModal
-              title={"AI Analyst Insight"}
-              content={"We use large language models to analyze the latest reports from Wall Street analysts, providing concise summaries and key insights. This approach helps save time and allows you to focus on the most important information."}
-              id={"analystInsightInfo"}
-            />
-        </div>
-  
-        {#if data?.user?.tier === 'Pro'}
-        {#if isLoaded}
-  
+</script>
+
+<section class="overflow-hidden text-white h-full pb-8">
+  <main class="overflow-hidden">
+    <div class="flex flex-row items-center">
+      <label for="analystInsightInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+        <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block mr-1 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          ><path
+            fill="#fff"
+            d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"
+          /></svg
+        >
+        AI Analyst Insight
+      </label>
+      <InfoModal
+        title={"AI Analyst Insight"}
+        content={"We use large language models to analyze the latest reports from Wall Street analysts, providing concise summaries and key insights. This approach helps save time and allows you to focus on the most important information."}
+        id={"analystInsightInfo"}
+      />
+    </div>
+
+    {#if data?.user?.tier === "Pro"}
+      {#if isLoaded}
         {#if Object?.keys(rawData)?.length !== 0}
-  
-        <div class="w-full flex flex-col items-start">
-            <div class="text-white text-[1rem] mt-2 mb-2 w-full">
-                The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.
-            </div>
-        </div>
-  
-        
-        
-        <div class="w-full mt-4">
+          <div class="w-full flex flex-col items-start">
+            <div class="text-white text-[1rem] mt-2 mb-2 w-full">The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.</div>
+          </div>
+
+          <div class="w-full mt-4">
+            <a href={"/stocks/" + $stockTicker + "/forecast/analyst"} class="text-blue-400 hover:text-white flex justify-end mb-3 text-sm sm:text-[1rem]"> See All Ratings </a>
 
-            <a href="{'/stocks/'+$stockTicker+'/analyst'}" class="text-blue-400 hover:text-white flex justify-end mb-3 text-sm sm:text-[1rem]">
-                See All Ratings
-            </a>
-    
             <div class="relative">
-                <div class="">
-                    
-                    <div class="flex justify-center ">
-                        <!--<div class="{rawData.changesPercentage >= 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
-                            
-                        <!--Start Item-->
-                        <div class="flex flex-row items-center w-full mb-6">
-                
-                            <div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
-                                <div class="flex flex-col items-start"> 
+              <div class="">
+                <div class="flex justify-center">
+                  <!--<div class="{rawData.changesPercentage >= 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
 
-                                    <div class="flex flex-row items-start w-full pt-2">
-                                        <span class="text-white text-[0.915rem] pl-2 italic">Last Report from {rawData.date}</span>
-                                        {#if latestInfoDate(rawData.date)}
-                                            <label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3">New</label>
-                                        {/if}
-                                    </div>
-
-                                    <div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4">
-                                        <span class="text-white text-[1rem] ">
-                                            {rawData?.insight}
-                                        </span>
-                                    </div>
-                
-                                </div>
-                            </div>
+                  <!--Start Item-->
+                  <div class="flex flex-row items-center w-full mb-6">
+                    <div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
+                      <div class="flex flex-col items-start">
+                        <div class="flex flex-row items-start w-full pt-2">
+                          <span class="text-white text-[0.915rem] pl-2 italic">Last Report from {rawData.date}</span>
+                          {#if latestInfoDate(rawData.date)}
+                            <label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3">New</label>
+                          {/if}
                         </div>
-                        <!--End Item-->
 
+                        <div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4">
+                          <span class="text-white text-[1rem]">
+                            {rawData?.insight}
+                          </span>
+                        </div>
+                      </div>
                     </div>
+                  </div>
+                  <!--End Item-->
                 </div>
+              </div>
             </div>
-        </div>
-  
-  
- 
-  
-  
-        
-        {/if}
-  
-        {:else}
-        <div class="flex justify-center items-center h-80">
-            <div class="relative">
-            <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
-            </label>
-            </div>
-        </div>
-        {/if}
-  
-        {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
-            <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
-            Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
         {/if}
-  
-    </main>
-  </section>
-  
-  
-  
-  
-  <style>
-  
+      {:else}
+        <div class="flex justify-center items-center h-80">
+          <div class="relative">
+            <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+              <span class="loading loading-spinner loading-md"></span>
+            </label>
+          </div>
+        </div>
+      {/if}
+    {:else}
+      <div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+        <svg class="mr-1.5 w-5 h-5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          ><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z" /></svg
+        >
+        Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+      </div>
+    {/if}
+  </main>
+</section>
+
+<style>
   .app {
-  height: 300px;
-  max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  
+    height: 300px;
+    max-width: 100%; /* Ensure chart width doesn't exceed the container */
   }
-  
+
   @media (max-width: 640px) {
-  .app {
-    height: 210px;
+    .app {
+      height: 210px;
+    }
   }
-  }
-  
+
   .chart {
-  width: 100%;
+    width: 100%;
   }
-  
-  </style>
\ No newline at end of file
+</style>
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index a7d7ba8f..554238f1 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -1,86 +1,70 @@
-<script lang='ts'>
+<script lang="ts">
+  import { searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, stockTicker, isOpen } from "$lib/store";
 
-  import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, stockTicker, 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 Sidecard from '$lib/components/Sidecard.svelte';
-  import Markethour from '$lib/components/Markethour.svelte';
+  import { onMount, onDestroy, afterUpdate } from "svelte";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import toast from "svelte-french-toast";
+  import Sidecard from "$lib/components/Sidecard.svelte";
+  import Markethour from "$lib/components/Markethour.svelte";
 
   export let data;
 
-
   $: $realtimePrice = data?.getStockQuote?.price?.toFixed(2);
-  
 
-
-async function loadSearchData() {
-    
-    if($searchBarData?.length !== 0)
-    {
-      return
-    }
-    else {
-  
-       // make the GET request to the endpoint
-       const response = await fetch(data?.apiURL+'/searchbar-data', {
-      method: 'GET',
-      headers: {
-          "Content-Type": "application/json","X-API-KEY": data?.apiKey
-      },
+  async function loadSearchData() {
+    if ($searchBarData?.length !== 0) {
+      return;
+    } else {
+      // make the GET request to the endpoint
+      const response = await fetch(data?.apiURL + "/searchbar-data", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-KEY": data?.apiKey,
+        },
       });
-  
+
       $searchBarData = await response.json();
     }
-     
-  
   }
 
+  let previousRealtimePrice = null;
+  let previousTicker;
+  let socket;
 
-    let previousRealtimePrice = null;
-    let previousTicker;
-    let socket;
+  let isScrolled = false;
+  let y;
 
-    
-    let isScrolled = false;
-    let y;
-      
-    let userWatchList = data?.getUserWatchlist ?? [];
-    let isTickerIncluded; 
-    //let userPortfolio = data?.getUserPortfolio ?? [];
-    //let holdingShares = 0;
-    //let availableCash = 0;
-    
-    let displaySection = '';
+  let userWatchList = data?.getUserWatchlist ?? [];
+  let isTickerIncluded;
+  //let userPortfolio = data?.getUserPortfolio ?? [];
+  //let holdingShares = 0;
+  //let availableCash = 0;
 
-  
+  let displaySection = "";
 
-    let stockDeck;
-    let similarstock = [];
-    let topETFHolder = [];
-    
+  let stockDeck;
+  let similarstock = [];
+  let topETFHolder = [];
 
-function shareContent(url) {
-    
-  if (navigator.share) {
-      navigator.share({
-        title: document.title,
-        url,
-      })
-        .then(() => console.log('Content shared successfully.'))
-        .catch((error) => console.log('Error sharing content:', error));
+  function shareContent(url) {
+    if (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;'
-        });
-
+      toast.error("Sharing is not supported by your device", {
+        style: "background: #333; color: #fff;",
+      });
+    }
   }
-  
-}
 
-/*
+  /*
 function handleTypeOfTrade(state:string)
 {
   if (state === 'buy')
@@ -97,80 +81,71 @@ function handleTypeOfTrade(state:string)
 }
 */
 
-
-function scrollToItem(itemId) {
+  function scrollToItem(itemId) {
     const item = document.getElementById(itemId);
     if (item) {
-      
-      item.scrollIntoView({ behavior: 'smooth' });
-      window.scrollTo(0,0)
+      item.scrollIntoView({ behavior: "smooth" });
+      window.scrollTo(0, 0);
     }
   }
 
-    
-function changeSection(state, item) {
-  scrollToItem(item);
+  function changeSection(state, item) {
+    scrollToItem(item);
 
-  const sectionMap = {
-    'insider': '/insider',
-    'options': '/options',
-    'dividends': '/dividends',
-    'stats': '/stats',
-    'analyst': '/analyst',
-    'news': '/news',
-  };
-
-  if (state !== 'overview' && sectionMap[state]) {
-    displaySection = state;
-    //goto(`/stocks/${$stockTicker}${sectionMap[state]}`);
-  } else {
-    displaySection = 'overview';
-    //goto(`/stocks/${$stockTicker}/`);
-  }
-}
-
-    
-
-
-    
-async function toggleUserWatchlist(watchListId: string) {
-  try {
-    const watchlistIndex = userWatchList?.findIndex(item => item?.id === watchListId);
-    const postData = {
-      userId: data?.user?.id,
-      watchListId,
-      ticker: $stockTicker,
+    const sectionMap = {
+      insider: "/insider",
+      options: "/options",
+      dividends: "/dividends",
+      fundamental: "/stats",
+      forecast: "/forecast",
+      news: "/news",
     };
 
-    const response = await fetch(`${data?.fastifyURL}/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())?.items;
-
-    if (watchlistIndex !== -1) {
-      userWatchList[watchlistIndex] = output;
+    if (state !== "overview" && sectionMap[state]) {
+      displaySection = state;
+      //goto(`/stocks/${$stockTicker}${sectionMap[state]}`);
     } else {
-      userWatchList.push(output);
+      displaySection = "overview";
+      //goto(`/stocks/${$stockTicker}/`);
     }
-
-    userWatchList = [...userWatchList];
-    isTickerIncluded = !isTickerIncluded;
-
-  } catch (error) {
-    console.error('An error occurred:', error);
-    // Handle the error appropriately (e.g., show an error message to the user)
   }
-}
 
+  async function toggleUserWatchlist(watchListId: string) {
+    try {
+      const watchlistIndex = userWatchList?.findIndex((item) => item?.id === watchListId);
+      const postData = {
+        userId: data?.user?.id,
+        watchListId,
+        ticker: $stockTicker,
+      };
 
-/*
+      const response = await fetch(`${data?.fastifyURL}/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())?.items;
+
+      if (watchlistIndex !== -1) {
+        userWatchList[watchlistIndex] = output;
+      } else {
+        userWatchList.push(output);
+      }
+
+      userWatchList = [...userWatchList];
+      isTickerIncluded = !isTickerIncluded;
+    } catch (error) {
+      console.error("An error occurred:", error);
+      // Handle the error appropriately (e.g., show an error message to the user)
+    }
+  }
+
+  /*
 async function fetchPortfolio()
 {
   const postData = {'userId': data?.user?.id};
@@ -188,154 +163,120 @@ async function fetchPortfolio()
 }
 */
 
-
-
-  
-function sendMessage(message) {
-  if (socket && socket.readyState === WebSocket.OPEN) {
-    socket.send(message);
-  } else {
-    console.error('WebSocket is not open. Unable to send message.');
-  }
-}
-
-
-async function websocketRealtimeData() {
-
-  previousTicker = $stockTicker;
-  try {
-    socket = new WebSocket(data?.wsURL+"/realtime-data");
-
-    socket.addEventListener('open', () => {
-      //console.log('WebSocket connection opened');
-      
-      // Send the initial value of stockTicker
-      sendMessage($stockTicker?.toLowerCase());
-    });
-    
-
-    socket.addEventListener('message', (event) => {
-      const data = event.data;
-      //console.log('Received message:', data);
-      try {
-
-        $realtimePrice = typeof JSON.parse(data)?.bp !== 'undefined' ? JSON.parse(data)?.bp : null;
-        //console.log('Received message:', $realtimePrice);
-
-        if ($realtimePrice > previousRealtimePrice) {
-          $priceIncrease = true;
-          previousRealtimePrice = $realtimePrice;
-        } else if ($realtimePrice < previousRealtimePrice) {
-          $priceIncrease = false;
-          previousRealtimePrice = $realtimePrice;
-        }
-
-
-        $isCrosshairMoveActive = false;
-
-
-      }
-      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
-}
-}
-
-
-let LoginPopup;
-let PriceAlert;
-
-
-onMount(async () => {
-  
-    if(!data?.user)
-    {
-      LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default;
+  function sendMessage(message) {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(message);
+    } else {
+      console.error("WebSocket is not open. Unable to send message.");
     }
-    else {
+  }
+
+  async function websocketRealtimeData() {
+    previousTicker = $stockTicker;
+    try {
+      socket = new WebSocket(data?.wsURL + "/realtime-data");
+
+      socket.addEventListener("open", () => {
+        //console.log('WebSocket connection opened');
+
+        // Send the initial value of stockTicker
+        sendMessage($stockTicker?.toLowerCase());
+      });
+
+      socket.addEventListener("message", (event) => {
+        const data = event.data;
+        //console.log('Received message:', data);
+        try {
+          $realtimePrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
+          //console.log('Received message:', $realtimePrice);
+
+          if ($realtimePrice > previousRealtimePrice) {
+            $priceIncrease = true;
+            previousRealtimePrice = $realtimePrice;
+          } else if ($realtimePrice < previousRealtimePrice) {
+            $priceIncrease = false;
+            previousRealtimePrice = $realtimePrice;
+          }
+
+          $isCrosshairMoveActive = false;
+        } 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
+    }
+  }
+
+  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;
+      PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
     }
-   
 
-    if ($isOpen) //&& currentDateTime > startTime && currentDateTime < endTime
-    {
-      await websocketRealtimeData()
+    if ($isOpen) {
+      //&& currentDateTime > startTime && currentDateTime < endTime
+      await websocketRealtimeData();
     }
-});
+  });
 
-afterUpdate( async () => {
- 
- if(previousTicker !== $stockTicker && typeof socket !== 'undefined')
- {
-   previousTicker = $stockTicker;
-   //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')
-   }
+  afterUpdate(async () => {
+    if (previousTicker !== $stockTicker && typeof socket !== "undefined") {
+      previousTicker = $stockTicker;
+      //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");
+      }
+    }
+  });
 
-});
+  onDestroy(() => {
+    try {
+      //socket?.send('close')
+      socket?.close();
+    } catch (e) {
+      console.log(e);
+    }
 
+    //$displayCompanyName = '';
+    $currentPortfolioPrice = null;
+    $currentPrice = null;
+    $priceIncrease = null;
+    //$traded = false
+  });
 
-onDestroy(() => {
-  try {
-    //socket?.send('close')
-    socket?.close()
+  $: {
+    if ($stockTicker && $stockTicker?.length !== 0 && typeof window !== "undefined") {
+      // add a check to see if running on client-side
+      stockDeck = data?.getStockDeck;
+      similarstock = data?.getSimilarStock;
+      topETFHolder = data?.getTopETFHolder;
+      $currentPortfolioPrice = data?.getStockQuote?.price;
+    }
   }
-  catch(e) {
-    console.log(e)
-  }  
- 
-  //$displayCompanyName = '';
-  $currentPortfolioPrice = null;
-  $currentPrice = null;
-  $priceIncrease = null;
-  //$traded = false
-  
-});
 
+  $: isTickerIncluded = userWatchList?.some((item) => item.user === data?.user?.id && item.ticker?.includes($stockTicker));
 
-    
-    
-$: {
-  if ($stockTicker && $stockTicker?.length !== 0 && typeof window !== 'undefined') // add a check to see if running on client-side
-  {
-    
-    stockDeck = data?.getStockDeck;
-    similarstock = data?.getSimilarStock;
-    topETFHolder = data?.getTopETFHolder;
-    $currentPortfolioPrice = data?.getStockQuote?.price;
-  }
-}
-    
-$: isTickerIncluded = userWatchList?.some(item => 
-  item.user === data?.user?.id && item.ticker?.includes($stockTicker));
-
-/*
+  /*
 $: {
   if(userPortfolio) {
     availableCash = userPortfolio?.at(0)?.availableCash;
@@ -363,223 +304,266 @@ $: {
 }
 */
 
+  $: charNumber = $screenWidth < 640 ? 12 : 25;
 
-$: charNumber = $screenWidth < 640 ? 12 : 25;
-
-$: {
-  if($stockTicker && typeof window !== 'undefined' && $page.url.pathname === `/stocks/${$stockTicker}`)
-  {
-    displaySection = 'overview';
+  $: {
+    if ($stockTicker && typeof window !== "undefined" && $page.url.pathname === `/stocks/${$stockTicker}`) {
+      displaySection = "overview";
+    }
   }
-}
 
-$: {
-  if($page.url.pathname)
-  {
-      const parts = $page?.url?.pathname?.split('/');
+  $: {
+    if ($page.url.pathname) {
+      const parts = $page?.url?.pathname?.split("/");
       const sectionMap = {
-        'stats': 'stats',
-        'options': 'options',
-        'insider': 'insider',
-        'dividends': 'dividends',
-        'analyst': 'analyst',
-        'news': 'news'
+        stats: "fundamental",
+        options: "options",
+        insider: "insider",
+        dividends: "dividends",
+        forecast: "forecast",
+        news: "news",
       };
-      displaySection = sectionMap[parts?.find(part => Object?.keys(sectionMap)?.includes(part))] || 'overview';
+      displaySection = sectionMap[parts?.find((part) => Object?.keys(sectionMap)?.includes(part))] || "overview";
+    }
   }
-}
-
-
-$: isScrolled = y > 0;
 
+  $: isScrolled = y > 0;
 </script>
 
-<svelte:window bind:scrollY={y}/>
+<svelte:window bind:scrollY={y} />
 
-<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 mt-5 relative">
-            <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">
-        
+<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 mt-5 relative">
+    <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]">
-                          {$stockTicker}
-                          </span>
-                          <span class="text-white font-medium text-sm">
-                            {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
-                              {$stockTicker?.includes('.DE') || $stockTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
-                            {:else}
-                            {data?.getStockQuote?.price}
-                            {/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-->
-        
+                    <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>
 
-                        <!--Start Share Button-->
-                        <label class="mr-4" on:click={() => shareContent('https://stocknear.com/stocks/'+$stockTicker)} >
-                          <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>
-
-                            {: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]">
+                        {$stockTicker}
+                      </span>
+                      <span class="text-white font-medium text-sm">
+                        {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
+                          {$stockTicker?.includes(".DE") || $stockTicker?.includes(".F") ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
+                        {:else}
+                          {data?.getStockQuote?.price}
+                        {/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/" + $stockTicker)}>
+                      <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>
+                        {: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>
+                </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 overflow-hidden mb-5 md:mt-10">
-      
-                                      <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
-                                          <Markethour />
+            <!--End Mobile Navbar-->
 
-                                          <!--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="#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>
-                                           
-                                            {/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-->
+            <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------>
 
-                                        <!--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 w-full">
-                                        <div class="flex flex-row justify-start items-center mb-5 mt-2">
-                                          <!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
-                                          <div class="flex-shrink-0 rounded-full w-10 h-10 relative bg-[#101112] flex items-center justify-center border border-slate-800">
-                                            <img style="clip-path: circle(50%);" class="avatar w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${$stockTicker?.toUpperCase()}.png`} alt=" " loading="lazy"/>
-                                          </div>
-                                          
-                                          <div class="flex flex-col items-start ml-2 sm:ml-3">
-                                            <span class="text-xs text-blue-400">
-                                              {$stockTicker?.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="m-auto pl-0 sm:pl-4 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-->
 
-                                    <div class="ml-auto sm:hidden">
-                                      <Markethour />
-                                    </div>
-      
-                                        
-                                        <!--Start Trade-->
-                                        <!--
+                        {#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="#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>
+                            {/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 w-full">
+                        <div class="flex flex-row justify-start items-center mb-5 mt-2">
+                          <!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
+                          <div class="flex-shrink-0 rounded-full w-10 h-10 relative bg-[#101112] flex items-center justify-center border border-slate-800">
+                            <img style="clip-path: circle(50%);" class="avatar w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${$stockTicker?.toUpperCase()}.png`} alt=" " loading="lazy" />
+                          </div>
+
+                          <div class="flex flex-col items-start ml-2 sm:ml-3">
+                            <span class="text-xs text-blue-400">
+                              {$stockTicker?.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}
                                         
@@ -599,76 +583,99 @@ $: isScrolled = y > 0;
                                         {/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="-ml-2 sm:ml-4 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : ''} mb-2" >
-                                          <ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2">
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/stocks/${$stockTicker}`} id="item1" on:click={() => (changeSection('overview','item1'))} class="px-3 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-[4.2rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/stocks/${$stockTicker}/stats`} id="item2" on:click={() => (changeSection('stats','item2'))} class="px-3 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-[2.8rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/stocks/${$stockTicker}/options`} id="item3" on:click={() => (changeSection('options','item3'))} class="px-3 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-[3.5rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/stocks/${$stockTicker}/analyst`} id="item3" on:click={() => (changeSection('analyst','item3'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'analyst' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                Analyst
-                                              </a>
-                                              <div class="{displaySection === 'analyst' ? '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={`/stocks/${$stockTicker}/insider`} id="item4" on:click={() => (changeSection('insider','item4'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'insider' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                Insider
-                                              </a>
-                                              <div class="{displaySection === 'insider' ? '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={`/stocks/${$stockTicker}/dividends`} id="item5" on:click={() => (changeSection('dividends','item5'))} class="px-3 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-[4rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/stocks/${$stockTicker}/news`} id="item7" on:click={() => (changeSection('news','item7'))} class="px-3 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-[2.8rem]" />
-                                            </li>
-                                          </ul>
-                                        </div>
-                                        
-            
+                        <!--End Trade-->
+                      </div>
+                    </div>
+                    <!-----End-Header-CandleChart-Indicators------>
 
-                                      <!--Start-Main Content-->
-                                        <slot />
-                                      <!--End Main Content-->
-    
+                    <!--Start Ticker Section-->
 
-                                
-                            </div>
-                        </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="-ml-2 sm:ml-4 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto 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={`/stocks/${$stockTicker}`}
+                            id="item1"
+                            on:click={() => changeSection("overview", "item1")}
+                            class="px-3 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-[4.2rem]" />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/stocks/${$stockTicker}/stats`}
+                            id="item2"
+                            on:click={() => changeSection("fundamental", "item2")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'fundamental' ? 'text-white ' : 'bg-[#09090B]'}">Fundamental</a
+                          >
+                          <div class="{displaySection === 'fundamental' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.8rem]" />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/stocks/${$stockTicker}/forecast`}
+                            id="item3"
+                            on:click={() => changeSection("forecast", "item3")}
+                            class="px-3 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-[3.5rem]" />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/stocks/${$stockTicker}/options`}
+                            id="item3"
+                            on:click={() => changeSection("options", "item3")}
+                            class="px-3 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-[3.5rem]" />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/stocks/${$stockTicker}/insider`}
+                            id="item4"
+                            on:click={() => changeSection("insider", "item4")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'insider' ? 'text-white ' : 'bg-[#09090B]'}"
+                          >
+                            Insider
+                          </a>
+                          <div class="{displaySection === 'insider' ? '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={`/stocks/${$stockTicker}/dividends`}
+                            id="item5"
+                            on:click={() => changeSection("dividends", "item5")}
+                            class="px-3 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-[4rem]" />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/stocks/${$stockTicker}/news`}
+                            id="item7"
+                            on:click={() => changeSection("news", "item7")}
+                            class="px-3 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-[2.8rem]" />
+                        </li>
+                      </ul>
+                    </div>
+
+                    <!--Start-Main Content-->
+                    <slot />
+                    <!--End Main Content-->
+                  </div>
+                </div>
 
                         <aside class="hidden lg:block w-fit max-w-xl xl:w-[120px] md:pt-10 pb-12 md:pb-20">
                             <div class="sm:pl-10">
@@ -700,8 +707,7 @@ $: isScrolled = y > 0;
                         {/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">
@@ -719,22 +725,19 @@ $: isScrolled = y > 0;
                           </div>
                         </div>
                       -->
-
-                                          
-
-                    </div>
-                </section>
-            </main>        
+              </div>
+            </div>
+          </div>
         </div>
-    </body>
-              
-            
-
+      </section>
+    </main>
+  </div>
+</body>
 
 <!--Start Login Modal-->
 {#if LoginPopup}
-  <LoginPopup form={$globalForm}/> 
-{/if}   
+  <LoginPopup form={$globalForm} />
+{/if}
 <!--End Login Modal-->
 
 <!--
@@ -758,18 +761,13 @@ $: isScrolled = y > 0;
 {/if}
 -->
 
-
 <!--Start SellTrade Modal-->
 {#if PriceAlert}
-<PriceAlert 
-  data = {data}
-/>
+  <PriceAlert {data} />
 {/if}
 
 <!--End SellTrade Modal-->
 
-
-
 <!--Start Type of Trade-->
 
 <!--
@@ -839,78 +837,62 @@ $: isScrolled = y > 0;
 -->
 <!--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">
+  <label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
 
-  <!--Start Add Watchlist Modal-->
-  <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
-      
-  <dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle ">
-  
-  
-    <label id="addWatchListModal" for="addWatchListModal"  class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
-    
-    
-    <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
-  
-  
-  
-    <label for="addWatchListModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] 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-[#09090B]">
-  
-          {#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($stockTicker) ? '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">
-                      {item?.ticker?.length} {item?.ticker?.length !==1 ? 'Companies' : 'Company'}
-                    </span>
-                  </div>
-                 
-  
-                  <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                    {#if item?.ticker?.includes($stockTicker)}
-                      <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"> </path> </g> </g> </g></svg>
-                    {/if}
-                  </div>
-  
-                </div>
-              
-            </label>
-          {/each}
-  
-        </div>
-         
+  <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
+    <label for="addWatchListModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] 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-[#09090B]">
+        {#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($stockTicker) ? '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">
+                  {item?.ticker?.length}
+                  {item?.ticker?.length !== 1 ? "Companies" : "Company"}
+                </span>
+              </div>
+
+              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
+                {#if item?.ticker?.includes($stockTicker)}
+                  <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"
+                          >
+                          </path>
+                        </g>
+                      </g>
+                    </g></svg
+                  >
+                {/if}
+              </div>
+            </div>
+          </label>
+        {/each}
       </div>
-  
-  
-          
-        </div>
-    </dialog>
-  <!--End Add Watchlist Modal-->
-      
-    
+    </div>
+  </div>
+</dialog>
 
+<!--End Add Watchlist Modal-->
 
-
-
-<style lang='scss'>
-       
-
-.scrollbar {
+<style lang="scss">
+  .scrollbar {
     display: grid;
     grid-gap: 17px;
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
@@ -918,32 +900,31 @@ $: isScrolled = y > 0;
     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 {
+  /* 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 {
+  .scrollbar::-webkit-scrollbar-thumb {
     background: transparent; /* Make the thumb transparent */
-}
+  }
 
-::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     height: 7px;
     width: 10px;
-    background: #09090B;
-}
+    background: #09090b;
+  }
 
-::-webkit-scrollbar-thumb {
-    background: #6B6F79;
+  ::-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
+  ::-webkit-scrollbar-corner {
+    background: #09090b;
+  }
+</style>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 440b8a28..40d8d306 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1,139 +1,142 @@
 <script lang="ts">
+  import { AreaSeries, Chart, PriceLine, CandlestickSeries } from "svelte-lightweight-charts";
 
-  import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
-  
-  import { TrackingModeExitMode } from 'lightweight-charts';
-  import {getCache, setCache, corporateLobbyingComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, borrowedShareComponent, clinicalTrialComponent, optionComponent, failToDeliverComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent,  revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
-  import { onDestroy, onMount } from 'svelte';
-  import BullBearSay from '$lib/components/BullBearSay.svelte';
-  import NextEarnings from '$lib/components/NextEarnings.svelte';
-  import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
-  import Lazy from '$lib/components/Lazy.svelte';
-    
-  
-    export let data;
-    export let form;
-  
-    let displayChartType = 'line';
-  
-    let prePostData = {};
-    let communitySentiment = {};
+  import { TrackingModeExitMode } from "lightweight-charts";
+  import {
+    getCache,
+    setCache,
+    corporateLobbyingComponent,
+    taRatingComponent,
+    swapComponent,
+    analystInsightComponent,
+    governmentContractComponent,
+    optionsNetFlowComponent,
+    borrowedShareComponent,
+    clinicalTrialComponent,
+    optionComponent,
+    failToDeliverComponent,
+    marketMakerComponent,
+    analystEstimateComponent,
+    sentimentComponent,
+    screenWidth,
+    displayCompanyName,
+    numberOfUnreadNotification,
+    globalForm,
+    varComponent,
+    shareStatisticsComponent,
+    enterpriseComponent,
+    darkPoolComponent,
+    retailVolumeComponent,
+    shareholderComponent,
+    trendAnalysisComponent,
+    revenueSegmentationComponent,
+    priceAnalysisComponent,
+    fundamentalAnalysisComponent,
+    isCrosshairMoveActive,
+    realtimePrice,
+    priceIncrease,
+    currentPortfolioPrice,
+    stockTicker,
+    isOpen,
+    isBeforeMarketOpen,
+    isWeekend,
+  } from "$lib/store";
+  import { onDestroy, onMount } from "svelte";
+  import BullBearSay from "$lib/components/BullBearSay.svelte";
+  import NextEarnings from "$lib/components/NextEarnings.svelte";
+  import CommunitySentiment from "$lib/components/CommunitySentiment.svelte";
+  import Lazy from "$lib/components/Lazy.svelte";
 
-    $: previousClose = data?.getStockQuote?.previousClose;
+  export let data;
+  export let form;
 
-    //============================================//
-    
-    let chart = null;
-    async function checkChart() {
-      if (chart) {
-        clearInterval(intervalId);
-        fitContentChart();
-      }
+  let displayChartType = "line";
+
+  let prePostData = {};
+  let communitySentiment = {};
+
+  $: previousClose = data?.getStockQuote?.previousClose;
+
+  //============================================//
+
+  let chart = null;
+  async function checkChart() {
+    if (chart) {
+      clearInterval(intervalId);
+      fitContentChart();
     }
-  
+  }
 
-  
-  
   //const startTimeTracking = performance.now();
-  
-  
-  
+
   //==========================//
-  
-$: {
-  if (output !==null)
-  {
-    
-    //Bug value is NaN
-    if (displayData === '1D')
-    {
-      const length = oneDayPrice?.length;
-      for (let i = length - 1; i >= 0; i--) {
-        if (!isNaN(oneDayPrice[i]?.close)) {
-          currentDataRow = oneDayPrice[i];
-          break;
+
+  $: {
+    if (output !== null) {
+      //Bug value is NaN
+      if (displayData === "1D") {
+        const length = oneDayPrice?.length;
+        for (let i = length - 1; i >= 0; i--) {
+          if (!isNaN(oneDayPrice[i]?.close)) {
+            currentDataRow = oneDayPrice[i];
+            break;
+          }
+        }
+      } else if (displayData === "6M") {
+        currentDataRow = sixMonthPrice?.slice(-1)[0];
+      }
+
+      //currentDataRow = oneWeekPrice.slice(-1)[0]
+      const change = displayData === "1D" ? (((currentDataRow?.close ?? currentDataRow?.value) / previousClose - 1) * 100)?.toFixed(2) : (((currentDataRow?.close ?? currentDataRow?.value) / displayLastLogicalRangeValue - 1) * 100)?.toFixed(2);
+
+      const date = new Date(currentDataRow?.time);
+
+      const options = {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      };
+
+      //const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.');
+      const formattedDate = displayData === "1D" || displayData === "1W" || displayData === "1M" ? date.toLocaleString("en-US", options) : date.toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" });
+
+      displayLegend = { close: currentDataRow?.close ?? currentDataRow?.value, date: formattedDate, change: change };
+    }
+  }
+
+  //==========================//
+
+  $: {
+    if ($stockTicker && typeof window !== "undefined") {
+      // add a check to see if running on client-side
+      if ($realtimePrice !== null && $realtimePrice !== 0) {
+        $realtimePrice = $realtimePrice !== 0 ? $realtimePrice : data?.getStockQuote?.price;
+        $currentPortfolioPrice = $realtimePrice;
+      } else if (oneDayPrice?.length !== 0) {
+        const length = oneDayPrice?.length;
+        for (let i = length - 1; i >= 0; i--) {
+          if (!isNaN(oneDayPrice[i]?.close)) {
+            $currentPortfolioPrice = oneDayPrice[i]?.close;
+            break;
+          }
         }
       }
     }
-    else if (displayData === '6M') {
-      currentDataRow = sixMonthPrice?.slice(-1)[0];
-    }
-  
-    
-    //currentDataRow = oneWeekPrice.slice(-1)[0]
-    const change = (displayData === '1D') 
-                  ? (((currentDataRow?.close ?? currentDataRow?.value)/previousClose -1 )*100)?.toFixed(2)
-                  : (((currentDataRow?.close ?? currentDataRow?.value)/displayLastLogicalRangeValue -1 )*100)?.toFixed(2)
-
-    const date = new Date(currentDataRow?.time)
-
-  const options = {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-  };
-
-
-    //const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.');
-    const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') 
-    ? date.toLocaleString('en-US', options)
-    : date.toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
-
-
-    displayLegend = {'close': currentDataRow?.close ?? currentDataRow?.value, 'date': formattedDate, 'change': change};
-
-
-
   }
 
-}
-    
-  //==========================//
-  
-  
-  $: {
-    if ($stockTicker  && typeof window !== 'undefined') // add a check to see if running on client-side
-    {
-      
-      if ($realtimePrice !== null && $realtimePrice !== 0)
-      {
-        $realtimePrice = $realtimePrice !== 0 ? $realtimePrice : data?.getStockQuote?.price;
-        $currentPortfolioPrice = $realtimePrice;
-  
-      }
-      
-      else if (oneDayPrice?.length !== 0)
-      {
-        const length = oneDayPrice?.length;
-          for (let i = length - 1; i >= 0; i--) {
-            if (!isNaN(oneDayPrice[i]?.close)) {
-              $currentPortfolioPrice = oneDayPrice[i]?.close;
-              break;
-            }
-          }
-      }
-  
-    }
-  
-  }
-  
-  
-  
-let displayData;
-let colorChange;
-let topColorChange;
-let bottomColorChange;
-
-let lastValue;
-async function changeData(state) {
+  let displayData;
+  let colorChange;
+  let topColorChange;
+  let bottomColorChange;
 
+  let lastValue;
+  async function changeData(state) {
     switch (state) {
-      case '1D':
-        displayData = '1D';
-        if(oneDayPrice?.length !== 0)
-        {
+      case "1D":
+        displayData = "1D";
+        if (oneDayPrice?.length !== 0) {
           displayLastLogicalRangeValue = oneDayPrice?.at(0)?.close; //previousClose
           const length = oneDayPrice?.length;
           for (let i = length - 1; i >= 0; i--) {
@@ -142,91 +145,69 @@ async function changeData(state) {
               break;
             }
           }
-
-        }
-        else {
+        } else {
           displayLastLogicalRangeValue = null;
           lastValue = null;
-
         }
         break;
-      case '1W':
-        displayData = '1W';
-        await historicalPrice('one-week')
-        if(oneWeekPrice?.length !== 0)
-        { 
+      case "1W":
+        displayData = "1W";
+        await historicalPrice("one-week");
+        if (oneWeekPrice?.length !== 0) {
           displayLastLogicalRangeValue = oneWeekPrice?.at(0)?.close;
           lastValue = oneWeekPrice?.slice(-1)?.at(0)?.close;
-
-        }
-        else {
+        } else {
           displayLastLogicalRangeValue = null;
           lastValue = null;
-
         }
-        
 
         break;
-      case '1M':
-        displayData = '1M';
-        await historicalPrice('one-month')
-        if(oneMonthPrice?.length !== 0)
-        {
+      case "1M":
+        displayData = "1M";
+        await historicalPrice("one-month");
+        if (oneMonthPrice?.length !== 0) {
           displayLastLogicalRangeValue = oneMonthPrice?.at(0)?.close;
           lastValue = oneMonthPrice.slice(-1)?.at(0)?.close;
-
-        }
-        else {
+        } else {
           displayLastLogicalRangeValue = null;
           lastValue = null;
-
         }
         break;
 
-      case '6M':
-        displayData = '6M';
-        await historicalPrice('six-months')
-        if(sixMonthPrice?.length !== 0)
-        {
+      case "6M":
+        displayData = "6M";
+        await historicalPrice("six-months");
+        if (sixMonthPrice?.length !== 0) {
           displayLastLogicalRangeValue = sixMonthPrice?.at(0)?.close;
           lastValue = sixMonthPrice?.slice(-1)?.at(0)?.close;
-
-        }
-        else {
+        } else {
           displayLastLogicalRangeValue = null;
           lastValue = null;
-
         }
         break;
-      case '1Y':
-        displayData = '1Y';
-        await historicalPrice('one-year')
-        if(oneYearPrice?.length !== 0)
-        {
+      case "1Y":
+        displayData = "1Y";
+        await historicalPrice("one-year");
+        if (oneYearPrice?.length !== 0) {
           displayLastLogicalRangeValue = oneYearPrice?.at(0)?.close;
           lastValue = oneYearPrice.slice(-1)?.at(0)?.close;
-        }
-        else {
+        } else {
           displayLastLogicalRangeValue = null;
           lastValue = null;
         }
-        
+
         break;
-      case 'MAX':
-        displayData = 'MAX';
-        await historicalPrice('max')
-        if(threeYearPrice?.length !== 0)
-        {
+      case "MAX":
+        displayData = "MAX";
+        await historicalPrice("max");
+        if (threeYearPrice?.length !== 0) {
           displayLastLogicalRangeValue = threeYearPrice?.at(0)?.close;
           lastValue = threeYearPrice.slice(-1)?.at(0)?.close;
-
-        }
-        else {
+        } else {
           displayLastLogicalRangeValue = null;
           lastValue = null;
-
         }
-        
+
         break;
       default:
         return;
@@ -234,338 +215,270 @@ async function changeData(state) {
     colorChange = lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#10DB06";
     topColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.2)" : "rgb(16, 219, 6, 0.2)";
     bottomColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.001)" : "rgb(16, 219, 6, 0.001)";
-    
+
     fitContentChart();
-    
 
     //trackButtonClick('Time Period: '+ state)
   }
-  
-    
-  
+
   let output = null;
-  
-  
+
   //====================================//
-  
-  
-  
+
   let intervalId = null;
   let oneDayPrice = [];
   let oneWeekPrice = [];
   let oneMonthPrice = [];
   let sixMonthPrice = [];
-  
+
   let oneYearPrice = [];
   let threeYearPrice = [];
-  
-  
-  
-async function historicalPrice(timePeriod:string) {
-  
-  const cachedData = getCache($stockTicker, 'historicalPrice'+timePeriod);
+
+  async function historicalPrice(timePeriod: string) {
+    const cachedData = getCache($stockTicker, "historicalPrice" + timePeriod);
     if (cachedData) {
       switch (timePeriod) {
-          case 'one-week':
-              oneWeekPrice = cachedData
-              break;
-          case 'one-month':
-              oneMonthPrice = cachedData
-              break;
-          case 'six-months':
-              sixMonthPrice = cachedData
-              break;
-          case 'one-year':
-              oneYearPrice = cachedData
-              break;
-          case 'max':
-              threeYearPrice = cachedData
-              break;
-          default:
-              console.log(`Unsupported time period: ${timePeriod}`);
+        case "one-week":
+          oneWeekPrice = cachedData;
+          break;
+        case "one-month":
+          oneMonthPrice = cachedData;
+          break;
+        case "six-months":
+          sixMonthPrice = cachedData;
+          break;
+        case "one-year":
+          oneYearPrice = cachedData;
+          break;
+        case "max":
+          threeYearPrice = cachedData;
+          break;
+        default:
+          console.log(`Unsupported time period: ${timePeriod}`);
       }
-  } else {
-    output = null;
+    } else {
+      output = null;
 
       const postData = {
         ticker: $stockTicker,
         timePeriod: timePeriod,
       };
 
-      const response = await fetch(data?.apiURL+'/historical-price', {
-        method: 'POST',
+      const response = await fetch(data?.apiURL + "/historical-price", {
+        method: "POST",
         headers: {
-          "Content-Type": "application/json", "X-API-KEY": data?.apiKey
+          "Content-Type": "application/json",
+          "X-API-KEY": data?.apiKey,
         },
-        body: JSON.stringify(postData)
+        body: JSON.stringify(postData),
       });
 
-      output = await response?.json() ?? [];
+      output = (await response?.json()) ?? [];
 
-      const mapData = (data) => data?.map(({ time, open, high, low, close }) => ({ 
-          time: Date.parse(time), 
-          open, 
-          high, 
-          low, 
-          close 
-      }));
+      const mapData = (data) =>
+        data?.map(({ time, open, high, low, close }) => ({
+          time: Date.parse(time),
+          open,
+          high,
+          low,
+          close,
+        }));
 
-    const mappedData = mapData(output);
-    try {
+      const mappedData = mapData(output);
+      try {
         switch (timePeriod) {
-            case 'one-week':
-                oneWeekPrice = mappedData
-                break;
-            case 'one-month':
-                oneMonthPrice = mappedData
-                break;
-            case 'six-months':
-                sixMonthPrice = mappedData
-                break;
-            case 'one-year':
-                oneYearPrice = mappedData
-                break;
-            case 'max':
-                threeYearPrice = mappedData
-                break;
-            default:
-                console.log(`Unsupported time period: ${timePeriod}`);
+          case "one-week":
+            oneWeekPrice = mappedData;
+            break;
+          case "one-month":
+            oneMonthPrice = mappedData;
+            break;
+          case "six-months":
+            sixMonthPrice = mappedData;
+            break;
+          case "one-year":
+            oneYearPrice = mappedData;
+            break;
+          case "max":
+            threeYearPrice = mappedData;
+            break;
+          default:
+            console.log(`Unsupported time period: ${timePeriod}`);
         }
-        setCache($stockTicker, mappedData, 'historicalPrice'+timePeriod);
-
-    } catch (e) {
+        setCache($stockTicker, mappedData, "historicalPrice" + timePeriod);
+      } catch (e) {
         console.log(e);
+      }
     }
+  }
 
-  }  
-}
-
-  
   async function initializePrice() {
-  
     output = null;
     if (intervalId) {
-        clearInterval(intervalId);
+      clearInterval(intervalId);
     }
     intervalId = setInterval(checkChart, 0);
     try {
+      output = [...data?.getOneDayPrice] ?? [];
 
-    output = [...data?.getOneDayPrice] ?? [];
+      oneDayPrice = output?.map((item) => ({
+        time: Date.parse(item?.time),
+        open: item?.open !== null ? item?.open : NaN,
+        high: item?.high !== null ? item?.high : NaN,
+        low: item?.low !== null ? item?.low : NaN,
+        close: item?.close !== null ? item?.close : NaN,
+      }));
 
-
-    oneDayPrice = output?.map(item => ({ time: Date.parse(item?.time), open: item?.open !== null ? item?.open : NaN, high: item?.high !== null ? item?.high : NaN, low: item?.low !== null ? item?.low : NaN, close: item?.close !== null ? item?.close : NaN}));
-
-      displayData = oneDayPrice?.length  === 0 && sixMonthPrice?.length !== 0 ? '6M' : '1D';
-        //lastValue = oneDayPrice[oneDayPrice?.length - 1]?.value;
-        if (displayData === '1D')
-        {
-          const length = oneDayPrice?.length;
-          for (let i = length - 1; i >= 0; i--) {
-            if (!isNaN(oneDayPrice[i]?.close)) {
-              lastValue = oneDayPrice[i]?.close;
-              break;
-            }
+      displayData = oneDayPrice?.length === 0 && sixMonthPrice?.length !== 0 ? "6M" : "1D";
+      //lastValue = oneDayPrice[oneDayPrice?.length - 1]?.value;
+      if (displayData === "1D") {
+        const length = oneDayPrice?.length;
+        for (let i = length - 1; i >= 0; i--) {
+          if (!isNaN(oneDayPrice[i]?.close)) {
+            lastValue = oneDayPrice[i]?.close;
+            break;
           }
         }
-        else if (displayData === '6M') {
-          lastValue = sixMonthPrice?.slice(-1)?.at(0)?.close
-        }
-        
-  
-        displayLastLogicalRangeValue = oneDayPrice?.length  === 0 && sixMonthPrice?.length !== 0 ? sixMonthPrice?.at(0)?.close : oneDayPrice?.at(0)?.close //previousClose;
-  
-        //colorChange = lastValue < displayLastLogicalRangeValue ? "#CC3636" : "#367E18";
-        
-        colorChange = lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#10DB06";
-        topColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.2)" : "rgb(16, 219, 6, 0.2)";
-        bottomColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.001)" : "rgb(16, 219, 6, 0.001)";
-      } catch(e) {
-        console.log(e)
+      } else if (displayData === "6M") {
+        lastValue = sixMonthPrice?.slice(-1)?.at(0)?.close;
       }
-  };
-  
-  
-async function getPrePostQuote() {
 
-if(!$isOpen) {
-  const postData = { ticker: $stockTicker};
-    const response = await fetch(data?.apiURL+'/pre-post-quote', {
-    method: 'POST',
-    headers: {
-        "Content-Type": "application/json", "X-API-KEY": data?.apiKey
-    },
-    body: JSON.stringify(postData)
-    });
+      displayLastLogicalRangeValue = oneDayPrice?.length === 0 && sixMonthPrice?.length !== 0 ? sixMonthPrice?.at(0)?.close : oneDayPrice?.at(0)?.close; //previousClose;
 
-    prePostData = await response.json();
+      //colorChange = lastValue < displayLastLogicalRangeValue ? "#CC3636" : "#367E18";
 
+      colorChange = lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#10DB06";
+      topColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.2)" : "rgb(16, 219, 6, 0.2)";
+      bottomColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.001)" : "rgb(16, 219, 6, 0.001)";
+    } catch (e) {
+      console.log(e);
+    }
   }
-};
 
-  
-      let currentDataRow = {'value': '-', 'date': '-'};
-  
-      let lineLegend = null;
-      let displayLegend = {'close': '-', 'date': '-'};
-  
-  
-  
-    
-      function handleSeriesReference(ref) {
-        try {
-          lineLegend = ref;
-        }
-        catch (error)
-        {
-          console.log(error);
-        }
-  
-          
-      };
-  
-  
-  
-      async function handleCrosshairMove({detail: param}) {
-        
-        if (param?.time && !isNaN(param?.seriesData?.get(lineLegend)?.close ?? param?.seriesData?.get(lineLegend)?.value)) 
-        { 
-          $isCrosshairMoveActive = true;
-          try {
-            let graphData;
-              graphData = param?.seriesData?.get(lineLegend);
-  
-              const price = graphData?.close ?? graphData?.value
-              const dateObj = graphData?.time
-              const date = new Date(dateObj);
-  
-              
-              const options = {
-                day: '2-digit',
-                month: 'short',
-                year: 'numeric',
-                hour: 'numeric',
-                minute: '2-digit',
-              };
-              
-              //const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })?.replace(/\//g, '.');
-              
-              const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') 
-              ? date.toLocaleString('en-US', options)
-              : date.toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
+  async function getPrePostQuote() {
+    if (!$isOpen) {
+      const postData = { ticker: $stockTicker };
+      const response = await fetch(data?.apiURL + "/pre-post-quote", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-KEY": data?.apiKey,
+        },
+        body: JSON.stringify(postData),
+      });
 
+      prePostData = await response.json();
+    }
+  }
 
-              const change = ((price/displayLastLogicalRangeValue -1 )*100)?.toFixed(2);
-  
-  
-              displayLegend = {"close": price?.toFixed(2), 'date': formattedDate, 'change': change};
-  
-           
-  
-          }
-  
-          catch(error)
-          {
-              //pass;
-          }
-            
-        }
-      else
-        {
-  
-          //currentDataRow = oneDayPrice[oneDayPrice?.length - 1];
-          const length = oneDayPrice?.length;
-          for (let i = length - 1; i >= 0; i--) {
-            if (!isNaN(oneDayPrice[i]?.close )) {
-              currentDataRow = oneDayPrice[i];
-              break;
-            }
-          }
-     
-  
-        }
-        
-      };
-  
-  
-  
-    
-    let displayLastLogicalRangeValue; 
-    
-      
-      const fitContentChart = async () => {
-  
-        if(displayData === '1Y' && oneYearPrice?.length === 0)
-        {
-  
-        }
-        else if (chart !== null && typeof window !== 'undefined') {
-  
-          chart?.timeScale().fitContent();
-  
-          chart?.applyOptions({
-            trackingMode: {
-              exitMode: TrackingModeExitMode.OnTouchEnd
-            },
-          });
-  
-        }
-       
-  
-        
-      };
-  
-    
-  
-  
-  
-      let width = 580;
-      //Initial height of graph
-      let height = 350;
-  
-      let observer;
-      let ref;
-  
-      ref = (element) => {
-          if (observer) {
-              observer?.disconnect();
-          }
-          if (!element) {
-              return;
-          }
-          
-          observer = new ResizeObserver(([entry]) => {
-              width = entry.contentRect.width;
-              height = entry.contentRect.height;
-          });
-          observer.observe(element);
+  let currentDataRow = { value: "-", date: "-" };
+
+  let lineLegend = null;
+  let displayLegend = { close: "-", date: "-" };
+
+  function handleSeriesReference(ref) {
+    try {
+      lineLegend = ref;
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function handleCrosshairMove({ detail: param }) {
+    if (param?.time && !isNaN(param?.seriesData?.get(lineLegend)?.close ?? param?.seriesData?.get(lineLegend)?.value)) {
+      $isCrosshairMoveActive = true;
+      try {
+        let graphData;
+        graphData = param?.seriesData?.get(lineLegend);
+
+        const price = graphData?.close ?? graphData?.value;
+        const dateObj = graphData?.time;
+        const date = new Date(dateObj);
+
+        const options = {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+          hour: "numeric",
+          minute: "2-digit",
+        };
+
+        //const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })?.replace(/\//g, '.');
+
+        const formattedDate = displayData === "1D" || displayData === "1W" || displayData === "1M" ? date.toLocaleString("en-US", options) : date.toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" });
+
+        const change = ((price / displayLastLogicalRangeValue - 1) * 100)?.toFixed(2);
+
+        displayLegend = { close: price?.toFixed(2), date: formattedDate, change: change };
+      } catch (error) {
+        //pass;
       }
-  
-  
-  
-      //===============================================//
-      
-  
-  
-  
-  
-  
-  
+    } else {
+      //currentDataRow = oneDayPrice[oneDayPrice?.length - 1];
+      const length = oneDayPrice?.length;
+      for (let i = length - 1; i >= 0; i--) {
+        if (!isNaN(oneDayPrice[i]?.close)) {
+          currentDataRow = oneDayPrice[i];
+          break;
+        }
+      }
+    }
+  }
+
+  let displayLastLogicalRangeValue;
+
+  const fitContentChart = async () => {
+    if (displayData === "1Y" && oneYearPrice?.length === 0) {
+    } else if (chart !== null && typeof window !== "undefined") {
+      chart?.timeScale().fitContent();
+
+      chart?.applyOptions({
+        trackingMode: {
+          exitMode: TrackingModeExitMode.OnTouchEnd,
+        },
+      });
+    }
+  };
+
+  let width = 580;
+  //Initial height of graph
+  let height = 350;
+
+  let observer;
+  let ref;
+
+  ref = (element) => {
+    if (observer) {
+      observer?.disconnect();
+    }
+    if (!element) {
+      return;
+    }
+
+    observer = new ResizeObserver(([entry]) => {
+      width = entry.contentRect.width;
+      height = entry.contentRect.height;
+    });
+    observer.observe(element);
+  };
+
+  //===============================================//
+
   const options = {
     width: width,
     height: height,
     layout: {
       background: {
-        color: '#09090B',
+        color: "#09090B",
       },
-    
     },
     grid: {
       vertLines: {
-        color: '#09090B',
+        color: "#09090B",
         visible: false,
       },
       horzLines: {
-        color: '#09090B',
+        color: "#09090B",
         visible: false,
       },
     },
@@ -583,11 +496,11 @@ if(!$isOpen) {
     },
     rightPriceScale: {
       visible: false,
-      borderColor: 'rgba(197, 203, 206, 0.8)',
+      borderColor: "rgba(197, 203, 206, 0.8)",
     },
     leftPriceScale: {
       visible: false,
-      borderColor: 'rgba(197, 203, 206, 0.8)',
+      borderColor: "rgba(197, 203, 206, 0.8)",
     },
     handleScale: {
       mouseWheel: false,
@@ -599,716 +512,499 @@ if(!$isOpen) {
       pressedMouseMove: false,
     },
     timeScale: {
-      borderColor: '#FFFFFF',
-      textColor: '#FFFFFF',
+      borderColor: "#FFFFFF",
+      textColor: "#FFFFFF",
       visible: false,
       fixLeftEdge: true,
       fixRightEdge: true,
     },
   };
-  
-  
-  
-  onDestroy(async() => {
+
+  onDestroy(async () => {
     $priceIncrease = null;
     $globalForm = [];
-  })
-  
-function changeChartType() {
-    if(displayChartType === 'line') {
-      displayChartType = 'candlestick';
+  });
+
+  function changeChartType() {
+    if (displayChartType === "line") {
+      displayChartType = "candlestick";
+    } else {
+      displayChartType = "line";
     }
-    else {
-      displayChartType = 'line';
-    }
-}
-  
+  }
+
   $: {
-  
-    if ($stockTicker  && typeof window !== 'undefined') // add a check to see if running on client-side
-    {
-  
+    if ($stockTicker && typeof window !== "undefined") {
+      // add a check to see if running on client-side
       oneDayPrice = [];
       oneWeekPrice = [];
       oneMonthPrice = [];
       oneYearPrice = [];
       threeYearPrice = [];
       prePostData = {};
-      communitySentiment = {}
+      communitySentiment = {};
       output = null;
-  
-  
+
       communitySentiment = data?.getCommunitySentiment;
-          
 
-      const asyncFunctions = [
-        getPrePostQuote(),
-      ];
+      const asyncFunctions = [getPrePostQuote()];
 
-
-  
       Promise.all(asyncFunctions)
-          .then((results) => {
-            initializePrice()
-          })
-          .catch((error) => {
-            console.error('An error occurred:', error);
-          });
-        
-  
+        .then((results) => {
+          initializePrice();
+        })
+        .catch((error) => {
+          console.error("An error occurred:", error);
+        });
     }
-  
   }
 
-
-  
   $: {
-    if(form)
-    {
+    if (form) {
       $globalForm = form;
     }
   }
-  
-  
-  </script>
-  
-  <svelte:head>
-  
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>
-      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Stock Price, Quote & News · stocknear
-    </title>
-  
-    <meta name="description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}>
-    <!-- Other meta tags -->
-    <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Stock Price, Quote & News · stocknear`}/>
-    <meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-    <!--<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
-    <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={`${$displayCompanyName} (${$stockTicker}) Stock Price, Quote & News · stocknear`}/>
-    <meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-    <!--<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
-    <!-- Add more Twitter meta tags as needed -->
-  
-  </svelte:head>
-    
-  
-  <section class="bg-[#09090B] min-h-screen pb-40 overflow-hidden">
-  
-              <div class="w-full m-auto overflow-hidden">
-  
-          
-                    <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 sm:pr-6 xl:pr-0">
-                          <div class="xl:pr-10">
-  
-      
-                                  <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                  <!-- svelte-ignore a11y-label-has-associated-control -->
-                                  
-                                
-                                    <div class="flex flex-row items-start w-full sm:pl-6 mt-4">
-                                      <div class="flex flex-col items-start justify-start w-full" >
-                                      
-                                      <div class="text-2xl md:text-3xl font-bold text-white flex flex-row items-center w-full">
-                                          {#if $isCrosshairMoveActive }
-                                          {$stockTicker?.includes('.DE') || $stockTicker?.includes('.PA') || $stockTicker?.includes('.F') ? `${displayLegend?.close}€` : ` $${displayLegend?.close}`}
-                                          {:else if !$isCrosshairMoveActive && $realtimePrice !== null}
-                                          {$stockTicker?.includes('.DE') || $stockTicker?.includes('.PA') || $stockTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
-                                          {:else}
-                                          {$stockTicker?.includes('.DE') || $stockTicker?.includes('.PA') || $stockTicker?.includes('.F') ? `${displayLegend?.close}€` : ` $${displayLegend?.close}`}
-                                          
-                                          {/if}
-                                            
-                                          {#if $priceIncrease === true}
-                                          <div style="background-color: green;" class="inline-block pulse rounded-full w-3 h-3 ml-2" ></div>
-                                          {:else if $priceIncrease === false}
-                                          <div style="background-color: red;" class="inline-block pulse rounded-full w-3 h-3 ml-2" ></div>
-                                          {/if}
+</script>
 
-                                      </div>  
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Stock Price, Quote & News · stocknear
+  </title>
 
-                                      
-                                        
-      
-                                      <div class="flex flex-row items-center w-full">
-                                        
-                                        {#if displayLegend?.change >= 0}
-                                        <svg class="inline-block w-5 h-5 mt-0.5 -mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
-                                        <span class="items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">+{displayLegend?.change}%</span> 
-                                        {:else if displayLegend?.change < 0}
-                                        <svg class="inline-block w-5 h-5 mt-0.5 -mr-0.5 rotate-180"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
-                                        <span class="items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">{displayLegend?.change}% </span> 
-                                        {/if}
+  <meta name="description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
+  <!-- Other meta tags -->
+  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Stock Price, Quote & News · stocknear`} />
+  <meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
+  <!--<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
 
-                                        <span class="ml-3 text-white text-xs sm:text-sm">{displayLegend?.date}</span>
-                                        
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Stock Price, Quote & News · stocknear`} />
+  <meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
+  <!--<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
 
-                                      
-                                      </div>
+<section class="bg-[#09090B] min-h-screen pb-40 overflow-hidden">
+  <div class="w-full m-auto overflow-hidden">
+    <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 sm:pr-6 xl:pr-0">
+        <div class="xl:pr-10">
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-label-has-associated-control -->
 
-                                      </div>
+          <div class="flex flex-row items-start w-full sm:pl-6 mt-4">
+            <div class="flex flex-col items-start justify-start w-full">
+              <div class="text-2xl md:text-3xl font-bold text-white flex flex-row items-center w-full">
+                {#if $isCrosshairMoveActive}
+                  {$stockTicker?.includes(".DE") || $stockTicker?.includes(".PA") || $stockTicker?.includes(".F") ? `${displayLegend?.close}€` : ` $${displayLegend?.close}`}
+                {:else if !$isCrosshairMoveActive && $realtimePrice !== null}
+                  {$stockTicker?.includes(".DE") || $stockTicker?.includes(".PA") || $stockTicker?.includes(".F") ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
+                {:else}
+                  {$stockTicker?.includes(".DE") || $stockTicker?.includes(".PA") || $stockTicker?.includes(".F") ? `${displayLegend?.close}€` : ` $${displayLegend?.close}`}
+                {/if}
 
-                                      <div class="ml-auto">
-                                      {#if Object?.keys(prePostData)?.length !== 0 && prePostData?.price !== 0}
-                                      <div class="flex flex-col justify-end items-end">
-                                        <div class="flex flex-row items-center justify-end">
-                                        <span class="text-white text-lg sm:text-2xl font-bold">
-                                          ${prePostData?.price}
-                                        </span>
-                                        {#if prePostData?.changesPercentage >= 0}
-                                        <span class="ml-1 items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span> 
-                                        {:else if prePostData?.changesPercentage < 0}
-                                        <span class="ml-1 items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span> 
-                                        {/if}
-                                        </div>
-                                        {#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
-                                        <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
-                                          <span>Pre-market:</span>
-                                            <svg class="ml-1 w-4 h-4 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#EA9703" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
-                                        </div>
-                                        {:else}
-                                        <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
-                                          <span>Post-market:</span>
-                                            <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
-                                        </div>
-                                        {/if}
+                {#if $priceIncrease === true}
+                  <div style="background-color: green;" class="inline-block pulse rounded-full w-3 h-3 ml-2"></div>
+                {:else if $priceIncrease === false}
+                  <div style="background-color: red;" class="inline-block pulse rounded-full w-3 h-3 ml-2"></div>
+                {/if}
+              </div>
 
-                                      </div>
-                                      {/if}
-                                      
-                                    </div>
-                                
-                                </div>
-                                <!-----End-Header-CandleChart-Indicators------>
-                                   <!--Start Time Interval-->
-                                   <div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4">
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1D
-                                    </button>
-                                    <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1W
-                                    </button>
-                                    <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1M
-                                    </button>
-                                    <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        6M
-                                    </button>
-                                    <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1Y
-                                    </button>
-                                    <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  </div>
-                                  
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        MAX
-                                    </button>
-                                    <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  
-                                  </div>
+              <div class="flex flex-row items-center w-full">
+                {#if displayLegend?.change >= 0}
+                  <svg class="inline-block w-5 h-5 mt-0.5 -mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                    ><g id="evaArrowUpFill0"
+                      ><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z" /></g></g
+                    ></svg
+                  >
+                  <span class="items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">+{displayLegend?.change}%</span>
+                {:else if displayLegend?.change < 0}
+                  <svg class="inline-block w-5 h-5 mt-0.5 -mr-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                    ><g id="evaArrowUpFill0"
+                      ><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z" /></g></g
+                    ></svg
+                  >
+                  <span class="items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">{displayLegend?.change}% </span>
+                {/if}
 
+                <span class="ml-3 text-white text-xs sm:text-sm">{displayLegend?.date}</span>
+              </div>
+            </div>
 
-  
-                                  <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
-                                    {#if displayChartType === 'line'}
-                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
-                                      {:else}
-                                      <svg class="w-6 h-6" 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="M3 16.5L9 10l4 6l8-9.5"/></svg>
-                                      {/if}
-                                </label>
-                                  
-                                </div>
-                                  <!--End Time Interval-->
-                                
-                                  <!--End Ticker Section-->
-                                <!-- Start Graph -->
-  
-                                {#if output !== null}
-                                  <div class ="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
-                                    {#if displayData === '1D' && oneDayPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '1W' && oneWeekPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '1M' && oneMonthPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '6M' && sixMonthPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '1Y' && oneYearPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === 'MAX' && threeYearPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else}
-  
-                                    <Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
-                                    
-                                    {#if displayData === '1D'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneDayPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneDayPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneDayPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-                                      {:else if displayData === '1W'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneWeekPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneWeekPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneWeekPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-                                      {:else if displayData === '1M'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneMonthPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-                                      {:else if displayData === '6M'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                      data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={sixMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={sixMonthPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={sixMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-  
-                                      {:else if displayData === '1Y'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                      data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneYearPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-  
-                                      {:else if displayData === 'MAX'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={threeYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={threeYearPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={threeYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-                                    {/if}
-                                    </Chart>
-                                    {/if}
-  
-                                  </div>
-                                  {:else}
-                                  <!-- else output not loaded yet-->
-                                    <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
-                                        <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"></span>
-                                          </label>
-                                      </div>  
-                                    </div>
-                                  {/if}
-                                  
-                                  <!--End Graph-->
-  
-                                    <!--Start Time Interval-->
-                                    <div class="pl-1 w-screen sm:hidden flex flex-row items-center">
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1D
-                                    </button>
-                                    <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1W
-                                    </button>
-                                    <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1M
-                                    </button>
-                                    <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        6M
-                                    </button>
-                                    <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1Y
-                                    </button>
-                                    <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  </div>
-                                  
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        MAX
-                                    </button>
-                                    <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  </div>
+            <div class="ml-auto">
+              {#if Object?.keys(prePostData)?.length !== 0 && prePostData?.price !== 0}
+                <div class="flex flex-col justify-end items-end">
+                  <div class="flex flex-row items-center justify-end">
+                    <span class="text-white text-lg sm:text-2xl font-bold">
+                      ${prePostData?.price}
+                    </span>
+                    {#if prePostData?.changesPercentage >= 0}
+                      <span class="ml-1 items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span>
+                    {:else if prePostData?.changesPercentage < 0}
+                      <span class="ml-1 items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span>
+                    {/if}
+                  </div>
+                  {#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
+                    <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
+                      <span>Pre-market:</span>
+                      <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
+                        ><path
+                          fill="#EA9703"
+                          d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"
+                        /></svg
+                      >
+                    </div>
+                  {:else}
+                    <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
+                      <span>Post-market:</span>
+                      <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
+                        ><path
+                          fill="#70A1EF"
+                          d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
+                        /></svg
+                      >
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+          </div>
+          <!-----End-Header-CandleChart-Indicators------>
+          <!--Start Time Interval-->
+          <div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4">
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1D")} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}"> 1D </button>
+              <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1W")} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}"> 1W </button>
+              <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1M")} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}"> 1M </button>
+              <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("6M")} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}"> 6M </button>
+              <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1Y")} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}"> 1Y </button>
+              <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
 
-                                    
-                                    </div>
-                                    <!--End Time Interval-->
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("MAX")} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}"> MAX </button>
+              <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
 
+            <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
+              {#if displayChartType === "line"}
+                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z" /></svg>
+              {:else}
+                <svg class="w-6 h-6" 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="M3 16.5L9 10l4 6l8-9.5" /></svg>
+              {/if}
+            </label>
+          </div>
+          <!--End Time Interval-->
 
-                                  <div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                                      <CommunitySentiment communitySentiment={communitySentiment}/>
-                                  </div>
+          <!--End Ticker Section-->
+          <!-- Start Graph -->
 
+          {#if output !== null}
+            <div class="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
+              {#if displayData === "1D" && oneDayPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "1W" && oneWeekPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "1M" && oneMonthPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "6M" && sixMonthPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "1Y" && oneYearPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "MAX" && threeYearPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else}
+                <Chart {...options} autoSize={true} ref={(ref) => (chart = ref)} on:crosshairMove={handleCrosshairMove}>
+                  {#if displayData === "1D"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneDayPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1W"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneWeekPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1M"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "6M"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={sixMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1Y"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "MAX"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={threeYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {/if}
+                </Chart>
+              {/if}
+            </div>
+          {:else}
+            <!-- else output not loaded yet-->
+            <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
+              <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"></span>
+                </label>
+              </div>
+            </div>
+          {/if}
 
-                                {#if $screenWidth <= 1022} <!--BUG: Dont remove since when changing ETF symbol display freezes-->
-                               
-                                <div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
-                                  <Lazy>
-                                    <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                                      Key Information
-                                    </h3>
-                                    {#await import('$lib/components/StockKeyInformation.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp}
-                                        data={data} />
-                                    {/await}
-                                  </Lazy>
+          <!--End Graph-->
 
-                                  </div>
-                                  {/if}
+          <!--Start Time Interval-->
+          <div class="pl-1 w-screen sm:hidden flex flex-row items-center">
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1D")} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}"> 1D </button>
+              <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1W")} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}"> 1W </button>
+              <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1M")} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}"> 1M </button>
+              <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("6M")} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}"> 6M </button>
+              <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1Y")} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}"> 1Y </button>
+              <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
 
-                               
-                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getNextEarnings || {})?.length !== 0 ? '' : 'hidden'}">
-                                    <NextEarnings data={data}/>
-                                  </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("MAX")} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}"> MAX </button>
+              <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+          </div>
+          <!--End Time Interval-->
 
-                                <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
-                                  <BullBearSay data={data}/>
-                                </div>
+          <div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+            <CommunitySentiment {communitySentiment} />
+          </div>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0  ? '' : 'hidden'}">
-                                  {#await import('$lib/components/WIIM.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          {#if $screenWidth <= 1022}
+            <!--BUG: Dont remove since when changing ETF symbol display freezes-->
 
+            <div class="w-full mt-10 m-auto sm:p-6 lg:hidden">
+              <Lazy>
+                <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">Key Information</h3>
+                {#await import("$lib/components/StockKeyInformation.svelte") then { default: Comp }}
+                  <svelte:component this={Comp} {data} />
+                {/await}
+              </Lazy>
+            </div>
+          {/if}
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/AnalystInsight.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getNextEarnings || {})?.length !== 0 ? '' : 'hidden'}">
+            <NextEarnings {data} />
+          </div>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/ClinicalTrial.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
+            <BullBearSay {data} />
+          </div>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0 ? '' : 'hidden'}">
+              {#await import("$lib/components/WIIM.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
-                                
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/ClinicalTrial.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/FundamentalAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/VaR.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/GovernmentContract.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/CorporateLobbying.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/VaR.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
-                                
-                              
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/Swap.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/AnalystEstimate.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data}/>
-                                  {/await}
-                                  </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/Enterprise.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/GovernmentContract.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/OptionsData.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/CorporateLobbying.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/Swap.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                </Lazy>
-
-                                  <Lazy>
-                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/Enterprise.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                  </Lazy>
-
-                                  <Lazy>
-                                    <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                  </Lazy>
-
-                                  <Lazy>
-                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
-                                      {#await import('$lib/components/OptionsNetFlow.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp} data={data} />
-                                      {/await}
-                                    </div>
-                                  </Lazy>
-                                
-                                  <!--
+          <!--
                                   <Lazy>
                                     <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$impliedVolatilityComponent ? 'hidden' : ''}">
                                       {#await import('$lib/components/ImpliedVolatility.svelte') then {default: Comp}}
@@ -1317,95 +1013,74 @@ function changeChartType() {
                                     </div>
                                   </Lazy>
                                   -->
-                                
 
-                                 <!--Start RevenueSegmentation-->
-                                  <Lazy>
-                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} apiURL={data?.apiURL} apiKey={data?.apiKey} userTier={data?.user?.tier}/>
-                                    {/await}
-                                    </div>
-                                    </Lazy>
-                               <!--End RevenueSegmentation-->
-                              
-                              <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/FailToDeliver.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                              </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/FailToDeliver.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                              <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/BorrowedShare.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                              </Lazy>
-                              
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/BorrowedShare.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                              <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/MarketMaker.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                              </Lazy>
-                              
-                              
-                               <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent ? 'hidden' : ''}">
-                                {#await import('$lib/components/DarkPool.svelte') then {default: Comp}}
-                                  <svelte:component this={Comp} data={data} />
-                                {/await}
-                              </div>
-                              </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/MarketMaker.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/DarkPool.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                               <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
-                                {#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
-                                  <svelte:component this={Comp} data={data} />
-                                {/await}
-                              </div>
-                              </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/RetailVolume.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/ShareStatistics.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/ShareStatistics.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data}/>
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <!--Start Shareholders-->
+          <Lazy>
+            <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/ShareHolders.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
+          <!--End Shareholders-->
 
-                                  
-                                   <!--Start Shareholders-->
-                                   <Lazy>
-                                    <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data}/>
-                                    {/await}
-                                    </div>
-                                    </Lazy>
-                                   <!--End Shareholders-->
+          <Lazy>
+            <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/TARating.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-  
-                                 
-                              
-                                  <Lazy>
-                                    <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
-                                      {#await import('$lib/components/TARating.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp} data={data}/>
-                                      {/await}
-                                    </div>
-                                  </Lazy>
-
-  
-                  
-                                  <!--
+          <!--
                                   <Lazy>
                                   <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$dcfComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/DCF.svelte') then {default: Comp}}
@@ -1422,48 +1097,34 @@ function changeChartType() {
                                   </div>
                                   -->
 
-                                  <Lazy>
-                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
-                                      {#await import('$lib/components/StockSplits.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp} stockDeck={data?.getStockDeck}/>
-                                      {/await}
-                                  </div>
-                                </Lazy>
-  
-
-                              
-  
-  
-                      
-  
-                            </div>
-          </div>
+          <Lazy>
+            <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
+              {#await import("$lib/components/StockSplits.svelte") then { default: Comp }}
+                <svelte:component this={Comp} stockDeck={data?.getStockDeck} />
+              {/await}
+            </div>
+          </Lazy>
+        </div>
+      </div>
     </div>
-  </section>
-  
-  
-  
-  
-  
-  
-  <!--End-Indicator-Modal-->
-  
-  
-  <style lang='scss'>
-     
-  
+  </div>
+</section>
+
+<!--End-Indicator-Modal-->
+
+<style lang="scss">
   canvas {
     width: 100%;
     height: 100%;
     max-width: 800px;
     max-height: 450px;
   }
-  
+
   .pulse {
     position: relative;
     animation: pulse-animation 1s forwards cubic-bezier(0.5, 0, 0.5, 1);
   }
-  
+
   @keyframes pulse-animation {
     0% {
       transform: scale(0.9);
@@ -1474,13 +1135,9 @@ function changeChartType() {
       opacity: 0;
     }
   }
-  
-  
+
   :root {
-    --date-picker-background: #09090B;
+    --date-picker-background: #09090b;
     --date-picker-foreground: #f7f7f7;
   }
-  
-  
-  
-  </style>
\ No newline at end of file
+</style>
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
new file mode 100644
index 00000000..ab49d3e2
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { stockTicker, screenWidth } from "$lib/store";
+  import { onDestroy } from "svelte";
+  import { page } from "$app/stores";
+
+  let displaySubSection = "overview";
+
+  if (displaySubSection) {
+    const parts = $page?.url?.pathname.split("/");
+    const sectionMap = {
+      overview: "overview",
+      ai: "ai",
+      analyst: "analyst",
+    };
+
+    const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
+
+    displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
+  }
+
+  function changeSubSection(state) {
+    const subSectionMap = {
+      overview: "/forecast",
+      ai: "/forecast/ai",
+      analyst: "/forecast/analyst",
+    };
+
+    console.log(state);
+    console.log(subSectionMap[state]);
+
+    if (state !== "overview" && subSectionMap[state]) {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
+    } else {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}/stats`);
+    }
+  }
+
+  const unsubscribe = page.subscribe(($page) => {
+    const splitRoute = $page.url.pathname.split("/");
+    const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview";
+
+    changeSubSection(routeState);
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
+  <div class="m-auto h-full overflow-hidden">
+    <main class="w-fit sm:w-full sm:max-w-2xl">
+      <div class="m-auto">
+        <div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2">
+          <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/forecast`}
+                on:click={() => changeSubSection("overview")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Overview
+              </a>
+              <div class="{displaySubSection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a href={`/stocks/${$stockTicker}/forecast/ai`} on:click={() => changeSubSection("ai")} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ai' ? 'text-white ' : 'bg-[#09090B]'}">
+                AI
+              </a>
+              <div class="{displaySubSection === 'ai' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/forecast/analyst`}
+                on:click={() => changeSubSection("analyst")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'analyst' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Analysts
+              </a>
+              <div class="{displaySubSection === 'analyst' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+
+    <slot />
+  </div>
+</section>
+
+<style>
+  .scrollbar {
+    display: grid;
+    grid-gap: 18px;
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    grid-auto-flow: column;
+    overflow-x: auto;
+    scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
+    scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
+  }
+
+  /* Custom scrollbar for Webkit (Chrome, Safari) */
+  .scrollbar::-webkit-scrollbar {
+    width: 0; /* Hide the width of the scrollbar */
+    height: 0; /* Hide the height of the scrollbar */
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: transparent; /* Make the thumb transparent */
+  }
+</style>
diff --git a/src/routes/stocks/[tickerID]/forecast/+page.svelte b/src/routes/stocks/[tickerID]/forecast/+page.svelte
new file mode 100644
index 00000000..ed968eee
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/forecast/+page.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystEstimateComponent, currentPortfolioPrice } from "$lib/store";
+  import Lazy from "$lib/components/Lazy.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Forecast Overview · stocknear
+  </title>
+  <meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+
+  <!-- Other meta tags -->
+  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
+  <meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <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={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
+  <meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
+  <div class="flex justify-center m-auto h-full overflow-hidden w-full">
+    <div class="relative flex justify-center items-center overflow-hidden w-full">
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <Lazy>
+          <div class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/stocks/[tickerID]/analyst/+page.ts b/src/routes/stocks/[tickerID]/forecast/+page.ts
similarity index 100%
rename from src/routes/stocks/[tickerID]/analyst/+page.ts
rename to src/routes/stocks/[tickerID]/forecast/+page.ts
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
new file mode 100644
index 00000000..f107eb71
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystInsightComponent, sentimentComponent, trendAnalysisComponent, priceAnalysisComponent, fundamentalAnalysisComponent } from "$lib/store";
+  import Lazy from "$lib/components/Lazy.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Forecast AI · stocknear
+  </title>
+  <meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+
+  <!-- Other meta tags -->
+  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
+  <meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <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={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
+  <meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
+  <div class="flex justify-center m-auto h-full overflow-hidden w-full">
+    <div class="relative flex justify-center items-center overflow-hidden w-full">
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <Lazy>
+          <div class="w-full mt-10 sm:mt-0 m-auto sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/AnalystInsight.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+
+        <Lazy>
+          <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/PriceAnalysis.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+
+        <Lazy>
+          <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/TrendAnalysis.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+
+        <Lazy>
+          <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/FundamentalAnalysis.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+
+        <Lazy>
+          <div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/SentimentAnalysis.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+page.ts b/src/routes/stocks/[tickerID]/forecast/ai/+page.ts
new file mode 100644
index 00000000..095a324c
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/forecast/ai/+page.ts
@@ -0,0 +1,43 @@
+import { getCache, setCache } from '$lib/store';
+
+
+export const load = async ({ parent, params }) => {
+
+  const getAnalystTickerHistory = async () => {
+    
+    let output;
+
+    const cachedData = getCache(params.tickerID, 'getAnalystTickerHistory');
+      if (cachedData) {
+        output = cachedData;
+      } else {
+
+        const {apiURL, apiKey} = await parent();
+
+        const postData = {
+          ticker: params.tickerID
+        };
+
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/analyst-ticker-history', {
+        method: 'POST',
+        headers: {
+          "Content-Type": "application/json", "X-API-KEY": apiKey
+        },
+        body: JSON.stringify(postData)
+      });
+
+    output = await response.json();
+
+    setCache(params.tickerID, output, 'getAnalystTickerHistory');
+    
+    }
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getAnalystTickerHistory: await getAnalystTickerHistory()
+  };
+};
diff --git a/src/routes/stocks/[tickerID]/analyst/+page.svelte b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
similarity index 100%
rename from src/routes/stocks/[tickerID]/analyst/+page.svelte
rename to src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
diff --git a/src/routes/stocks/[tickerID]/forecast/analyst/+page.ts b/src/routes/stocks/[tickerID]/forecast/analyst/+page.ts
new file mode 100644
index 00000000..095a324c
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/forecast/analyst/+page.ts
@@ -0,0 +1,43 @@
+import { getCache, setCache } from '$lib/store';
+
+
+export const load = async ({ parent, params }) => {
+
+  const getAnalystTickerHistory = async () => {
+    
+    let output;
+
+    const cachedData = getCache(params.tickerID, 'getAnalystTickerHistory');
+      if (cachedData) {
+        output = cachedData;
+      } else {
+
+        const {apiURL, apiKey} = await parent();
+
+        const postData = {
+          ticker: params.tickerID
+        };
+
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/analyst-ticker-history', {
+        method: 'POST',
+        headers: {
+          "Content-Type": "application/json", "X-API-KEY": apiKey
+        },
+        body: JSON.stringify(postData)
+      });
+
+    output = await response.json();
+
+    setCache(params.tickerID, output, 'getAnalystTickerHistory');
+    
+    }
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getAnalystTickerHistory: await getAnalystTickerHistory()
+  };
+};
diff --git a/src/routes/stocks/[tickerID]/stats/+layout.svelte b/src/routes/stocks/[tickerID]/stats/+layout.svelte
index da3bbac7..906b0c39 100644
--- a/src/routes/stocks/[tickerID]/stats/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/stats/+layout.svelte
@@ -1,121 +1,132 @@
-<script lang='ts'>
-import { stockTicker, screenWidth } from "$lib/store";
-import { page } from "$app/stores";
+<script lang="ts">
+  import { stockTicker, screenWidth } from "$lib/store";
+  import { page } from "$app/stores";
 
-let displaySubSection = 'fundamental';
+  let displaySubSection = "overview";
 
+  if (displaySubSection) {
+    const parts = $page?.url?.pathname.split("/");
+    const sectionMap = {
+      "market-cap": "market-cap",
+      employees: "employees",
+      income: "income",
+      "balance-sheet": "balance-sheet",
+      "cash-flow": "cash-flow",
+      ratios: "ratios",
+    };
 
+    const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
 
-
-if (displaySubSection) {
-  const parts = $page?.url?.pathname.split('/');
-  const sectionMap = {
-    'market-cap': 'market-cap',
-    'employees': 'employees',
-    'income': 'income',
-    'balance-sheet': 'balance-sheet',
-    'cash-flow': 'cash-flow',
-    'ratios': 'ratios',
-  };
-
-  const foundSection = parts?.find(part => Object?.values(sectionMap)?.includes(part));
-
-  displaySubSection = Object?.keys(sectionMap)?.find(key => sectionMap[key] === foundSection) || 'fundamental';
-
-}
-
-
-
-function changeSubSection(state) {
-  const subSectionMap = {
-    'market-cap': '/stats/market-cap',
-    'employees': '/stats/employees',
-    'income': '/stats/income',
-    'balance-sheet': '/stats/balance-sheet',
-    'cash-flow': '/stats/cash-flow',
-    'ratios': '/stats/ratios',
-  };
-
-  if (state !== 'fundamental' && subSectionMap[state]) {
-    displaySubSection = state;
-    //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
-  } else {
-    displaySubSection = state;
-    //goto(`/stocks/${$stockTicker}/stats`);
+    displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
   }
-}
-
 
+  function changeSubSection(state) {
+    const subSectionMap = {
+      "market-cap": "/stats/market-cap",
+      employees: "/stats/employees",
+      income: "/stats/income",
+      "balance-sheet": "/stats/balance-sheet",
+      "cash-flow": "/stats/cash-flow",
+      ratios: "/stats/ratios",
+    };
 
+    if (state !== "overview" && subSectionMap[state]) {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
+    } else {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}/stats`);
+    }
+  }
 </script>
 
 <section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
   <div class="m-auto h-full overflow-hidden">
-            <main class="w-fit sm:w-full sm:max-w-2xl">
-                <div class="m-auto">
-                                    
-
-                    <div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2" >
-                      <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats`} on:click={() => (changeSubSection('fundamental'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'fundamental' ? 'text-white ' : 'bg-[#09090B]'}" >
-                            Fundamental
-                          </a>
-                          <div class="{displaySubSection === 'fundamental' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/market-cap`} on:click={() => (changeSubSection('market-cap'))} class="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'market-cap' ? 'text-white ' : 'bg-[#09090B]'}" >
-                            Market Cap
-                          </a>
-                          <div class="{displaySubSection === 'market-cap' ? '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={`/stocks/${$stockTicker}/stats/employees`} on:click={() => (changeSubSection('employees'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'employees' ? 'text-white ' : 'bg-[#09090B]'}" >
-                            Employees
-                          </a>
-                          <div class="{displaySubSection === 'employees' ? '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={`/stocks/${$stockTicker}/stats/income`} on:click={() => (changeSubSection('income'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'income' ? 'text-white ' : 'bg-[#09090B]'}" >
-                            Income
-                          </a>
-                          <div class="{displaySubSection === 'income' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/balance-sheet`} on:click={() => (changeSubSection('balance-sheet'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'balance-sheet' ? 'text-white ' : 'bg-[#09090B]'}" >
-                            Balance
-                          </a>
-                          <div class="{displaySubSection === 'balance-sheet' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/cash-flow`} on:click={() => (changeSubSection('cash-flow'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'cash-flow' ? 'text-white ' : 'bg-[#09090B]'}" >
-                            Cashflow
-                          </a>
-                          <div class="{displaySubSection === 'cash-flow' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/ratios`} on:click={() => (changeSubSection('ratios'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ratios' ? 'text-white ' : 'bg-[#09090B]'}" >
-                            Ratios
-                          </a>
-                          <div class="{displaySubSection === 'ratios' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
-                        </li>
-                      </ul>
-                    </div>
-
-                    
-                </div>
-
-            </main>
-
-            <slot/>
+    <main class="w-fit sm:w-full sm:max-w-2xl">
+      <div class="m-auto">
+        <div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2">
+          <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/stats`}
+                on:click={() => changeSubSection("overview")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Overview
+              </a>
+              <div class="{displaySubSection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/stats/ratios`}
+                on:click={() => changeSubSection("ratios")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ratios' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Ratios
+              </a>
+              <div class="{displaySubSection === 'ratios' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/stats/income`}
+                on:click={() => changeSubSection("income")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'income' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Income
+              </a>
+              <div class="{displaySubSection === 'income' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/stats/cash-flow`}
+                on:click={() => changeSubSection("cash-flow")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'cash-flow' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Cashflow
+              </a>
+              <div class="{displaySubSection === 'cash-flow' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/stats/balance-sheet`}
+                on:click={() => changeSubSection("balance-sheet")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'balance-sheet' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Balance
+              </a>
+              <div class="{displaySubSection === 'balance-sheet' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/stats/market-cap`}
+                on:click={() => changeSubSection("market-cap")}
+                class="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'market-cap' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Market Cap
+              </a>
+              <div class="{displaySubSection === 'market-cap' ? '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={`/stocks/${$stockTicker}/stats/employees`}
+                on:click={() => changeSubSection("employees")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'employees' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Employees
+              </a>
+              <div class="{displaySubSection === 'employees' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
+            </li>
+          </ul>
         </div>
+      </div>
+    </main>
+
+    <slot />
+  </div>
 </section>
 
-
-
-
 <style>
-    .scrollbar {
+  .scrollbar {
     display: grid;
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
@@ -123,15 +134,15 @@ function changeSubSection(state) {
     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 {
+  /* 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 {
+  .scrollbar::-webkit-scrollbar-thumb {
     background: transparent; /* Make the thumb transparent */
-}
-</style>
\ No newline at end of file
+  }
+</style>
diff --git a/src/routes/stocks/[tickerID]/stats/+page.svelte b/src/routes/stocks/[tickerID]/stats/+page.svelte
index 435b0907..8376d055 100644
--- a/src/routes/stocks/[tickerID]/stats/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/+page.svelte
@@ -1,40 +1,39 @@
 <script lang="ts">
+  import Lazy from "$lib/components/Lazy.svelte";
+  import ReturnCard from "$lib/components/ReturnCard.svelte";
+  import { numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker, revenueSegmentationComponent } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
 
-import ReturnCard from '$lib/components/ReturnCard.svelte'
-import {numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker} from '$lib/store';
-import { abbreviateNumber } from '$lib/utils';
+  export let data;
 
-export let data;
+  let quantStats = {};
+  let stockQuote;
 
+  let marketCap = "-";
 
-let quantStats = {};
-let stockQuote;
+  let currentPrice = 0;
+  let previousClose = "-";
+  let volume = "-";
+  let eps = "-";
+  let pe = "-";
+  let alpha = "-";
+  let beta = "-";
 
+  // Function to check if a date is today or yesterday, adjusting for weekends
+  function ongoingDD(dateString: string) {
+    const date = new Date(dateString);
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
 
-let marketCap = '-';
-
-
-let currentPrice = 0;
-let previousClose = '-';
-let volume = '-';
-let eps = '-';
-let pe = '-';
-let alpha = '-';
-let beta = '-';
-    
-// Function to check if a date is today or yesterday, adjusting for weekends
-function ongoingDD(dateString) {
-  const date = new Date(dateString);
-  const today = new Date();
-  const yesterday = new Date(today);
-  yesterday.setDate(yesterday.getDate() - 1);
-
-  // Adjust today to Friday if it's Saturday or Sunday
-  if (today.getDay() === 6) { // Saturday
-    today.setDate(today.getDate() - 1); // Set to Friday
-  } else if (today.getDay() === 0) { // Sunday
-    today.setDate(today.getDate() - 2); // Set to Friday
-  }
+    // Adjust today to Friday if it's Saturday or Sunday
+    if (today.getDay() === 6) {
+      // Saturday
+      today.setDate(today.getDate() - 1); // Set to Friday
+    } else if (today.getDay() === 0) {
+      // Sunday
+      today.setDate(today.getDate() - 2); // Set to Friday
+    }
 
   return date.getDate() === today.getDate() &&
           date.getMonth() === today.getMonth() &&
@@ -76,988 +75,861 @@ if (progressYearPriceValue < currentPrice) {
         
 
 
-stockQuote = data?.getStockQuote;
-quantStats = data?.getQuantStats ?? {};
+  stockQuote = data?.getStockQuote;
+  quantStats = data?.getQuantStats ?? {};
 
 
 
-/*
+  /*
 updateDayRange()
 updateYearRange()
 */
-
 </script>
-          
 
 <svelte:head>
-
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Statistics & Valuation Metrics · stocknear
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Statistics & Valuation Metrics · stocknear
   </title>
   <meta name="description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
-  
+
   <!-- Other meta tags -->
-  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}/>
+  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`} />
   <meta property="og:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
-  <meta property="og:type" content="website"/>
+  <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={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}/>
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`} />
   <meta name="twitter:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
   <!-- Add more Twitter meta tags as needed -->
-
 </svelte:head>
-  
-
 
 <section class="text-white w-full">
   <div class="sm:p-7 m-auto">
     <div class="mb-6">
-        <h1 class="text-2xl sm:text-3xl text-white font-bold mb-5">
-          Fundamental Data
-        </h1>
+      <h1 class="text-2xl sm:text-3xl text-white font-bold mb-5">Fundamental Data</h1>
 
-        <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
-          <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" 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>
-          Get detailed Fundamental insights of {$displayCompanyName} and compare it to the S&P500.
-        </div>
+      <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
+        <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
+          ><path fill="#a474f6" 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
+        >
+        Get detailed Fundamental insights of {$displayCompanyName} and compare it to the S&P500.
+      </div>
 
-        {#if Object?.keys(quantStats)?.length !== 0}
-
-
-         <!--Start Widget-->
-         <div class="w-full mt-5 mb-5 flex justify-start items-center">
-          <div class="w-full grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-3 gap-x-3 ">
+      {#if Object?.keys(quantStats)?.length !== 0}
+        <!--Start Widget-->
+        <div class="w-full mt-5 mb-5 flex justify-center items-center">
+          <div class="w-full grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-3 gap-x-3">
+            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
+              <div class="flex flex-col items-center w-full p-3">
+                <span class="font-medium text-white text-xl font-semibold">YTD Return</span>
+                <div class="grid grid-cols-3 w-full mt-2">
+                  <div class="flex flex-col items-center">
+                    <span class="text-center text-white font-semibold">{$stockTicker}</span>
+                    <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["YTD %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#F71F4F]">{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </span>
+                  </div>
+                  <div class="text-center text-white">vs.</div>
+                  <div class="flex flex-col items-center">
+                    <span class="text-center text-white font-semibold">SPY</span>
+                    <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
+                      {#if quantStats["SPY"]["YTD %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["YTD %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#F71F4F]">{quantStats["SPY"]["YTD %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
 
             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
               <div class="flex flex-col items-center w-full p-3">
-                  <span class="font-medium text-white text-xl font-semibold">YTD Return</span>
-                  <div class="grid grid-cols-3 w-full mt-2">
-                      <div class="flex flex-col items-center">
-                          <span class="text-center text-white font-semibold">{$stockTicker}</span>
-                          <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
-                            {#if quantStats[$stockTicker?.toUpperCase()]["YTD %"] >=0}
-                              <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}%</span>
-                            {:else}
-                              <span class="text-[#F71F4F] ">{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}% </span> 
-                            {/if}
-                          </span>
-                      </div>
-                      <div class="text-center text-white">
-                          vs.
-                      </div>
-                      <div class="flex flex-col items-center">
-                          <span class="text-center text-white font-semibold">SPY</span>
-                          <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
-                            {#if quantStats['SPY']["YTD %"] >=0}
-                              <span class="text-[#22C55E]">+{quantStats['SPY']["YTD %"]?.toFixed(2)}%</span>
-                            {:else}
-                              <span class="text-[#F71F4F] ">{quantStats['SPY']["YTD %"]?.toFixed(2)}% </span> 
-                            {/if}
-                          </span>
-                      </div>
-                  </div>
-              </div>
-          </div>
-          
-          
-          <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
-            <div class="flex flex-col items-center w-full p-3">
                 <span class="font-medium text-white text-xl font-semibold">1-Year Return</span>
                 <div class="grid grid-cols-3 w-full mt-2">
-                    <div class="flex flex-col items-center">
-                        <span class="text-center text-white font-semibold">{$stockTicker}</span>
-                        <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
-                          {#if quantStats[$stockTicker?.toUpperCase()]["1Y %"] >=0}
-                            <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}%</span>
-                          {:else}
-                            <span class="text-[#F71F4F] ">{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}% </span> 
-                          {/if}
-                        </span>
-                    </div>
-                    <div class="text-center text-white">
-                        vs.
-                    </div>
-                    <div class="flex flex-col items-center">
-                        <span class="text-center text-white font-semibold">SPY</span>
-                        <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
-                          {#if quantStats['SPY']["1Y %"] >=0}
-                            <span class="text-[#22C55E]">+{quantStats['SPY']["1Y %"]?.toFixed(2)}%</span>
-                          {:else}
-                            <span class="text-[#F71F4F] ">{quantStats['SPY']["1Y %"]?.toFixed(2)}% </span> 
-                          {/if}
-                        </span>
-                    </div>
+                  <div class="flex flex-col items-center">
+                    <span class="text-center text-white font-semibold">{$stockTicker}</span>
+                    <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["1Y %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#F71F4F]">{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </span>
+                  </div>
+                  <div class="text-center text-white">vs.</div>
+                  <div class="flex flex-col items-center">
+                    <span class="text-center text-white font-semibold">SPY</span>
+                    <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
+                      {#if quantStats["SPY"]["1Y %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["1Y %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#F71F4F]">{quantStats["SPY"]["1Y %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </span>
+                  </div>
                 </div>
-            </div>
-        </div>
-
-
-        <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
-          <div class="flex flex-col items-center w-full p-3">
-              <span class="font-medium text-white text-xl font-semibold">3-Year Return</span>
-              <div class="grid grid-cols-3 w-full mt-2">
-                  <div class="flex flex-col items-center">
-                      <span class="text-center text-white font-semibold">{$stockTicker}</span>
-                      <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"] >=0}
-                          <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}%</span>
-                        {:else}
-                          <span class="text-[#F71F4F] ">{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}% </span> 
-                        {/if}
-                      </span>
-                  </div>
-                  <div class="text-center text-white">
-                      vs.
-                  </div>
-                  <div class="flex flex-col items-center">
-                      <span class="text-center text-white font-semibold">SPY</span>
-                      <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
-                        {#if quantStats['SPY']["3Y (ann.) %"] >=0}
-                          <span class="text-[#22C55E]">+{quantStats['SPY']["3Y (ann.) %"]?.toFixed(2)}%</span>
-                        {:else}
-                          <span class="text-[#F71F4F] ">{quantStats['SPY']["3Y (ann.) %"]?.toFixed(2)}% </span> 
-                        {/if}
-                      </span>
-                  </div>
               </div>
+            </div>
+
+            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
+              <div class="flex flex-col items-center w-full p-3">
+                <span class="font-medium text-white text-xl font-semibold">3-Year Return</span>
+                <div class="grid grid-cols-3 w-full mt-2">
+                  <div class="flex flex-col items-center">
+                    <span class="text-center text-white font-semibold">{$stockTicker}</span>
+                    <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#F71F4F]">{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </span>
+                  </div>
+                  <div class="text-center text-white">vs.</div>
+                  <div class="flex flex-col items-center">
+                    <span class="text-center text-white font-semibold">SPY</span>
+                    <span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
+                      {#if quantStats["SPY"]["3Y (ann.) %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["3Y (ann.) %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#F71F4F]">{quantStats["SPY"]["3Y (ann.) %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-      </div>
-      
-        
-
         </div>
-      </div>
 
-      <!--End Widget-->
+        <!--End Widget-->
 
+        <!--Start RevenueSegmentation-->
+        <Lazy>
+          <div class="w-full pt-10 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/RevenueSegmentation.svelte") then { default: Comp }}
+              <svelte:component this={Comp} apiURL={data?.apiURL} apiKey={data?.apiKey} userTier={data?.user?.tier} />
+            {/await}
+          </div>
+        </Lazy>
+        <!--End RevenueSegmentation-->
 
         <div class="grid grid-cols-1 gap-2 mt-10">
           
              
 
-              {#if $stockTicker in quantStats && Object.keys(quantStats[$stockTicker]).length > 0}
-
-              <h3 class="text-start w-full mt-8 mb-2 text-lg sm:text-2xl font-bold text-white">
-                Worst 10 Drawdowns of {$stockTicker}
-              </h3>
-              <div class="w-full overflow-x-scroll">
-                <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
-                  <thead>
-                    <tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
-                      <th class="text-start text-sm sm:text-[1rem] ">Started</th>
-                      <th class="text-sm sm:text-[1rem] text-end">Recovered</th>
-                      <th class="text-sm sm:text-[1rem] text-end">Drawdown</th>
-                      <th class="text-sm sm:text-[1rem] text-end ">Days</th>
-                    </tr>
-                  </thead>
-                  <tbody class="shadow-md">
-                    {#each quantStats[$stockTicker?.toUpperCase()]['Worst 10 Drawdowns'] as item}
-                      <tr class="text-white border-y border-gray-800 odd:bg-[#27272A]">
-                        <td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap">
-                          {new Date(item['Started']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                        </td>
-                        <td class="text-sm sm:text-[1rem]  text-white text-end whitespace-nowrap">
-                          {#if ongoingDD(item['Recovered']) === true}
+          {#if $stockTicker in quantStats && Object.keys(quantStats[$stockTicker]).length > 0}
+            <h3 class="text-start w-full mt-8 mb-2 text-lg sm:text-2xl font-bold text-white">
+              Worst 10 Drawdowns of {$stockTicker}
+            </h3>
+            <div class="w-full overflow-x-scroll">
+              <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
+                <thead>
+                  <tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
+                    <th class="text-start text-sm sm:text-[1rem]">Started</th>
+                    <th class="text-sm sm:text-[1rem] text-end">Recovered</th>
+                    <th class="text-sm sm:text-[1rem] text-end">Drawdown</th>
+                    <th class="text-sm sm:text-[1rem] text-end">Days</th>
+                  </tr>
+                </thead>
+                <tbody class="shadow-md">
+                  {#each quantStats[$stockTicker?.toUpperCase()]["Worst 10 Drawdowns"] as item}
+                    <tr class="text-white border-y border-gray-800 odd:bg-[#27272A]">
+                      <td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap">
+                        {new Date(item["Started"]).toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
+                      </td>
+                      <td class="text-sm sm:text-[1rem] text-white text-end whitespace-nowrap">
+                        {#if ongoingDD(item["Recovered"]) === true}
                           continuing
-                          {:else}
-                          {new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                          {/if}
-                        </td>
-                        <td class="text-start font-semibold text-white text-end text-sm sm:text-[1rem]">
-                          {item['Drawdown']?.toFixed(2)}%
-                        </td> 
-                        <td class="text-end font-semibold text-white text-sm sm:text-[1rem]">
-                          {item['Days']}
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-
-              
-              <h2 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-8 ">
-                {$stockTicker} vs. 
-                S&P500
-              </h2>
-
-              <p class="ml-2 text-[1rem] flex justify-start items-center m-auto text-white ">
-                Comparison of company stats against the S&P500 Index.                                  
-              </p>
-
-              <span class="ml-2 text-start italic text-sm text-gray-300 mt-5 mb-2 sm:mb-5">
-                Time Period between {new Date(quantStats[$stockTicker?.toUpperCase()]["Start Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} 
-                - 
-                {new Date(quantStats[$stockTicker?.toUpperCase()]["End Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-              </span>
-
-
-              <ReturnCard quantData={quantStats} />
-              
-
-
-              <div class="flex flex-col justify-center items-center w-full m-auto overflow-x-scroll no-scrollbar">
-                <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center w-full m-auto">
-                  <thead>
-                    <tr class="bg-[#09090B] text-white text-sm">
-                      <th class="text-start text-sm sm:text-[1rem] font-semibold">
-                        Metric
-                      </th>
-                      <th class="text-end bg-[#09090B] text-sm sm:text-[1rem] font-semibold">
-                        {$stockTicker}
-                      </th>
-                      <th class="text-end text-sm sm:text-[1rem] font-semibold">
-                        S&P500
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Cumulative Return
+                        {:else}
+                          {new Date(item["Recovered"]).toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
+                        {/if}
                       </td>
-                      <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"] >=0}
-                        <span class="text-[#22C55E] ">+{abbreviateNumber(quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"])}%</span>
-                      {:else}
-                        <span class="text-[#FF2F1F] ">{abbreviateNumber(quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"])}% </span> 
-                      {/if}
+                      <td class="text-start font-semibold text-white text-end text-sm sm:text-[1rem]">
+                        {item["Drawdown"]?.toFixed(2)}%
                       </td>
-                      <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Cumulative Return %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Cumulative Return %"]}%</span>
-                      {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Cumulative Return %"]}% </span> 
-                      {/if}
+                      <td class="text-end font-semibold text-white text-sm sm:text-[1rem]">
+                        {item["Days"]}
                       </td>
                     </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Compound Annual Growth Rate (CAGR)
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["CAGR %"] >=0}
+            <h2 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-8">
+              {$stockTicker} vs. S&P500
+            </h2>
+
+            <p class="ml-2 text-[1rem] flex justify-start items-center m-auto text-white">Comparison of company stats against the S&P500 Index.</p>
+
+            <span class="ml-2 text-start italic text-sm text-gray-300 mt-5 mb-2 sm:mb-5">
+              Time Period between {new Date(quantStats[$stockTicker?.toUpperCase()]["Start Period"]).toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
+              -
+              {new Date(quantStats[$stockTicker?.toUpperCase()]["End Period"]).toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
+            </span>
+
+            <ReturnCard quantData={quantStats} />
+
+            <div class="flex flex-col justify-center items-center w-full m-auto overflow-x-scroll no-scrollbar">
+              <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center w-full m-auto">
+                <thead>
+                  <tr class="bg-[#09090B] text-white text-sm">
+                    <th class="text-start text-sm sm:text-[1rem] font-semibold"> Metric </th>
+                    <th class="text-end bg-[#09090B] text-sm sm:text-[1rem] font-semibold">
+                      {$stockTicker}
+                    </th>
+                    <th class="text-end text-sm sm:text-[1rem] font-semibold"> S&P500 </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Cumulative Return </td>
+                    <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"] >= 0}
+                        <span class="text-[#22C55E]">+{abbreviateNumber(quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"])}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{abbreviateNumber(quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"])}% </span>
+                      {/if}
+                    </td>
+                    <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Cumulative Return %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Cumulative Return %"]}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Cumulative Return %"]}% </span>
+                      {/if}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Compound Annual Growth Rate (CAGR) </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["CAGR %"] >= 0}
                         <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["CAGR %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["CAGR %"]}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["CAGR %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["CAGR %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["CAGR %"]}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["CAGR %"]}% </span>
                       {/if}
-                      </td>
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Sharpe
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Sharpe"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Sharpe"]?.toFixed(2)}
-                      </td>  
-                    </tr>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Sharpe </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Sharpe"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Sharpe"]?.toFixed(2)}
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] ">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Sortino
-                      </td>
-                      <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Sortino"]?.toFixed(2)}
-                      </td>
-                      <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Sortino"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-                    
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                          Max Drawdown
-                        </td>
-                        <td class="text-start text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}% </span> 
-                        {/if}
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {#if quantStats['SPY']["Max Drawdown"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats['SPY']["Max Drawdown"]}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats['SPY']["Max Drawdown"]}% </span> 
-                        {/if}
-                        </td>  
-                      </tr>
-  
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                          Longest Drawdown Days
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats[$stockTicker?.toUpperCase()]["Longest DD Days"]}
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats['SPY']["Longest DD Days"]}
-                        </td>  
-                      </tr>
-                    
-  
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                          Volatility (ann.)
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats[$stockTicker?.toUpperCase()]["Volatility (ann.) %"]}%
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats['SPY']["Volatility (ann.) %"]}%
-                        </td>  
-                      </tr>
-  
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                          Correlation
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats[$stockTicker?.toUpperCase()]["Correlation"]}%
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats['SPY']["Correlation"]}
-                        </td>  
-                      </tr>
-  
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                          R^2
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats[$stockTicker?.toUpperCase()]["R^2"]}
-                        </td>
-                        <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats['SPY']["R^2"]}
-                        </td>  
-                      </tr>
-  
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                          Calmar
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats[$stockTicker?.toUpperCase()]["Calmar"]}
-                        </td>
-                        <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats['SPY']["Calmar"]}
-                        </td>  
-                      </tr>
-  
-  
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                          Skew
-                        </td>
-                        <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats[$stockTicker?.toUpperCase()]["Skew"]?.toFixed(2)}
-                        </td>
-                        <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats['SPY']["Skew"]?.toFixed(2)}
-                        </td>  
-                      </tr>
-  
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                        <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                          Kurtosis
-                        </td>
-                        <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats[$stockTicker?.toUpperCase()]["Kurtosis"]?.toFixed(2)}
-                        </td>
-                        <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                          {quantStats['SPY']["Kurtosis"]?.toFixed(2)}
-                        </td>  
-                      </tr>
-                        
+                  <tr class="text-white odd:bg-[#27272A]">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Sortino </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Sortino"]?.toFixed(2)}
+                    </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Sortino"]?.toFixed(2)}
+                    </td>
+                  </tr>
 
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
-                        Expected Daily
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}% </span> 
-                        {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats['SPY']["Expected Daily %"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats['SPY']["Expected Daily %"]}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats['SPY']["Expected Daily %"]}% </span> 
-                        {/if}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Expected Monthly
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}% </span> 
-                        {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats['SPY']["Expected Monthly %"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats['SPY']["Expected Monthly %"]}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats['SPY']["Expected Monthly %"]}% </span> 
-                        {/if}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Expected Yearly
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}% </span> 
-                        {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats['SPY']["Expected Yearly %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Expected Yearly %"]}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Drawdown </td>
+                    <td class="text-start text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Expected Yearly %"]}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}% </span>
                       {/if}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Kelly Criterion
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Kelly Criterion %"]}%
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Kelly Criterion %"]}%
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Risk of Ruin
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Risk of Ruin %"]}%
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Risk of Ruin %"]}%
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Daily Value-at-Risk
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"] >=0}
-                          <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
-                        {:else}
-                          <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}% </span> 
-                        {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Daily Value-at-Risk %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Max Drawdown"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Max Drawdown"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Daily Value-at-Risk %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Max Drawdown"]}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Expected Shortfall (cVaR)
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Longest Drawdown Days </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Longest DD Days"]}
+                    </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Longest DD Days"]}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Volatility (ann.) </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Volatility (ann.) %"]}%
+                    </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Volatility (ann.) %"]}%
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Correlation </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Correlation"]}%
+                    </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Correlation"]}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> R^2 </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["R^2"]}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["R^2"]}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Calmar </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Calmar"]}
+                    </td>
+                    <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Calmar"]}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Skew </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Skew"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Skew"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Kurtosis </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Kurtosis"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Kurtosis"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Expected Daily </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Expected Shortfall (cVaR) %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Expected Daily %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Daily %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Daily %"]}% </span>
                       {/if}
-                      </td>  
-                    </tr>
-                      
+                    </td>
+                  </tr>
 
-                      <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Max Consecutive Wins
-                      </td>
-                      <td class="text-start text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Max Consecutive Wins"]}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
-                        Max Consecutive Losses
-                      </td>
-                      <td class="text-start text-end text-sm sm:text-[1rem]">
-                        {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Losses"]}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Max Consecutive Losses"]}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
-                        Gain/Pain Ratio
-                      </td>
-                      <td class="text-start text-end text-sm sm:text-[1rem]">
-                        {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain Ratio"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Gain/Pain Ratio"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-                    
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Gain/Pain (1M)
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain (1M)"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Gain/Pain (1M)"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Payoff Ratio
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Payoff Ratio"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Payoff Ratio"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Profit Factor
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Profit Factor"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Profit Factor"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Outlier Win Ratio
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Outlier Win Ratio"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Outlier Win Ratio"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Outlier Loss Ratio
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Outlier Loss Ratio"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Outlier Loss Ratio"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-                      
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        MTD
-                      </td>
-                      <td class="text-start text-end text-sm sm:text-[1rem]">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["MTD %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Monthly </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["MTD %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["MTD %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Expected Monthly %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Monthly %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["MTD %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Monthly %"]}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        3M
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["3M %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Yearly </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["3M %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["3M %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Expected Yearly %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Yearly %"]}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["3M %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Yearly %"]}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        6M
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["6M %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Kelly Criterion </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Kelly Criterion %"]}%
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Kelly Criterion %"]}%
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Risk of Ruin </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Risk of Ruin %"]}%
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Risk of Ruin %"]}%
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Daily Value-at-Risk </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats['SPY']["6M %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["6M %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Daily Value-at-Risk %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["6M %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Daily Value-at-Risk %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
-                        Best Day
-                      </td>
-                      <td class="text-start text-end text-sm">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Best Day %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Shortfall (cVaR) </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Best Day %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Best Day %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Expected Shortfall (cVaR) %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Best Day %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Worst Day
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Consecutive Wins </td>
+                    <td class="text-start text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Max Consecutive Wins"]}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Consecutive Losses </td>
+                    <td class="text-start text-end text-sm sm:text-[1rem]">
+                      {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Losses"]}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Max Consecutive Losses"]}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Gain/Pain Ratio </td>
+                    <td class="text-start text-end text-sm sm:text-[1rem]">
+                      {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain Ratio"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Gain/Pain Ratio"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Gain/Pain (1M) </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain (1M)"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Gain/Pain (1M)"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Payoff Ratio </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Payoff Ratio"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Payoff Ratio"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Profit Factor </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Profit Factor"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Profit Factor"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Outlier Win Ratio </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Outlier Win Ratio"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Outlier Win Ratio"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Outlier Loss Ratio </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Outlier Loss Ratio"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Outlier Loss Ratio"]?.toFixed(2)}
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> MTD </td>
+                    <td class="text-start text-end text-sm sm:text-[1rem]">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["MTD %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Worst Day %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Worst Day %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["MTD %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["MTD %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Worst Day %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["MTD %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Best Month
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["Best Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Best Month %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> 3M </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["3M %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Best Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats['SPY']["Best Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Best Month %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["3M %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["3M %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Best Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["3M %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Worst Month
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats[$stockTicker?.toUpperCase()]["Worst Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> 6M </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["6M %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats['SPY']["Worst Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Worst Month %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["6M %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["6M %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Worst Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["6M %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Best Year
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Best Year %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Best Day </td>
+                    <td class="text-start text-end text-sm">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Best Day %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Best Year %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Best Year %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Best Day %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Best Day %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Best Year %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Best Day %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Worst Year
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Worst Year %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Day </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {#if quantStats['SPY']["Worst Year %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Worst Year %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Worst Day %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Worst Day %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Worst Year %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Worst Day %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
-                      
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Avg. Drawdown
-                      </td>
-                      <td class="text-start text-end ttext-sm sm:text-[1rem]">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}%</span>
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Best Month </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Best Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Best Month %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Best Month %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Avg. Drawdown"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Avg. Drawdown"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Best Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Best Month %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Avg. Drawdown"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Best Month %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Avg. Drawdown Days
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown Days"]}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Avg. Drawdown Days"]}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Recovery Factor
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Recovery Factor"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Recovery Factor"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Ulcer Index
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Ulcer Index"]?.toFixed(2)}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Ulcer Index"]?.toFixed(2)}
-                      </td>  
-                    </tr>
-                      
-
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Avg. Up Month
-                      </td>
-                      <td class="text-start text-end text-sm sm:text-[1rem]">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Month </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Worst Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Avg. Up Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Avg. Up Month %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Worst Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Worst Month %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Avg. Up Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Worst Month %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Avg. Down Month
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}%</span>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Best Year </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Best Year %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                      {#if quantStats['SPY']["Avg. Down Month %"] >=0}
-                        <span class="text-[#22C55E] ">+{quantStats['SPY']["Avg. Down Month %"]?.toFixed(2)}%</span>
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Best Year %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Best Year %"]?.toFixed(2)}%</span>
                       {:else}
-                        <span class="text-[#FF2F1F] ">{quantStats['SPY']["Avg. Down Month %"]?.toFixed(2)}% </span> 
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Best Year %"]?.toFixed(2)}% </span>
                       {/if}
-                      </td>  
-                    </tr>
+                    </td>
+                  </tr>
 
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Year </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Worst Year %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Worst Year %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Worst Year %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Worst Year %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Win Days
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Win Days %"]?.toFixed(2)}%
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Win Days %"]?.toFixed(2)}%
-                      </td>  
-                    </tr>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Drawdown </td>
+                    <td class="text-start text-end ttext-sm sm:text-[1rem]">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Avg. Drawdown"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Avg. Drawdown"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Avg. Drawdown"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Win Month
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Win Month %"]?.toFixed(2)}%
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Win Month %"]?.toFixed(2)}%
-                      </td>  
-                    </tr>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Drawdown Days </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown Days"]}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Avg. Drawdown Days"]}
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Win Quarter
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Win Quarter %"]?.toFixed(2)}%
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Win Quarter %"]?.toFixed(2)}%
-                      </td>  
-                    </tr>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Recovery Factor </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Recovery Factor"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Recovery Factor"]?.toFixed(2)}
+                    </td>
+                  </tr>
 
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
-                        Win Year
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats[$stockTicker?.toUpperCase()]["Win Year %"]?.toFixed(2)}%
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                        {quantStats['SPY']["Win Year %"]?.toFixed(2)}%
-                      </td>  
-                    </tr>
-                      
-                  </tbody>
-                </table>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Ulcer Index </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Ulcer Index"]?.toFixed(2)}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Ulcer Index"]?.toFixed(2)}
+                    </td>
+                  </tr>
 
-              </div>
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Up Month </td>
+                    <td class="text-start text-end text-sm sm:text-[1rem]">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Avg. Up Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Avg. Up Month %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Avg. Up Month %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                  </tr>
 
-            
-              {:else}
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Down Month </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {#if quantStats["SPY"]["Avg. Down Month %"] >= 0}
+                        <span class="text-[#22C55E]">+{quantStats["SPY"]["Avg. Down Month %"]?.toFixed(2)}%</span>
+                      {:else}
+                        <span class="text-[#FF2F1F]">{quantStats["SPY"]["Avg. Down Month %"]?.toFixed(2)}% </span>
+                      {/if}
+                    </td>
+                  </tr>
 
-              <h1 class="m-auto mt-10 text-slate-400 text-2xl ">
-                <svg class="w-10 sm: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>
-              </h1>
-              {/if}
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Days </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Win Days %"]?.toFixed(2)}%
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Win Days %"]?.toFixed(2)}%
+                    </td>
+                  </tr>
 
-              
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Month </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Win Month %"]?.toFixed(2)}%
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Win Month %"]?.toFixed(2)}%
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Quarter </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Win Quarter %"]?.toFixed(2)}%
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Win Quarter %"]?.toFixed(2)}%
+                    </td>
+                  </tr>
+
+                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Year </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats[$stockTicker?.toUpperCase()]["Win Year %"]?.toFixed(2)}%
+                    </td>
+                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
+                      {quantStats["SPY"]["Win Year %"]?.toFixed(2)}%
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          {:else}
+            <h1 class="m-auto mt-10 text-slate-400 text-2xl">
+              <svg class="w-10 sm: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
+              >
+            </h1>
+          {/if}
         </div>
-        {:else}
-          <h2 class=" mt-16 flex justify-center items-center text-3xl font-medium text-slate-700 mb-5 m-auto">
-            No data available
-        </h2>
-        {/if}
-        
-      </div>
-</section>
\ No newline at end of file
+      {:else}
+        <h2 class=" mt-16 flex justify-center items-center text-3xl font-medium text-slate-700 mb-5 m-auto">No data available</h2>
+      {/if}
+    </div>
+  </div>
+</section>