From 12f52be6ffc839d50faed48d5a63bddcd1bfb7f2 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 17 Nov 2024 13:39:12 +0100
Subject: [PATCH] refactor etf page

---
 src/lib/components/ETFKeyInformation.svelte |  176 --
 src/lib/components/ETFSidecard.svelte       |  305 ++++
 src/lib/components/News.svelte              |    4 +-
 src/routes/etf/+page.svelte                 |    1 -
 src/routes/etf/[tickerID]/+layout.server.ts |   20 +-
 src/routes/etf/[tickerID]/+layout.svelte    |  664 ++------
 src/routes/etf/[tickerID]/+layout.ts        |   14 +-
 src/routes/etf/[tickerID]/+page.server.ts   |    7 +-
 src/routes/etf/[tickerID]/+page.svelte      | 1674 ++++++++++---------
 src/routes/stocks/[tickerID]/+page.svelte   |   32 +-
 10 files changed, 1355 insertions(+), 1542 deletions(-)
 delete mode 100644 src/lib/components/ETFKeyInformation.svelte
 create mode 100644 src/lib/components/ETFSidecard.svelte

diff --git a/src/lib/components/ETFKeyInformation.svelte b/src/lib/components/ETFKeyInformation.svelte
deleted file mode 100644
index 7f181a11..00000000
--- a/src/lib/components/ETFKeyInformation.svelte
+++ /dev/null
@@ -1,176 +0,0 @@
-<script lang="ts">
-
-  import ETFProfileCard from '$lib/components/ETFProfileCard.svelte';
-  import SimilarETFCard from '$lib/components/SimilarETFCard.svelte';
-  import TopHoldingCard from '$lib/components/TopHoldingCard.svelte';
-  import { similarTickerClicked } from '$lib/store';
-	import DividendCard from './DividendCard.svelte';
-
-  export let etfProfile;
-  export let data;
-  export let similarTicker;
-  export let topHoldingList;
-  export let dividendList;
-  
-  
-
-  $: {
-    if($similarTickerClicked)
-    {
-        const closePopup = document.getElementById("similarTickerModal");
-
-        closePopup?.dispatchEvent(new MouseEvent('click'))
-        $similarTickerClicked = false;
-    }
-}
-  
-  
-
-    
-    </script>
-    
-    
-    <section class="mt-4">
-
-
-      <div class="grid grid-cols-3 gap-x-4 gap-y-2">
-        <label for="tickerModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
-          Details
-        </label>
-        
-        <label for="topHoldingModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
-          Holdings
-        </label>
-        
-        <label for="dividendModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
-          Dividends
-        </label>
-        <label for="similarTickerModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
-          Similar
-        </label>
-    
-      </div>
-
-
-    </section>
-
-
-    
-    
-<!--Start ETF Modal-->
-<div class="drawer drawer-end z-40 overflow-hidden w-screen">
-  <input id="tickerModal" type="checkbox" class="drawer-toggle"/>
-  <div class="drawer-side overflow-hidden">
-  
-      
-    <div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
-
-        <label for="tickerModal" class="absolute left-6 top-6">
-          <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-        </label>
-
-  
-  <div class="w-screen overflow-y-scroll" >
-
-    <ETFProfileCard data={data} etfProfile = {etfProfile}/>
-
-        
-  </div>
-
-</div>
-</div>
-</div>
-  <!--End ETF Modal-->
-
-
-  <!--Start Similar Modal-->
-<div class="drawer drawer-end z-40 overflow-hidden w-screen">
-  <input id="similarTickerModal" type="checkbox" class="drawer-toggle"/>
-  <div class="drawer-side overflow-hidden">
-  
-      
-    <div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
-
-        <label for="similarTickerModal" class="absolute left-6 top-6">
-          <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-        </label>
-
-  
-      <div class="w-screen overflow-y-scroll" >
-        <SimilarETFCard similarTicker={similarTicker}/>
-      </div>
-
-    </div>
-  </div>
-</div>
-<!--End Similar Modal-->
-
-
-  <!--Start Top Holding Modal-->
-  <div class="drawer drawer-end z-40 overflow-hidden w-screen">
-    <input id="topHoldingModal" type="checkbox" class="drawer-toggle"/>
-    <div class="drawer-side overflow-hidden">
-    
-        
-      <div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
-  
-          <label for="topHoldingModal" class="absolute left-6 top-6">
-            <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-          </label>
-
-            <!--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">
-                  Top Holdings
-                </h2>
-                <div class="flex flex-col items-center mt-8 w-full">
-                  <span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
-                    Discover the primary holdings within the ETF's composition.
-                  </span>
-
-                  <div class="flex flex-row justify-center items-center w-full mt-5">
-                  </div>
-
-                </div>
-
-              </div>
-              <!--End Header-->
-  
-    
-    <div class="w-screen overflow-y-scroll" >
-  
-      <TopHoldingCard topHoldingList = {topHoldingList}/>
-  
-          
-    </div>
-  
-  </div>
-  </div>
-  </div>
-    <!--End Top Holding Modal-->
-
-
-<!--Start Dividend Modal-->
-  <div class="drawer drawer-end z-40 overflow-hidden w-screen">
-    <input id="dividendModal" type="checkbox" class="drawer-toggle"/>
-    <div class="drawer-side overflow-hidden">
-    
-        
-      <div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
-  
-          <label for="dividendModal" class="absolute left-6 top-6">
-            <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-          </label>
-  
-    
-    <div class="w-screen overflow-y-scroll" >
-  
-      <DividendCard dividendList = {dividendList}/>
-  
-          
-    </div>
-  
-  </div>
-  </div>
-  </div>
-    <!--End Dividend Modal-->
\ No newline at end of file
diff --git a/src/lib/components/ETFSidecard.svelte b/src/lib/components/ETFSidecard.svelte
new file mode 100644
index 00000000..5e6bd8a2
--- /dev/null
+++ b/src/lib/components/ETFSidecard.svelte
@@ -0,0 +1,305 @@
+<script lang="ts">
+  import { etfTicker, stockTicker, cryptoTicker } from "$lib/store";
+  import { formatETFName, formatString, abbreviateNumber } from "$lib/utils";
+  import defaultLogo from "$lib/images/stocks/logo/default_logo.png";
+
+  import { goto } from "$app/navigation";
+
+  export let data;
+
+  let info;
+  let topHoldingList = [];
+  let description = "";
+  let website = "-";
+  let snippet;
+
+  let ipoDate = "n/a";
+  let assetClass = "-";
+  let provider = "-";
+  let showFullText = false;
+  let totalAssetPercentage = 0;
+
+  let dividendHistoryList = [];
+  let dividendYield;
+
+  async function stockSelector(ticker: string) {
+    if (ticker?.length !== 0 && !["BTC", "USD"]?.includes(ticker)) {
+      window?.scroll({ top: 0, left: 0, behavior: "smooth" });
+      stockTicker.update((value) => ticker);
+      goto("/stocks/" + ticker + "/");
+    } else if (ticker === "BTC") {
+      window?.scroll({ top: 0, left: 0, behavior: "smooth" });
+      cryptoTicker.update((value) => "BTCUSD");
+      goto("/crypto/BTCUSD");
+    }
+  }
+
+  $: {
+    if ($etfTicker && typeof window !== "undefined") {
+      info = data?.getETFProfile?.at(0);
+      topHoldingList = data?.getETFHoldings;
+      dividendHistoryList = data?.getStockDividend?.history;
+      dividendYield = data?.getStockDividend?.dividendYield;
+      provider = info?.etfProvider;
+      assetClass = info?.assetClass;
+      ipoDate =
+        info?.inceptionDate !== null
+          ? new Date(info?.inceptionDate)?.toLocaleString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+              daySuffix: "2-digit",
+            })
+          : "n/a";
+
+      description =
+        info?.description ??
+        "A detailed description of the company is not yet available.";
+      website = info?.website;
+      snippet = description?.slice(0, 450) + "...";
+
+      totalAssetPercentage = topHoldingList
+        ?.slice(0, 5)
+        ?.reduce((acc, current) => acc + current?.weightPercentage, 0)
+        ?.toFixed(2);
+    }
+  }
+</script>
+
+<div class="px-0.5 lg:px-0">
+  <h2 class="mb-2 text-2xl text-white font-semibold">
+    About {$etfTicker}
+  </h2>
+  <p class="text-gray-200">
+    {#if showFullText}
+      {description}
+    {:else}
+      {snippet}
+    {/if}
+  </p>
+  {#if description.length !== 0}
+    <div class="inline-block">
+      <label
+        on:click={() => (showFullText = !showFullText)}
+        class="w-full text-md mt-1 cursor-pointer font-medium sm:hover:text-white text-blue-400 sm:hover:underline"
+      >
+        {#if showFullText}
+          [Show less]
+        {:else}
+          [Show more]
+        {/if}
+      </label>
+    </div>
+  {/if}
+
+  <div
+    class="mt-3 grid grid-cols-2 gap-3 w-full border-b border-gray-600 lg:border-none pb-8 lg:pb-0"
+  >
+    <div class="col-span-1 text-gray-200">
+      <span class="block font-semibold">Asset Class</span>
+      <span class=" text-white">{assetClass}</span>
+    </div>
+    <div class="col-span-1 text-gray-200">
+      <span class="block font-semibold">Ticker Symbol</span>
+      {$etfTicker}
+    </div>
+    <div class="col-span-1 text-gray-200">
+      <span class="block font-semibold">Inception Date</span>
+      <span>{ipoDate}</span>
+    </div>
+    <div class="col-span-1 text-gray-200">
+      <span class="block font-semibold">Provider</span>
+      <a
+        href={`/etf/etf-providers/${provider}`}
+        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+        >{formatETFName(provider)}</a
+      >
+    </div>
+
+    <div class="col-span-1 whitespace-nowrap text-gray-200">
+      <span class="block font-semibold">Website</span>
+      <a
+        href={website}
+        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+        target="_blank">Fund Home Page</a
+      >
+    </div>
+  </div>
+</div>
+
+{#if topHoldingList?.length !== 0}
+  <div
+    class="space-y-3 sm:pt-5 hidden sm:block sm:{(topHoldingList?.length ?? [])
+      ?.length !== 0
+      ? ''
+      : 'hidden'}"
+  >
+    <div class="h-auto w-full">
+      <!--Start Content-->
+      <div class="w-auto lg:w-full flex flex-col m-auto">
+        <h2
+          class="mb-2 text-2xl text-white font-semibold flex flex-row items-center"
+        >
+          <span>Top Holdings</span>
+          <span class="text-white font-semibold ml-auto text-sm">
+            {totalAssetPercentage}% of assets
+          </span>
+        </h2>
+
+        <div class="mt-2 w-full">
+          <table class="table table-sm table-compact w-full">
+            <thead>
+              <tr>
+                <th
+                  class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]"
+                  >Company</th
+                >
+
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
+                  >Portfolio</th
+                >
+              </tr>
+            </thead>
+            <tbody>
+              {#each topHoldingList?.slice(0, 5) as item}
+                {#if item?.asset !== null}
+                  <tr
+                    on:click={() => stockSelector(item?.asset)}
+                    class="lg:shake-ticker sm:hover:text-white text-blue-400 cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]"
+                  >
+                    <td class="">
+                      <div class="flex flex-row items-center">
+                        <div
+                          class="rounded-full w-10 h-10 relative flex items-center justify-center"
+                        >
+                          <img
+                            style="clip-path: circle(50%);"
+                            class="w-6 h-6 rounded-full"
+                            src={item?.asset?.length !== 0
+                              ? `https://financialmodelingprep.com/image-stock/${item?.asset}.png`
+                              : defaultLogo}
+                            loading="lazy"
+                          />
+                        </div>
+                        <div class="flex flex-col ml-3 w-full">
+                          <span class="text-sm font-medium"
+                            >{item?.asset ?? "-"}</span
+                          >
+                          <span class="text-white text-sm">
+                            {#if typeof item?.name !== "undefined"}
+                              {item?.name?.length > 20
+                                ? formatString(item?.name?.slice(0, 20)) + "..."
+                                : formatString(item?.name)}
+                            {:else}
+                              n/a
+                            {/if}
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+
+                    <td class="text-white font-semibold text-end">
+                      {abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
+                    </td>
+                  </tr>
+                {/if}
+              {/each}
+            </tbody>
+          </table>
+        </div>
+
+        <a
+          href={`/etf/${$etfTicker}/holdings`}
+          class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
+        >
+          All Holdings
+        </a>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if dividendHistoryList?.length !== 0}
+  <div
+    class="space-y-3 sm:pt-5 hidden sm:block sm:{(
+      dividendHistoryList?.length ?? []
+    )?.length !== 0
+      ? ''
+      : 'hidden'}"
+  >
+    <div class="h-auto w-full">
+      <!--Start Content-->
+      <div class="w-auto lg:w-full flex flex-col m-auto">
+        <h2
+          class="mb-2 text-2xl text-white font-semibold flex flex-row items-center"
+        >
+          <span>Dividends</span>
+          <span class="text-white font-semibold ml-auto text-sm">
+            Dividend Yield {dividendYield ?? "0"}%
+          </span>
+        </h2>
+
+        <div class="mt-2 w-full">
+          <table class="table table-sm table-compact text-start flex w-full">
+            <thead>
+              <tr>
+                <th
+                  class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]"
+                  >Ex-Dividend</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
+                  >Payment Date</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
+                  >Amount</th
+                >
+              </tr>
+            </thead>
+
+            <tbody>
+              {#each dividendHistoryList?.slice(0, 5) as item}
+                <tr
+                  class="text-white bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]"
+                >
+                  <td class="text-start text-sm text-white font-medium">
+                    {new Date(item?.date)?.toLocaleString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                      daySuffix: "2-digit",
+                    })}
+                  </td>
+
+                  <td class="text-end text-sm text-white font-medium">
+                    {item?.paymentDate?.length !== 0
+                      ? new Date(item?.paymentDate)?.toLocaleString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                          daySuffix: "2-digit",
+                        })
+                      : "n/a"}
+                  </td>
+
+                  <td class="text-end text-sm text-white font-medium">
+                    ${item?.adjDividend?.toFixed(2)}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+
+        <a
+          href={`/etf/${$etfTicker}/dividends`}
+          class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
+        >
+          Full Dividend History
+        </a>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/News.svelte b/src/lib/components/News.svelte
index a533807f..a57ddf51 100644
--- a/src/lib/components/News.svelte
+++ b/src/lib/components/News.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { stockTicker } from "$lib/store";
+  import { stockTicker, etfTicker } from "$lib/store";
 
   export let data;
 
@@ -57,7 +57,7 @@
   }
 
   $: {
-    if ($stockTicker && typeof window !== "undefined") {
+    if (($stockTicker || $etfTicker) && typeof window !== "undefined") {
       rawData = data?.getNews;
       newsList = rawData?.slice(0, 20) ?? [];
     }
diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index 9525a57e..9ee3a7f6 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -2,7 +2,6 @@
   import { goto } from "$app/navigation";
   import { numberOfUnreadNotification, screenWidth } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
-  import { page } from "$app/stores";
   import logo from "$lib/images/box_logo.png";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { onMount } from "svelte";
diff --git a/src/routes/etf/[tickerID]/+layout.server.ts b/src/routes/etf/[tickerID]/+layout.server.ts
index 156cdfcd..68ed1505 100644
--- a/src/routes/etf/[tickerID]/+layout.server.ts
+++ b/src/routes/etf/[tickerID]/+layout.server.ts
@@ -1,14 +1,9 @@
-export const config = {
-  runtime: "nodejs20.x",
-};
-
 const cleanString = (input) => {
   const substringsToRemove = [
     "Depositary",
     "Inc.",
     "Incorporated",
     "Holdings",
-    "Corporation",
     "Corporations",
     "LLC",
     "Holdings plc American Depositary Shares",
@@ -47,51 +42,48 @@ const fetchWatchlist = async (pb, userId) => {
   return output;
 };
 
-export const load = async ({ params, locals, setHeaders }) => {
+export const load = async ({ params, locals }) => {
   const { apiURL, apiKey, pb, user } = locals;
   const { tickerID } = params;
 
   const endpoints = [
     "/etf-profile",
-    "/similar-etfs",
-    "/etf-country-weighting",
     "/etf-holdings",
     "/stock-dividend",
     "/stock-quote",
     "/wiim",
     "/one-day-price",
+    "/stock-news",
   ];
 
   const promises = [
     ...endpoints.map((endpoint) =>
-      fetchData(apiURL, apiKey, endpoint, tickerID)
+      fetchData(apiURL, apiKey, endpoint, tickerID),
     ),
     fetchWatchlist(pb, user?.id),
-    //fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id)
   ];
 
   const [
     getETFProfile,
-    getSimilarETFs,
-    getCountryWeighting,
     getETFHoldings,
     getStockDividend,
     getStockQuote,
     getWhyPriceMoved,
     getOneDayPrice,
+    getNews,
     getUserWatchlist,
   ] = await Promise.all(promises);
 
   return {
     getETFProfile,
-    getSimilarETFs,
-    getCountryWeighting,
     getETFHoldings,
     getStockDividend,
     getStockQuote,
     getWhyPriceMoved,
     getOneDayPrice,
+    getNews,
     getUserWatchlist,
     companyName: cleanString(getETFProfile?.at(0)?.name),
+    getParams: params.tickerID,
   };
 };
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 2b57ae2b..5830a20a 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -1,58 +1,45 @@
 <script lang="ts">
   import {
-    searchBarData,
+    wsBidPrice,
+    wsAskPrice,
     globalForm,
     screenWidth,
     openPriceAlert,
     currentPortfolioPrice,
-    wsBidPrice,
-    wsAskPrice,
     realtimePrice,
     isCrosshairMoveActive,
     currentPrice,
     priceIncrease,
-    displayCompanyName,
-    traded,
     etfTicker,
-    assetType,
+    displayCompanyName,
     isOpen,
+    shouldUpdatePriceChart,
+    priceChartData,
   } from "$lib/store";
 
   import { onMount, onDestroy, afterUpdate } from "svelte";
-  import { goto } from "$app/navigation";
   import { page } from "$app/stores";
   import toast from "svelte-french-toast";
-  import ETFProfileCard from "$lib/components/ETFProfileCard.svelte";
-  import SimilarETFCard from "$lib/components/SimilarETFCard.svelte";
   import Markethour from "$lib/components/Markethour.svelte";
-  import TopHoldingCard from "$lib/components/TopHoldingCard.svelte";
-  import DividendCard from "$lib/components/DividendCard.svelte";
 
   export let data;
-
-  //$assetType = 'etf';
-  //$etfTicker = data?.getTicker;
-  $realtimePrice = null;
+  $: $realtimePrice = data?.getStockQuote?.price?.toFixed(2);
 
   let previousRealtimePrice = null;
   let previousTicker;
   let socket;
 
   let isScrolled = false;
+  let y;
 
   let userWatchList = data?.getUserWatchlist ?? [];
-  let isTickerIncluded;
-  let userPortfolio = data?.getUserPortfolio ?? [];
-  let holdingShares = 0;
-  let availableCash = 0;
+  let isTickerIncluded = false;
+  //let userPortfolio = data?.getUserPortfolio ?? [];
+  //let holdingShares = 0;
+  //let availableCash = 0;
 
   let displaySection = "";
 
-  let etfProfile = [];
-  let similarTicker = [];
-  let topHoldingList = [];
-  let dividendList = [];
-
   function shareContent(url) {
     if (navigator.share) {
       navigator
@@ -69,33 +56,15 @@
     }
   }
 
-  function handleTypeOfTrade(state: string) {
-    if (state === "buy") {
-      const closePopup = document.getElementById("buyTradeModal");
-      closePopup?.dispatchEvent(new MouseEvent("click"));
-    } else if (state === "sell") {
-      const closePopup = document.getElementById("sellTradeModal");
-      closePopup?.dispatchEvent(new MouseEvent("click"));
-    }
-  }
-
-  function scrollToItem(itemId) {
-    const item = document.getElementById(itemId);
-    if (item) {
-      item.scrollIntoView({ behavior: "smooth" });
-      window.scrollTo(0, 0);
-    }
-  }
-
-  function changeSection(state, item) {
-    scrollToItem(item);
-
+  function changeSection(state) {
     const sectionMap = {
+      insider: "/insider",
       options: "/options",
-      holdings: "/holdings",
-      forecast: "/forecast",
       dividends: "/dividends",
-      stats: "/stats",
+      statistics: "/statistics",
+      metrics: "metrics",
+      forecast: "/forecast",
+      financials: "/financials",
       news: "/news",
     };
 
@@ -164,11 +133,6 @@
     }
   }
 
-  function handleScroll() {
-    // Check the scroll position
-    isScrolled = window.scrollY > 0;
-  }
-
   function sendMessage(message) {
     if (socket && socket.readyState === WebSocket.OPEN) {
       socket.send(message);
@@ -193,25 +157,24 @@
         const data = event.data;
         //console.log('Received message:', data);
         try {
-          $realtimePrice =
-            typeof JSON.parse(data)?.lp !== "undefined"
-              ? JSON.parse(data)?.lp
-              : null;
-          $wsBidPrice =
-            typeof JSON.parse(data)?.bp !== "undefined"
-              ? JSON.parse(data)?.bp
-              : null;
-          $wsAskPrice =
-            typeof JSON.parse(data)?.ap !== "undefined"
-              ? JSON.parse(data)?.ap
-              : null;
-          //console.log('Received message:', $realtimePrice);
+          const parsedData = JSON.parse(data);
+          const { type, lp, time, bp, ap } = parsedData || {};
 
-          if ($realtimePrice > previousRealtimePrice) {
-            $priceIncrease = true;
-            previousRealtimePrice = $realtimePrice;
-          } else if ($realtimePrice < previousRealtimePrice) {
-            $priceIncrease = false;
+          if (type === "T") {
+            $realtimePrice = typeof lp !== "undefined" ? lp : null;
+            $priceChartData = {
+              time: typeof time !== "undefined" ? time : null,
+              price: typeof lp !== "undefined" ? Number(lp) : null,
+            };
+            shouldUpdatePriceChart.set(true);
+          } else if (type === "Q") {
+            $wsBidPrice = typeof bp !== "undefined" ? bp : null;
+            $wsAskPrice = typeof ap !== "undefined" ? ap : null;
+          }
+
+          // Update price increase state
+          if ($realtimePrice !== previousRealtimePrice) {
+            $priceIncrease = $realtimePrice > previousRealtimePrice;
             previousRealtimePrice = $realtimePrice;
           }
 
@@ -244,22 +207,10 @@
       PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
     }
 
-    //const startTime = currentDateTime.set({ hour: 15, minute: 30 });
-    //const endTime = currentDateTime.set({ hour: 22, minute: 0 });
-    // Check if it's not a weekend and the current time is within the specified range
-
     if ($isOpen) {
       //&& currentDateTime > startTime && currentDateTime < endTime
       await websocketRealtimeData();
     }
-
-    // Add a scroll event listener
-    window.addEventListener("scroll", handleScroll);
-
-    return () => {
-      // Remove the event listener when the component is unmounted
-      window.removeEventListener("scroll", handleScroll);
-    };
   });
 
   afterUpdate(async () => {
@@ -268,7 +219,7 @@
       //socket.send('close')
       socket?.close();
       await new Promise((resolve, reject) => {
-        socket.addEventListener("close", resolve);
+        socket?.addEventListener("close", resolve);
       });
 
       if (socket?.readyState === WebSocket?.CLOSED) {
@@ -294,7 +245,7 @@
     $priceIncrease = null;
     $wsAskPrice = null;
     $wsBidPrice = null;
-    $traded = false;
+    //$traded = false
   });
 
   $: {
@@ -304,42 +255,16 @@
       typeof window !== "undefined"
     ) {
       // add a check to see if running on client-side
-      etfProfile = [];
 
-      etfProfile = data?.getETFProfile;
-      similarTicker = data?.getSimilarETFs;
-      topHoldingList = data?.getETFHoldings;
-      dividendList = data?.getStockDividend;
       $currentPortfolioPrice = data?.getStockQuote?.price;
-
-      const asyncFunctions = [];
-
-      Promise.all(asyncFunctions)
-        .then((results) => {})
-        .catch((error) => {
-          console.error("An error occurred:", error);
-        });
     }
   }
 
-  $: {
-    if (userWatchList) {
-      isTickerIncluded = userWatchList?.some(
-        (item) =>
-          item.user === data?.user?.id && item?.ticker?.includes($etfTicker),
-      );
-    }
-  }
+  $: isTickerIncluded = userWatchList?.some(
+    (item) => item.user === data?.user?.id && item.ticker?.includes($etfTicker),
+  );
 
-  let charNumber = 50;
-
-  $: {
-    if ($screenWidth < 640) {
-      charNumber = 15;
-    } else {
-      charNumber = 50;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 25;
 
   $: {
     if (
@@ -352,15 +277,16 @@
   }
 
   $: {
-    if ($page.url.pathname) {
+    if ($page?.url?.pathname && typeof window !== "undefined") {
       const parts = $page?.url?.pathname?.split("/");
       const sectionMap = {
-        stats: "stats",
-        forecast: "forecast",
+        statistics: "statistics",
+        financials: "financials",
         options: "options",
-        holdings: "holdings",
+        metrics: "metrics",
+        insider: "insider",
         dividends: "dividends",
-        "congress-trading": "congress-trading",
+        forecast: "forecast",
         news: "news",
       };
       displaySection =
@@ -369,13 +295,17 @@
         ] || "overview";
     }
   }
+
+  $: isScrolled = y > 0;
 </script>
 
+<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"
+  class="bg-[#09090B] w-full max-w-screen sm:max-w-7xl min-h-screen xl:max-w-screen-2xl overflow-hidden"
 >
   <!-- Page wrapper -->
-  <div class="flex flex-col w-full">
+  <div class="flex flex-col w-full mt-5 relative w-full">
     <main class="grow w-full">
       <section class="w-full">
         <div class="w-full">
@@ -391,10 +321,7 @@
                   <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"
-                    >
+                    <a href="/" class="ml-2 cursor-pointer">
                       <svg
                         class="w-5 h-5 inline-block"
                         xmlns="http://www.w3.org/2000/svg"
@@ -406,7 +333,7 @@
                           /></g
                         ></svg
                       >
-                    </label>
+                    </a>
 
                     <div
                       class={!isScrolled
@@ -420,12 +347,9 @@
                       </span>
                       <span class="text-white font-medium text-sm">
                         {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
-                          {$etfTicker?.includes(".DE") ||
-                          $etfTicker?.includes(".F")
-                            ? `${$currentPortfolioPrice}€`
-                            : ` $${$currentPortfolioPrice}`}
+                          {$currentPortfolioPrice}
                         {:else}
-                          ---
+                          {data?.getStockQuote?.price}
                         {/if}
                       </span>
                     </div>
@@ -452,9 +376,7 @@
                     <label
                       class="mr-4"
                       on:click={() =>
-                        shareContent(
-                          "https://stocknear.com/stocks/" + $etfTicker,
-                        )}
+                        shareContent("https://stocknear.com/etf/" + $etfTicker)}
                     >
                       <svg
                         class="w-6 h-6 inline-block"
@@ -473,6 +395,7 @@
                     <!--End Share Button-->
 
                     <!--Start Watchlist-->
+
                     {#if data?.user}
                       <div class="flex flex-col mr-4">
                         {#if userWatchList?.length !== 0}
@@ -580,21 +503,20 @@
             </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="pt-14 sm:pt-0 w-full max-w-7xl 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="pb-12 md:pb-20 w-full max-w-7xl">
                   <div class="md:pr-6 lg:pr-10">
                     <!-----Start-Header-CandleChart-Indicators------>
+
                     <div
-                      class="m-auto pl-0 sm:pl-4 max-w-5xl overflow-hidden mb-5 md:mt-10"
+                      class="m-auto pl-0 sm:pl-4 overflow-hidden mb-3 md:mt-10 xl:pr-7"
                     >
                       <div
-                        class="hidden sm:flex flex-row w-full justify-between items-center pb-10"
+                        class="hidden sm:flex flex-row w-full justify-between items-center"
                       >
                         <Markethour />
 
@@ -604,7 +526,7 @@
                           <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"
+                                class="flex-shrink-0 rounded-full sm:hover:bg-white sm:hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
                               >
                                 <label
                                   for="addWatchListModal"
@@ -648,7 +570,7 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="#9DED1E"
+                                        fill="#fff"
                                         d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                       /></svg
                                     >
@@ -724,27 +646,16 @@
                       <!-- svelte-ignore a11y-click-events-have-key-events -->
                       <!-- svelte-ignore a11y-label-has-associated-control -->
 
-                      <div class="flex items-center">
+                      <div class="flex items-center w-full mt-3">
                         <div
-                          class="flex flex-row justify-start items-center mb-5 mt-2"
+                          class="flex flex-row justify-start w-full items-center"
                         >
-                          <div
-                            class="rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800"
-                          >
-                            <img
-                              style="clip-path: circle(50%);"
-                              class="w-6 h-6"
-                              src={`https://financialmodelingprep.com/image-stock/${$etfTicker?.toUpperCase()}.png`}
-                              loading="lazy"
-                            />
-                          </div>
-
                           <div class="flex flex-col items-start ml-2 sm:ml-3">
-                            <span class="text-xs text-blue-400">
+                            <span class="text-md sm:text-lg text-blue-400">
                               {$etfTicker?.toUpperCase()}
                             </span>
                             <span
-                              class="text-sm sm:text-xl font-medium text-slate-100"
+                              class="text-xl sm:text-2xl font-semibold sm:font-bold text-white"
                             >
                               {$displayCompanyName?.length > charNumber
                                 ? $displayCompanyName?.slice(0, charNumber) +
@@ -753,33 +664,6 @@
                             </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}
-                                             
-                                              <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
-                                                <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
-                                                <span class="text-white font-medium">
-                                                  Portfolio
-                                                </span>
-                                              </label>
-                                              {:else}
-                                              <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case  cursor-pointer items-center">
-                                                <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
-                                                <span class="text-white font-medium">
-                                                  Portfolio
-                                                </span>
-                                              </label>
-                                              {/if}
-                                            </div>
-                                            -->
-                        <!--End Trade-->
                       </div>
                     </div>
                     <!-----End-Header-CandleChart-Indicators------>
@@ -787,228 +671,104 @@
                     <!--Start Ticker Section-->
 
                     <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
-                    <div
-                      class="sm:ml-4 w-screen sm:w-full {$screenWidth < 640
-                        ? 'overflow-auto scrollbar no-scrollbar'
-                        : ''} mb-2"
+                    <nav
+                      class="sm:ml-4 border-b-[2px] overflow-x-scroll md:overflow-hidden whitespace-nowrap"
                     >
                       <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"
+                        class="flex flex-row items-center w-full text-[1rem] text-white"
                       >
-                        <li class="cursor-pointer flex flex-col items-center">
+                        <a
+                          href={`/etf/${$etfTicker}`}
+                          on:click={() => changeSection("overview")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'overview'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Overview
+                        </a>
+                        <a
+                          href={`/etf/${$etfTicker}/financials`}
+                          on:click={() => changeSection("financials")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'financials'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Financials
+                        </a>
+                        <a
+                          href={`/etf/${$etfTicker}/statistics`}
+                          on:click={() => changeSection("statistics")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'statistics'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                          >Statistics</a
+                        >
+
+                        {#if ["amd", "save", "ba", "adbe", "nflx", "pltr", "msft", "meta", "tsla", "nvda", "aapl", "gme"]?.includes($etfTicker?.toLowerCase())}
                           <a
-                            href={`/etf/${$etfTicker}`}
-                            id="item1"
-                            on:click={() => changeSection("overview", "item1")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'overview'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
+                            href={`/etf/${$etfTicker}/metrics`}
+                            on:click={() => changeSection("metrics")}
+                            class="p-2 px-5 cursor-pointer {displaySection ===
+                            'metrics'
+                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            >Metrics</a
                           >
-                            Overview
-                          </a>
-                          <div
-                            class="{displaySection === 'overview'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/etf/${$etfTicker}/stats`}
-                            id="item2"
-                            on:click={() => changeSection("stats", "item2")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'stats'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Stats
-                          </a>
-                          <div
-                            class="{displaySection === 'stats'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
+                        {/if}
+
+                        {#if Object?.keys(data?.getAnalystRating ?? {})?.length > 0}
                           <a
                             href={`/etf/${$etfTicker}/forecast`}
-                            id="item10"
-                            on:click={() => changeSection("forecast", "item10")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            on:click={() => changeSection("forecast")}
+                            class="p-2 px-5 cursor-pointer {displaySection ===
                             'forecast'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
+                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
                           >
                             Forecast
                           </a>
-                          <div
-                            class="{displaySection === 'forecast'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/etf/${$etfTicker}/options`}
-                            id="item3"
-                            on:click={() => changeSection("options", "item3")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'options'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Options
-                          </a>
-                          <div
-                            class="{displaySection === 'options'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/etf/${$etfTicker}/holdings`}
-                            id="item4"
-                            on:click={() => changeSection("holdings", "item4")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'holdings'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Holdings
-                          </a>
-                          <div
-                            class="{displaySection === 'holdings'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/etf/${$etfTicker}/dividends`}
-                            id="item5"
-                            on:click={() => changeSection("dividends", "item5")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'dividends'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Dividends
-                          </a>
-                          <div
-                            class="{displaySection === 'dividends'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/etf/${$etfTicker}/congress-trading`}
-                            id="item5"
-                            on:click={() =>
-                              changeSection("congress-trading", "item5")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'congress-trading'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Insider
-                          </a>
-                          <div
-                            class="{displaySection === 'congress-trading'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
-                          />
-                        </li>
-                        <li
-                          class="cursor-pointer flex flex-col items-center pr-6"
+                        {/if}
+                        <a
+                          href={`/etf/${$etfTicker}/options`}
+                          on:click={() => changeSection("options")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'options'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
                         >
-                          <a
-                            href={`/etf/${$etfTicker}/news`}
-                            id="item7"
-                            on:click={() => changeSection("news", "item7")}
-                            class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'news'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            News
-                          </a>
-                          <div
-                            class="{displaySection === 'news'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
-                          />
-                        </li>
+                          Options
+                        </a>
+                        <a
+                          href={`/etf/${$etfTicker}/insider`}
+                          on:click={() => changeSection("insider")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'insider'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Insider
+                        </a>
+                        <a
+                          href={`/etf/${$etfTicker}/dividends`}
+                          on:click={() => changeSection("dividends")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'dividends'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Dividends
+                        </a>
                       </ul>
-                    </div>
+                    </nav>
 
                     <!--Start-Main Content-->
                     <slot />
                     <!--End Main Content-->
                   </div>
                 </div>
-
-                <aside
-                  class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20"
-                >
-                  <div class="sm:pl-10">
-                    <!--Start Company Info -->
-
-                    <ETFProfileCard {data} {etfProfile} />
-
-                    <div class={topHoldingList?.length === 0 ? "hidden" : ""}>
-                      <TopHoldingCard {topHoldingList} />
-                    </div>
-
-                    <div
-                      class={dividendList?.history?.length === 0
-                        ? "hidden"
-                        : ""}
-                    >
-                      <DividendCard {dividendList} />
-                    </div>
-                    <div class={similarTicker.length === 0 ? "hidden" : ""}>
-                      <SimilarETFCard {similarTicker} />
-                    </div>
-
-                    <!--End Company Info -->
-                  </div>
-                </aside>
-                <!--
-                          {#if $screenWidth < 640 && MobileETFNavbar}
-                            <MobileETFNavbar 
-                              holdingShares={holdingShares}
-                              userPortfolio={userPortfolio}
-                              etfProfile={etfProfile}
-                              similarTicker={similarTicker}
-                              topHoldingList={topHoldingList}
-                              dividendList={dividendList}
-                              data={data}
-                            />
-                          {/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">
-                              {#if holdingShares !== 0 && data?.user}
-                              <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="inline-flex items-center justify-center w-32 h-11 border border-[#000] ring-[#000] bg-[#0DDE00] text-[0.95rem] font-medium rounded-full text-[#09090B]">
-                                Invest
-                              </label>
-                              {:else}
-                              <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}"
-                              class="inline-flex items-center justify-center w-32 h-11 border border-[#000] ring-[#000] bg-[#0DDE00] text-[0.95rem] font-medium rounded-full text-[#09090B]">
-                                Invest
-                              </label>
-                              {/if}
-                            </div>
-                          </div>
-                        </div>
-                        -->
               </div>
             </div>
           </div>
@@ -1024,135 +784,11 @@
 {/if}
 <!--End Login Modal-->
 
-<!--
-{#if BuyTrade}
-<BuyTrade
-  data = {data}
-  holdingShares={holdingShares}
-  availableCash = {availableCash}
-/>
-{/if}
-
-{#if SellTrade}
-<SellTrade 
-  data = {data}
-  holdingShares={holdingShares}
-  availableCash = {availableCash}
-/>
-{/if}
-
-{#if AddPortfolio}
-<AddPortfolio data={data}/>
-{/if}
--->
-
+<!--Start SellTrade Modal-->
 {#if PriceAlert}
   <PriceAlert {data} />
 {/if}
 
-<!--Start Type of Trade-->
-
-<input type="checkbox" id="typeOfTrade" class="modal-toggle" />
-
-<dialog
-  id="typeOfTrade"
-  class="modal modal-bottom sm:modal-middle overflow-hidden"
->
-  <label
-    for="typeOfTrade"
-    class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"
-  ></label>
-
-  <div class="modal-box w-full bg-[#000] border border-slate-600 pb-10">
-    <div class="flex flex-col">
-      <div class="text-white text-md flex flex-col flex-shrink-0">
-        <div class="rounded-full w-10 h-10 relative bg-gray-900 mb-2">
-          <img
-            class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
-            src={`https://financialmodelingprep.com/image-stock/${$etfTicker}.png`}
-          />
-        </div>
-        <span class="mb-1">
-          {$displayCompanyName?.length > 30
-            ? $displayCompanyName?.slice(0, 30) + "..."
-            : $displayCompanyName}
-        </span>
-        <div class="flex flex-row items-center mb-10">
-          <span class="mb-1 text-sm font-medium">
-            Current Price: ${$currentPortfolioPrice}
-          </span>
-          <span class="text-blue-400 text-sm font-medium ml-auto">
-            Holding Shares: {holdingShares}
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div class="text-white">
-      <h3 class="font-bold text-2xl mb-5">Type of Trade</h3>
-
-      <ul class="menu dropdown-content text-white bg-[#000] rounded -ml-6">
-        <li class="mb-3">
-          <label
-            for="typeOfTrade"
-            on:click={() => handleTypeOfTrade("buy")}
-            class="cursor-pointer flex flex-row justify-start items-center"
-          >
-            <div class="rounded-full w-10 h-10 relative bg-gray-800">
-              <svg
-                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                viewBox="0 0 16 16"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                fill="green"
-                ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-                  id="SVGRepo_tracerCarrier"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                ></g><g id="SVGRepo_iconCarrier">
-                  <rect width="16" height="16" id="icon-bound" fill="none"
-                  ></rect>
-                  <path
-                    d="M0,11h11.2l-2.6,2.6L10,15l6-6H0V11z M4.8,5l2.6-2.6L6,1L0,7h16V5H4.8z"
-                  ></path>
-                </g></svg
-              >
-            </div>
-            <span class="ml-1 text-white text-lg font-medium"
-              >Buy {$etfTicker} Shares</span
-            >
-          </label>
-        </li>
-        <li class="mb-3">
-          <label
-            for="typeOfTrade"
-            on:click={() => handleTypeOfTrade("sell")}
-            class="cursor-pointer flex flex-row justify-start items-center"
-          >
-            <div class="rounded-full w-10 h-10 relative bg-gray-800">
-              <svg
-                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                ><path
-                  fill="red"
-                  d="M14.25 21.4q-.575.575-1.425.575T11.4 21.4l-8.8-8.8q-.275-.275-.438-.65T2 11.15V4q0-.825.588-1.413T4 2h7.15q.425 0 .8.163t.65.437l8.8 8.825q.575.575.575 1.413T21.4 14.25l-7.15 7.15ZM6.5 8q.625 0 1.063-.438T8 6.5q0-.625-.438-1.063T6.5 5q-.625 0-1.063.438T5 6.5q0 .625.438 1.063T6.5 8Z"
-                /></svg
-              >
-            </div>
-            <span class="ml-1 text-white text-lg font-medium">
-              Sell {$etfTicker} Shares
-            </span>
-          </label>
-        </li>
-      </ul>
-    </div>
-  </div>
-</dialog>
-
-<!--End Type of Trade-->
-
 <!--Start Add Watchlist Modal-->
 <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
 
@@ -1222,7 +858,6 @@
                       <title>ic_fluent_checkmark_circle_48_filled</title>
                       <desc>Created with Sketch.</desc>
                       <g
-                        id="🔍-Product-Icons"
                         stroke="none"
                         stroke-width="1"
                         fill="none"
@@ -1235,7 +870,6 @@
                         >
                           <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>
diff --git a/src/routes/etf/[tickerID]/+layout.ts b/src/routes/etf/[tickerID]/+layout.ts
index 30966f4c..0f19dcab 100644
--- a/src/routes/etf/[tickerID]/+layout.ts
+++ b/src/routes/etf/[tickerID]/+layout.ts
@@ -1,11 +1,11 @@
 import {
-  displayCompanyName,
-  etfTicker,
-  assetType,
   isOpen,
   isAfterMarketClose,
   isBeforeMarketOpen,
   isWeekend,
+  etfTicker,
+  displayCompanyName,
+  assetType,
 } from "$lib/store";
 
 const checkMarketHour = async () => {
@@ -52,9 +52,9 @@ const checkMarketHour = async () => {
   isAfterMarketClose.set(isAfterMarketCloseValue);
 };
 
-export const load = async ({ params, data }) => {
-  etfTicker.update((value) => params.tickerID?.toUpperCase());
-  assetType.update((value) => "etf");
-  displayCompanyName.update((value) => data?.companyName);
+export const load = async ({  data }) => {
+  etfTicker.set(data?.getParams?.toUpperCase());
+  assetType.set("etf");
+  displayCompanyName.set(data?.companyName);
   await checkMarketHour();
 };
diff --git a/src/routes/etf/[tickerID]/+page.server.ts b/src/routes/etf/[tickerID]/+page.server.ts
index 78340db8..05e315c0 100644
--- a/src/routes/etf/[tickerID]/+page.server.ts
+++ b/src/routes/etf/[tickerID]/+page.server.ts
@@ -34,10 +34,10 @@ export const actions = {
       error(err.status, err.message);
     }
 
-    redirect(301, "/");
+    redirect(302, "/");
   },
 
-  register: async ({ locals, request, params }) => {
+  register: async ({ locals, request }) => {
     const { formData, errors } = await validateData(
       await request.formData(),
       registerUserSchema,
@@ -59,6 +59,7 @@ await locals.pb?.collection('users').update(
 					'tier': 'Pro', //Give new users a free trial for the Pro Subscription
 			});
 */
+
       await locals.pb.collection("users").requestVerification(formData.email);
     } catch (err) {
       console.log("Error: ", err);
@@ -74,7 +75,7 @@ await locals.pb?.collection('users').update(
       error(err.status, err.message);
     }
 
-    redirect(303, "/etf/" + params.tickerID);
+    redirect(303, "/");
   },
 
   oauth2: async ({ url, locals, request, cookies, params }) => {
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index b3067558..e6d17c8e 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -1,77 +1,45 @@
 <script lang="ts">
-  import {
-    AreaSeries,
-    Chart,
-    PriceLine,
-    CandlestickSeries,
-  } from "svelte-lightweight-charts";
-
-  import { TrackingModeExitMode } from "lightweight-charts";
+  import { AreaSeries, Chart, PriceLine } from "svelte-lightweight-charts";
+  import { TrackingModeExitMode, ColorType } from "lightweight-charts";
   import {
     getCache,
     setCache,
-    taRatingComponent,
-    fomcImpactComponent,
-    failToDeliverComponent,
-    optionsNetFlowComponent,
-    optionComponent,
-    sentimentComponent,
-    varComponent,
-    trendAnalysisComponent,
-    priceAnalysisComponent,
-    assetType,
-    screenWidth,
-    globalForm,
     numberOfUnreadNotification,
-    displayCompanyName,
+    globalForm,
     isCrosshairMoveActive,
     realtimePrice,
     priceIncrease,
+    wsBidPrice,
+    wsAskPrice,
     currentPortfolioPrice,
-    currentPrice,
-    clientSideCache,
     etfTicker,
+    displayCompanyName,
     isOpen,
     isBeforeMarketOpen,
     isWeekend,
+    shouldUpdatePriceChart,
+    priceChartData,
   } from "$lib/store";
   import { onDestroy, onMount } from "svelte";
-  import ETFKeyInformation from "$lib/components/ETFKeyInformation.svelte";
-  import Lazy from "$lib/components/Lazy.svelte";
+  import WIIM from "$lib/components/WIIM.svelte";
+  import News from "$lib/components/News.svelte";
+  import ETFSidecard from "$lib/components/ETFSidecard.svelte";
+
+  import { convertTimestamp, abbreviateNumber } from "$lib/utils";
   import { Button } from "$lib/components/shadcn/button/index.js";
-  import { convertTimestamp } from "$lib/utils";
-  import toast from "svelte-french-toast";
+  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
+  import { goto } from "$app/navigation";
 
   export let data;
   export let form;
 
-  let output = null;
-
-  //====================================//
-
-  let intervalId = null;
-  let oneDayPrice = [];
-  let oneWeekPrice = [];
-  let oneMonthPrice = [];
-  let sixMonthPrice = [];
-
-  let oneYearPrice = [];
-  let threeYearPrice = [];
-
-  let geographicList = [];
-  let sectorList = [];
-  let etfProfile = [];
-  let topHoldingList = [];
-  let dividendList = [];
-  let similarTicker = [];
   let prePostData = {};
-
-  let previousClose = data?.getStockQuote?.previousClose;
+  let stockDeck = {};
+  $: previousClose = data?.getStockQuote?.previousClose;
   //============================================//
+  const intervals = ["1D", "1W", "1M", "6M", "1Y", "MAX"];
 
   let chart = null;
-  let displayChartType = "line";
-
   async function checkChart() {
     if (chart) {
       clearInterval(intervalId);
@@ -79,63 +47,69 @@
     }
   }
 
-  //let PricePredictionCard;
-  //let TradingModel;
-  let CountrySegmentation;
-  let SectorSegmentation;
-  //let ETFKeyInformation;
-
-  onMount(async () => {
-    CountrySegmentation = (
-      await import("$lib/components/CountrySegmentation.svelte")
-    ).default;
-    SectorSegmentation = (
-      await import("$lib/components/SectorSegmentation.svelte")
-    ).default;
-  });
-
   //const startTimeTracking = performance.now();
 
   //==========================//
 
   $: {
     if (output !== null) {
-      //Bug value is NaN
       let change;
+      let currentDataRow;
+      let baseClose;
 
-      if (displayData === "1D") {
-        const length = oneDayPrice?.length;
-        for (let i = length - 1; i >= 0; i--) {
-          if (!isNaN(oneDayPrice[i]?.close)) {
-            currentDataRow = oneDayPrice[i];
-            break;
+      // Determine current data row and base close price based on displayData
+      switch (displayData) {
+        case "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)?.at(0);
+          baseClose = previousClose;
+          break;
+
+        case "1W":
+          currentDataRow = oneWeekPrice?.at(-1); // Latest entry for 1 week
+          baseClose = oneWeekPrice?.[0]?.close;
+          break;
+
+        case "1M":
+          currentDataRow = oneMonthPrice?.at(-1); // Latest entry for 1 month
+          baseClose = oneMonthPrice?.[0]?.close;
+          break;
+
+        case "6M":
+          currentDataRow = sixMonthPrice?.at(-1); // Latest entry for 6 months
+          baseClose = sixMonthPrice?.[0]?.close;
+          break;
+
+        case "1Y":
+          currentDataRow = oneYearPrice?.at(-1); // Latest entry for 1 year
+          baseClose = oneYearPrice?.[0]?.close;
+          break;
+
+        case "MAX":
+          currentDataRow = maxPrice?.at(-1); // Latest entry for MAX range
+          baseClose = maxPrice?.[0]?.close;
+          break;
       }
 
-      //currentDataRow = oneWeekPrice.slice(-1)[0]
-      if (!$isCrosshairMoveActive && $realtimePrice !== null) {
-        change = (($realtimePrice / previousClose - 1) * 100)?.toFixed(2);
-      } else {
-        change =
-          displayData === "1D"
-            ? (
-                ((currentDataRow?.close ?? currentDataRow?.value) /
-                  previousClose -
-                  1) *
-                100
-              )?.toFixed(2)
-            : (
-                ((currentDataRow?.close ?? currentDataRow?.value) /
-                  displayLastLogicalRangeValue -
-                  1) *
-                100
-              )?.toFixed(2);
+      // Calculate percentage change if baseClose and currentDataRow are valid
+      const closeValue =
+        displayData === "1D" &&
+        !$isCrosshairMoveActive &&
+        $realtimePrice !== null
+          ? $realtimePrice
+          : (currentDataRow?.close ?? currentDataRow?.value);
+
+      if (closeValue && baseClose) {
+        change = ((closeValue / baseClose - 1) * 100).toFixed(2);
       }
 
-      const date = new Date(currentDataRow?.time);
+      // Format date
+      const date = new Date(currentDataRow?.time * 1000);
 
       const options = {
         day: "2-digit",
@@ -143,13 +117,14 @@
         year: "numeric",
         hour: "numeric",
         minute: "2-digit",
+        timeZone: "UTC",
       };
 
       //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", {
+          : new Date(currentDataRow?.time)?.toLocaleDateString("en-US", {
               day: "2-digit",
               month: "short",
               year: "numeric",
@@ -159,13 +134,15 @@
         formattedDate === "Invalid Date"
           ? convertTimestamp(data?.getStockQuote?.timestamp)
           : formattedDate;
+
+      // Set display legend
       displayLegend = {
         close:
-          currentDataRow?.value === "-" && currentDataRow?.close === undefined
-            ? data?.getStockQuote?.price
-            : (currentDataRow?.close ?? currentDataRow?.value),
+          currentDataRow?.value ??
+          currentDataRow?.close ??
+          data?.getStockQuote?.price,
         date: safeFormattedDate,
-        change: change,
+        change,
       };
     }
   }
@@ -175,14 +152,15 @@
   $: {
     if ($etfTicker && typeof window !== "undefined") {
       // add a check to see if running on client-side
-      if ($realtimePrice !== null) {
+      if ($realtimePrice !== null && $realtimePrice !== 0) {
+        $realtimePrice =
+          $realtimePrice !== 0 ? $realtimePrice : data?.getStockQuote?.price;
         $currentPortfolioPrice = $realtimePrice;
       } else if (oneDayPrice?.length !== 0) {
-        const length = oneDayPrice.length;
+        const length = oneDayPrice?.length;
         for (let i = length - 1; i >= 0; i--) {
-          if (!isNaN(oneDayPrice[i]?.close ?? oneDayPrice[i]?.value)) {
-            $currentPortfolioPrice =
-              oneDayPrice[i]?.close ?? oneDayPrice[i]?.value;
+          if (!isNaN(oneDayPrice[i]?.close)) {
+            $currentPortfolioPrice = oneDayPrice[i]?.close;
             break;
           }
         }
@@ -213,7 +191,6 @@
           displayLastLogicalRangeValue = null;
           lastValue = null;
         }
-
         break;
       case "1W":
         displayData = "1W";
@@ -253,6 +230,7 @@
       case "1Y":
         displayData = "1Y";
         await historicalPrice("one-year");
+
         if (oneYearPrice?.length !== 0) {
           displayLastLogicalRangeValue = oneYearPrice?.at(0)?.close;
           lastValue = oneYearPrice.slice(-1)?.at(0)?.close;
@@ -265,9 +243,9 @@
       case "MAX":
         displayData = "MAX";
         await historicalPrice("max");
-        if (threeYearPrice?.length !== 0) {
-          displayLastLogicalRangeValue = threeYearPrice?.at(0)?.close;
-          lastValue = threeYearPrice.slice(-1)?.at(0)?.close;
+        if (maxPrice?.length !== 0) {
+          displayLastLogicalRangeValue = maxPrice?.at(0)?.close;
+          lastValue = maxPrice.slice(-1)?.at(0)?.close;
         } else {
           displayLastLogicalRangeValue = null;
           lastValue = null;
@@ -293,6 +271,19 @@
     //trackButtonClick('Time Period: '+ state)
   }
 
+  let output = null;
+
+  //====================================//
+
+  let intervalId = null;
+  let oneDayPrice = [];
+  let oneWeekPrice = [];
+  let oneMonthPrice = [];
+  let sixMonthPrice = [];
+
+  let oneYearPrice = [];
+  let maxPrice = [];
+
   async function historicalPrice(timePeriod: string) {
     const cachedData = getCache($etfTicker, "historicalPrice" + timePeriod);
     if (cachedData) {
@@ -310,7 +301,7 @@
           oneYearPrice = cachedData;
           break;
         case "max":
-          threeYearPrice = cachedData;
+          maxPrice = cachedData;
           break;
         default:
           console.log(`Unsupported time period: ${timePeriod}`);
@@ -335,7 +326,9 @@
 
       const mapData = (data) =>
         data?.map(({ time, open, high, low, close }) => ({
-          time: Date.parse(time),
+          time: ["1D", "1W", "1M"]?.includes(displayData)
+            ? Date?.parse(time + "Z") / 1000
+            : time,
           open,
           high,
           low,
@@ -358,7 +351,7 @@
             oneYearPrice = mappedData;
             break;
           case "max":
-            threeYearPrice = mappedData;
+            maxPrice = mappedData;
             break;
           default:
             console.log(`Unsupported time period: ${timePeriod}`);
@@ -379,13 +372,12 @@
     try {
       output = [...data?.getOneDayPrice] ?? [];
       oneDayPrice = output?.map((item) => ({
-        time: Date.parse(item?.time),
+        time: Date?.parse(item?.time + "Z") / 1000,
         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;
@@ -397,6 +389,8 @@
             break;
           }
         }
+      } else if (displayData === "6M") {
+        lastValue = sixMonthPrice?.slice(-1)?.at(0)?.close;
       }
 
       displayLastLogicalRangeValue =
@@ -449,74 +443,11 @@
     }
   }
 
-  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: "2-digit",
-          year: "numeric",
-          hour: "2-digit",
-          minute: "2-digit",
-        };
-
-        //const formattedDate = ( displayData === '1W' || displayData === '1M' ) ? date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric',hour: '2-digit', minute: '2-digit' }).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-GB", options).replace(/\//g, ".")
-            : date
-                .toLocaleDateString("en-GB", {
-                  day: "2-digit",
-                  month: "2-digit",
-                  year: "numeric",
-                })
-                ?.replace(/\//g, ".");
-
-        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 ?? oneDayPrice[i]?.value)) {
-          currentDataRow = oneDayPrice[i];
-          break;
-        }
-      }
-    }
-  }
-
   let displayLastLogicalRangeValue;
 
   const fitContentChart = async () => {
     if (displayData === "1Y" && oneYearPrice?.length === 0) {
-    } else if (chart !== null) {
+    } else if (chart !== null && typeof window !== "undefined") {
       chart?.timeScale().fitContent();
 
       chart?.applyOptions({
@@ -527,7 +458,7 @@
     }
   };
 
-  let width = 500;
+  let width = 580;
   //Initial height of graph
   let height = 350;
 
@@ -536,7 +467,7 @@
 
   ref = (element) => {
     if (observer) {
-      observer.disconnect();
+      observer?.disconnect();
     }
     if (!element) {
       return;
@@ -550,14 +481,52 @@
   };
 
   //===============================================//
+  function defaultTickMarkFormatter(timePoint, tickMarkType, locale) {
+    const formatOptions = {
+      timeZone: "UTC",
+    };
 
-  const options = {
+    switch (tickMarkType) {
+      case 0: // TickMarkType.Year:
+        formatOptions.year = "numeric";
+        break;
+      case 1: // TickMarkType.Month:
+        formatOptions.month = "short";
+        break;
+      case 2: // TickMarkType.DayOfMonth:
+        formatOptions.day = "numeric";
+        break;
+      case 3: // TickMarkType.Time:
+        formatOptions.hour12 = true; // Use 12-hour clock
+        formatOptions.hour = "numeric"; // Use numeric hour without leading zero
+        break;
+      case 4: // TickMarkType.TimeWithSeconds:
+        formatOptions.hour12 = true; // Use 12-hour clock
+        formatOptions.hour = "numeric"; // Use numeric hour without leading zero
+        formatOptions.minute = "2-digit"; // Always show minutes with leading zero
+        formatOptions.second = "2-digit"; // Always show seconds with leading zero
+        break;
+      default:
+      // Ensure this default case handles unexpected tickMarkType values
+    }
+    if ([3, 4]?.includes(tickMarkType)) {
+      const date = new Date(timePoint?.timestamp * 1000);
+      return new Intl.DateTimeFormat(locale, formatOptions)?.format(date);
+    } else {
+      const date = new Date(timePoint?.timestamp);
+      return new Intl.DateTimeFormat(locale, formatOptions)?.format(date);
+    }
+  }
+
+  $: options = {
     width: width,
     height: height,
     layout: {
       background: {
+        type: ColorType.Solid,
         color: "#09090B",
       },
+      textColor: "#d1d4dc",
     },
     grid: {
       vertLines: {
@@ -570,20 +539,32 @@
       },
     },
     crosshair: {
-      // hide the horizontal crosshair line
       horzLine: {
-        visible: false,
-        labelVisible: false,
+        visible: true,
+        labelBackgroundColor: "#fff",
       },
-      // hide the vertical crosshair label
       vertLine: {
-        labelVisible: false,
+        labelVisible: true,
+        labelBackgroundColor: "#fff",
         style: 0,
       },
     },
+    priceScale: {
+      autoScale: true,
+      scaleMargins: {
+        top: 0.3,
+        bottom: 0.25,
+      },
+    },
     rightPriceScale: {
-      visible: false,
-      borderColor: "rgba(197, 203, 206, 0.8)",
+      scaleMargins: {
+        top: 0.3,
+        bottom: 0.25,
+        borderVisible: false,
+      },
+      visible: true,
+      borderVisible: false,
+      mode: 1, // Keeps price scale fixed
     },
     leftPriceScale: {
       visible: false,
@@ -591,6 +572,8 @@
     },
     handleScale: {
       mouseWheel: false,
+      pinch: false, // Disables scaling via pinch gestures
+      axisPressedMouseMove: false, // Disables scaling by dragging the axis with the mouse
     },
     handleScroll: {
       mouseWheel: false,
@@ -599,44 +582,168 @@
       pressedMouseMove: false,
     },
     timeScale: {
-      borderColor: "#FFFFFF",
-      textColor: "#FFFFFF",
-      visible: false,
+      borderColor: "#fff",
+      textColor: "#fff",
+      borderVisible: false,
+      visible: true,
       fixLeftEdge: true,
       fixRightEdge: true,
+      timeVisible: ["1D", "1W", "1M"].includes(displayData),
+      secondsVisible: false,
+      tickMarkFormatter: (time, tickMarkType, locale) => {
+        return defaultTickMarkFormatter(
+          { timestamp: time },
+          tickMarkType,
+          locale,
+        );
+      },
     },
   };
 
   onDestroy(async () => {
     $priceIncrease = null;
+    $globalForm = [];
+    shouldUpdatePriceChart.set(false);
+  });
+
+  $: dataMapping = {
+    "1D": oneDayPrice,
+    "1W": oneWeekPrice,
+    "1M": oneMonthPrice,
+    "6M": sixMonthPrice,
+    "1Y": oneYearPrice,
+    MAX: maxPrice,
+  };
+
+  $: {
+    if (form) {
+      $globalForm = form;
+    }
+  }
+
+  async function exportData(timePeriod: string) {
+    if (data?.user?.tier === "Pro") {
+      let exportList = [];
+
+      const response = await fetch("/api/export-price-data", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ ticker: $etfTicker, timePeriod: timePeriod }),
+      });
+
+      exportList = await response.json();
+
+      exportList = exportList?.map(
+        ({ time, open, high, low, close, date, volume }) => ({
+          date: timePeriod === "max" ? time : date, // Use 'time' if timePeriod is "max", otherwise use 'date'
+          open,
+          high,
+          low,
+          close,
+          volume,
+        }),
+      );
+
+      const csvRows = [];
+
+      // Add headers row
+      csvRows.push("time,open,high,low,close, volume");
+
+      // Add data rows
+      for (const row of exportList) {
+        const csvRow = `${row.date},${row.open},${row.high},${row.low},${row.close},${row.volume}`;
+        csvRows.push(csvRow);
+      }
+
+      // Create CSV blob and trigger download
+      const csv = csvRows.join("\n");
+      const blob = new Blob([csv], { type: "text/csv" });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.setAttribute("hidden", "");
+      a.setAttribute("href", url);
+      a.setAttribute("download", `${$etfTicker}_${timePeriod}.csv`);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } else {
+      goto("/pricing");
+    }
+  }
+
+  function updateClosePrice(data, extendPriceChart) {
+    const newDateParsedUTC = Date?.parse(extendPriceChart?.time + "Z") / 1000; // Parse the incoming time
+    const closePrice = extendPriceChart?.price; // Store the close price for easier reference
+    let foundMatch = false;
+    let lastNonNullCloseIndex = null;
+
+    // Iterate through data to find the right time slot
+    for (let i = 0; i < data.length; i++) {
+      // Check if the timestamp matches
+      if (data[i].time === newDateParsedUTC) {
+        data[i].close = closePrice; // Update the existing close price
+        foundMatch = true;
+        break; // Exit loop once matched
+      }
+      // Keep track of the last non-null close price
+      if (data[i].close !== null) {
+        lastNonNullCloseIndex = i;
+      }
+    }
+
+    // If no matching timestamp was found, add new data
+    if (!foundMatch) {
+      // Only update the last non-null close if it exists
+      if (lastNonNullCloseIndex !== null) {
+        data[lastNonNullCloseIndex].close = closePrice; // Update with the latest close price
+      } else {
+        // If there's no previous close data, add a new entry
+        data.push({ time: newDateParsedUTC, close: closePrice }); // Add new data
+      }
+    }
+
+    return data; // Return updated data
+  }
+
+  onMount(() => {
+    shouldUpdatePriceChart.subscribe(async (value) => {
+      if (
+        value &&
+        chart !== null &&
+        $realtimePrice !== null &&
+        oneDayPrice?.length > 0 &&
+        $priceChartData?.time !== null &&
+        $priceChartData?.price !== null
+      ) {
+        // Create a new array and update oneDayPrice to trigger reactivity
+        const updatedPrice = updateClosePrice(oneDayPrice, $priceChartData);
+        oneDayPrice = [...updatedPrice]; // Reassign the updated array to trigger reactivity
+        try {
+          chart?.update(oneDayPrice); // Update the chart with the new prices
+        } catch (e) {
+          // Handle error if chart update fails
+          //console.error("Chart update error:", e);
+        }
+        shouldUpdatePriceChart.set(false); // Reset the update flag
+      }
+    });
   });
 
   $: {
     if ($etfTicker && typeof window !== "undefined") {
       // add a check to see if running on client-side
+      shouldUpdatePriceChart.set(false);
       oneDayPrice = [];
       oneWeekPrice = [];
       oneMonthPrice = [];
       oneYearPrice = [];
-      threeYearPrice = [];
-
-      geographicList = [];
-      sectorList = [];
+      maxPrice = [];
       prePostData = {};
       output = null;
 
-      geographicList = data?.getCountryWeighting;
-      sectorList = data?.getETFProfile?.at(0)?.sectorsList;
-      sectorList = sectorList?.sort(function (a, b) {
-        return b?.exposure - a?.exposure;
-      });
-      etfProfile = data?.getETFProfile;
-      topHoldingList = data?.getETFHoldings;
-      dividendList = data?.getStockDividend;
-      similarTicker = data?.getSimilarETFs;
-      previousClose = data?.getStockQuote?.previousClose;
-
-      //stockDeck = data?.getStockDeckData;
+      stockDeck = data?.getStockDeck; // Essential otherwise chart will not be updated since we wait until #layout.server.ts server response is finished
 
       const asyncFunctions = [getPrePostQuote()];
 
@@ -649,12 +756,6 @@
         });
     }
   }
-
-  $: {
-    if (form) {
-      $globalForm = form;
-    }
-  }
 </script>
 
 <svelte:head>
@@ -667,7 +768,7 @@
 
   <meta
     name="description"
-    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
   />
   <!-- Other meta tags -->
   <meta
@@ -676,8 +777,9 @@
   />
   <meta
     property="og:description"
-    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock chart, 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 -->
 
@@ -689,32 +791,29 @@
   />
   <meta
     name="twitter:description"
-    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock chart, 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">
-  <div class="w-full m-auto">
-    <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
+<section class="bg-[#09090B] min-h-screen pb-40 overflow-hidden w-full">
+  <div class="w-full m-auto overflow-hidden">
+    <div
+      class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full"
+    >
       <!-- 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">
+          <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}
-                  {displayLegend?.close}
-                {:else if !$isCrosshairMoveActive && $realtimePrice !== null}
-                  {$realtimePrice}
-                {:else}
-                  {displayLegend?.close}
-                {/if}
+                {displayLegend?.close}
 
                 {#if $priceIncrease === true}
                   <div
@@ -730,45 +829,12 @@
               </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="#00FC50"
-                          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-[#00FC50] 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="items-center justify-start {displayLegend?.change > 0
+                    ? "before:content-['+'] text-[#00FC50]"
+                    : 'text-[#FF2F1F]'} font-medium text-xs sm:text-sm"
+                  >{displayLegend?.change ?? "-"}%</span
+                >
 
                 <span class="ml-3 text-white text-xs sm:text-sm"
                   >{displayLegend?.date}</span
@@ -776,223 +842,285 @@
               </div>
             </div>
 
-            {#if Object?.keys(prePostData)?.length !== 0 && prePostData?.price !== 0}
-              <div class="ml-auto flex flex-col justify-end items-end">
-                <div class="flex flex-row items-center justify-end">
-                  <span class="text-white text-2xl font-bold">
-                    {prePostData?.price}
-                  </span>
-                  {#if prePostData?.changesPercentage >= 0}
-                    <span
-                      class="ml-1 items-center justify-start text-[#00FC50] font-medium text-xs sm:text-sm"
-                      >({prePostData?.changesPercentage}%)</span
+            <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-[#00FC50] 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-xs sm:text-sm font-normal text-end w-24"
                     >
-                  {: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
+                      <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-xs sm:text-sm font-normal text-end w-28"
                     >
+                      <span>After-hours:</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 $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}
+              {/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>
+            {#if !$etfTicker?.includes(".")}
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild let:builder>
+                  <Button
+                    builders={[builder]}
+                    class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
+                  >
+                    <span class="truncate text-white">Export</span>
+                    <svg
+                      class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      style="max-width:40px"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                      ></path>
+                    </svg>
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content
+                  class="w-fit h-fit max-h-72 overflow-y-auto scroller"
+                >
+                  <DropdownMenu.Label class="text-gray-400">
+                    Historical Stock Price
+                  </DropdownMenu.Label>
+                  <DropdownMenu.Separator />
+                  <DropdownMenu.Group>
+                    <!--
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer hover:bg-[#27272A]">
+                       <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" 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>
+                        1 min 
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer hover:bg-[#27272A]">
+                        <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" 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>
+                        5 min
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer hover:bg-[#27272A]">
+                        <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" 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>
+                        15 min
+                      </DropdownMenu.Item>
+                    -->
+                    <DropdownMenu.Item
+                      on:click={() => exportData("30min")}
+                      class="cursor-pointer hover:bg-[#27272A]"
+                    >
+                      <svg
+                        class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
+                          ? 'hidden'
+                          : ''}"
+                        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
+                      >
 
-            <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>
+                      30 min
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item
+                      on:click={() => exportData("1hour")}
+                      class="cursor-pointer hover:bg-[#27272A]"
+                    >
+                      <svg
+                        class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
+                          ? 'hidden'
+                          : ''}"
+                        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
+                      >
+                      1 hour
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item
+                      on:click={() => exportData("max")}
+                      class="cursor-pointer hover:bg-[#27272A]"
+                    >
+                      1 day
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Group>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            {/if}
           </div>
           <!--End Time Interval-->
 
           <!--End Ticker Section-->
           <!-- Start Graph -->
 
-          {#if output !== null}
-            <div class="w-full sm:pl-7 ml-auto 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"}
+          <div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
+            {#if dataMapping[displayData]?.length === 0}
+              <div
+                class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
+              >
+                <div class="flex items-center justify-between py-1 sm:pt-0.5">
+                  <div class="hide-scroll overflow-x-auto">
+                    <ul
+                      class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
+                    >
+                      {#each intervals as interval}
+                        <li>
+                          <button
+                            on:click={() => changeData(interval)}
+                            class="px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
+                          >
+                            <span
+                              class="block {displayData === interval
+                                ? 'text-white'
+                                : 'text-gray-400'}">{interval}</span
+                            >
+                            <div
+                              class="{displayData === interval
+                                ? `bg-[${colorChange}] `
+                                : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
+                            />
+                          </button>
+                        </li>
+                      {/each}
+                    </ul>
+                  </div>
+                  <div
+                    class="flex shrink flex-row space-x-1 pr-1 text-sm sm:text-[1rem]"
+                  >
+                    <span
+                      class={displayLegend?.change >= 0
+                        ? "before:content-['+'] text-[#00FC50]"
+                        : "text-[#FF2F1F]"}
+                    >
+                      {displayLegend?.change ?? "-"}%
+                    </span>
+                    <span class="hidden text-gray-200 sm:block"
+                      >({displayData})</span
+                    >
+                  </div>
+                </div>
+                <div class="h-[250px] sm:h-[350px]">
+                  <div
+                    class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12"
+                  >
+                    <div
+                      class="mb-4 text-white text-[1rem] sm:text-xl font-semibold"
+                    >
+                      No {displayData} chart data available
+                    </div>
+                  </div>
+                </div>
+              </div>
+            {:else}
+              <div
+                class="order-1 lg:order-5 grow overflow-hidden border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
+              >
+                <div class="flex items-center justify-between py-1 sm:pt-0.5">
+                  <div class="hide-scroll overflow-x-auto">
+                    <ul
+                      class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
+                    >
+                      {#each intervals as interval}
+                        <li>
+                          <button
+                            on:click={() => changeData(interval)}
+                            class="px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
+                          >
+                            <span
+                              class="block {displayData === interval
+                                ? 'text-white'
+                                : 'text-gray-400'}">{interval}</span
+                            >
+                            <div
+                              class="{displayData === interval
+                                ? `bg-[${colorChange}] `
+                                : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
+                            />
+                          </button>
+                        </li>
+                      {/each}
+                    </ul>
+                  </div>
+                  <div
+                    class="flex shrink flex-row space-x-1 pr-1 text-sm sm:text-[1rem]"
+                  >
+                    <span
+                      class={displayLegend?.change >= 0
+                        ? "before:content-['+'] text-[#00FC50]"
+                        : "text-[#FF2F1F]"}
+                    >
+                      {displayLegend?.change}%
+                    </span>
+                    <span class="hidden text-gray-200 sm:block"
+                      >({displayData})</span
+                    >
+                  </div>
+                </div>
+
+                {#if output !== null && dataMapping[displayData]?.length !== 0}
+                  <Chart
+                    {...options}
+                    autoSize={true}
+                    ref={(api) => (chart = api)}
+                  >
+                    {#if displayData === "1D"}
                       <AreaSeries
+                        reactive={true}
                         data={oneDayPrice?.map(({ time, close }) => ({
                           time,
                           value: close,
                         }))}
                         lineWidth={1.5}
-                        priceScaleId="left"
+                        priceScaleId="right"
                         lineColor={colorChange}
                         topColor={topColorChange}
                         bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
                         ref={handleSeriesReference}
                         priceLineVisible={false}
-                        lastPriceAnimation={1}
                       >
                         <PriceLine
                           price={oneDayPrice?.at(0)?.close}
@@ -1000,36 +1128,19 @@
                           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"}
+                    {:else if displayData === "1W"}
                       <AreaSeries
                         data={oneWeekPrice?.map(({ time, close }) => ({
                           time,
                           value: close,
                         }))}
                         lineWidth={1.5}
-                        priceScaleId="left"
+                        priceScaleId="right"
                         lineColor={colorChange}
                         topColor={topColorChange}
                         bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
                         ref={handleSeriesReference}
                         priceLineVisible={false}
-                        lastPriceAnimation={1}
                       >
                         <PriceLine
                           price={oneWeekPrice?.at(0)?.close}
@@ -1037,36 +1148,19 @@
                           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"}
+                    {:else if displayData === "1M"}
                       <AreaSeries
                         data={oneMonthPrice?.map(({ time, close }) => ({
-                          time,
+                          time: time,
                           value: close,
                         }))}
                         lineWidth={1.5}
-                        priceScaleId="left"
+                        priceScaleId="right"
                         lineColor={colorChange}
                         topColor={topColorChange}
                         bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
                         ref={handleSeriesReference}
                         priceLineVisible={false}
-                        lastPriceAnimation={1}
                       >
                         <PriceLine
                           price={oneMonthPrice?.at(0)?.close}
@@ -1074,36 +1168,19 @@
                           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"}
+                    {:else if displayData === "6M"}
                       <AreaSeries
                         data={sixMonthPrice?.map(({ time, close }) => ({
                           time,
                           value: close,
                         }))}
                         lineWidth={1.5}
-                        priceScaleId="left"
+                        priceScaleId="right"
                         lineColor={colorChange}
                         topColor={topColorChange}
                         bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
                         ref={handleSeriesReference}
                         priceLineVisible={false}
-                        lastPriceAnimation={1}
                       >
                         <PriceLine
                           price={sixMonthPrice?.at(0)?.close}
@@ -1111,36 +1188,19 @@
                           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"}
+                    {:else if displayData === "1Y"}
                       <AreaSeries
                         data={oneYearPrice?.map(({ time, close }) => ({
                           time,
                           value: close,
                         }))}
                         lineWidth={1.5}
-                        priceScaleId="left"
+                        priceScaleId="right"
                         lineColor={colorChange}
                         topColor={topColorChange}
                         bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
                         ref={handleSeriesReference}
                         priceLineVisible={false}
-                        lastPriceAnimation={1}
                       >
                         <PriceLine
                           price={oneYearPrice?.at(0)?.close}
@@ -1148,313 +1208,311 @@
                           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"}
+                    {:else if displayData === "MAX"}
                       <AreaSeries
-                        data={threeYearPrice?.map(({ time, close }) => ({
+                        data={maxPrice?.map(({ time, close }) => ({
                           time,
                           value: close,
                         }))}
                         lineWidth={1.5}
-                        priceScaleId="left"
+                        priceScaleId="right"
                         lineColor={colorChange}
                         topColor={topColorChange}
                         bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
                         ref={handleSeriesReference}
                         priceLineVisible={false}
-                        lastPriceAnimation={1}
                       >
                         <PriceLine
-                          price={threeYearPrice?.at(0)?.close}
+                          price={maxPrice?.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 text-gray-400"
-                  ></span>
-                </label>
+                  </Chart>
+                {:else}
+                  <div
+                    class="flex justify-center w-full sm:w-[650px] h-[350px] 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 text-gray-400"
+                        ></span>
+                      </label>
+                    </div>
+                  </div>
+                {/if}
               </div>
+            {/if}
+
+            <div
+              class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 tiny:space-x-3 xs:space-x-4"
+            >
+              <table
+                class="w-[50%] text-sm text-white tiny:text-small lg:w-full lg:min-w-[210px]"
+              >
+                <tbody
+                  ><tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Bid</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{$wsBidPrice !== 0 && $wsBidPrice !== null
+                        ? $wsBidPrice
+                        : (data?.getStockQuote?.bid ?? "-")}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Market Cap</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{abbreviateNumber(data?.getStockQuote?.marketCap)}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Revenue (ttm)</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{stockDeck?.revenueTTM !== null
+                        ? abbreviateNumber(stockDeck?.revenueTTM)
+                        : "n/a"}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Net Income (ttm)</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{stockDeck?.netIncomeTTM !== null
+                        ? abbreviateNumber(stockDeck?.netIncomeTTM)
+                        : "n/a"}</td
+                    ></tr
+                  >
+
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >EPS (ttm)</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{data?.getStockQuote?.eps}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >PE Ratio (ttm)</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{data?.getStockQuote?.pe}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Forward PE</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{stockDeck?.forwardPE ?? "n/a"}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Shares Out
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{data?.getStockQuote?.sharesOutstanding !== null
+                        ? abbreviateNumber(
+                            data?.getStockQuote?.sharesOutstanding,
+                          )
+                        : "n/a"}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Short % of Shares Out</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{stockDeck?.shortOutStandingPercent !== null
+                        ? stockDeck?.shortOutStandingPercent + "%"
+                        : "n/a"}</td
+                    ></tr
+                  >
+                </tbody>
+              </table>
+              <table
+                class="w-[48%] text-sm text-white tiny:text-small lg:w-auto lg:min-w-[210px]"
+                data-test="overview-quote"
+              >
+                <tbody
+                  ><tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Ask</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{$wsAskPrice !== 0 && $wsAskPrice !== null
+                        ? $wsAskPrice
+                        : (data?.getStockQuote?.ask ?? "-")}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Volume</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{abbreviateNumber(data?.getStockQuote?.volume)}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Open</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{data?.getStockQuote?.open?.toFixed(2)}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Previous Close</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{data?.getStockQuote?.previousClose?.toFixed(2)}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Day's Range</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
+                        2,
+                      )}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >52-Week Range</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
+                        2,
+                      )}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Beta</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{stockDeck?.beta?.toFixed(2)}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Shares Float
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{stockDeck?.floatShares !== null
+                        ? abbreviateNumber(stockDeck?.floatShares)
+                        : "n/a"}</td
+                    ></tr
+                  >
+                  <tr
+                    class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+                    ><td
+                      class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2"
+                      >Short % of Float</td
+                    >
+                    <td
+                      class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
+                      >{stockDeck?.shortFloatPercent !== null
+                        ? stockDeck?.shortFloatPercent + "%"
+                        : "n/a"}</td
+                    ></tr
+                  >
+                </tbody>
+              </table>
             </div>
-          {/if}
+          </div>
 
           <!--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>
-          <!--End Time Interval-->
-
-          {#if ETFKeyInformation && $screenWidth <= 1022}
-            <!--BUG: Dont remove since when changing ETF symbol display freezes-->
-            <div class="w-full mt-8 m-auto sm:p-6">
-              <label
-                class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
-              >
-                Key Information
-              </label>
-              <ETFKeyInformation
-                {etfProfile}
-                {similarTicker}
-                {topHoldingList}
-                {dividendList}
-                {data}
-              />
-            </div>
-          {/if}
-
-          <Lazy>
+          <div
+            class="mt-6 flex flex-col lg:flex-row gap-x-14 items-start w-full"
+          >
             <div
-              class="w-full mt-10 m-auto sm:p-6 {data?.getWhyPriceMoved
-                ?.length !== 0
+              class="lg:space-y-6 lg:order-2 lg:pt-1 sm:pl-7 lg:pl-0 w-full lg:w-[45%] sm:ml-auto"
+            >
+              <ETFSidecard {data} />
+              <div class="lg:sticky lg:top-20"></div>
+            </div>
+
+            <div
+              class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {data
+                ?.getWhyPriceMoved?.length !== 0
                 ? ''
                 : 'hidden'}"
             >
-              {#await import("$lib/components/WIIM.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
+              <WIIM {data} />
             </div>
-          </Lazy>
 
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fomcImpactComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/FOMCImpact.svelte") then { default: Comp }}
-                <svelte:component this={Comp} />
-              {/await}
+            <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+              <News {data} />
             </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-0 m-auto sm:p-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-0 m-auto sm:p-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 {!$failToDeliverComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/FailToDeliver.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <!--End Price Prediction Model-->
-
-          <!--Start CountrySegmentation-->
-          <div
-            class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {geographicList?.length !==
-            0
-              ? ''
-              : 'hidden'}"
-          >
-            {#if CountrySegmentation}
-              <CountrySegmentation {geographicList} />
-            {/if}
           </div>
-          <!--End CountrySegmentation-->
-
-          <!--Start SectorSegmentation -->
-          <div
-            class="w-full pt-10 sm:p-6 m-auto {sectorList?.length === 0
-              ? 'hidden'
-              : ''}"
-          >
-            {#if SectorSegmentation}
-              <SectorSegmentation {sectorList} />
-            {/if}
-          </div>
-          <!--End SectorSegmentation -->
-
-          <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>
-
-          <!--
-                                      <div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
-                                        {#await import('$lib/components/Correlation.svelte') then {default: Comp}}
-                                          <svelte:component this={Comp} data={data}/>
-                                        {/await}
-                                      </div>
-                                      -->
         </div>
       </div>
     </div>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 0b8316c0..b8157c3b 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -12,7 +12,7 @@
     wsBidPrice,
     wsAskPrice,
     currentPortfolioPrice,
-    stockTicker,
+    etfTicker,
     displayCompanyName,
     isOpen,
     isBeforeMarketOpen,
@@ -156,7 +156,7 @@
   //==========================//
 
   $: {
-    if ($stockTicker && typeof window !== "undefined") {
+    if ($etfTicker && typeof window !== "undefined") {
       // add a check to see if running on client-side
       if ($realtimePrice !== null && $realtimePrice !== 0) {
         $realtimePrice =
@@ -291,7 +291,7 @@
   let maxPrice = [];
 
   async function historicalPrice(timePeriod: string) {
-    const cachedData = getCache($stockTicker, "historicalPrice" + timePeriod);
+    const cachedData = getCache($etfTicker, "historicalPrice" + timePeriod);
     if (cachedData) {
       switch (timePeriod) {
         case "one-week":
@@ -316,7 +316,7 @@
       output = null;
 
       const postData = {
-        ticker: $stockTicker,
+        ticker: $etfTicker,
         timePeriod: timePeriod,
       };
 
@@ -362,7 +362,7 @@
           default:
             console.log(`Unsupported time period: ${timePeriod}`);
         }
-        setCache($stockTicker, mappedData, "historicalPrice" + timePeriod);
+        setCache($etfTicker, mappedData, "historicalPrice" + timePeriod);
       } catch (e) {
         console.log(e);
       }
@@ -423,7 +423,7 @@
 
   async function getPrePostQuote() {
     if (!$isOpen) {
-      const postData = { ticker: $stockTicker, path: "pre-post-quote" };
+      const postData = { ticker: $etfTicker, path: "pre-post-quote" };
       const response = await fetch("/api/ticker-data", {
         method: "POST",
         headers: {
@@ -636,7 +636,7 @@
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ ticker: $stockTicker, timePeriod: timePeriod }),
+        body: JSON.stringify({ ticker: $etfTicker, timePeriod: timePeriod }),
       });
 
       exportList = await response.json();
@@ -670,7 +670,7 @@
       const a = document.createElement("a");
       a.setAttribute("hidden", "");
       a.setAttribute("href", url);
-      a.setAttribute("download", `${$stockTicker}_${timePeriod}.csv`);
+      a.setAttribute("download", `${$etfTicker}_${timePeriod}.csv`);
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -738,7 +738,7 @@
   });
 
   $: {
-    if ($stockTicker && typeof window !== "undefined") {
+    if ($etfTicker && typeof window !== "undefined") {
       // add a check to see if running on client-side
       shouldUpdatePriceChart.set(false);
       oneDayPrice = [];
@@ -769,21 +769,21 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Stock Price, Quote & News · stocknear
+    {$displayCompanyName} ({$etfTicker}) Stock Price, Quote & News · stocknear
   </title>
 
   <meta
     name="description"
-    content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock chart, 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`}
+    content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}
   />
   <meta
     property="og:description"
-    content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock chart, 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" />
@@ -793,11 +793,11 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Stock Price, Quote & News · stocknear`}
+    content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}
   />
   <meta
     name="twitter:description"
-    content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock chart, 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 -->
@@ -907,7 +907,7 @@
           <div
             class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4"
           >
-            {#if !$stockTicker?.includes(".")}
+            {#if !$etfTicker?.includes(".")}
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button