diff --git a/src/routes/api/historical-price/+server.ts b/src/routes/api/historical-price/+server.ts
index 27a47a5d..9d1409b0 100644
--- a/src/routes/api/historical-price/+server.ts
+++ b/src/routes/api/historical-price/+server.ts
@@ -5,7 +5,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   const { apiURL, apiKey } = locals;
 
   const postData = { ticker: data?.ticker, timePeriod: data?.timePeriod };
-  const response = await fetch(apiURL + "/export-price-data", {
+  const response = await fetch(apiURL + "/historical-price", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index e7668d53..b7435f82 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -1,86 +1,104 @@
 <script lang="ts">
+  import {
+    AreaSeries,
+    Chart,
+    PriceLine,
+    CandlestickSeries,
+  } from "svelte-lightweight-charts";
 
-  import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
-  
-    import { TrackingModeExitMode } from 'lightweight-charts';
-    import {getCache, setCache, taRatingComponent,fomcImpactComponent, failToDeliverComponent, optionsNetFlowComponent, optionComponent, sentimentComponent, varComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen,  isBeforeMarketOpen, isWeekend} from '$lib/store';
-    import { onDestroy, onMount } from 'svelte';    
-    import ETFKeyInformation from '$lib/components/ETFKeyInformation.svelte';
-    import Lazy from '$lib/components/Lazy.svelte';
+  import { TrackingModeExitMode } from "lightweight-charts";
+  import {
+    getCache,
+    setCache,
+    taRatingComponent,
+    fomcImpactComponent,
+    failToDeliverComponent,
+    optionsNetFlowComponent,
+    optionComponent,
+    sentimentComponent,
+    varComponent,
+    trendAnalysisComponent,
+    priceAnalysisComponent,
+    assetType,
+    screenWidth,
+    globalForm,
+    numberOfUnreadNotification,
+    displayCompanyName,
+    isCrosshairMoveActive,
+    realtimePrice,
+    priceIncrease,
+    currentPortfolioPrice,
+    currentPrice,
+    clientSideCache,
+    etfTicker,
+    isOpen,
+    isBeforeMarketOpen,
+    isWeekend,
+  } from "$lib/store";
+  import { onDestroy, onMount } from "svelte";
+  import ETFKeyInformation from "$lib/components/ETFKeyInformation.svelte";
+  import Lazy from "$lib/components/Lazy.svelte";
   import { Button } from "$lib/components/shadcn/button/index.js";
-  import { convertTimestamp } from '$lib/utils';
-  import toast from 'svelte-french-toast';
+  import { convertTimestamp } from "$lib/utils";
+  import toast from "svelte-french-toast";
 
-    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 = {};
+  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 chart = null;
+  let displayChartType = "line";
+
+  async function checkChart() {
+    if (chart) {
+      clearInterval(intervalId);
+      fitContentChart();
+    }
+  }
 
-      let previousClose = data?.getStockQuote?.previousClose;
-      //============================================//
-      
-    
-    
-      let chart = null;
-      let displayChartType = 'line';
-  
-      async function checkChart() {
-        if (chart) {
-          clearInterval(intervalId);
-          fitContentChart();
-        }
-      }
-    
-    
-    
-    
   //let PricePredictionCard;
   //let TradingModel;
-    let CountrySegmentation;
-    let SectorSegmentation;
-    //let ETFKeyInformation;
-    
-    
-  onMount(async() => {  
+  let CountrySegmentation;
+  let SectorSegmentation;
+  //let ETFKeyInformation;
 
-    CountrySegmentation = (await import('$lib/components/CountrySegmentation.svelte')).default;
-    SectorSegmentation = (await import('$lib/components/SectorSegmentation.svelte')).default;
-  })
-  
-    
-  
-    //const startTimeTracking = performance.now();
-    
-    
-    
-    
-    //==========================//
-    
-   $: {
+  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;
@@ -98,10 +116,23 @@
       }
 
       //currentDataRow = oneWeekPrice.slice(-1)[0]
-      if(!$isCrosshairMoveActive && $realtimePrice !== null) {
-        change = (($realtimePrice/previousClose-1)*100)?.toFixed(2)
+      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);
+        change =
+          displayData === "1D"
+            ? (
+                ((currentDataRow?.close ?? currentDataRow?.value) /
+                  previousClose -
+                  1) *
+                100
+              )?.toFixed(2)
+            : (
+                ((currentDataRow?.close ?? currentDataRow?.value) /
+                  displayLastLogicalRangeValue -
+                  1) *
+                100
+              )?.toFixed(2);
       }
 
       const date = new Date(currentDataRow?.time);
@@ -115,275 +146,250 @@
       };
 
       //const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.');
-      const formattedDate = displayData === "1D" || displayData === "1W" || displayData === "1M"
-      ? date.toLocaleString("en-US", options)
-      : date.toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" });
+      const formattedDate =
+        displayData === "1D" || displayData === "1W" || displayData === "1M"
+          ? date.toLocaleString("en-US", options)
+          : date.toLocaleDateString("en-US", {
+              day: "2-digit",
+              month: "short",
+              year: "numeric",
+            });
 
-      const safeFormattedDate = formattedDate === "Invalid Date" ? convertTimestamp(data?.getStockQuote?.timestamp) : formattedDate;
+      const safeFormattedDate =
+        formattedDate === "Invalid Date"
+          ? convertTimestamp(data?.getStockQuote?.timestamp)
+          : formattedDate;
       displayLegend = {
-        close: currentDataRow?.value === '-' && currentDataRow?.close === undefined 
-            ? data?.getStockQuote?.price 
+        close:
+          currentDataRow?.value === "-" && currentDataRow?.close === undefined
+            ? data?.getStockQuote?.price
             : (currentDataRow?.close ?? currentDataRow?.value),
         date: safeFormattedDate,
-        change: change
-    };
-
+        change: change,
+      };
     }
   }
-      
-    //==========================//
-    
-    
-    $: {
-      if ($etfTicker  && typeof window !== 'undefined') // add a check to see if running on client-side
-      {
-        
-        if ($realtimePrice !== null)
-        {
-          $currentPortfolioPrice = $realtimePrice;
-    
-        }
-        
-        else if (oneDayPrice?.length !== 0)
-        {
-          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;
-                break;
-              }
-            }
-        }
-    
-      }
-    
-    }
-    
-    
-    
-    
-let displayData;
-let colorChange;
-let topColorChange;
-let bottomColorChange;
 
-let lastValue;
-async function changeData(state) {
-  
-  switch (state) {
-    case '1D':
-      displayData = '1D';
-      if(oneDayPrice?.length !== 0)
-      {
-        displayLastLogicalRangeValue = oneDayPrice?.at(0)?.close; //previousClose
-        const length = oneDayPrice?.length;
+  //==========================//
+
+  $: {
+    if ($etfTicker && typeof window !== "undefined") {
+      // add a check to see if running on client-side
+      if ($realtimePrice !== null) {
+        $currentPortfolioPrice = $realtimePrice;
+      } else if (oneDayPrice?.length !== 0) {
+        const length = oneDayPrice.length;
         for (let i = length - 1; i >= 0; i--) {
-          if (!isNaN(oneDayPrice[i]?.close)) {
-            lastValue = oneDayPrice[i]?.close;
+          if (!isNaN(oneDayPrice[i]?.close ?? oneDayPrice[i]?.value)) {
+            $currentPortfolioPrice =
+              oneDayPrice[i]?.close ?? oneDayPrice[i]?.value;
             break;
           }
         }
-
       }
-      else {
-        displayLastLogicalRangeValue = null;
-        lastValue = null;
-
-      }
-
-     
-      break;
-    case '1W':
-      displayData = '1W';
-      await historicalPrice('one-week');
-      if(oneWeekPrice?.length !== 0)
-      {
-        displayLastLogicalRangeValue = oneWeekPrice?.at(0)?.close;
-        lastValue = oneWeekPrice?.slice(-1)?.at(0)?.close;
-
-      }
-      else {
-        displayLastLogicalRangeValue = null;
-        lastValue = null;
-
-      }
-      
-
-      break;
-    case '1M':
-      displayData = '1M';
-      await historicalPrice('one-month');
-      if(oneMonthPrice?.length !== 0)
-      {
-        displayLastLogicalRangeValue = oneMonthPrice?.at(0)?.close;
-        lastValue = oneMonthPrice.slice(-1)?.at(0)?.close;
-
-      }
-      else {
-        displayLastLogicalRangeValue = null;
-        lastValue = null;
-
-      }
-      break;
-
-    case '6M':
-      displayData = '6M';
-      await historicalPrice('six-months');
-      if(sixMonthPrice?.length !== 0)
-      {
-        displayLastLogicalRangeValue = sixMonthPrice?.at(0)?.close;
-        lastValue = sixMonthPrice?.slice(-1)?.at(0)?.close;
-
-      }
-      else {
-        displayLastLogicalRangeValue = null;
-        lastValue = null;
-
-      }
-      break;
-    case '1Y':
-      displayData = '1Y';
-      await historicalPrice('one-year');
-      if(oneYearPrice?.length !== 0)
-      {
-        displayLastLogicalRangeValue = oneYearPrice?.at(0)?.close;
-        lastValue = oneYearPrice.slice(-1)?.at(0)?.close;
-      }
-      else {
-        displayLastLogicalRangeValue = null;
-        lastValue = null;
-      }
-      
-      break;
-    case 'MAX':
-      displayData = 'MAX';
-      await historicalPrice('max');
-      if(threeYearPrice?.length !== 0)
-      {
-        displayLastLogicalRangeValue = threeYearPrice?.at(0)?.close;
-        lastValue = threeYearPrice.slice(-1)?.at(0)?.close;
-
-      }
-      else {
-        displayLastLogicalRangeValue = null;
-        lastValue = null;
-
-      }
-     
-      break;
-    default:
-      return;
+    }
   }
-  colorChange = lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#37C97D";
-  topColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.2)" : "rgb(16, 219, 6, 0.2)";
-  bottomColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.001)" : "rgb(16, 219, 6, 0.001)";
-  
-  fitContentChart();
-  
 
-  //trackButtonClick('Time Period: '+ state)
-}
-    
-      
-    
-    
-async function historicalPrice(timePeriod:string) {
-  
-  const cachedData = getCache($etfTicker, 'historicalPrice'+timePeriod);
+  let displayData;
+  let colorChange;
+  let topColorChange;
+  let bottomColorChange;
+
+  let lastValue;
+  async function changeData(state) {
+    switch (state) {
+      case "1D":
+        displayData = "1D";
+        if (oneDayPrice?.length !== 0) {
+          displayLastLogicalRangeValue = oneDayPrice?.at(0)?.close; //previousClose
+          const length = oneDayPrice?.length;
+          for (let i = length - 1; i >= 0; i--) {
+            if (!isNaN(oneDayPrice[i]?.close)) {
+              lastValue = oneDayPrice[i]?.close;
+              break;
+            }
+          }
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+
+        break;
+      case "1W":
+        displayData = "1W";
+        await historicalPrice("one-week");
+        if (oneWeekPrice?.length !== 0) {
+          displayLastLogicalRangeValue = oneWeekPrice?.at(0)?.close;
+          lastValue = oneWeekPrice?.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+
+        break;
+      case "1M":
+        displayData = "1M";
+        await historicalPrice("one-month");
+        if (oneMonthPrice?.length !== 0) {
+          displayLastLogicalRangeValue = oneMonthPrice?.at(0)?.close;
+          lastValue = oneMonthPrice.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+        break;
+
+      case "6M":
+        displayData = "6M";
+        await historicalPrice("six-months");
+        if (sixMonthPrice?.length !== 0) {
+          displayLastLogicalRangeValue = sixMonthPrice?.at(0)?.close;
+          lastValue = sixMonthPrice?.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+        break;
+      case "1Y":
+        displayData = "1Y";
+        await historicalPrice("one-year");
+        if (oneYearPrice?.length !== 0) {
+          displayLastLogicalRangeValue = oneYearPrice?.at(0)?.close;
+          lastValue = oneYearPrice.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+
+        break;
+      case "MAX":
+        displayData = "MAX";
+        await historicalPrice("max");
+        if (threeYearPrice?.length !== 0) {
+          displayLastLogicalRangeValue = threeYearPrice?.at(0)?.close;
+          lastValue = threeYearPrice.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+
+        break;
+      default:
+        return;
+    }
+    colorChange =
+      lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#37C97D";
+    topColorChange =
+      lastValue < displayLastLogicalRangeValue
+        ? "rgb(255, 47, 31, 0.2)"
+        : "rgb(16, 219, 6, 0.2)";
+    bottomColorChange =
+      lastValue < displayLastLogicalRangeValue
+        ? "rgb(255, 47, 31, 0.001)"
+        : "rgb(16, 219, 6, 0.001)";
+
+    fitContentChart();
+
+    //trackButtonClick('Time Period: '+ state)
+  }
+
+  async function historicalPrice(timePeriod: string) {
+    const cachedData = getCache($etfTicker, "historicalPrice" + timePeriod);
     if (cachedData) {
       switch (timePeriod) {
-          case 'one-week':
-              oneWeekPrice = cachedData
-              break;
-          case 'one-month':
-              oneMonthPrice = cachedData
-              break;
-          case 'six-months':
-              sixMonthPrice = cachedData
-              break;
-          case 'one-year':
-              oneYearPrice = cachedData
-              break;
-          case 'max':
-              threeYearPrice = cachedData
-              break;
-          default:
-              console.log(`Unsupported time period: ${timePeriod}`);
+        case "one-week":
+          oneWeekPrice = cachedData;
+          break;
+        case "one-month":
+          oneMonthPrice = cachedData;
+          break;
+        case "six-months":
+          sixMonthPrice = cachedData;
+          break;
+        case "one-year":
+          oneYearPrice = cachedData;
+          break;
+        case "max":
+          threeYearPrice = cachedData;
+          break;
+        default:
+          console.log(`Unsupported time period: ${timePeriod}`);
       }
-  } else {
-    output = null;
+    } else {
+      output = null;
 
       const postData = {
         ticker: $etfTicker,
         timePeriod: timePeriod,
       };
 
-      const response = await fetch('/api/historical-price', {
-        method: 'POST',
+      const response = await fetch("/api/historical-price", {
+        method: "POST",
         headers: {
-          "Content-Type": "application/json"
+          "Content-Type": "application/json",
         },
-        body: JSON.stringify(postData)
+        body: JSON.stringify(postData),
       });
 
-      output = await response?.json() ?? [];
+      output = (await response?.json()) ?? [];
 
-      const mapData = (data) => data?.map(({ time, open, high, low, close }) => ({ 
-          time: Date.parse(time), 
-          open, 
-          high, 
-          low, 
-          close 
+      const mapData = (data) =>
+        data?.map(({ time, open, high, low, close }) => ({
+          time: Date.parse(time),
+          open,
+          high,
+          low,
+          close,
+        }));
+
+      const mappedData = mapData(output);
+      try {
+        switch (timePeriod) {
+          case "one-week":
+            oneWeekPrice = mappedData;
+            break;
+          case "one-month":
+            oneMonthPrice = mappedData;
+            break;
+          case "six-months":
+            sixMonthPrice = mappedData;
+            break;
+          case "one-year":
+            oneYearPrice = mappedData;
+            break;
+          case "max":
+            threeYearPrice = mappedData;
+            break;
+          default:
+            console.log(`Unsupported time period: ${timePeriod}`);
+        }
+        setCache($etfTicker, mappedData, "historicalPrice" + timePeriod);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  }
+
+  async function initializePrice() {
+    output = null;
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+    intervalId = setInterval(checkChart, 0);
+    try {
+      output = [...data?.getOneDayPrice] ?? [];
+      oneDayPrice = output?.map((item) => ({
+        time: Date.parse(item?.time),
+        open: item?.open !== null ? item?.open : NaN,
+        high: item?.high !== null ? item?.high : NaN,
+        low: item?.low !== null ? item?.low : NaN,
+        close: item?.close !== null ? item?.close : NaN,
       }));
 
-    const mappedData = mapData(output);
-    try {
-        switch (timePeriod) {
-            case 'one-week':
-                oneWeekPrice = mappedData
-                break;
-            case 'one-month':
-                oneMonthPrice = mappedData
-                break;
-            case 'six-months':
-                sixMonthPrice = mappedData
-                break;
-            case 'one-year':
-                oneYearPrice = mappedData
-                break;
-            case 'max':
-                threeYearPrice = mappedData
-                break;
-            default:
-                console.log(`Unsupported time period: ${timePeriod}`);
-        }
-        setCache($etfTicker, mappedData, 'historicalPrice'+timePeriod);
-
-    } catch (e) {
-        console.log(e);
-    }
-
-  }  
-}
-    
-    
-  
-async function initializePrice() {
-  
-  output = null;
-  if (intervalId) {
-      clearInterval(intervalId);
-  }
-  intervalId = setInterval(checkChart, 0);
-  try {
-
-  output = [...data?.getOneDayPrice] ?? [];
-  oneDayPrice = output?.map(item => ({ time: Date.parse(item?.time), open: item?.open !== null ? item?.open : NaN, high: item?.high !== null ? item?.high : NaN, low: item?.low !== null ? item?.low : NaN, close: item?.close !== null ? item?.close : NaN}));
-
-    displayData = oneDayPrice?.length  === 0 && sixMonthPrice?.length !== 0 ? '6M' : '1D';
+      displayData =
+        oneDayPrice?.length === 0 && sixMonthPrice?.length !== 0 ? "6M" : "1D";
       //lastValue = oneDayPrice[oneDayPrice?.length - 1]?.value;
-      if (displayData === '1D')
-      {
+      if (displayData === "1D") {
         const length = oneDayPrice?.length;
         for (let i = length - 1; i >= 0; i--) {
           if (!isNaN(oneDayPrice[i]?.close)) {
@@ -392,1038 +398,1097 @@ async function initializePrice() {
           }
         }
       }
-      
 
-      displayLastLogicalRangeValue = oneDayPrice?.length  === 0 && sixMonthPrice?.length !== 0 ? sixMonthPrice?.at(0)?.close : oneDayPrice?.at(0)?.close //previousClose;
+      displayLastLogicalRangeValue =
+        oneDayPrice?.length === 0 && sixMonthPrice?.length !== 0
+          ? sixMonthPrice?.at(0)?.close
+          : oneDayPrice?.at(0)?.close; //previousClose;
 
       //colorChange = lastValue < displayLastLogicalRangeValue ? "#CC3636" : "#367E18";
-      
-      colorChange = lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#37C97D";
-      topColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.2)" : "rgb(16, 219, 6, 0.2)";
-      bottomColorChange = lastValue < displayLastLogicalRangeValue ? "rgb(255, 47, 31, 0.001)" : "rgb(16, 219, 6, 0.001)";
-    } catch(e) {
-      console.log(e)
+
+      colorChange =
+        lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#37C97D";
+      topColorChange =
+        lastValue < displayLastLogicalRangeValue
+          ? "rgb(255, 47, 31, 0.2)"
+          : "rgb(16, 219, 6, 0.2)";
+      bottomColorChange =
+        lastValue < displayLastLogicalRangeValue
+          ? "rgb(255, 47, 31, 0.001)"
+          : "rgb(16, 219, 6, 0.001)";
+    } catch (e) {
+      console.log(e);
     }
-};
-    
-    
-    
-    
-    
+  }
+
   async function getPrePostQuote() {
-  
-  if(!$isOpen) {
-    const postData = { ticker: $etfTicker, path: 'pre-post-quote'};
-      const response = await fetch('/api/ticker-data', {
-      method: 'POST',
-      headers: {
-          "Content-Type": "application/json"
-      },
-      body: JSON.stringify(postData)
-      });
-  
-      prePostData = await response.json();
-  
-    }
-  };
-    
-    
-    
-    
-    
-        let currentDataRow = {'value': '-', 'date': '-'};
-    
-        let lineLegend = null;
-        let displayLegend = {'close': '-', 'date': '-'};
-    
-    
-    
-      
-        function handleSeriesReference(ref) {
-          try {
-            lineLegend = ref;
-          }
-          catch (error)
-          {
-            console.log(error);
-          }
-    
-            
-        };
-    
-    
-    
-    
-    
-    
-    
-    
-    async function handleCrosshairMove({detail: param}) {
-        
-        if (param?.time && !isNaN(param?.seriesData?.get(lineLegend)?.close ?? param?.seriesData?.get(lineLegend)?.value)) 
-        { 
-          $isCrosshairMoveActive = true;
-          try {
-            let graphData;
-              graphData = param?.seriesData?.get(lineLegend);
-  
-              const price = graphData?.close ?? graphData?.value
-              const dateObj = graphData?.time
-              const date = new Date(dateObj);
-  
-              
-              const options = {
-                day: '2-digit',
-                month: '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) {
-    
-            chart?.timeScale().fitContent();
-    
-            chart?.applyOptions({
-              trackingMode: {
-                exitMode: TrackingModeExitMode.OnTouchEnd
-              },
-            });
-    
-          }
-         
-    
-          
-        };
-    
-      
-    
-        let width = 500;
-        //Initial height of graph
-        let height = 350;
-    
-        let observer;
-        let ref;
-    
-        ref = (element) => {
-            if (observer) {
-                observer.disconnect();
-            }
-            if (!element) {
-                return;
-            }
-            
-            observer = new ResizeObserver(([entry]) => {
-                width = entry.contentRect.width;
-                height = entry.contentRect.height;
-            });
-            observer.observe(element);
-        }
-    
-    
-    
-        //===============================================//
-        
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    const options = {
-      width: width,
-      height: height,
-      layout: {
-        background: {
-          color: '#09090B',
-        },
-      
-      },
-      grid: {
-        vertLines: {
-          color: '#09090B',
-          visible: false,
-        },
-        horzLines: {
-          color: '#09090B',
-          visible: false,
-        },
-      },
-      crosshair: {
-        // hide the horizontal crosshair line
-        horzLine: {
-          visible: false,
-          labelVisible: false,
-        },
-        // hide the vertical crosshair label
-        vertLine: {
-          labelVisible: false,
-          style: 0,
-        },
-      },
-      rightPriceScale: {
-        visible: false,
-        borderColor: 'rgba(197, 203, 206, 0.8)',
-      },
-      leftPriceScale: {
-        visible: false,
-        borderColor: 'rgba(197, 203, 206, 0.8)',
-      },
-      handleScale: {
-        mouseWheel: false,
-      },
-      handleScroll: {
-        mouseWheel: false,
-        horzTouchDrag: false,
-        vertTouchDrag: false,
-        pressedMouseMove: false,
-      },
-      timeScale: {
-        borderColor: '#FFFFFF',
-        textColor: '#FFFFFF',
-        visible: false,
-        fixLeftEdge: true,
-        fixRightEdge: true,
-      },
-    };
-    
-    
-    
-    onDestroy(async() => {
-      $priceIncrease = null;
-    })
-    
-  function changeChartType() {
-    if(displayChartType === 'line') {
-      displayChartType = 'candlestick';
-    }
-    else {
-      displayChartType = 'line';
-    }
-  }
-  
-    $: {
-    
-      if ($etfTicker  && typeof window !== 'undefined') // add a check to see if running on client-side
-      {
-    
-        oneDayPrice = [];
-        oneWeekPrice = [];
-        oneMonthPrice = [];
-        oneYearPrice = [];
-        threeYearPrice = [];
-    
-        geographicList = [];
-        sectorList = [];
-        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;
-        
-    
-      
-      const asyncFunctions = [
-        getPrePostQuote(),
-      ];
-
-
-  
-      Promise.all(asyncFunctions)
-          .then((results) => {
-            initializePrice()
-          })
-          .catch((error) => {
-            console.error('An error occurred:', error);
-          });
-        
-        
-      }
-    
-    }
-
-
-
-  $: {
-    if(form)
-    {
-      $globalForm = form;
-    }
-  }
-  
-
-
-async function exportData() {
-  let exportList = [];
-  if(data?.user) {
-    const response = await fetch("/api/historical-price", {
+    if (!$isOpen) {
+      const postData = { ticker: $etfTicker, path: "pre-post-quote" };
+      const response = await fetch("/api/ticker-data", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ticker: $etfTicker, timePeriod: 'max'}),
+        body: JSON.stringify(postData),
       });
 
-    exportList = await response.json();
-
-    exportList = exportList?.map(({ time, open, high, low, close }) => ({
-          date: time,
-          open,
-          high,
-          low,
-          close,
-        }));
-
-
-    const csvRows = [];
-
-    // Add headers row
-    csvRows.push('time,open,high,low,close');
-
-    // Add data rows
-    for (const row of exportList) {
-      const csvRow = `${row.date},${row.open},${row.high},${row.low},${row.close}`;
-      csvRows.push(csvRow);
+      prePostData = await response.json();
     }
-
-    // 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}.csv`);
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-
-  } else {
-     toast.error('Please Sign In', {
-        style: 'border-radius: 200px; background: #333; color: #fff;'
-      });
   }
 
+  let currentDataRow = { value: "-", date: "-" };
+
+  let lineLegend = null;
+  let displayLegend = { close: "-", date: "-" };
+
+  function handleSeriesReference(ref) {
+    try {
+      lineLegend = ref;
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function handleCrosshairMove({ detail: param }) {
+    if (
+      param?.time &&
+      !isNaN(
+        param?.seriesData?.get(lineLegend)?.close ??
+          param?.seriesData?.get(lineLegend)?.value,
+      )
+    ) {
+      $isCrosshairMoveActive = true;
+      try {
+        let graphData;
+        graphData = param?.seriesData?.get(lineLegend);
+
+        const price = graphData?.close ?? graphData?.value;
+        const dateObj = graphData?.time;
+        const date = new Date(dateObj);
+
+        const options = {
+          day: "2-digit",
+          month: "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) {
+      chart?.timeScale().fitContent();
+
+      chart?.applyOptions({
+        trackingMode: {
+          exitMode: TrackingModeExitMode.OnTouchEnd,
+        },
+      });
+    }
+  };
+
+  let width = 500;
+  //Initial height of graph
+  let height = 350;
+
+  let observer;
+  let ref;
+
+  ref = (element) => {
+    if (observer) {
+      observer.disconnect();
+    }
+    if (!element) {
+      return;
+    }
+
+    observer = new ResizeObserver(([entry]) => {
+      width = entry.contentRect.width;
+      height = entry.contentRect.height;
+    });
+    observer.observe(element);
+  };
+
+  //===============================================//
+
+  const options = {
+    width: width,
+    height: height,
+    layout: {
+      background: {
+        color: "#09090B",
+      },
+    },
+    grid: {
+      vertLines: {
+        color: "#09090B",
+        visible: false,
+      },
+      horzLines: {
+        color: "#09090B",
+        visible: false,
+      },
+    },
+    crosshair: {
+      // hide the horizontal crosshair line
+      horzLine: {
+        visible: false,
+        labelVisible: false,
+      },
+      // hide the vertical crosshair label
+      vertLine: {
+        labelVisible: false,
+        style: 0,
+      },
+    },
+    rightPriceScale: {
+      visible: false,
+      borderColor: "rgba(197, 203, 206, 0.8)",
+    },
+    leftPriceScale: {
+      visible: false,
+      borderColor: "rgba(197, 203, 206, 0.8)",
+    },
+    handleScale: {
+      mouseWheel: false,
+    },
+    handleScroll: {
+      mouseWheel: false,
+      horzTouchDrag: false,
+      vertTouchDrag: false,
+      pressedMouseMove: false,
+    },
+    timeScale: {
+      borderColor: "#FFFFFF",
+      textColor: "#FFFFFF",
+      visible: false,
+      fixLeftEdge: true,
+      fixRightEdge: true,
+    },
+  };
+
+  onDestroy(async () => {
+    $priceIncrease = null;
+  });
+
+  $: {
+    if ($etfTicker && typeof window !== "undefined") {
+      // add a check to see if running on client-side
+      oneDayPrice = [];
+      oneWeekPrice = [];
+      oneMonthPrice = [];
+      oneYearPrice = [];
+      threeYearPrice = [];
+
+      geographicList = [];
+      sectorList = [];
+      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;
+
+      const asyncFunctions = [getPrePostQuote()];
+
+      Promise.all(asyncFunctions)
+        .then((results) => {
+          initializePrice();
+        })
+        .catch((error) => {
+          console.error("An error occurred:", error);
+        });
+    }
+  }
+
+  $: {
+    if (form) {
+      $globalForm = form;
+    }
   }
 </script>
 
-
 <svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$etfTicker}) Stock Price, Quote & News · stocknear
+  </title>
 
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-<title>
-  {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) Stock Price, Quote & News · stocknear
-</title>
-
-<meta name="description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}>
-<!-- Other meta tags -->
-<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
-<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-<meta property="og:type" content="website"/>
-<!-- Add more Open Graph meta tags as needed -->
-
-<!-- Twitter specific meta tags -->
-<meta name="twitter:card" content="summary_large_image"/>
-<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
-<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-<!-- Add more Twitter meta tags as needed -->
+  <meta
+    name="description"
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+  />
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+  />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
 
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+  />
+  <!-- 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="w-full m-auto">
+    <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
+      <!-- Main content -->
+      <div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
+        <div class="xl:pr-10">
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-label-has-associated-control -->
 
+          <div class="flex flex-row items-start w-full sm:pl-6">
+            <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}
 
-        <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
-            <!-- Main content -->
-            <div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
-              <div class="xl:pr-10">
-    
-        
-                                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                    <!-- svelte-ignore a11y-label-has-associated-control -->
-                                    
-                                    <div class="flex flex-row items-start w-full sm:pl-6">
-                                      <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}
-                                            
-                                          {#if $priceIncrease === true}
-                                          <div style="background-color: green;" class="inline-block pulse rounded-full w-3 h-3 ml-2" ></div>
-                                          {:else if $priceIncrease === false}
-                                          <div style="background-color: red;" class="inline-block pulse rounded-full w-3 h-3 ml-2" ></div>
-                                          {/if}
-  
-                                      </div>  
-  
-                                      
-                                        
-      
-                                      <div 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="#37C97D" 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-[#37C97D] font-medium text-xs sm:text-sm">+{displayLegend?.change}%</span> 
-                                        {:else if displayLegend?.change < 0}
-                                        <svg class="inline-block w-5 h-5 mt-0.5 -mr-0.5 rotate-180"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
-                                        <span class="items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">{displayLegend?.change}% </span> 
-                                        {/if}
-  
-                                        <span class="ml-3 text-white text-xs sm:text-sm">{displayLegend?.date}</span>
-                                        
-  
-                                      
-                                      </div>
-  
-                                      </div>
-                                      
-                                      {#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-[#37C97D] 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 text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
-                                          <span>Pre-market:</span>
-                                            <svg class="ml-1 w-4 h-4 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#EA9703" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
-                                        </div>
-                                        {:else}
-                                        <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
-                                          <span>Post-market:</span>
-                                            <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
-                                        </div>
-                                        {/if}
-  
-                                      </div>
-                                      {/if}
-  
-                 
-                                    </div>
-                                  <!-----End-Header-CandleChart-Indicators------>
-    
-    
-                                  <!--Start Time Interval-->
-                                    <div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4 ">
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1D
-                                      </button>
-                                      <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
-                                      </div>
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1W
-                                      </button>
-                                      <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                      </div>
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1M
-                                      </button>
-                                      <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                      </div>
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          6M
-                                      </button>
-                                      <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                      </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1Y
-                                      </button>
-                                      <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    
-                                    <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          MAX
-                                      </button>
-                                      <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    
-                                    </div>
-  
-  
-    
-                                  <Button on:click={changeChartType} 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">
-                                    {#if displayChartType === "line"}
-                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z" /></svg>
-                                    {:else}
-                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5" /></svg>
-                                    {/if}
-                                  
-                                    </Button>
+                {#if $priceIncrease === true}
+                  <div
+                    style="background-color: green;"
+                    class="inline-block pulse rounded-full w-3 h-3 ml-2"
+                  ></div>
+                {:else if $priceIncrease === false}
+                  <div
+                    style="background-color: red;"
+                    class="inline-block pulse rounded-full w-3 h-3 ml-2"
+                  ></div>
+                {/if}
+              </div>
 
-                                    <Button on:click={exportData} class="ml-2 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>
-                                    </Button>
-                                    
-                                  </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'}
-                                          <AreaSeries 
-                                            data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                            lineWidth={1.5}
-                                            priceScaleId="left"
-                                            lineColor={colorChange}
-                                            topColor={topColorChange}
-                                            bottomColor={bottomColorChange}
-                                            crosshairMarkerVisible={false}
-                                            ref={handleSeriesReference}
-                                            priceLineVisible= {false}
-                                            lastPriceAnimation={1}
-                                            >
-                                            <PriceLine
-                                              price={oneDayPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                          </AreaSeries>
-                                          {:else}
-                                          <CandlestickSeries
-                                              data={oneDayPrice}
-                                              crosshairMarkerVisible={false}
-                                              ref={handleSeriesReference}
-                                              priceLineVisible= {false}
-                                              >
-                                            <PriceLine
-                                              price={oneDayPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                        </CandlestickSeries>
-                                          {/if}
-                                          {:else if displayData === '1W'}
-                                          {#if displayChartType === 'line'}
-                                          <AreaSeries 
-                                            data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                            lineWidth={1.5}
-                                            priceScaleId="left"
-                                            lineColor={colorChange}
-                                            topColor={topColorChange}
-                                            bottomColor={bottomColorChange}
-                                            crosshairMarkerVisible={false}
-                                            ref={handleSeriesReference}
-                                            priceLineVisible= {false}
-                                            lastPriceAnimation={1}
-                                            >
-                                            <PriceLine
-                                              price={oneWeekPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                          </AreaSeries>
-                                          {:else}
-                                          <CandlestickSeries
-                                              data={oneWeekPrice}
-                                              crosshairMarkerVisible={false}
-                                              ref={handleSeriesReference}
-                                              priceLineVisible= {false}
-                                              >
-                                            <PriceLine
-                                              price={oneWeekPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                        </CandlestickSeries>
-                                          {/if}
-      
-                                          {:else if displayData === '1M'}
-                                          {#if displayChartType === 'line'}
-                                          <AreaSeries 
-                                            data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                            lineWidth={1.5}
-                                            priceScaleId="left"
-                                            lineColor={colorChange}
-                                            topColor={topColorChange}
-                                            bottomColor={bottomColorChange}
-                                            crosshairMarkerVisible={false}
-                                            ref={handleSeriesReference}
-                                            priceLineVisible= {false}
-                                            lastPriceAnimation={1}
-                                            >
-                                            <PriceLine
-                                              price={oneMonthPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                          </AreaSeries>
-                                          {:else}
-                                          <CandlestickSeries
-                                              data={oneMonthPrice}
-                                              crosshairMarkerVisible={false}
-                                              ref={handleSeriesReference}
-                                              priceLineVisible= {false}
-                                              >
-                                            <PriceLine
-                                              price={oneMonthPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                        </CandlestickSeries>
-                                          {/if}
-      
-      
-                                          {:else if displayData === '6M'}
-                                          {#if displayChartType === 'line'}
-                                          <AreaSeries 
-                                          data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                            lineWidth={1.5}
-                                            priceScaleId="left"
-                                            lineColor={colorChange}
-                                            topColor={topColorChange}
-                                            bottomColor={bottomColorChange}
-                                            crosshairMarkerVisible={false}
-                                            ref={handleSeriesReference}
-                                            priceLineVisible= {false}
-                                            lastPriceAnimation={1}
-                                            >
-                                            <PriceLine
-                                              price={sixMonthPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                          </AreaSeries>
-                                          {:else}
-                                          <CandlestickSeries
-                                              data={sixMonthPrice}
-                                              crosshairMarkerVisible={false}
-                                              ref={handleSeriesReference}
-                                              priceLineVisible= {false}
-                                              >
-                                            <PriceLine
-                                              price={sixMonthPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                        </CandlestickSeries>
-                                          {/if}
-      
-      
-      
-                                          {:else if displayData === '1Y'}
-                                          {#if displayChartType === 'line'}
-                                          <AreaSeries 
-                                          data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                            lineWidth={1.5}
-                                            priceScaleId="left"
-                                            lineColor={colorChange}
-                                            topColor={topColorChange}
-                                            bottomColor={bottomColorChange}
-                                            crosshairMarkerVisible={false}
-                                            ref={handleSeriesReference}
-                                            priceLineVisible= {false}
-                                            lastPriceAnimation={1}
-                                            >
-                                            <PriceLine
-                                              price={oneYearPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                          </AreaSeries>
-                                          {:else}
-                                          <CandlestickSeries
-                                              data={oneYearPrice}
-                                              crosshairMarkerVisible={false}
-                                              ref={handleSeriesReference}
-                                              priceLineVisible= {false}
-                                              >
-                                            <PriceLine
-                                              price={oneYearPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                        </CandlestickSeries>
-                                          {/if}
-      
-      
-      
-                                          {:else if displayData === 'MAX'}
-                                          {#if displayChartType === 'line'}
-                                          <AreaSeries 
-                                            data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                            lineWidth={1.5}
-                                            priceScaleId="left"
-                                            lineColor={colorChange}
-                                            topColor={topColorChange}
-                                            bottomColor={bottomColorChange}
-                                            crosshairMarkerVisible={false}
-                                            ref={handleSeriesReference}
-                                            priceLineVisible= {false}
-                                            lastPriceAnimation={1}
-                                            >
-                                            <PriceLine
-                                              price={threeYearPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                          </AreaSeries>
-                                          {:else}
-                                          <CandlestickSeries
-                                              data={threeYearPrice}
-                                              crosshairMarkerVisible={false}
-                                              ref={handleSeriesReference}
-                                              priceLineVisible= {false}
-                                              >
-                                            <PriceLine
-                                              price={threeYearPrice?.at(0)?.close}
-                                              lineWidth = {1}
-                                              color="#fff"
-                                            />
-                                        </CandlestickSeries>
-                                          {/if}
-      
-      
-                                        {/if}
-                                        </Chart>
-                                      
-                                      {/if}
-    
-                                    </div>
-                                    {:else}
-                                   <!-- else output not loaded yet-->
-                                      <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
-                                        <div class="relative">
-                                          <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                                            <span class="loading loading-spinner loading-md text-gray-400"></span>
-                                          </label>
-                                      </div>  
-                                    </div>
-                                  {/if}
-                                    
-                                    <!--End Graph-->
-  
-  
-                                    <!--Start Time Interval-->
-                                    <div class="pl-1 w-screen sm:hidden flex flex-row items-center">
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1D
-                                      </button>
-                                      <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
-                                      </div>
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1W
-                                      </button>
-                                      <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                      </div>
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1M
-                                      </button>
-                                      <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                      </div>
-                                      <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          6M
-                                      </button>
-                                      <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                      </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          1Y
-                                      </button>
-                                      <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    
-                                    <div class="flex flex-col items-center mr-4">
-                                      <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
-                                          MAX
-                                      </button>
-                                      <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-  
-                                    <label on:click={changeChartType} class="ml-auto mr-5 -mt-1 sm:hidden border border-slate-800 px-2.5 py-1 rounded-xl">
-                                      {#if displayChartType === 'line'}
-                                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
-                                        {:else}
-                                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5"/></svg>
-                                        {/if}
-                                    </label>
-                                      
-                                      </div>
-                                      <!--End Time Interval-->
-    
-    
-    
-                                   
-                      
-                                  {#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={etfProfile}
-                                      similarTicker={similarTicker}
-                                      topHoldingList={topHoldingList}
-                                      dividendList={dividendList}
-                                      data={data}
-                                    />
-    
-                                  </div>
-                                  {/if}
+              <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="#37C97D"
+                          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-[#37C97D] 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}
 
-    
-                                  <Lazy>
-                                    <div class="w-full mt-10  m-auto sm:p-6 {data?.getWhyPriceMoved?.length !== 0  ? '' : 'hidden'}">
-                                    {#await import('$lib/components/WIIM.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                  </Lazy>
+                <span class="ml-3 text-white text-xs sm:text-sm"
+                  >{displayLegend?.date}</span
+                >
+              </div>
+            </div>
 
-                                <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>
-                                </Lazy>
-    
-                                  <Lazy>
-                                    <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/VaR.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                  </Lazy>
-                                  
-                                  <Lazy>
-                                    <div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {!$optionComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                  </Lazy>
+            {#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-[#37C97D] font-medium text-xs sm:text-sm"
+                      >({prePostData?.changesPercentage}%)</span
+                    >
+                  {:else if prePostData?.changesPercentage < 0}
+                    <span
+                      class="ml-1 items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm"
+                      >({prePostData?.changesPercentage}%)</span
+                    >
+                  {/if}
+                </div>
+                {#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
+                  <div
+                    class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24"
+                  >
+                    <span>Pre-market:</span>
+                    <svg
+                      class="ml-1 w-4 h-4 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 256 256"
+                      ><path
+                        fill="#EA9703"
+                        d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"
+                      /></svg
+                    >
+                  </div>
+                {:else}
+                  <div
+                    class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28"
+                  >
+                    <span>Post-market:</span>
+                    <svg
+                      class="ml-1 w-4 h-4 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 256 256"
+                      ><path
+                        fill="#70A1EF"
+                        d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
+                      /></svg
+                    >
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+          <!-----End-Header-CandleChart-Indicators------>
 
-                                  <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={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 = {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 = {sectorList}
-                                            />
-                                          {/if}
-                                      </div>  
-                                      <!--End SectorSegmentation -->
-                                      
-                                      
+          <!--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>
 
-          
-                                      <Lazy>
-                                        <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
-                                          {#await import('$lib/components/TARating.svelte') then {default: Comp}}
-                                            <svelte:component this={Comp} data={data}/>
-                                          {/await}
-                                        </div>
-                                      </Lazy>
-                                  
-    
-                                  
-                                      <!--
+            <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-->
+
+          <!--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"}
+                      <AreaSeries
+                        data={oneDayPrice?.map(({ time, close }) => ({
+                          time,
+                          value: close,
+                        }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine
+                          price={oneDayPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries
+                        data={oneDayPrice}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                      >
+                        <PriceLine
+                          price={oneDayPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1W"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneWeekPrice?.map(({ time, close }) => ({
+                          time,
+                          value: close,
+                        }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine
+                          price={oneWeekPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries
+                        data={oneWeekPrice}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                      >
+                        <PriceLine
+                          price={oneWeekPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1M"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneMonthPrice?.map(({ time, close }) => ({
+                          time,
+                          value: close,
+                        }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine
+                          price={oneMonthPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries
+                        data={oneMonthPrice}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                      >
+                        <PriceLine
+                          price={oneMonthPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "6M"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={sixMonthPrice?.map(({ time, close }) => ({
+                          time,
+                          value: close,
+                        }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine
+                          price={sixMonthPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries
+                        data={sixMonthPrice}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                      >
+                        <PriceLine
+                          price={sixMonthPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1Y"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneYearPrice?.map(({ time, close }) => ({
+                          time,
+                          value: close,
+                        }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine
+                          price={oneYearPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries
+                        data={oneYearPrice}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                      >
+                        <PriceLine
+                          price={oneYearPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "MAX"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={threeYearPrice?.map(({ time, close }) => ({
+                          time,
+                          value: close,
+                        }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine
+                          price={threeYearPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries
+                        data={threeYearPrice}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                      >
+                        <PriceLine
+                          price={threeYearPrice?.at(0)?.close}
+                          lineWidth={1}
+                          color="#fff"
+                        />
+                      </CandlestickSeries>
+                    {/if}
+                  {/if}
+                </Chart>
+              {/if}
+            </div>
+          {:else}
+            <!-- else output not loaded yet-->
+            <div
+              class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center"
+            >
+              <div class="relative">
+                <label
+                  class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                >
+                  <span class="loading loading-spinner loading-md text-gray-400"
+                  ></span>
+                </label>
+              </div>
+            </div>
+          {/if}
+
+          <!--End Graph-->
+
+          <!--Start Time Interval-->
+          <div class="pl-1 w-screen sm:hidden flex flex-row items-center">
+            <div class="flex flex-col items-center mr-4">
+              <button
+                on:click={() => changeData("1D")}
+                class="text-sm font-medium text-gray-400 {displayData === '1D'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
+              >
+                1D
+              </button>
+              <div
+                class="{displayData === '1D'
+                  ? `bg-[${colorChange}]`
+                  : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full"
+              />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button
+                on:click={() => changeData("1W")}
+                class="w-full text-sm font-medium text-gray-400 {displayData ===
+                '1W'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
+              >
+                1W
+              </button>
+              <div
+                class="{displayData === '1W'
+                  ? `bg-[${colorChange}]`
+                  : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]"
+              />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button
+                on:click={() => changeData("1M")}
+                class="text-sm font-medium text-gray-400 {displayData === '1M'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
+              >
+                1M
+              </button>
+              <div
+                class="{displayData === '1M'
+                  ? `bg-[${colorChange}]`
+                  : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]"
+              />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button
+                on:click={() => changeData("6M")}
+                class="text-sm font-medium text-gray-400 {displayData === '6M'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
+              >
+                6M
+              </button>
+              <div
+                class="{displayData === '6M'
+                  ? `bg-[${colorChange}]`
+                  : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]"
+              />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button
+                on:click={() => changeData("1Y")}
+                class="text-sm font-medium text-gray-400 {displayData === '1Y'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
+              >
+                1Y
+              </button>
+              <div
+                class="{displayData === '1Y'
+                  ? `bg-[${colorChange}]`
+                  : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]"
+              />
+            </div>
+
+            <div class="flex flex-col items-center mr-4">
+              <button
+                on:click={() => changeData("MAX")}
+                class="text-sm font-medium text-gray-400 {displayData === 'MAX'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
+              >
+                MAX
+              </button>
+              <div
+                class="{displayData === 'MAX'
+                  ? `bg-[${colorChange}]`
+                  : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]"
+              />
+            </div>
+          </div>
+          <!--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="w-full mt-10 m-auto sm:p-6 {data?.getWhyPriceMoved
+                ?.length !== 0
+                ? ''
+                : 'hidden'}"
+            >
+              {#await import("$lib/components/WIIM.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
+
+          <Lazy>
+            <div
+              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fomcImpactComponent
+                ? 'hidden'
+                : ''}"
+            >
+              {#await import("$lib/components/FOMCImpact.svelte") then { default: Comp }}
+                <svelte:component this={Comp} />
+              {/await}
+            </div>
+          </Lazy>
+
+          <Lazy>
+            <div
+              class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent
+                ? 'hidden'
+                : ''}"
+            >
+              {#await import("$lib/components/VaR.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
+
+          <Lazy>
+            <div
+              class="w-full mt-10 sm:mt-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>
       </div>
-    </section>
-    
-    
-    
-    
-    
-    
-    <!--End-Indicator-Modal-->
-    
-    
-    <style lang='scss'>
-       
-    
-    
-    
-    canvas {
-      width: 100%;
-      height: 100%;
-      max-width: 800px;
-      max-height: 450px;
+    </div>
+  </div>
+</section>
+
+<!--End-Indicator-Modal-->
+
+<style lang="scss">
+  canvas {
+    width: 100%;
+    height: 100%;
+    max-width: 800px;
+    max-height: 450px;
+  }
+
+  .pulse {
+    position: relative;
+    animation: pulse-animation 1s forwards cubic-bezier(0.5, 0, 0.5, 1);
+  }
+
+  @keyframes pulse-animation {
+    0% {
+      transform: scale(0.9);
+      opacity: 1;
     }
-    
-    .pulse {
-      position: relative;
-      animation: pulse-animation 1s forwards cubic-bezier(0.5, 0, 0.5, 1);
+    100% {
+      transform: scale(0.9);
+      opacity: 0;
     }
-    
-    @keyframes pulse-animation {
-      0% {
-        transform: scale(0.9);
-        opacity: 1;
-      }
-      100% {
-        transform: scale(0.9);
-        opacity: 0;
-      }
-    }
-    
-    
-    :root {
-      --date-picker-background: #09090B;
-      --date-picker-foreground: #f7f7f7;
-    }
-    
-    
-    
-    </style>
\ No newline at end of file
+  }
+
+  :root {
+    --date-picker-background: #09090b;
+    --date-picker-foreground: #f7f7f7;
+  }
+</style>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index f9b00005..21225137 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -709,6 +709,48 @@
 
   async function exportData(timePeriod: string) {
     let exportList = [];
+
+    const response = await fetch("/api/export-price-data", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ ticker: $stockTicker, timePeriod: timePeriod }),
+    });
+
+    exportList = await response.json();
+
+    exportList = exportList?.map(({ time, open, high, low, close, date }) => ({
+      date: timePeriod === "max" ? time : date, // Use 'time' if timePeriod is "max", otherwise use 'date'
+      open,
+      high,
+      low,
+      close,
+    }));
+
+    const csvRows = [];
+
+    // Add headers row
+    csvRows.push("time,open,high,low,close");
+
+    // Add data rows
+    for (const row of exportList) {
+      const csvRow = `${row.date},${row.open},${row.high},${row.low},${row.close}`;
+      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", `${$stockTicker}_${timePeriod}.csv`);
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    /*
     if (data?.user) {
       const response = await fetch("/api/historical-price", {
         method: "POST",
@@ -757,6 +799,7 @@
         style: "border-radius: 200px; background: #333; color: #fff;",
       });
     }
+      */
   }
 
   function updateClosePrice(data, extendPriceChart) {
@@ -1097,37 +1140,38 @@
               />
             </div>
 
-            <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"
+            {#if !$stockTicker.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"
                   >
-                    <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>
-                  <!--
+                    <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 
@@ -1141,11 +1185,11 @@
                         15 min
                       </DropdownMenu.Item>
                     -->
-                  <DropdownMenu.Item
-                    on:click={() => exportData("30min")}
-                    class="cursor-pointer hover:bg-[#27272A]"
-                  >
-                    <!--<svg
+                    <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'
                         : ''}"
@@ -1157,13 +1201,13 @@
                       /></svg
                     >
                       -->
-                    30 min
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item
-                    on:click={() => exportData("1hour")}
-                    class="cursor-pointer hover:bg-[#27272A]"
-                  >
-                    <!--
+                      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'
@@ -1176,17 +1220,18 @@
                       /></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>
+                      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-->