diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 4022547d..01e4a672 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -45,7 +45,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
   
   <!--Start Analyst Card -->
   <div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">  
-    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
+    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
      
       <!--Start Content-->
       <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
diff --git a/src/lib/components/ClinicalTrial.svelte b/src/lib/components/ClinicalTrial.svelte
index cf0141e0..f43386e9 100644
--- a/src/lib/components/ClinicalTrial.svelte
+++ b/src/lib/components/ClinicalTrial.svelte
@@ -4,10 +4,10 @@ import InfoModal from '$lib/components/InfoModal.svelte';
 import { Chart } from 'svelte-echarts'
 import { abbreviateNumber, formatString } from "$lib/utils";
 import { init, use } from 'echarts/core'
-import { LineChart } from 'echarts/charts'
+import { BarChart } from 'echarts/charts'
 import { GridComponent, TooltipComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
-use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
+use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
 
     export let data;
 
@@ -147,6 +147,7 @@ function getPlotOptions() {
         ],
     series: [
         {
+        name: '# of Trials',
         data: valueList,
         type: 'bar',
         itemStyle: {
diff --git a/src/lib/components/CryptoProfileCard.svelte b/src/lib/components/CryptoProfileCard.svelte
index f4ce9f43..af612e8b 100644
--- a/src/lib/components/CryptoProfileCard.svelte
+++ b/src/lib/components/CryptoProfileCard.svelte
@@ -47,7 +47,7 @@
   </script>
   
   <div class="sm:space-y-3">  
-    <div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
+    <div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
 
          <!--Start Header-->
         <div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$cryptoTicker?.toUpperCase()}.jpg`});">
diff --git a/src/lib/components/DividendCard.svelte b/src/lib/components/DividendCard.svelte
index 86f46c52..2ad5ef91 100644
--- a/src/lib/components/DividendCard.svelte
+++ b/src/lib/components/DividendCard.svelte
@@ -14,7 +14,6 @@
             dividendHistoryList = dividendList?.history;
 
             dividendYield = dividendList?.dividendYield;
-            console.log(dividendList)
 
         }
 }
@@ -25,7 +24,7 @@
           
           <div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">  
           
-          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
+          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
           
             <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
               <div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
diff --git a/src/lib/components/ESGCard.svelte b/src/lib/components/ESGCard.svelte
index e20be0bf..09cf39c6 100644
--- a/src/lib/components/ESGCard.svelte
+++ b/src/lib/components/ESGCard.svelte
@@ -20,23 +20,14 @@ $: {
   if ($stockTicker && typeof window !== 'undefined' && typeof stockDeck !== 'undefined' && stockDeck?.length !== 0)
   {
    
-    info = stockDeck[0]
-
-
+    info = stockDeck?.at(0)
     esgScore = info?.esgScore !== 'n/a' ? Math.round(info?.esgScore.toFixed(1)) : 'n/a';
     socialScore = info?.socialScore !== 'n/a' ? Math.round(info?.socialScore.toFixed(1)) : 'n/a';
-    environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore.toFixed(1)) : 'n/a';
-    governanceScore =  info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore.toFixed(1)) : 'n/a';
+    environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore?.toFixed(1)) : 'n/a';
+    governanceScore =  info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore?.toFixed(1)) : 'n/a';
     esgRiskRating = info?.esgRiskRating;
   
     };
-    /*
-    if (esgRatingCircleContainer)
-    {
-      esgRatingAcc(esgScore/100);
-    }
-    */
-
   }
 
 
@@ -50,7 +41,7 @@ $: {
 
 <!--Start ESG Card -->
 <div class="space-y-3 lg:pt-5 hidden lg:block lg:{esgScore && esgRiskRating && environmentalScore && governanceScore !== 'n/a' ? '' : 'hidden'}">  
-  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
    
     <!--Start Content-->
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
@@ -146,20 +137,16 @@ $: {
   <div class="bg-[#000] h-auto w-screen">
   
     <!--Start Header-->
-    <div class="bg-[#27272A] w-full  p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
-      <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
+    <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
+      <h2 class="text-center m-auto text-[1.1rem] font-semibold text-white mt-5">
         ESG Score
       </h2>
 
-      <div class="flex flex-col items-center mt-10 w-full">
-        <span class="text-white text-center text-md text-opacity-[0.8]">
+      <div class="flex flex-col items-center mt-10 mb-5 w-full px-3">
+        <span class="text-white text-center text-md">
           Gain valuable insights into a company's sustainability by evaluating its ESG (Environmental, Social, and Governance) scores.
         </span>
 
-        <div class="flex flex-row justify-center items-center w-full mt-5">
-
-        
-        </div>
       </div>
     </div>
     <!--End Header-->
diff --git a/src/lib/components/ETFKeyInformation.svelte b/src/lib/components/ETFKeyInformation.svelte
index e06711a0..7f181a11 100644
--- a/src/lib/components/ETFKeyInformation.svelte
+++ b/src/lib/components/ETFKeyInformation.svelte
@@ -72,7 +72,7 @@
   
   <div class="w-screen overflow-y-scroll" >
 
-    <ETFProfileCard etfProfile = {etfProfile}/>
+    <ETFProfileCard data={data} etfProfile = {etfProfile}/>
 
         
   </div>
diff --git a/src/lib/components/ETFProfileCard.svelte b/src/lib/components/ETFProfileCard.svelte
index 02e77313..2d9d6343 100644
--- a/src/lib/components/ETFProfileCard.svelte
+++ b/src/lib/components/ETFProfileCard.svelte
@@ -6,27 +6,21 @@
     import { goto } from '$app/navigation';
     import defaultImage from '$lib/images/etf/cover/default.jpg';
     
-    export let logoUrl;
     export let etfProfile;
-  
+    export let data;
   
     let info;
-    let imageUrl;
-  
-    let tierList = 'S';
     let assetClass = '-';
     let aum = '-';
     let avgVolume = '-';
     let inceptionDate = '-';
     let holdingsCount = '-';
-    let exchange = '-';
     let provider = '-';
     let sectorExposed;
     let country;
     let description = '';
     let website = '-';
     let snippet;
-  
 
 let showFullText = false;
   
@@ -50,13 +44,12 @@ let showFullText = false;
       description = info?.description ?? 'A detailed description of the company is not yet available.';
       website = info?.website;
       snippet= description?.slice(0, 150) + "...";
-  
     }
   }
   </script>
   
   <div class="sm:space-y-3">  
-    <div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
+    <div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
 
          <!--Start Header-->
          <div class="lg:rounded-t-sm w-full h-[130px] bg-[#09090B] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url('{defaultImage}');">
@@ -92,35 +85,57 @@ let showFullText = false;
         <div class="w-full flex flex-wrap border-t border-slate-800">
           <h2 class="text-start ml-4 text-2xl font-bold text-white pb-2 mt-3">ETF Info</h2>
           <div class="flex items-center w-full">
-            <table class="table table-md table-compact">
+            <table class="table table-sm table-compact">
               <tbody>
-                <!-- row 1 -->
-                <tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
-                  <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Name</td>
-                  <td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0,30) + '...' : $displayCompanyName}</td>
-                  <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Ticker</td>
-                  <td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$etfTicker}</td>
+              
+     
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Provider</td>
+                  <td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-center sm:text-end text-blue-400 lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Country</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{country?.length !== 0 ? country : '-'}</td>
                 </tr>
-                 <!-- row 3 -->
-                 <tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
-                  <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Provider</td>
-                  <td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-blue-400 lg:border-b lg:border-[#27272A] lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
-                  <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Country</td>
-                  <td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{country?.length !== 0 ? country : '-'}</td>
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">AUM</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(aum,true)}</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Vol</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
                 </tr>
-                <!-- row 2 -->
-                <tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
-                  <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Value</td>
-                  <td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(aum,true)}</td>
-                  <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Volume</td>
-                  <td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(avgVolume)}</td>
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">NAV</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{info?.nav?.toFixed(2)}</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Expense Ratio</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{info?.expenseRatio?.toFixed(2)}%</td>
                 </tr>
-                <!-- row 3 -->
-                <tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
-                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Holdings</td>
-                  <td class="bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td>
-                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Inception</td>
-                  <td class="bg-[#000] lg:bg-[#09090B]">{inceptionDate}</td>
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Avg. Vol</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{abbreviateNumber(avgVolume)}</td>
+                </tr>
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
+                </tr>
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps?.toFixed(2)}</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe?.toFixed(2)}</td>
+                </tr>
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Dividend Yield</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockDividend?.dividendYield?.toFixed(2)}%</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Payout Ratio</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockDividend?.payoutRatio?.toFixed(2)}%</td>
+                </tr>
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Holdings</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Inception</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{inceptionDate}</td>
                 </tr>
               </tbody>
             </table>
diff --git a/src/lib/components/ExecutiveCard.svelte b/src/lib/components/ExecutiveCard.svelte
index 89a365b9..d0f5b532 100644
--- a/src/lib/components/ExecutiveCard.svelte
+++ b/src/lib/components/ExecutiveCard.svelte
@@ -80,13 +80,13 @@ afterUpdate(async() => {
 <div class="space-y-3 sm:pt-5">  
   <div class="bg-[#000] h-auto w-screen">
     <!--Start Header-->
-    <div class="bg-[#27272A] w-full  p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
+    <div class="w-full  p-1 flex flex-col items-center pb-5 h-auto">
       <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
         Executives
       </h2>
 
       <div class="{!isLoaded ? 'hidden' : ''} flex flex-col items-center mt-10 w-full">
-        <span class="text-white text-md text-opacity-[0.55]">
+        <span class="text-white text-[1rem]">
           Female/Total Ratio
         </span>
 
@@ -128,10 +128,10 @@ afterUpdate(async() => {
           <!--Start Item-->
           <div class="flex flex-row items-center pl-4 pr-4 w-full mb-3">
                 
-            <div class="w-full rounded-md bg-[#27272A] shadow-lg h-auto pb-3 pl-3 pt-3">
+            <div class="w-full rounded-md bg-[#27272A] h-auto pb-3 pl-3 pt-3">
                 <div class="flex flex-row items-center relative">  
                     <div class="flex flex-col">
-                      <div class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-[1rem] w-56">
+                      <div class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-sm w-56">
                         <span>
                           {item?.name}
                         {#if item?.yearBorn !== null}
@@ -140,7 +140,7 @@ afterUpdate(async() => {
                       </span>
 
                       </div>
-                        <span class="text-white text-opacity-[0.6] text-sm w-48">
+                        <span class="text-gray-300 text-sm w-48">
                         {item?.title}
                         </span>
                     </div>
@@ -148,7 +148,7 @@ afterUpdate(async() => {
                     {#if item?.gender === 'male'}
                     <div class="flex flex-row items-center ml-auto absolute right-3 top-0">
                       <div class="h-full bg-[#27272A] transform -translate-x-1/2" aria-hidden="true"></div>
-                      <div class="w-2 h-2 bg-[#FF2F1F] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+                      <div class="w-2 h-2 bg-[#FF2F1F] box-content rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
                       <span class="text-white text-[0.85rem] inline-block">
                         Male
                       </span>
@@ -156,7 +156,7 @@ afterUpdate(async() => {
                     {:else if item?.gender === 'female'}
                     <div class="flex flex-row items-center ml-auto absolute right-3 top-0">
                       <div class="h-full bg-[#27272A] transform -translate-x-1/2 " aria-hidden="true"></div>
-                      <div class="w-2 h-2 bg-[#0FC008] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+                      <div class="w-2 h-2 bg-[#0FC008] box-content rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
                       <span class="text-white text-[0.85rem] inline-block">
                         Female
                       </span>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index f89e5c60..ab9b2291 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -54,9 +54,11 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
             <a href="/pricing" class="no-underline hover:underline text-gray-300  sm:hover:text-purple-400">Pricing</a>
           </li>
+          <!--
           <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
             <a href="/changelog" class="no-underline hover:underline text-gray-300  sm:hover:text-purple-400">Changelog</a>
           </li>
+          -->
         </ul>
       </div>
 
diff --git a/src/lib/components/MiniPlot.svelte b/src/lib/components/MiniPlot.svelte
index 496b80ba..2c00bbed 100644
--- a/src/lib/components/MiniPlot.svelte
+++ b/src/lib/components/MiniPlot.svelte
@@ -15,7 +15,7 @@
   const bottomLineColor = '#FF7070';
   const bottomFillColor1 = 'rgba(239, 83, 80, 0.2)';
 
-  let width = $screenWidth < 640 ? 80 : $screenWidth < 1200 ? 150 : 180 //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
+  let width = $screenWidth < 640 ? 80 : $screenWidth < 1500 ? 150 : 220 //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
 
   
   //Initial height of graph
diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
new file mode 100644
index 00000000..bcb99c18
--- /dev/null
+++ b/src/lib/components/NextEarnings.svelte
@@ -0,0 +1,88 @@
+<script lang='ts'>
+import { stockTicker, displayCompanyName } from "$lib/store";
+import InfoModal from '$lib/components/InfoModal.svelte';
+import { abbreviateNumber } from "$lib/utils";
+export let data;
+
+let rawData = {};
+let revenueRatio = 0;
+let epsRatio = 0;
+
+function compareTimes(time1, time2) {
+  const [hours1, minutes1] = time1?.split(':').map(Number);
+  const [hours2, minutes2] = time2?.split(':').map(Number);
+  
+  if (hours1 > hours2) return 1;
+  if (hours1 < hours2) return -1;
+  if (minutes1 > minutes2) return 1;
+  if (minutes1 < minutes2) return -1;
+  return 0;
+}
+
+
+$: {
+    if($stockTicker && typeof window !== 'undefined') {
+        rawData = data?.getNextEarnings;
+        epsRatio = ((rawData?.epsEst/rawData?.epsPrior-1)*100)?.toFixed(2)
+        revenueRatio = ((rawData?.revenueEst/rawData?.revenuePrior-1)*100)?.toFixed(2)
+    }
+}
+
+</script>
+
+
+{#if Object?.keys(rawData)?.length !== 0}
+
+<div class="space-y-3 overflow-hidden">  
+    <!--Start Content-->
+    <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
+
+        <div class="flex flex-col items-center w-full mb-6">
+            <div class="flex flex-row justify-start mr-auto items-center">
+            <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
+            <div class="flex flex-row items-center">
+                <label for="nextEarningsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+                Next Earnings Release
+                </label>
+                <InfoModal
+                title={"Next Earnings"}
+                content={`Earnings represent a company's net profit after expenses, taxes, and costs. Reported quarterly, they show financial health, including revenue and EPS, influencing stock prices and investor decisions.`}
+                id={"nextEarningsInfo"}
+                />
+                </div>
+
+            </div>
+        </div>
+
+    {#if data?.user?.tier === 'Pro'}
+        <div class="text-white text-[1rem]">
+            {$displayCompanyName} is scheduled to release its earnings on  {new Date(rawData?.date ?? null)?.toLocaleString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+                timeZone: 'Europe/Berlin' 
+            })},
+                    {#if compareTimes(rawData?.time, '16:00') > 0}
+                        after market closes.
+                    {:else if compareTimes(rawData?.time, '09:30') < 0}
+                        before market opens.
+                    {:else}
+                        during market hours.
+                    {/if}
+                <br>
+                Analysts project revenue of <strong>{abbreviateNumber(rawData?.revenueEst,true)}</strong>, reflecting a
+                <strong>{revenueRatio}%</strong> YoY {revenueRatio > 0 ? 'growth' : revenueRatio < 0 ? 'shrinking' : ''} and earnings per share of
+                <strong>{rawData?.epsEst}</strong>, making a <strong>{epsRatio}%</strong> {epsRatio > 0 ? 'increase' : epsRatio < 0 ? 'decrease' : ''} YoY.
+        </div>
+    {:else}
+    <div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+        <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
+        Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+    </div>
+    {/if}
+
+    </div>
+
+
+    </div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/Pricing.svelte b/src/lib/components/Pricing.svelte
index 8448ddd1..330205fa 100644
--- a/src/lib/components/Pricing.svelte
+++ b/src/lib/components/Pricing.svelte
@@ -25,7 +25,7 @@ onMount(async () => {
 
 </script>
 
-<section class="bg-[#09090B] min-h-screen max-w-3xl sm:max-w-screen-xl w-full pt-24 m-auto">
+<section class="bg-[#09090B] min-h-screen max-w-3xl sm:max-w-screen-lg w-full pt-24 m-auto">
     <div class="px-3">
         <div class="mx-auto text-center mb-8 ">
             
@@ -273,12 +273,12 @@ onMount(async () => {
 
 
              <!--Start Pricing Card-->
-             
+             <!--
              <div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-lg w-full text-center text-white">
 
                 <div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row border-l border-r border-b border-gray-400 items-center p-2">
                     <span class="text-white text-md font-semibold px-3">
-                        Best Support
+                        Limited Offer
                     </span>
                 </div>          
 
@@ -342,7 +342,7 @@ onMount(async () => {
                 {/if}
                
             </div>
-            
+            -->
             <!--End Pricing Card-->
 
 
diff --git a/src/lib/components/RevenueSegmentation.svelte b/src/lib/components/RevenueSegmentation.svelte
index a76c832c..44ef3f36 100644
--- a/src/lib/components/RevenueSegmentation.svelte
+++ b/src/lib/components/RevenueSegmentation.svelte
@@ -43,12 +43,12 @@
         for (const category in values) {
           if (count >= 4) break; // Stop after the fifth element
           const value = values[category];
-          if (value !== 0) {
+          if (value > 0) {
             nodes?.push({
-              id: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + `- $${abbreviateNumber(value)}`,
+              id: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + ' · ' +`$${abbreviateNumber(value)}`,
             });
             links?.push({
-              source: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + `- $${abbreviateNumber(value)}`,
+              source: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + ' · ' +`$${abbreviateNumber(value)}`,
               target: "Revenue",
               value: value,
             });
@@ -169,15 +169,8 @@
   }
 
   let showFullStats = false;
-  let charNumber = 40;
+$: charNumber = $screenWidth < 640 ? 25 :40;
 
-  $: {
-    if ($screenWidth < 640) {
-      charNumber = 25;
-    } else {
-      charNumber = 40;
-    }
-  }
 </script>
 
 <section class="overflow-hidden text-white h-full pb-8">
diff --git a/src/lib/components/SECFilingsCard.svelte b/src/lib/components/SECFilingsCard.svelte
index 04f90948..445dd1c2 100644
--- a/src/lib/components/SECFilingsCard.svelte
+++ b/src/lib/components/SECFilingsCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {userRegion, secFilingsClicked, stockTicker, clientSideCache, } from '$lib/store';
+import * as Tabs from "$lib/components/shadcn/tabs/index.js";
 
 import { fade } from 'svelte/transition';
   
@@ -21,24 +22,19 @@ if (usRegion?.includes(value)) {
 
 
 let displayList = [];
-let secType = '8K';
 let accordionOpen = {};
 let newData;
 let isLoaded = false;
 
-function changeSECType(index) {
-    activeIdx = index;
-    switch (activeIdx) {
-        case 0:
-            secType = '8K';
+function changeSECType(secType) {
+    switch (secType) {
+        case '8-K':
             prepareData(secFilingsList?.eightK);
             break;
-        case 1:
-            secType = '10K';
+        case '10-K':
             prepareData(secFilingsList?.tenK);
             break;
-        case 2:
-            secType = '10Q';
+        case '10-Q':
             prepareData(secFilingsList?.tenQ);
             break;
         // Default case in case changeType doesn't match any of the specified cases
@@ -116,27 +112,12 @@ async function fetchData() {
 };
 
 
-const tabs = [
-    {
-      title: "8-K",
-    },
-    {
-      title: "10-K",
-    },
-    {
-      title: "10-Q"
-    }
-  ];
-let activeIdx = 0;
-
 
 $: {
 
   if($stockTicker && typeof window !== 'undefined' && $secFilingsClicked === true) {
     isLoaded = false;
     $secFilingsClicked = false;
-    activeIdx = 0;
-    secType = '8K';
     accordionOpen = {}
 
     const asyncFunctions = [
@@ -173,40 +154,14 @@ $: {
       <div class="w-11/12 mt-5">
         <div class="relative right-0 bg-[#27272A] rounded-lg">
 
-          <div class="relative flex flex-row items-center p-1 list-none rounded-lg">
-              {#each tabs as item, i}
-                <button
-                  on:click={() => changeSECType(i)}
-                  class="group relative z-[1] rounded-lg px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx === i
-                    ? 'z-0'
-                    : ''} "
-                  >
-                  {#if activeIdx === i}
-                      <div
-                        class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1,2]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
-                      ></div>
-                  {/if}
-                  
-                  {#if item?.title === '8-K'}
-                  <span
-                    class="relative block font-medium duration-200 {secType === '8K' ? 'text-black' : 'text-white'}">
-                    {item.title}
-                  </span>
-                  {:else if item?.title === '10-K'}
-                  <span
-                    class="relative block font-medium duration-200 {secType === '10K' ? 'text-black' : 'text-white'}">
-                    {item.title}
-                  </span>
-                  {:else}
-                  <span
-                    class="relative block font-medium duration-200 {secType === '10Q' ? 'text-black' : 'text-white'}">
-                    {item.title}
-                  </span>
-                  {/if}
-
-                </button>
-              {/each}
-          </div>
+          <Tabs.Root value="eightK" class="w-full">
+            <Tabs.List class="grid w-full grid-cols-3 bg-[#27272A]">
+              <Tabs.Trigger on:click={() => changeSECType('8-K')} value="eightK">8-K</Tabs.Trigger>
+              <Tabs.Trigger on:click={() => changeSECType('10-K')} value="tenK">10-K</Tabs.Trigger>
+              <Tabs.Trigger on:click={() => changeSECType('10-Q')} value="tenQ">10-Q</Tabs.Trigger>
+            </Tabs.List>
+          </Tabs.Root>
+          
 
         </div>
       </div>
diff --git a/src/lib/components/SentimentAnalysis.svelte b/src/lib/components/SentimentAnalysis.svelte
index fe1c9705..54fcddd5 100644
--- a/src/lib/components/SentimentAnalysis.svelte
+++ b/src/lib/components/SentimentAnalysis.svelte
@@ -169,7 +169,7 @@ $: {
                             <div class="flex flex-col items-center">
                                 <span class="text-white font-medium text-[1rem] mb-4">
                                     {#if data?.user?.tier === 'Pro'}
-                                    {item?.value}
+                                    {item?.value !== 0 ? item?.value : '-'}
                                     {:else if ['1M','1Y']?.includes(item?.label)}
                                         {item?.value}
                                     {:else}
@@ -185,7 +185,7 @@ $: {
                                     <div class="bg-[#2F2F2F] w-2 rounded-t-full" style="height: {(100)}%;"></div>
                                     {/if}
                                 </div>
-                                <span class="text-gray-400 font-medium text-sm mt-4">
+                                <span class="text-white font-medium text-sm mt-4">
                                     {item?.label}
                                 </span>
                             </div>
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index c0b7fe24..d6dca325 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -214,7 +214,7 @@ let charNumber = 30;
                     </div>
                 </div>
 
-                
+                {#if putCallRatio !== 0}
                 <h1 class="text-white font-semibold text-xl sm:text-2xl mb-3 mt-5 sm:-mt-5">
                     Options Activity
                 </h1>
@@ -315,6 +315,7 @@ let charNumber = 30;
               
                       </div>
                 </div>
+                {/if}
 
 
 
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index 2418e7af..51c8c9a5 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -2,7 +2,7 @@
 
 import TickerInfoCard from '$lib/components/TickerInfoCard.svelte';
 import AnalystCard from '$lib/components/AnalystCard.svelte';
-import ESGCard from '$lib/components/ESGCard.svelte';
+//import ESGCard from '$lib/components/ESGCard.svelte';
 import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
 import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
 
@@ -24,7 +24,7 @@ export let analystRating
 <AnalystCard lastPrice={lastPrice} analystRating={analystRating} />
 
 
-<ESGCard stockDeck={stockDeck} />
+<!--<ESGCard stockDeck={stockDeck} />-->
 
 <SimilarTickerCard similarstock={similarstock}/>
 
diff --git a/src/lib/components/SimilarETFCard.svelte b/src/lib/components/SimilarETFCard.svelte
index 4240a66d..9e8d0391 100644
--- a/src/lib/components/SimilarETFCard.svelte
+++ b/src/lib/components/SimilarETFCard.svelte
@@ -26,7 +26,7 @@ export let similarTicker;
 
 <div class="space-y-3 sm:pt-5  hidden lg:block sm:{similarTicker?.length !== 0 ? '' : 'hidden'}">  
 
-<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
+<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
 
   <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
     <h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 p-3">
diff --git a/src/lib/components/SimilarTickerCard.svelte b/src/lib/components/SimilarTickerCard.svelte
index 3687a294..61b8d5a6 100644
--- a/src/lib/components/SimilarTickerCard.svelte
+++ b/src/lib/components/SimilarTickerCard.svelte
@@ -26,7 +26,7 @@ export let similarstock;
   
   <div class="space-y-3 sm:pt-5 hidden lg:block lg:{similarstock?.length !== 0 ? '' : 'hidden'}">  
   
-  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
   
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
       <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
@@ -103,18 +103,14 @@ export let similarstock;
   <div class="bg-[#000] h-auto w-screen">
   
    <!--Start Header-->
-   <div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
+   <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
     <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
      Similar Ticker
     </h2>
-    <div class="flex flex-col items-center mt-10 w-full">
-      <span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
+    <div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
+      <span class="text-white text-center text-md">
         Identify trends in similar assets and explore superior competing options in your portfolio.
       </span>
-
-      <div class="flex flex-row justify-center items-center w-full mt-5">
-      </div>
-
     </div>
 
   </div>
@@ -125,9 +121,9 @@ export let similarstock;
       <table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
         <thead>
           <tr>
-            <th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
-            <th class="text-white font-bold text-sm text-center bg-[#000]">Market Cap</th>
-            <th class="text-white font-bold text-sm text-end bg-[#000]">Avg Volume</th>
+            <th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
+            <th class="text-white font-semibold text-sm text-end bg-[#000]">Market Cap</th>
+            <th class="text-white font-semibold text-sm text-end bg-[#000]">Avg Volume</th>
           </tr>
         </thead>
         <tbody>
@@ -135,16 +131,13 @@ export let similarstock;
           <tr on:click={() => stockSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
             {#if index <=6}
            
-              <td class="text-gray-200">
+              <td class="text-white whitespace-nowrap">
                 <div class="flex flex-row items-center">
-                  <div class="rounded-full w-10 h-10 relative flex items-center justify-center">
-                    <img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy"/>
-                  </div>
-                  <div class="flex flex-col ml-3 w-full">
+                  <div class="flex flex-col w-full">
                     <span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
                     <span class="text-white text-xs">
                       {#if typeof item?.name !== 'undefined'}
-                        {item?.name?.length > 10 ? item?.name?.slice(0,10) + "..." : item?.name}
+                        {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
                       {:else}
                         n/a
                       {/if}
@@ -155,11 +148,11 @@ export let similarstock;
                 
               </td>
           
-            <td class="text-white text-center font-medium ">
+            <td class="text-white text-end font-medium text-sm">
               {item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
             </td>
           
-            <td class="text-white font-medium text-end">
+            <td class="text-white font-medium text-end text-sm">
               {item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
             </td>
             {/if}
diff --git a/src/lib/components/StockKeyInformation.svelte b/src/lib/components/StockKeyInformation.svelte
index aa535e7d..bb41e087 100644
--- a/src/lib/components/StockKeyInformation.svelte
+++ b/src/lib/components/StockKeyInformation.svelte
@@ -4,7 +4,7 @@
   import ExecutiveCard from '$lib/components/ExecutiveCard.svelte';
 
   import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
-  import ESGCard from '$lib/components/ESGCard.svelte';
+  //import ESGCard from '$lib/components/ESGCard.svelte';
   import SECFilingsCard from '$lib/components/SECFilingsCard.svelte';
   import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
 
@@ -44,9 +44,11 @@ $: {
     <label on:click={() => $secFilingsClicked = true} for="secFilingModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
       SEC Filings
     </label>
+    <!--
     <label for="esgModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
       ESG Score
     </label>
+    -->
     <label for="similarTickerModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
       Similar
     </label>
@@ -145,6 +147,7 @@ $: {
   
 
 <!--Start ESG Modal-->
+<!--
 <div class="drawer drawer-end z-40 overflow-hidden w-screen">
   <input id="esgModal" type="checkbox" class="drawer-toggle"/>
   <div class="drawer-side overflow-hidden">
@@ -164,6 +167,7 @@ $: {
     </div>
   </div>
 </div>
+-->
 <!--End ESG Modal-->
 
   
diff --git a/src/lib/components/TickerInfoCard.svelte b/src/lib/components/TickerInfoCard.svelte
index 0aa5e965..1e7bb356 100644
--- a/src/lib/components/TickerInfoCard.svelte
+++ b/src/lib/components/TickerInfoCard.svelte
@@ -74,7 +74,7 @@ $: {
     website = info?.website;
     snippet= description?.slice(0, 150) + "...";
     forwardPE = info?.forwardPE;
-    beta = info?.beta;
+    beta = info?.beta?.toFixed(2);
   }
 
 }
@@ -83,7 +83,7 @@ $: {
 </script>
 
 <div class="sm:space-y-3">  
-    <div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
+    <div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
 
       <!--Start Header-->
       <div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});">
@@ -110,66 +110,70 @@ $: {
       </div>
      <!--End Header-->
       <!--Start Content-->
-      <div class="w-full flex flex-wrap border-t border-slate-800 px-2 lg:px-0">
+      <div class="w-full flex flex-wrap border-t border-slate-800 px-2">
         <h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">Company Info</h2>
         <div class="flex justify-center items-center w-full m-auto">
           <table class="table table-sm table-compact">
             <tbody>
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+              <!--
+              <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">CEO</td>
-                <td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
-                <td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Country</td>
+                <td class="text-center sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
+                <td class="text-start sm:text-end lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Country</td>
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{country}</td>
               </tr>
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
-                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Market Cap</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Volume</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
+              -->
+              <tr class="text-white border-b border-[#27272A]">
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Vol</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
               </tr>
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+              <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Beta</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{beta}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Volume</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{beta}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Vol</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td>
               </tr>
-              <tr class="text-white " style="font-size: 0.75rem">
+              <!--
+              <tr class="text-white ">
                 <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white whitespace-pre-line font-semibold whitespace-nowrap">Sector</td>
                 <td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-pre-line font-semibold">{sector}</td>
                 <td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Employees</td>
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{employees}</td>
               </tr>
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+              <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Industry</td>
                 <td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{industry}</td>
                 <td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Exchange</td>
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{exchange}</td>
               </tr>
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+              -->
+              <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.open}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Previous Close</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.previousClose}</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
               </tr>
               {#if $screenWidth > 640}
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+              <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Day's Range</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.dayLow} - {data?.getStockQuote?.dayHigh}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">52-Week Range</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.yearLow} - {data?.getStockQuote?.yearHigh}</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(2)}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">52-Week Range</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(2)}</td>
               </tr>
               {/if}
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+              <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.eps}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.pe}</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe}</td>
               </tr>
-              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+              <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{forwardPE === undefined ? '-' : forwardPE}</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{forwardPE === undefined ? '-' : forwardPE}</td>
               </tr>
             </tbody>
           </table>
diff --git a/src/lib/components/TopETFTickerHolder.svelte b/src/lib/components/TopETFTickerHolder.svelte
index acb7ce8b..8f080df8 100644
--- a/src/lib/components/TopETFTickerHolder.svelte
+++ b/src/lib/components/TopETFTickerHolder.svelte
@@ -22,7 +22,7 @@
       
       <div class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.length !== 0 ? '' : 'hidden'}">  
       
-      <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
+      <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
       
         <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
             <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
@@ -101,18 +101,15 @@
       <div class="bg-[#000] h-auto w-screen">
       
        <!--Start Header-->
-       <div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
-        <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
+       <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
+        <h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
           Top ETFs Holder
         </h2>
-        <div class="flex flex-col items-center mt-10 w-full">
-          <span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
+        <div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
+          <span class="text-white text-center text-md">
             Find the ETFs with the highest portfolio weights for this stock. 
           </span>
-    
-          <div class="flex flex-row justify-center items-center w-full mt-5">
-          </div>
-    
+
         </div>
     
       </div>
@@ -123,9 +120,9 @@
           <table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
             <thead>
               <tr>
-                <th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
-                <th class="text-white font-bold text-sm text-center bg-[#000]">Total Assets</th>
-                <th class="text-white font-bold text-sm text-end bg-[#000]">% of Fund</th>
+                <th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
+                <th class="text-white font-semibold text-sm text-end bg-[#000]">Total Assets</th>
+                <th class="text-white font-semibold text-sm text-end bg-[#000]">% of Fund</th>
               </tr>
             </thead>
             <tbody>
@@ -133,13 +130,13 @@
               <tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
                 {#if index <=6}
                
-                  <td class="text-gray-200">
+                  <td class="text-white whitespace-nowrap">
                     <div class="flex flex-row items-center">
                       <div class="flex flex-col w-full">
                         <span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
                         <span class="text-white text-xs">
                           {#if typeof item?.name !== 'undefined'}
-                            {item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
+                            {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
                           {:else}
                             n/a
                           {/if}
@@ -150,7 +147,7 @@
                     
                   </td>
               
-                <td class="text-white text-center font-medium ">
+                <td class="text-white text-end font-medium ">
                   {item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
                 </td>
               
diff --git a/src/lib/components/TopHoldingCard.svelte b/src/lib/components/TopHoldingCard.svelte
index 3ad95bb3..c686fe2f 100644
--- a/src/lib/components/TopHoldingCard.svelte
+++ b/src/lib/components/TopHoldingCard.svelte
@@ -37,7 +37,7 @@ $: {
       
       <div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">  
       
-      <div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
+      <div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
       
         <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
     
diff --git a/src/lib/components/shadcn/tabs/tabs-list.svelte b/src/lib/components/shadcn/tabs/tabs-list.svelte
index f478d69b..f85b640b 100644
--- a/src/lib/components/shadcn/tabs/tabs-list.svelte
+++ b/src/lib/components/shadcn/tabs/tabs-list.svelte
@@ -10,7 +10,7 @@
 
 <TabsPrimitive.List
 	class={cn(
-		"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+		"inline-flex h-12 items-center justify-center rounded-md bg-muted p-1 text-gray-400",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/shadcn/tabs/tabs-trigger.svelte b/src/lib/components/shadcn/tabs/tabs-trigger.svelte
index f43c3d1f..d1fde85f 100644
--- a/src/lib/components/shadcn/tabs/tabs-trigger.svelte
+++ b/src/lib/components/shadcn/tabs/tabs-trigger.svelte
@@ -12,7 +12,7 @@
 
 <TabsPrimitive.Trigger
 	class={cn(
-		"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+		"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-purple-600 data-[state=active]:text-white data-[state=active]:shadow-sm",
 		className
 	)}
 	{value}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e47e9cad..499f96d1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -580,7 +580,7 @@ $: {
                 </a>
               </Button>
             </Sheet.Close>  
-    
+            
             <Sheet.Close asChild let:builder>
               <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417] -ml-4 w-full">
                 <a href="/community" class="flex flex-row items-center w-full -mt-2"> 
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 52e80c10..ec5c54e4 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -53,7 +53,7 @@ export const actions = {
 		}
 
 
-		redirect(301, '/home');
+		redirect(301, '/pricing');
 	},
 	
     register: async ({ locals, request }) => {
@@ -107,7 +107,7 @@ export const actions = {
 			error(err.status, err.message);
 		}
 
-		redirect(301, "/home");
+		redirect(301, "/pricing");
 	},
 	
 
@@ -157,7 +157,7 @@ export const actions = {
 			maxAge: 60*60
 		});
 
-		cookies.set('path', "/home", {httpOnly: true,
+		cookies.set('path', "/pricing", {httpOnly: true,
 			sameSite: 'lax',
 			secure: true,
 			path: '/',
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
new file mode 100644
index 00000000..f7948041
--- /dev/null
+++ b/src/routes/economic-indicator/+page.svelte
@@ -0,0 +1,867 @@
+<script lang='ts'>
+import { goto } from '$app/navigation';
+import { numberOfUnreadNotification, screenWidth } from '$lib/store';
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
+import { Chart } from 'svelte-echarts'
+import Lazy from '$lib/components/Lazy.svelte';
+
+import { init, use } from 'echarts/core'
+import { LineChart, BarChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { onMount } from 'svelte';
+use([LineChart, BarChart, GridComponent,TooltipComponent, CanvasRenderer])
+
+
+
+export let data;
+let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
+
+let isLoaded = false;
+let rawData;
+let tableList = [];
+let optionsData;
+let optionsCPI;
+let optionsGDP;
+let optionsInflation;
+
+let filterRule = 'annual';
+
+let timePeriod = 'threeYears';
+const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+const treasuryLabel = {
+  'month1': '1-Month',
+  'month2': '2-Month',
+  'month3': '3-Month',
+  'month6': '6-Month',
+  'year1': '1-Year',
+  'year2': '2-Year',
+  'year3': '3-Year',
+  'year5': '5-Year',
+  'year7': '7-Year',
+  'year10': '10-Year',
+  'year20': '20-Year',
+  'year30': '30-Year',
+}
+
+function filterEndOfYearDates(data) {
+    // Step 1: Group data by year
+    const groupedByYear = data.reduce((acc, item) => {
+        const year = new Date(item.date).getFullYear();
+        if (!acc[year]) {
+            acc[year] = [];
+        }
+        acc[year].push(item);
+        return acc;
+    }, {});
+
+    // Step 2: For each year, find the entry with the latest date
+    const annualData = Object.values(groupedByYear).map(yearData => {
+        return yearData.reduce((latest, current) => {
+            return new Date(latest.date) > new Date(current.date) ? latest : current;
+        });
+    });
+
+    return annualData;
+}
+      
+function filterEndOfQuarterDates(data) {
+    // Step 1: Group data by year and quarter
+    const groupedByQuarter = data?.reduce((acc, item) => {
+        const date = new Date(item?.date);
+        const year = date.getFullYear();
+        const quarter = Math?.floor(date?.getMonth() / 3) + 1; // Get the quarter (1-4)
+
+        const key = `${year}-Q${quarter}`;
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(item);
+        return acc;
+    }, {});
+
+    // Step 2: For each year-quarter group, find the entry with the latest date
+    const quarterlyData = Object?.values(groupedByQuarter)?.map(quarterData => {
+        return quarterData?.reduce((latest, current) => {
+            return new Date(latest?.date) > new Date(current?.date) ? latest : current;
+        });
+    });
+    
+    return quarterlyData;
+}
+
+function changeTablePeriod(state:string) {
+    filterRule = state;
+    if(state === 'annual') {
+        tableList = filterEndOfYearDates(rawData);
+    } else {
+        tableList = filterEndOfQuarterDates(rawData);
+    }
+    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
+}
+
+async function changeStatement(event)
+{
+    timePeriod = event.target.value;
+
+    optionsData = await plotData();
+}
+
+// Function to filter data by a specified time period
+function filterDataByTimePeriod(rawData, timePeriod) {
+    let dates = [];
+    let seriesData = {};
+
+    const now = new Date();
+
+    // Calculate the date threshold based on the selected time period
+    let thresholdDate;
+    switch (timePeriod) {
+        case 'oneMonth':
+            thresholdDate = new Date(now);
+            thresholdDate.setMonth(now.getMonth() - 1);
+            break;
+        case 'sixMonths':
+            thresholdDate = new Date(now);
+            thresholdDate.setMonth(now.getMonth() - 6);
+            break;
+        case 'oneYear':
+            thresholdDate = new Date(now);
+            thresholdDate.setFullYear(now.getFullYear() - 1);
+            break;
+        case 'threeYears':
+            thresholdDate = new Date(now);
+            thresholdDate.setFullYear(now.getFullYear() - 3);
+            break;
+        case 'fiveYears':
+            thresholdDate = new Date(now);
+            thresholdDate.setFullYear(now.getFullYear() - 5);
+            break;
+        case 'tenYears':
+            thresholdDate = new Date(now);
+            thresholdDate.setFullYear(now.getFullYear() - 10);
+            break;
+        case 'max':
+        default:
+            thresholdDate = new Date(0); // Set to the earliest possible date
+            break;
+    }
+
+    // Filter the data based on the threshold date
+    rawData?.forEach(item => {
+        const itemDate = new Date(item?.date);
+        if (itemDate >= thresholdDate) {
+            dates.push(item?.date);
+
+            // Iterate over each key in the item, except for 'date'
+            Object.keys(item).forEach(key => {
+                if (key !== 'date') {
+                    // Initialize the array if it doesn't exist
+                    if (!seriesData[key]) {
+                        seriesData[key] = [];
+                    }
+                    // Push the corresponding value into the appropriate array
+                    seriesData[key].push(item[key]);
+                }
+            });
+        }
+    });
+
+    return { dates, seriesData };
+}
+
+// Function to plot data based on a specified time period
+async function plotData() {
+    // Get the filtered data based on the selected time period
+    const { dates, seriesData } = filterDataByTimePeriod(rawData, timePeriod);
+
+    // Convert seriesData to the format required by the series property
+    let series = Object?.keys(seriesData).map(key => {
+        return {
+            name: treasuryLabel[key],
+            data: seriesData[key],
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+        };
+    });
+
+    const options = {
+        animation: false,
+        grid: {
+            left: '2%',
+            right: '2%',
+            bottom: '2%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            axisLabel: {
+                color: '#fff',
+                formatter: function (value) {
+                // Assuming dates are in the format 'yyyy-mm-dd'
+                // Extract the month and day from the date string and convert the month to its abbreviated name
+                const dateParts = value.split('-');
+                const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+                const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+                return `${monthNames[monthIndex]} '${year}`;
+              }
+            },
+            data: dates,
+            type: 'category',
+        },
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+                axisLabel: {
+                    color: '#fff', // Change label color to white
+                },
+            },
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+            },
+        ],
+        series: series, // Use the dynamically created series array
+        tooltip: {
+            trigger: 'axis',
+            hideDelay: 100,
+        },
+    };
+
+    return options;
+}
+
+async function plotCPI() {
+    // Get the filtered data based on the selected time period
+    let dates = [];
+    let valueList = [];
+    // Iterate over the data and extract required information
+    data?.getEconomicIndicator?.cpi?.forEach(item => {
+  
+    dates?.push(item?.date);
+    valueList?.push(item?.value);
+    });
+
+    const options = {
+        animation: false,
+        grid: {
+            left: '2%',
+            right: '2%',
+            bottom: '2%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            axisLabel: {
+                color: '#fff',
+                formatter: function (value) {
+                // Assuming dates are in the format 'yyyy-mm-dd'
+                // Extract the month and day from the date string and convert the month to its abbreviated name
+                const dateParts = value.split('-');
+                const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+                const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+                return `${monthNames[monthIndex]} '${year}`;
+              }
+            },
+            data: dates,
+            type: 'category',
+        },
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+                axisLabel: {
+                    color: '#fff', // Change label color to white
+                },
+            },
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+            },
+        ],
+        series: {
+            name: 'CPI',
+            data: valueList,
+            type: 'line',
+            areaStyle: {opacity: 0.2},
+            smooth: true,
+            showSymbol: false,
+        },
+        tooltip: {
+            trigger: 'axis',
+            hideDelay: 100,
+        },
+    };
+
+    return options;
+}
+
+async function plotGDP() {
+    // Get the filtered data based on the selected time period
+    let dates = [];
+    let gdpList = [];
+    let realGDPList = [];
+    let realGDPPerCapitaList = []
+    // Iterate over the data and extract required information
+    data?.getEconomicIndicator?.gdp?.forEach(item => {
+  
+    dates?.push(item?.date);
+    gdpList?.push(item?.value);
+    });
+
+    data?.getEconomicIndicator?.realGDP?.forEach(item => {
+      realGDPList?.push(item?.value);
+    });
+
+    data?.getEconomicIndicator?.realGDPPerCapita?.forEach(item => {
+      realGDPPerCapitaList?.push(item?.value);
+    });
+
+    const options = {
+        animation: false,
+        grid: {
+            left: '2%',
+            right: '2%',
+            bottom: '2%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            axisLabel: {
+                color: '#fff',
+                formatter: function (value) {
+                // Assuming dates are in the format 'yyyy-mm-dd'
+                // Extract the month and day from the date string and convert the month to its abbreviated name
+                const dateParts = value.split('-');
+                const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+                const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+                return `${monthNames[monthIndex]} '${year}`;
+              }
+            },
+            data: dates,
+            type: 'category',
+        },
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+                axisLabel: {
+                    color: '#fff', // Change label color to white
+                },
+            },
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+                axisLabel: {
+                    color: '#fff', // Change label color to white
+                },
+            },
+        ],
+        series:
+          [
+            {
+            name: 'GDP',
+            data: gdpList,
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+          },
+          {
+          name: 'Real GDP',
+            data: realGDPList,
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+          },
+          {
+          name: 'Real GDP Per Capita',
+            data: realGDPPerCapitaList,
+            type: 'line',
+            yAxisIndex: 1,
+            smooth: true,
+            showSymbol: false,
+          },
+        ],
+        tooltip: {
+            trigger: 'axis',
+            hideDelay: 100,
+        },
+    };
+
+    return options;
+}
+
+async function plotInflation() {
+    // Get the filtered data based on the selected time period
+    let dates = [];
+    let inflationRateList = [];
+    let recessionList = [];
+    // Iterate over the data and extract required information
+    data?.getEconomicIndicator?.inflationRate?.forEach(item => {
+  
+    dates?.push(item?.date);
+    inflationRateList?.push(item?.value);
+    });
+
+    data?.getEconomicIndicator?.unemploymentRate?.forEach(item => {
+      recessionList?.push(item?.value);
+    });
+
+
+    const options = {
+        animation: false,
+        grid: {
+            left: '2%',
+            right: '2%',
+            bottom: '2%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            axisLabel: {
+                color: '#fff',
+                formatter: function (value) {
+                // Assuming dates are in the format 'yyyy-mm-dd'
+                // Extract the month and day from the date string and convert the month to its abbreviated name
+                const dateParts = value.split('-');
+                const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+                const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+                return `${monthNames[monthIndex]} '${year}`;
+              }
+            },
+            data: dates,
+            type: 'category',
+        },
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+                axisLabel: {
+                    color: '#fff', // Change label color to white
+                },
+            },
+            {
+                type: 'value',
+                splitLine: {
+                    show: false, // Disable x-axis grid lines
+                },
+                axisLabel: {
+                    color: '#fff', // Change label color to white
+                },
+            },
+        ],
+        series:
+          [
+            {
+            name: 'Inflation Rate',
+            data: inflationRateList,
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+          },
+          {
+          name: 'Unemployment Rate',
+            data: recessionList,
+            yAxisIndex: 1,
+
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+          },
+          
+        ],
+        tooltip: {
+            trigger: 'axis',
+            hideDelay: 100,
+        },
+    };
+
+    return options;
+}
+onMount(async () => {
+  rawData = data?.getEconomicIndicator?.treasury ?? {};
+
+  // Run the async functions concurrently
+  [optionsData, optionsCPI, optionsGDP, optionsInflation] = await Promise.all([
+    plotData(),
+    plotCPI(),
+    plotGDP(),
+    plotInflation(),
+  ]);
+
+  tableList = filterEndOfYearDates(rawData);
+  tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
+
+  isLoaded = true;
+});
+
+
+
+        
+  </script>
+  
+  <svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} US Economic Indicator · stocknear
+  </title>
+  <meta name="description" content={`Economic indicators measure economic performance and identify growth trends.`} />
+  
+  <!-- Other meta tags -->
+  <meta property="og:title" content={`US Economic Indicator · stocknear`}/>
+  <meta property="og:description" content={`Economic indicators measure economic performance and identify growth trends.`} />
+  <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={`US Economic Indicator · stocknear`}/>
+  <meta name="twitter:description" content={`Economic indicators measure economic performance and identify growth trends.`} />
+  <!-- Add more Twitter meta tags as needed -->
+  
+  </svelte:head>
+  
+      
+  
+  <section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
+    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+      <ul>
+        <li><a href="/" class="text-gray-300">Home</a></li>
+        <li class="text-gray-300">US Economic Indicator</li>
+      </ul>
+    </div>
+            
+    <div class="w-full overflow-hidden m-auto mt-5">
+      
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div class="relative flex justify-center items-start overflow-hidden w-full">
+
+
+              <main class="w-full lg:w-3/4 lg:pr-5">
+               
+                <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+                
+                    <!-- Start Column -->
+                    <div>
+                      <div class="flex flex-row justify-center items-center">
+                        <h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
+                            Economic Indicators
+                        </h1>
+                      </div>
+            
+                      <span class="text-white text-md font-medium text-center flex justify-center items-center ">
+                        The indicators measure economic performance and identify growth trends.
+                      </span>
+            
+        
+                    </div>
+                    <!-- End Column -->
+                
+                    <!-- Start Column -->
+                    <div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
+                      <svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+                        <defs>
+                          <filter id="glow">
+                            <feGaussianBlur stdDeviation="5" result="glow"/>
+                            <feMerge>
+                              <feMergeNode in="glow"/>
+                              <feMergeNode in="SourceGraphic"/>
+                            </feMerge>
+                          </filter>
+                        </defs>
+                        <path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
+                      </svg>
+                      
+                      
+                      <div class="z-1 absolute top-1">
+                          <img class="w-[80px] ml-10" src={cloudFrontUrl+'/assets/economic_data_logo.png'} alt="logo" loading="lazy">
+                        </div>
+                    </div>
+                    <!-- End Column -->
+                  </div>
+            
+                 
+            
+            
+                </div>
+
+                {#if isLoaded}
+                <div class="w-screen sm:w-full m-auto mt-20 sm:mt-10 p-3">
+                  
+                  <h2 class="text-2xl text-gray-200 font-bold">
+                    Consumer Price Index (CPI)
+                  </h2>
+
+                  <div class="text-[1rem] text-white mt-2 mb-2">
+                    The CPI measures the average change in prices for a typical basket of goods. It's key for tracking inflation, affecting interest rates, wages, and business decisions. Rising CPI indicates inflation, impacting purchasing power and the overall economy.
+                  </div>
+
+                  <Lazy>
+                  <div class="app w-full">
+                    <Chart {init} options={optionsCPI} class="chart" />
+                  </div>
+                  </Lazy>
+
+                  <h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
+                    Gross Domestic Product (GDP)
+                  </h2>
+
+                  <div class="text-[1rem] text-white mt-2 mb-2">
+                    The GDP measures a country's economic performance, representing the total value of all goods and services produced within a specific period. It's a key indicator of economic health, used to compare the economic output of different nations and track growth or decline over time.
+                  </div>
+
+                  <Lazy>
+                  <div class="app w-full ">
+                    <Chart {init} options={optionsGDP} class="chart" />
+                  </div>
+                  </Lazy>
+
+                  <h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
+                    Unemployment Rate vs Inflation Rate
+                  </h2>
+
+                  <div class="text-[1rem] text-white mt-2 mb-2">
+                    The unemployment rate measures the jobless percentage in the labor force, impacting spending and growth. Low unemployment boosts wages and activity, while high unemployment slows them. The inflation rate tracks price increases, with moderate inflation (~2%) being healthy. These rates are often inversely related and crucial for economic stability, influencing spending, savings, and investment.
+                  </div>
+
+                  <Lazy>
+                  <div class="app w-full ">
+                    <Chart {init} options={optionsInflation} class="chart" />
+                  </div>
+                  </Lazy>
+
+                  <h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
+                    Treasury Rates
+                  </h2>
+
+                  <div class="text-[1rem] text-white mt-2 mb-2">
+                    Treasury rates are the interest rates that the US government pays on its debt obligations, and they are a key benchmark for interest rates across the economy.
+                  </div>
+
+                  <div class="w-full text-white">
+                    <div class="relative flex justify-end">
+                    <select class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeStatement}>
+                        <option disabled>Choose a Time Period</option>
+                        <option value="oneMonth">1M</option>
+                        <option value="sixMonths">6M</option>
+                        <option value="oneYear">1Y</option>
+                        <option value="threeYears" selected>3Y</option>
+                        <option value="fiveYears">5Y</option>
+                        <option value="max">Max</option>                                 
+                    </select>
+                    </div>
+                </div>
+                <Lazy>
+                  <div class="app w-full ">
+                    <Chart {init} options={optionsData} class="chart" />
+                  </div>
+                </Lazy>
+
+                  <ul class="text-[0.8rem] font-medium text-center w-56 pt-10 sm:w-56 mb-5 flex justify-center sm:justify-end items-center ml-auto">
+                    <li class="w-full">
+                        <label on:click={() => changeTablePeriod('annual')} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page">
+                          Annual
+                        </label>
+                    </li>
+                    <li class="w-full">
+                      {#if data?.user?.tier === 'Pro'}
+                        <label on:click={() => changeTablePeriod('quarterly')} class="cursor-pointer inline-block w-full py-2.5 {filterRule === 'quarterly' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg">
+                          Quartely
+                        </label>
+                      {:else}
+                      <a href="/pricing" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg">
+                        <span class="">Quarterly</span>
+                        <svg class="ml-1 -mt-0.5 w-3.5 h-3.5" 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>
+                      </a>
+                      {/if}
+
+                    </li>
+                </ul>
+
+
+                <div class="w-full overflow-x-scroll">         
+                  <table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
+                    <thead>
+                      <tr class="border border-slate-800">
+                        <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">Date</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">1-Month</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">2-Month</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">3-Month</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">6-Month</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">1-Year</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">2-Year</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">3-Year</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">5-Year</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">7-Year</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">10-Year</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">20-Year</th>
+                        <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">30-Year</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {#each tableList as item}
+                          <!-- row -->
+                          <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
+                          
+                              <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+                                {item?.date}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.month1}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.month2 !== null ? item?.month2 : '-'}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.month3}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.month6}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year1}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year2}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year3}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year5}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year7}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year10}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year20}
+                              </td>
+                              <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
+                                {item?.year30}
+                              </td>
+
+                          </tr>
+                          {/each}
+
+                    </tbody>
+                  </table>
+      
+                      
+              </div>
+
+
+                  
+                </div>
+
+                {:else}
+                <div class="flex justify-center items-center h-80">
+                  <div class="relative">
+                    <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                      <span class="loading loading-spinner loading-md"></span>
+                    </label>
+                  </div>
+                </div>  
+                {/if}
+
+              
+              </main>
+              <aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+              
+                {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+                <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Pro Subscription
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Upgrade now for unlimited access to all data and tools.
+                        </span>
+                    </div>
+                </div>
+                {/if}
+
+                <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Wallstreet Analyst
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings.
+                        </span>
+                    </div>
+                </div>
+
+                <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Congress Trading
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Congress trading insights.
+                        </span>
+                    </div>
+                </div>
+
+              </aside>
+
+        </div>
+      </div>
+  
+    
+    </div>
+        
+        
+    
+  </section>
+  
+
+
+<style>
+  .app {
+      height: 400px;
+      width: 100%;
+  }
+  
+  @media (max-width: 560px) {
+      .app {
+          width: 100%;
+          height: 300px;
+      }
+  }
+
+  .chart {
+      width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/economic-indicator/+page.ts b/src/routes/economic-indicator/+page.ts
new file mode 100644
index 00000000..5d783607
--- /dev/null
+++ b/src/routes/economic-indicator/+page.ts
@@ -0,0 +1,35 @@
+import { getCache, setCache } from '$lib/store';
+
+
+
+export const load = async ({parent}) => {
+  const getEconomicIndicator = async () => {
+    let output;
+    const {apiKey, apiURL} = await parent();
+
+    const cachedData = getCache('', 'getEconomicIndicator');
+    if (cachedData) {
+      output = cachedData;
+    } else {
+    const response = await fetch(apiURL + '/economic-indicator', {
+      method: 'GET',
+      headers: {
+        "Content-Type": "application/json", "X-API-KEY": apiKey
+      },
+    });
+
+    output = await response.json();
+
+
+    setCache('', output, 'getEconomicIndicator');
+
+    }
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getEconomicIndicator: await getEconomicIndicator()
+  };
+};
\ No newline at end of file
diff --git a/src/routes/etf/[tickerID]/+layout.server.ts b/src/routes/etf/[tickerID]/+layout.server.ts
index aee02299..7c79b97f 100644
--- a/src/routes/etf/[tickerID]/+layout.server.ts
+++ b/src/routes/etf/[tickerID]/+layout.server.ts
@@ -69,6 +69,6 @@ export const load = async ({ params, locals, setHeaders }) => {
     getWhyPriceMoved,
     getOneDayPrice,
     getUserWatchlist,
-    companyName: cleanString(getETFProfile?.[0]?.name),
+    companyName: cleanString(getETFProfile?.at(0)?.name),
   };
 };
\ No newline at end of file
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 800eb6e1..b90a4530 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -763,6 +763,7 @@ $: {
                                 <!--Start Company Info -->
                                 
                                 <ETFProfileCard
+                                  data = {data}
                                   etfProfile = {etfProfile}
                                 />
 
diff --git a/src/routes/etf/etf-providers/+layout.svelte b/src/routes/etf/etf-providers/+layout.svelte
index 286a7248..a730dd8e 100644
--- a/src/routes/etf/etf-providers/+layout.svelte
+++ b/src/routes/etf/etf-providers/+layout.svelte
@@ -3,7 +3,9 @@
     import { page } from '$app/stores';
     import logo from '$lib/images/provider_logo.png';
     import { formatETFName } from '$lib/utils';
-        
+    import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
+    export let data;
     let currentPath = '';
 
     $: {
@@ -58,8 +60,16 @@
 
 
 
-<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+<div class="w-full overflow-hidden m-auto mt-5">
+
+<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+    <div class="relative flex justify-center items-start overflow-hidden w-full">
+
+
+        <main class="w-full lg:w-3/4 lg:pr-5">
+            
+            <div class="w-full  m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
 
     <!-- Start Column -->
     <div>
@@ -119,9 +129,64 @@
     
     </div>
 
+     
+</main>
 
 
+<aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+
+  {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+  <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Pro Subscription
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Upgrade now for unlimited access to all data and tools.
+          </span>
+      </div>
+  </div>
+  {/if}
+
+  <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Wallstreet Analyst
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Wall Street analyst ratings.
+          </span>
+      </div>
+  </div>
+
+  <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Congress Trading
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Congress trading insights.
+          </span>
+      </div>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+
+</div>
+
 
 
 </section>
-
diff --git a/src/routes/etf/new-launches/+page.svelte b/src/routes/etf/new-launches/+page.svelte
index 78f23a43..988385e1 100644
--- a/src/routes/etf/new-launches/+page.svelte
+++ b/src/routes/etf/new-launches/+page.svelte
@@ -3,25 +3,13 @@ import { goto } from '$app/navigation';
 import { numberOfUnreadNotification, screenWidth } from '$lib/store';
 import { abbreviateNumber } from '$lib/utils';
 import logo from '$lib/images/new_launcher_logo.png';
-    
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
 export let data;
 
 let etfData = data?.getETFNewLaunches;
 
-
-
-let charNumber = 50;
-
-$: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 30;
-    }
-    else {
-    charNumber = 30;
-    }
-}
-
+$: charNumber = $screenWidth < 640 ? 30 : 40
 </script>
         
             
@@ -55,8 +43,16 @@ $: {
         </ul>
     </div>
 
-  <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+    <div class="w-full overflow-hidden m-auto mt-5">
+
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div class="relative flex justify-center items-start overflow-hidden w-full">
+      
+      
+              <main class="w-full lg:w-3/4 lg:pr-5">
+                  
+                  <div class="w-full  m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
       <div>
@@ -173,10 +169,66 @@ $: {
     </div>
   </div>
 
+ 
+</main>
 
 
+<aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+
+  {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+  <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Pro Subscription
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Upgrade now for unlimited access to all data and tools.
+          </span>
+      </div>
+  </div>
+  {/if}
+
+  <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Wallstreet Analyst
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Wall Street analyst ratings.
+          </span>
+      </div>
+  </div>
+
+  <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Congress Trading
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Congress trading insights.
+          </span>
+      </div>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+
+</div>
+
 
 
 </section>
-            
+
             
\ No newline at end of file
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index 86b2f28e..3ac60e05 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -10,8 +10,9 @@
   import Crown from "lucide-svelte/icons/crown";
   import Activity from "lucide-svelte/icons/activity";
   import { abbreviateNumber, formatDate } from '$lib/utils';
-  
-  import {  numberOfUnreadNotification} from '$lib/store';
+  import * as Tabs from "$lib/components/shadcn/tabs/index.js";
+
+  import { screenWidth, numberOfUnreadNotification} from '$lib/store';
 
   /*
   import { Chart } from 'svelte-echarts'
@@ -28,9 +29,10 @@
   export let data;
   let isLoaded = false;
   const quickInfo = data?.getDashboard?.quickInfo;
+  let optionsMode = 'premium';
 
 
-  function compareTimes(time1, time2) {
+function compareTimes(time1, time2) {
   const [hours1, minutes1] = time1.split(':').map(Number);
   const [hours2, minutes2] = time2.split(':').map(Number);
   
@@ -156,8 +158,18 @@ function latestInfoDate(inputDate) {
     return differenceInDays <=1;
 }
 
+let optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
 
-
+function changeTable(state) {
+  optionsMode = state;
+  if (optionsMode === 'premium') {
+    optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
+  } else if (optionsMode === 'volume') {
+    optionsTable = data?.getDashboard?.optionsFlow?.volume || [];
+  } else {
+    optionsTable = data?.getDashboard?.optionsFlow?.openInterest || [];
+  }
+}
 let Feedback;
 
 onMount( async() => {
@@ -202,10 +214,10 @@ onMount( async() => {
           <Feedback data={data} />
         {/if}
         
-        <!--
+        
         <div class="text-center mb-10 relative w-fit flex justify-center m-auto">
-          <a href="/corporate-lobbying-tracker" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
-            <span class="font-semibold">Corporate Lobbying Tracker</span>
+          <a href="/economic-indicator" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
+            <span class="font-semibold">US Economic Indicators</span>
           </a>
           <div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
             <span class="bg-[#FBCE3C] text-black text-sm sm:text-[0.9rem] rounded-xl font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
@@ -213,7 +225,7 @@ onMount( async() => {
             </span>
           </div>
         </div>
-      -->
+      
 
         <h1 class="text-white text-3xl font-semibold text-start w-full pl-4 pb-4 sm:pb-2">
           Dashboard
@@ -325,37 +337,44 @@ onMount( async() => {
                       <ArrowUpRight class="hidden sm:inline-block h-4 w-4 shrink-0 -mt-1 ml-0.5" />
                     </a>
                   </div>
-                  <Card.Description class="mt-2 text-sm sm:text-[1rem]">Recent hedge fund options with the highest premiums.</Card.Description>
+                  <Card.Description class="mt-2 text-sm sm:text-[1rem]">Recent hedge fund options with the highest ...</Card.Description>
+                  <Tabs.Root value="premium" class="w-fit mt-5 ">
+                    <Tabs.List class="grid w-full grid-cols-3 bg-[#313131]">
+                      <Tabs.Trigger on:click={() => changeTable('premium')} value="premium" class="text-sm">Premium</Tabs.Trigger>
+                      <Tabs.Trigger on:click={() => changeTable('volume')} value="volume" class="text-sm">Volume</Tabs.Trigger>
+                      <Tabs.Trigger on:click={() => changeTable('openInterest')} value="openInterest" class="text-sm">{$screenWidth < 640 ? 'OI' : 'Open Interest'}</Tabs.Trigger>
+                    </Tabs.List>
+                  </Tabs.Root>
                 </div>
               </Card.Header>
               <Card.Content>
                 <Table.Root class="overflow-x-scroll w-full">
                   <Table.Header>
                     <Table.Row>
-                      <Table.Head class="text-white">Symbol</Table.Head>
-                      <Table.Head class="text-white">Prem.</Table.Head>
-                      <Table.Head class="text-white">Strike</Table.Head>
-                      <Table.Head class="text-white">Sent.</Table.Head>
-                      <Table.Head class="text-white">C/P</Table.Head>
-                      <Table.Head class="text-right text-white">Expiry</Table.Head>
+                      <Table.Head class="text-white font-semibold">Symbol</Table.Head>
+                      <Table.Head class="text-white text-right font-semibold">Prem</Table.Head>
+                      <Table.Head class="text-white text-right font-semibold">Strike</Table.Head>
+                      <Table.Head class="text-white text-right font-semibold">{optionsMode === 'openInterest' ? 'OI' : 'Vol'}</Table.Head>
+                      <Table.Head class="text-white text-right font-semibold">C/P</Table.Head>
+                      <Table.Head class="text-right text-white font-semibold">Expiry</Table.Head>
                     </Table.Row>
                   </Table.Header>
                   <Table.Body>
-                    {#each data?.getDashboard?.optionsFlow as item}
+                    {#each optionsTable as item}
                     <Table.Row>
                       <Table.Cell>
                         <a href={item?.assetType === 'stock' ? `/stocks/${item?.ticker}` : `/etf/${item?.ticker}`} class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100">{item?.ticker}</a>
                       </Table.Cell>
-                      <Table.Cell class="xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
+                      <Table.Cell class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
                         {abbreviateNumber(item?.cost_basis,true)}
                       </Table.Cell>
-                      <Table.Cell class="xl:table.-column text-sm sm:text-[1rem]">
+                      <Table.Cell class="text-right xl:table.-column text-sm sm:text-[1rem]">
                         ${item?.strike_price}
                       </Table.Cell>
-                      <Table.Cell class="md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'}">
-                        {item?.sentiment}
+                      <Table.Cell class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white">
+                        {abbreviateNumber(optionsMode === 'openInterest' ? item?.open_interest : item?.volume)}
                       </Table.Cell>
-                      <Table.Cell class="md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
+                      <Table.Cell class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
                         {item?.put_call}
                       </Table.Cell>
                       
@@ -367,7 +386,7 @@ onMount( async() => {
               </Card.Content>
             </Card.Root>
             
-            <Card.Root class="overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[400px]">
+            <Card.Root class="overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[470px]">
               <Card.Header class="flex flex-row items-center">
                 <div class="flex flex-col items-start w-full">
                   <div class="flex flex-row w-full items-center">
@@ -376,6 +395,7 @@ onMount( async() => {
                 </div>
               </Card.Header>
               <Card.Content>
+                {#if data?.getDashboard?.recentDividends?.length !== 0}
                 <ul style="padding-left: 5px;">
                   {#each data?.getDashboard?.recentDividends as item}
                   <strong>{item?.name}</strong> (<a href="/stocks/{item?.symbol}" class="sm:hover:text-white text-blue-400">{item?.symbol}</a>) has announced its upcoming dividend details as of {convertTimestamp(item?.updated)}:
@@ -398,6 +418,9 @@ onMount( async() => {
 
                   {/each}
               </ul>
+              {:else}
+                Currently, there are no dividend announcement reports available.
+              {/if}
              
               </Card.Content>
             </Card.Root>
@@ -486,6 +509,7 @@ onMount( async() => {
                   </div>
                 </Card.Header>
                 <Card.Content>
+                  {#if data?.getDasboard?.recentEarnings?.length !== 0}
                   <ul style="padding-left: 5px;">
                     {#each data?.getDashboard?.recentEarnings as item}
                     <strong>{item?.name}</strong> (<a href="/stocks/{item?.symbol}" class="sm:hover:text-white text-blue-400">{item?.symbol}</a>) has released its quarterly earnings at {formatTime(item?.time)}:
@@ -500,7 +524,9 @@ onMount( async() => {
 
                     {/each}
                 </ul>
-               
+                {:else}
+                Currently, there are no recent earnings reports available.
+                {/if}
                 </Card.Content>
               </Card.Root>
               
diff --git a/src/routes/market-mover/+page.svelte b/src/routes/market-mover/+page.svelte
index fe719db0..c21a7bbb 100644
--- a/src/routes/market-mover/+page.svelte
+++ b/src/routes/market-mover/+page.svelte
@@ -4,9 +4,12 @@ import { screenWidth, numberOfUnreadNotification } from '$lib/store';
 import logo from '$lib/images/top_winner_logo.png';
 import { abbreviateNumber } from '$lib/utils';
 import MiniPlot from '$lib/components/MiniPlot.svelte';
+import { onMount } from 'svelte';
+import * as Tabs from "$lib/components/shadcn/tabs/index.js";
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
 export let data;
-
+let isLoaded = false;
 const rawData = data?.getMiniPlotsIndex;
 
 let priceDataSP500;
@@ -18,6 +21,7 @@ let changeSP500, changeNasdaq, changeDowJones, changeRussel2000;
 let previousCloseSP500, previousCloseNasdaq, previousCloseDowJones, previousCloseRussel2000;
 
 
+
 function getCurrentDateFormatted() {
     // Get current date
     let date = new Date();
@@ -76,11 +80,11 @@ rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => {
 });
 
 
-let timePeriod = '1D';
 let outputList = data?.getDailyGainerLoserActive;
-let gainerLoserActive = outputList?.gainers[timePeriod]
+let gainerLoserActive = outputList?.gainers['1D']
 let displaySection = 'gainer'
 let order = 'highToLow';
+let sortBy = ''; // Default sorting by change percentage
 
 
 let buttonText = 'Top Winners';
@@ -96,7 +100,7 @@ function changeOrder(state:string) {
     }
   }
 
-const sortByHighestChange = (tickerList) => {
+const sortByChange = (tickerList) => {
     return tickerList?.sort(function(a, b) {
       if(order === 'highToLow')
       {
@@ -108,15 +112,15 @@ const sortByHighestChange = (tickerList) => {
        
       });
   }
-/*
-const sortByLowestChange = (tickerList) => {
+
+const sortByPrice = (tickerList) => {
     return tickerList?.sort(function(a, b) {
       if(order === 'highToLow')
       {
-        return a?.changesPercentage - b?.changesPercentage;
+        return a?.price - b?.price;
       }
       else {
-        return b?.changesPercentage - a?.changesPercentage;
+        return b?.price - a?.price;
       }
        
       });
@@ -134,7 +138,7 @@ const sortByVolume = (tickerList) => {
        
       });
   }
-*/
+
 const sortByMarketCap = (tickerList) => {
   return tickerList?.sort(function(a, b) {
     if(order === 'highToLow')
@@ -151,7 +155,9 @@ const sortByMarketCap = (tickerList) => {
 function changeSection(state) {
 
     displaySection = state;
-    timePeriod = '1D';
+    const timePeriod = '1D';
+    sortBy = '';
+    order = '';
     
     if (state === 'gainer')
     {
@@ -173,8 +179,12 @@ function changeSection(state) {
 
 
 
-function selectTimeInterval(interval) {
-    timePeriod = interval;
+function selectTimeInterval(event) {
+    sortBy = '';
+    order = '';
+   
+    const timePeriod = event.target.value === 'oneDay' ? '1D' : event.target.value === 'oneWeek' ? '1W' : event.target.value === 'oneMonth' ? '1M' : event.target.value === 'threeMonths' ? '3M' : '6M';
+
 
     if (buttonText === 'Top Winners')
     {
@@ -191,31 +201,30 @@ function selectTimeInterval(interval) {
     
   }
 
+onMount( () => {
+  isLoaded = true;
+})
 
   $: {
   if(order)
   {
-    if(displaySection === 'gainer')
-    {
-      gainerLoserActive = sortByHighestChange(outputList?.gainers[timePeriod]);
-    }
-    else if(displaySection === 'loser')
-    {
-      gainerLoserActive = sortByHighestChange(outputList?.losers[timePeriod]);
-    }
-    else if(displaySection === 'active')
-    {
-      gainerLoserActive = sortByHighestChange(outputList?.active[timePeriod]);
-    }
-    
+     
     // Add this condition for market cap sorting
     if (sortBy === 'marketCap') {
       gainerLoserActive = sortByMarketCap(gainerLoserActive);
     }
+    else if (sortBy === 'change') {
+      gainerLoserActive = sortByChange(gainerLoserActive);
+    }
+    else if (sortBy === 'price') {
+      gainerLoserActive = sortByPrice(gainerLoserActive);
+    }
+    else if (sortBy === 'volume') {
+      gainerLoserActive = sortByVolume(gainerLoserActive);
+    }
   }
 }
 
-let sortBy = 'change'; // Default sorting by change percentage
 
 $: charNumber = $screenWidth < 640 ? 20 : 30;
 
@@ -246,22 +255,26 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
 
 </svelte:head>
   
-<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
-    
-
+<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
   <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li> 
-      <li class="text-gray-300">
-        Market Movers
-      </li>
+      <li><a href="/" class="text-gray-300">Home</a></li>
+      <li class="text-gray-300">Market Movers</li>
     </ul>
   </div>
+          
+  <div class="w-full overflow-hidden m-auto mt-5">
+    
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+        <div class="relative flex justify-center items-start overflow-hidden w-full">
 
 
+            <main class="w-full lg:w-3/4 lg:pr-5">
 
-  <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+
+              <div class="w-full  m-auto sm:bg-[#27272A] h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
       <div>
@@ -271,7 +284,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
           </h1>
         </div>
 
-        <span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
+        <span class="hidden sm:block text-white text-md font-semibold text-center flex justify-center items-center ">
           Explore top-performing, underperforming & most active traded stocks across different time frames.
         </span>
 
@@ -304,12 +317,14 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
 
   </div>
 
+  {#if isLoaded}
+
   <div class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0">
     Stock Indexes - {getCurrentDateFormatted()}
   </div>
 
   <div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0">
-    <div class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 ">
+    <div class="w-full grid grid-cols-2 md:grid-cols-3 gap-y-3 gap-x-3 ">
     <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
     <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
     <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
@@ -323,20 +338,13 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
       
 
         <div class="tabs flex flex-row justify-between sm:justify-start items-center w-full pl-3 pr-3 sm:pl-0 sm:pr-0">
-          <button class="w-fit text-xl mr-0 sm:mr-10 rounded-md transition font-semibold hover:text-white {displaySection === 'gainer' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeSection('gainer'))} >
-            Gainers
-            <div class="{displaySection === 'gainer' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem] rounded-full" />
-          </button> 
-          
-          <button class="w-fit text-xl mr-0 sm:mr-10 rounded-md transition font-semibold hover:text-white {displaySection === 'loser' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeSection('loser'))} >
-            Losers
-            <div class="{displaySection === 'loser' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem] rounded-full" />
-          </button> 
-          
-          <button class="w-fit text-xl mr-0 sm:mr-10 rounded-md transition font-semibold hover:text-white {displaySection === 'active' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeSection('active'))} >
-            Active
-            <div class="{displaySection === 'active' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem] rounded-full" />
-          </button> 
+          <Tabs.Root value="gainers" class="w-[400px]">
+            <Tabs.List class="grid w-full grid-cols-3 bg-[#27272A]">
+              <Tabs.Trigger on:click={() => (changeSection('gainer'))} value="gainers">Gainers</Tabs.Trigger>
+              <Tabs.Trigger on:click={() => (changeSection('loser'))} value="losers">Losers</Tabs.Trigger>
+              <Tabs.Trigger on:click={() => (changeSection('active'))} value="active">Active</Tabs.Trigger>
+            </Tabs.List>
+          </Tabs.Root>
         </div>
 
       </div>
@@ -347,24 +355,21 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
       
 
         
-      <div class="pl-2 sm:pl-0 flex justify-start items-center mb-10 w-full">
-        <label for="timePeriodModal" class="px-4 py-3 rounded-lg cursor-pointer bg-[#27272A] flex flex-row items-center">
-          <span class="text-white text-sm sm:text-md mr-2">
-            Time Period: 
+      <div class="w-full flex justify-start sm:justify-end items-center mb-10 ml-5 sm:ml-0">
+        <div class="relative flex flex-col items-start">
+          <span class="sm:hidden text-white text-sm mb-3">
+            Time Period:
           </span>
-            <div class="flex flex-row items-center">
-                <span class="text-sm sm:text-md m-auto font-medium text-white">
-                  {timePeriod}
-                </span>
-                <svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                    <g transform="rotate(180 512 512)">
-                        <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/>
-                    </g>
-                </svg>
-            </div>
-          </label>
-
-      </div>
+        <select class="w-32 text-white select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={selectTimeInterval}>
+            <option disabled>Choose a time period</option>
+            <option value="oneDay" selected>1 Day</option>
+            <option value="oneWeek">1 Week</option>
+            <option value="oneMonth">1 Month</option>
+            <option value="threeMonths">3 Months</option>
+            <option value="sixMonths">6 Months</option>                                    
+        </select>
+        </div>
+    </div>
     
 
 
@@ -372,17 +377,23 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
         <thead>
           <tr>
-            <th class="text-white font-semibold text-sm whitespace-nowrap">Company</th>
-            <th on:click={() => { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm text-end">
+            <th class="text-white font-semibold text-[1rem] whitespace-nowrap">Company</th>
+            <th on:click={() => { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-[1rem] text-end">
               % Change
-              <svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'change' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><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>
+              <svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'change' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><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>
             </th>
-            <th class="text-white font-semibold text-end text-sm">Price</th>
-            <th on:click={() => { sortBy = 'marketCap'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm text-end">
+            <th on:click={() => { sortBy = 'price'; changeOrder(order); }} class="cursor-pointer text-white font-semibold text-end text-[1rem]">
+              Price
+              <svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'price' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><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>
+            </th>
+            <th on:click={() => { sortBy = 'marketCap'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-[1rem] text-end">
               Market Cap
               <svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'marketCap' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><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>
             </th>
-            <th class="text-white font-semibold text-sm text-end ">Volume</th>
+            <th on:click={() => { sortBy = 'volume'; changeOrder(order); }} class="cursor-pointer text-white font-semibold text-[1rem] text-end">
+              Volume
+              <svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'volume' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><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>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -391,16 +402,16 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
     
           <td class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
             <div class="flex flex-col">
-              <span class="text-blue-400 font-medium">
+              <span class="text-blue-400 font-semibold">
                 {item?.symbol}
               </span>
-              <span class="text-white font-medium border-b-[#09090B]">
+              <span class="text-white text-sm font-semibold border-b-[#09090B]">
                 {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
               </span>
             </div>
           </td>
 
-          <td class="text-white text-end text-sm sm:text-[1rem] font-medium border-b-[#09090B]">
+          <td class="text-white text-end text-sm sm:text-[1rem] font-semibold border-b-[#09090B]">
               {#if item?.changesPercentage >=0}
                 <span class="text-[#10DB06]">+{item?.changesPercentage >= 1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}%</span>
               {:else}
@@ -408,15 +419,15 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
               {/if}
           </td>
 
-          <td class="text-white font-medium text-sm sm:text-[1rem] text-end border-b-[#09090B]">
+          <td class="text-white font-semibold text-sm sm:text-[1rem] text-end border-b-[#09090B]">
             ${item?.price?.toFixed(2)}
           </td>
 
-          <td class="text-white text-sm sm:text-[1rem] font-medium border-b-[#09090B] text-end">
+          <td class="text-white text-sm sm:text-[1rem] font-semibold border-b-[#09090B] text-end">
             {item?.marketCap !== null ? abbreviateNumber(item?.marketCap, true) : '-'}
           </td>
 
-          <td class="text-white text-sm sm:text-[1rem] font-medium border-b-[#09090B] text-end">
+          <td class="text-white text-sm sm:text-[1rem] font-semibold border-b-[#09090B] text-end">
             {item?.volume !== null ? abbreviateNumber(item?.volume) : '-'}
           </td>
 
@@ -433,144 +444,78 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
 
 
 
-<!--
-    {#if !fullList}
-    <label on:click={showFullList} class="mt-10 btn btn-sm btn-outline btn-ghost text-white text-xs m-auto normal-case ">
-        Show more
-    </label>
-    {/if}
--->
-
   </div>
 
+  {:else}
+  <div class="flex justify-center items-center h-80">
+    <div class="relative">
+    <label class="bg-[#09090B] rounded-lg h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+        <span class="loading loading-spinner loading-md"></span>
+    </label>
+    </div>
+</div>
+
+  {/if}
+
+
+</main>
+
+
+<aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+
+  {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+  <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Pro Subscription
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Upgrade now for unlimited access to all data and tools.
+          </span>
+      </div>
+  </div>
+  {/if}
+
+  <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Wallstreet Analyst
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Wall Street analyst ratings.
+          </span>
+      </div>
+  </div>
+
+  <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Congress Trading
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Congress trading insights.
+          </span>
+      </div>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+
+</div>
+
 
 
 </section>
 
-
-
-
-
-  <!--Start Time Period Modal-->
-  <input type="checkbox" id="timePeriodModal" class="modal-toggle" />
-      
-  <dialog id="timePeriodModal" class="modal modal-bottom sm:modal-middle ">
-  
-  
-    <label id="timePeriodModal" for="timePeriodModal"  class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
-    
-    
-    <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
-  
-  
-  
-    <label for="timePeriodModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
-      ✕
-    </label>
-  
-      <div class="text-white">
-        <h3 class="font-medium text-lg sm:text-2xl mb-10">
-          Time Period
-        </h3>
-  
-  
-        <div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
-  
-
-          <label for="timePeriodModal" on:click={() => selectTimeInterval('1D')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-  
-            <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1D' ? 'ring-2 ring-[#04E000]' : ''}">
-              
-              <span class="ml-1 text-white font-medium mr-auto">
-                1 Day
-              </span>
-
-              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                {#if timePeriod === '1D'}
-                  <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                {/if}
-              </div>
-
-            </div>
-           
-        </label>
-  
-          <label for="timePeriodModal" on:click={() => selectTimeInterval('1W')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-  
-              <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1W' ? 'ring-2 ring-[#04E000]' : ''}">
-                
-                <span class="ml-1 text-white font-medium mr-auto">
-                  1 Week
-                </span>
-  
-                <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                  {#if timePeriod === '1W'}
-                    <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                  {/if}
-                </div>
-  
-              </div>
-             
-          </label>
-  
-  
-          <label for="timePeriodModal" on:click={() => selectTimeInterval('1M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-  
-            <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1M' ? 'ring-2 ring-[#04E000]' : ''}">
-              
-              <span class="ml-1 text-white font-medium mr-auto">
-                1 Month
-              </span>
-  
-              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                {#if timePeriod === '1M'}
-                <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                {/if}
-              </div>
-  
-            </div>
-           
-          </label>
-  
-      
-  
-  
-          <label for="timePeriodModal" on:click={() => selectTimeInterval('3M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-            <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '3M' ? 'ring-2 ring-[#04E000]' : ''}">
-              <span class="ml-1 text-white font-medium mr-auto">
-                3 Months
-              </span>
-              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                {#if timePeriod === '3M'}
-                  <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                {/if}
-              </div>
-            </div>
-          </label>
-  
-          <label for="timePeriodModal" on:click={() => selectTimeInterval('6M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-            <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '6M' ? 'ring-2 ring-[#04E000]' : ''}">
-              <span class="ml-1 text-white font-medium mr-auto">
-                6 Months
-              </span>
-              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                {#if timePeriod === '6M'}
-                <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-              {/if}
-              </div>
-  
-            </div>
-           
-          </label>
-  
-  
-        </div>
-         
-      </div>
-  
-  
-          
-        </div>
-    </dialog>
-  <!--End Time Period Modal-->
-
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index ee1b18e1..e31ed8b9 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -1,8 +1,10 @@
 <script lang='ts'>
 import logo from '$lib/images/news_logo.png'
 import ScrollToTop from '$lib/components/ScrollToTop.svelte';
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
+import { goto } from '$app/navigation';
 
-
+export let data;
 let displaySection = 'stock'
 
 
@@ -17,23 +19,24 @@ let displaySection = 'stock'
 
 
 
-<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
-
-  <!--
-  <div class="text-sm breadcrumbs ml-4">
+<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
+  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li> 
+      <li><a href="/" class="text-gray-300">Home</a></li>
       <li class="text-gray-300">Market News</li>
     </ul>
   </div>
-  -->
+          
+  <div class="w-full overflow-hidden m-auto mt-5">
+    
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+        <div class="relative flex justify-center items-start overflow-hidden w-full">
 
-    <div class="flex justify-center w-full m-auto h-full overflow-hidden mb-40">
-        <div class="relative flex justify-center items-center overflow-hidden">
-            <main>
-  
-  
-              <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+
+            <main class="w-full lg:w-3/4 lg:pr-5">
+             
+              <div class="w-full  m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
               
                   <!-- Start Column -->
@@ -83,7 +86,7 @@ let displaySection = 'stock'
   
 
 
-                <div class="ml-4 w-full mb-2" >
+                <div class="w-full mb-2" >
                   <ul class="pr-4 sm:pr-0 w-full font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2">
                     <li class="cursor-pointer flex flex-col items-center text-xl">
                       <a href='/market-news' on:click={() => displaySection = 'stock'} class="px-3 font-medium text-gray-400 sm:hover:text-white {displaySection === 'stock' ? 'text-white ' : 'bg-[#09090B]'}" >
@@ -111,11 +114,64 @@ let displaySection = 'stock'
                 
             </main>
 
-        </div>
+            <aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+              
+              {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+              <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                  <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                      <div class="w-full flex justify-between items-center p-3 mt-3">
+                      <h2 class="text-start text-xl font-semibold text-white ml-3">
+                      Pro Subscription
+                      </h2>
+                      <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                      </div>
+                      <span class="text-white p-3 ml-3 mr-3">
+                          Upgrade now for unlimited access to all data and tools.
+                      </span>
+                  </div>
+              </div>
+              {/if}
+
+              <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                  <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                      <div class="w-full flex justify-between items-center p-3 mt-3">
+                      <h2 class="text-start text-xl font-semibold text-white ml-3">
+                      Wallstreet Analyst
+                      </h2>
+                      <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                      </div>
+                      <span class="text-white p-3 ml-3 mr-3">
+                          Get the latest top Wall Street analyst ratings.
+                      </span>
+                  </div>
+              </div>
+
+              <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                  <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                      <div class="w-full flex justify-between items-center p-3 mt-3">
+                      <h2 class="text-start text-xl font-semibold text-white ml-3">
+                      Congress Trading
+                      </h2>
+                      <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                      </div>
+                      <span class="text-white p-3 ml-3 mr-3">
+                          Get the latest top Congress trading insights.
+                      </span>
+                  </div>
+              </div>
+
+            </aside>
+
+      </div>
     </div>
-  </section>
+
   
+  </div>
+      
+      
   
+</section>
+    
   
   
   
\ No newline at end of file
diff --git a/src/routes/market-news/+page.svelte b/src/routes/market-news/+page.svelte
index a25529a7..79aa87cc 100644
--- a/src/routes/market-news/+page.svelte
+++ b/src/routes/market-news/+page.svelte
@@ -96,7 +96,7 @@ function checkIfYoutubeVideo(link) {
 </svelte:head>
 
 
-<section class="w-full max-w-5xl overflow-hidden m-auto mt-10">
+<section class="w-full  overflow-hidden m-auto mt-10">
   
   <div class="flex justify-center w-full m-auto overflow-hidden">
       <div class="relative flex justify-center items-center overflow-hidden">
@@ -105,7 +105,7 @@ function checkIfYoutubeVideo(link) {
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                       {#if news.length !== 0}
                       {#each news as item}
-                          <div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
+                          <div class="flex flex-col w-full mt-5 bg-[#141417] shadow-lg h-auto sm:h-[450px] xl:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
                             {#if videoId = checkIfYoutubeVideo(item.url)}
                                 <iframe
                                     class="w-full h-60 rounded-none sm:rounded-lg"
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index 5970a6b8..ad3d8242 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -71,7 +71,7 @@
   
   
   
-<section class="w-full max-w-5xl overflow-hidden m-auto mt-10">
+<section class="w-full overflow-hidden m-auto mt-10">
   
   <div class="flex justify-center w-full m-auto overflow-hidden">
       <div class="relative flex justify-center items-center overflow-hidden">
diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte
index 46948c54..f233a2c1 100644
--- a/src/routes/politicians/[slug]/+page.svelte
+++ b/src/routes/politicians/[slug]/+page.svelte
@@ -226,7 +226,6 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
               itemStyle: {
                       color: '#22C55E' // Change bar color to white
                 },
-              barWidth: '25%',
             },
             
           {   
@@ -234,9 +233,8 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
               data: soldList,
               type: 'bar',
               itemStyle: {
-                  color: '#E11D48' // Change bar color to white
+                  color: '#F71F4F' // Change bar color to white
               },
-              barWidth: '25%',
           },
       ]
       };
@@ -471,7 +469,7 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
                   </div>
                       <div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
                           <div class="h-full bg-[#313131] transform -translate-x-1/2 " aria-hidden="true"></div>
-                          <div class="w-3 h-3 bg-[#E11D48] border-4 box-content border-[#313131] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
+                          <div class="w-3 h-3 bg-[#F71F4F] border-4 box-content border-[#313131] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
                           <span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
                           Sold
                           </span>
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index 141a0945..2eb0a068 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -10,6 +10,8 @@
   import { onMount } from 'svelte';
   import defaultLogo from '$lib/images/stocks/logo/default_logo.png';
 	import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
   //  import * as XLSX from 'xlsx';
 
   export let data;
@@ -287,27 +289,8 @@
   
   
   
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  let charNumber = 40;
-  $: {
-      if ($screenWidth < 640)
-      {
-        charNumber = 20;
-      }
-      else {
-        charNumber = 40;
-      }
-    }
-    
+
+  $: charNumber = $screenWidth < 640 ? 20 : 40;
   
   
   $: {
@@ -365,17 +348,25 @@
   
   
   
-    <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
-      <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
-        <ul>
-          <li><a href="/" class="text-gray-300">Home</a></li> 
-          <li class="text-gray-300">Congress Flow</li>
-        </ul>
-      </div>
-    
-  
-        <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+  <section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
+    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+      <ul>
+        <li><a href="/" class="text-gray-300">Home</a></li>
+        <li class="text-gray-300">Congress Flow</li>
+      </ul>
+    </div>
+            
+    <div class="w-full overflow-hidden m-auto mt-5">
+      
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div class="relative flex justify-center items-start overflow-hidden w-full">
+
+
+              <main class="w-full lg:w-3/4 lg:pr-5">
+               
+                <div class="w-full  m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
         
             <!-- Start Column -->
             <div>
@@ -669,7 +660,68 @@
           
           
       
-  </section>
+</main>
+
+
+<aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+
+  {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+  <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Pro Subscription
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Upgrade now for unlimited access to all data and tools.
+          </span>
+      </div>
+  </div>
+  {/if}
+
+  <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Wallstreet Analyst
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Wall Street analyst ratings.
+          </span>
+      </div>
+  </div>
+
+  <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+          <div class="w-full flex justify-between items-center p-3 mt-3">
+          <h2 class="text-start text-xl font-semibold text-white ml-3">
+          Congress Trading
+          </h2>
+          <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+          </div>
+          <span class="text-white p-3 ml-3 mr-3">
+              Get the latest top Congress trading insights.
+          </span>
+      </div>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+
+</div>
+
+
+
+</section>
+
+
   
   
   
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 6164996f..5162142b 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -111,7 +111,7 @@ async function purchasePlan(subscriptionType:string='') {
 
 
 
-<section class="bg-[#09090B] min-h-screen mb-40 w-full max-w-3xl sm:max-w-screen-xl pt-10 pb-40 m-auto">
+<section class="bg-[#09090B] min-h-screen mb-40 w-full max-w-3xl sm:max-w-screen-lg pt-10 pb-40 m-auto">
     <div class="px-3">
         <div class="mx-auto text-center mb-8 ">
             
@@ -127,7 +127,7 @@ async function purchasePlan(subscriptionType:string='') {
 
             
             <div class="flex flex-row items-center justify-center mt-6 pb-5">
-                <span class="text-sm font-medium text-white text-opacity-[0.6] mr-3">
+                <span class="text-sm font-semibold text-white mr-3">
                     Pay Monthly
                 </span>
     
@@ -138,7 +138,7 @@ async function purchasePlan(subscriptionType:string='') {
                 </label>
                 
                 <div class="ml-3 -mb-4 flex flex-col items-start">
-                    <span class="text-sm font-medium text-white text-opacity-[0.6]">
+                    <span class="text-sm font-semibold text-white">
                         Pay Yearly
                     </span>
                     <span class="text-[#FBCE3C] text-sm font-semibold">
@@ -372,12 +372,12 @@ async function purchasePlan(subscriptionType:string='') {
 
 
              <!--Start Pricing Card-->
-             
+             <!--
              <div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-lg w-full text-center text-white">
 
                 <div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row border-l border-r border-b border-gray-400 items-center p-2">
                     <span class="text-white text-md font-semibold px-3">
-                        Best Support
+                        Limited Offer
                     </span>
                 </div>          
 
@@ -441,7 +441,7 @@ async function purchasePlan(subscriptionType:string='') {
                 {/if}
                
             </div>
-            
+            -->
             <!--End Pricing Card-->
 
 
@@ -465,9 +465,9 @@ async function purchasePlan(subscriptionType:string='') {
                     <div class="space-y-4 mb-12">
                         <!-- Table (Tidy Essential) -->
                         <div class="overflow-x-auto" data-aos="fade-up">
-                            <table class="table-auto w-full border-b border-slate-400">
+                            <table class="table table-sm table-compact w-full">
                                 <!-- Table header -->
-                                <thead>
+                                <thead class="border-b border-gray-800">
                                     <tr class="text-base sm:text-lg text-white">
                                         <th class="text-xl md:text-2xl whitespace-nowrap font-bold text-left pr-2 py-4 min-w-[10rem] md:min-w-[24rem]">Plan</th>
                                         <th class="text-bold text-center px-2 py-4">Free</th>
@@ -477,7 +477,7 @@ async function purchasePlan(subscriptionType:string='') {
                                 <!-- Table body -->
                                 <tbody>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Unusual Options Activity</div>
@@ -491,7 +491,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Retail Trader Activity</div>
@@ -505,7 +505,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Dark Pool Data</div>
@@ -519,7 +519,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>AI Predictions</div>
@@ -533,7 +533,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Wallstreet Analyst Database</div>
@@ -547,7 +547,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                      <!-- Row -->
-                                     <tr class="border-t first:border-t-2 border-slate-400">
+                                     <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Hedge Fund Database</div>
@@ -561,7 +561,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Congress Database</div>
@@ -575,7 +575,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Financial History</div>
@@ -589,7 +589,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div>Watchlist</div>
@@ -603,7 +603,7 @@ async function purchasePlan(subscriptionType:string='') {
                                         </td>
                                     </tr>
                                     <!-- Row -->
-                                    <tr class="border-t first:border-t-2 border-slate-400">
+                                    <tr class="border-t first:border-t-2 border-gray-800">
                                         <td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
                                             <div class="flex items-center justify-between max-w-xs">
                                                 <div class="flex items-center space-x-2">
@@ -653,7 +653,7 @@ async function purchasePlan(subscriptionType:string='') {
                     </div>
 
                     <!-- Faqs -->
-                    <ul class="mx-auto divide-y divide-slate-400">
+                    <ul class="mx-auto divide-y divide-gray-800">
                         <li>
                             <details class="collapse collapse-arrow">
                                 <summary class="collapse-title text-white font-semibold text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5">What are the advantages of Stocknear Service?</summary>
diff --git a/src/routes/stock-screener/[strategyId]/+page.svelte b/src/routes/stock-screener/[strategyId]/+page.svelte
index 4b506354..336b77e3 100644
--- a/src/routes/stock-screener/[strategyId]/+page.svelte
+++ b/src/routes/stock-screener/[strategyId]/+page.svelte
@@ -18,13 +18,10 @@
   const title = data?.getStrategy?.title;
 
   let stockScreenerData = data?.getStockScreenerData?.filter(item => 
-    item?.ratingRecommendation !== null &&
-    item?.trendAnalysis?.accuracy !== null &&
-    item?.fundamentalAnalysis?.accuracy !== null &&
-    item?.dividendYield !== null &&
-    item?.annualDividend !== null &&
-    item?.dividendGrowth !== null &&
-    item?.payoutRatio !== null
+  Object?.values(item)?.every(value => 
+    value !== null && value !== undefined && 
+    (typeof value !== 'object' || Object?.values(value)?.every(subValue => subValue !== null && subValue !== undefined))
+  )
 );
 
 
@@ -113,6 +110,13 @@ const getStockScreenerData = async (rules) => {
     var: (ruleOfList?.find(item => item.name === "var") || { condition: 'above' }).condition,
     trendAnalysis: (ruleOfList?.find(item => item.name === "trendAnalysis") || { condition: 'above' }).condition,
     fundamentalAnalysis: (ruleOfList?.find(item => item.name === "fundamentalAnalysis") || { condition: 'above' }).condition,
+    currentRatio:  (ruleOfList?.find(item => item.name === "currentRatio") || { condition: 'above' }).condition,
+    quickRatio:  (ruleOfList?.find(item => item.name === "quickRatio") || { condition: 'above' }).condition,
+    debtEquityRatio:  (ruleOfList?.find(item => item.name === "debtEquityRatio") || { condition: 'above' }).condition,
+    debtRatio:  (ruleOfList?.find(item => item.name === "debtRatio") || { condition: 'above' }).condition,
+    returnOnAssets:  (ruleOfList?.find(item => item.name === "returnOnAssets") || { condition: 'above' }).condition,
+    returnOnEquity:  (ruleOfList?.find(item => item.name === "returnOnEquity") || { condition: 'above' }).condition,
+
   };
 
   let ruleTrend = {
@@ -174,7 +178,14 @@ const getStockScreenerData = async (rules) => {
     { rule: 'var', label: 'Value at Risk (VaR)', category: 'fund' },
     { rule: 'trendAnalysis', label: 'AI Trend Analysis (Bullish)', category: 'ai' },
     { rule: 'fundamentalAnalysis', label: 'AI Fundamental Analysis (Bullish)', category: 'ai' },
-    { rule: 'ratingRecommendation', label: 'Analyst Rating', category: 'fund'}
+    { rule: 'ratingRecommendation', label: 'Analyst Rating', category: 'fund'},
+    { rule: 'currentRatio', label: 'Current Ratio',category: 'fund' },
+    { rule: 'quickRatio', label: 'Quick Ratio',category: 'fund' },
+    { rule: 'debtEquityRatio', label: 'Debt Equity Ratio',category: 'fund' },
+    { rule: 'debtRatio', label: 'Debt Ratio',category: 'fund' },
+    { rule: 'returnOnAssets', label: 'Return on Assets',category: 'fund' },
+    { rule: 'returnOnEquity', label: 'Return on Equity',category: 'fund' },
+
   ];
 
   // Creating the ruleMappings object from allRows
@@ -232,6 +243,13 @@ const getStockScreenerData = async (rules) => {
       let valueDividendGrowth = (ruleOfList?.find(item => item.name === "dividendGrowth") || { value: 5 }).value;
       let valuePayoutRatio = (ruleOfList?.find(item => item.name === "payoutRatio") || { value: 20 }).value;
 
+      let valueCurrentRatio = (ruleOfList?.find(item => item.name === "currentRatio") || { value: 1 }).value;
+      let valueQuickRatio = (ruleOfList?.find(item => item.name === "quickRatio") || { value: 1 }).value;
+      let valueDebtEquityRatio = (ruleOfList?.find(item => item.name === "debtEquityRatio") || { value: 1 }).value;
+      let valueDebtRatio = (ruleOfList?.find(item => item.name === "debtRatio") || { value: 1 }).value;
+      let valueReturnOnAssets = (ruleOfList?.find(item => item.name === "returnOnAssets") || { value: 0 }).value;
+      let valueReturnOnEquity = (ruleOfList?.find(item => item.name === "returnOnEquity") || { value: 0 }).value;
+
       let valueEPS = (ruleOfList?.find(item => item.name === "eps") || { value: 2 }).value;
       let valueGrowthEPS = (ruleOfList?.find(item => item.name === "growthEPS") || { value: 10 }).value;
       let valuePE = (ruleOfList?.find(item => item.name === "pe") || { value: 10 }).value;
@@ -342,6 +360,12 @@ const valueMappings = {
   var: valueVaR,
   trendAnalysis: valueTrendAnalysis,
   fundamentalAnalysis: valueFundamentalAnalysis,
+  currentRatio: valueCurrentRatio,
+  quickRatio: valueQuickRatio,
+  debtEquityRatio: valueDebtEquityRatio,
+  debtRatio: valueDebtRatio,
+  returnOnAssets: valueReturnOnAssets,
+  returnOnEquity: valueReturnOnEquity,
 };
     
 const conditions = {
@@ -394,6 +418,11 @@ const conditions = {
   var: ruleCondition.var,
   trendAnalysis: ruleCondition.trendAnalysis,
   fundamentalAnalysis: ruleCondition.fundamentalAnalysis,
+  currentRatio: ruleCondition.currentRatio,
+  quickRatio: ruleCondition.quickRatio,
+  debtEquityRatio: ruleCondition.debtEquityRatio,
+  debtRatio: ruleCondition.debtRatio,
+
 };    
 
 
@@ -453,14 +482,11 @@ async function updateStockScreenerData() {
   try {
     const newData = await getStockScreenerData(ruleOfList);
     stockScreenerData = newData?.filter(item => 
-      item?.ratingRecommendation !== null &&
-      item?.trendAnalysis?.accuracy !== null &&
-      item?.fundamentalAnalysis?.accuracy !== null &&
-      item?.dividendYield !== null &&
-      item?.annualDividend !== null &&
-      item?.dividendGrowth !== null &&
-      item?.payoutRatio !== null
-    );
+    Object.values(item).every(value => 
+      value !== null && value !== undefined && 
+      (typeof value !== 'object' || Object.values(value).every(subValue => subValue !== null && subValue !== undefined))
+    )
+  );
 
     filteredData = filterStockScreenerData();
     displayResults = filteredData?.slice(0, 50);
@@ -771,6 +797,24 @@ $: {
         case 'fundamentalAnalysis':
           ruleToUpdate.value = valueFundamentalAnalysis;
           break;
+        case 'currentRatio':
+          ruleToUpdate.value = valueCurrentRatio;
+          break;
+        case 'quickRatio':
+          ruleToUpdate.value = valueQuickRatio;
+          break;
+        case 'debtEquityRatio':
+          ruleToUpdate.value = valueDebtEquityRatio;
+          break;
+        case 'debtRatio':
+          ruleToUpdate.value = valueDebtRatio;
+          break;
+        case 'returnOnAssets':
+          ruleToUpdate.value = valueReturnOnAssets;
+          break;
+        case 'returnOnEquity':
+          ruleToUpdate.value = valueReturnOnEquity;
+          break;
         default:
           // Handle any case not explicitly mentioned
           break;
@@ -852,7 +896,7 @@ function filterStockScreenerData() {
 }
 
 let order = 'highToLow';
-let sortBy = 'change'; // Default sorting by change percentage
+let sortBy = ''; // Default sorting by change percentage
 
 function changeOrder(state:string) {
     if (state === 'highToLow')
@@ -1605,7 +1649,152 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
                {/if}
                <!--End Market Cap Rule-->
     
+               {#if ruleName === 'currentRatio'}
               
+               <div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
+                 Current Ratio {ruleCondition[ruleName]} {valueCurrentRatio}
+       
+                 <label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
+                   <span class="label-text text-white">Below</span> 
+                 </label>
+                 <label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
+                   <span class="label-text text-white">Above</span> 
+                 </label>
+       
+               </div>
+       
+                 
+                 <div class="w-full pt-5">
+                   <input type="range" min="0" max="50" step="0.5" bind:value={valueCurrentRatio} class="range range-secondary" />
+       
+                 </div>
+       
+               {/if}
+
+               {#if ruleName === 'quickRatio'}
+              
+               <div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
+                 Quick Ratio {ruleCondition[ruleName]} {valueQuickRatio}
+       
+                 <label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
+                   <span class="label-text text-white">Below</span> 
+                 </label>
+                 <label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
+                   <span class="label-text text-white">Above</span> 
+                 </label>
+       
+               </div>
+       
+                 
+                 <div class="w-full pt-5">
+                   <input type="range" min="0" max="50" step="0.5" bind:value={valueQuickRatio} class="range range-secondary" />
+       
+                 </div>
+       
+               {/if}
+                
+               {#if ruleName === 'returnOnAssets'}
+              
+               <div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
+                 Return on Assets {ruleCondition[ruleName]} {valueReturnOnAssets}
+       
+                 <label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
+                   <span class="label-text text-white">Below</span> 
+                 </label>
+                 <label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
+                   <span class="label-text text-white">Above</span> 
+                 </label>
+       
+               </div>
+       
+                 
+                 <div class="w-full pt-5">
+                   <input type="range" min="-5" max="5" step="0.1" bind:value={valueReturnOnAssets} class="range range-secondary" />
+       
+                 </div>
+       
+               {/if}
+
+
+               {#if ruleName === 'returnOnEquity'}
+              
+               <div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
+                 Return on Equity {ruleCondition[ruleName]} {valueReturnOnEquity}
+       
+                 <label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
+                   <span class="label-text text-white">Below</span> 
+                 </label>
+                 <label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
+                   <span class="label-text text-white">Above</span> 
+                 </label>
+       
+               </div>
+       
+                 
+                 <div class="w-full pt-5">
+                   <input type="range" min="-5" max="5" step="0.1" bind:value={valueReturnOnEquity} class="range range-secondary" />
+       
+                 </div>
+       
+               {/if}
+
+               {#if ruleName === 'debtRatio'}
+              
+               <div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
+                 Debt Ratio {ruleCondition[ruleName]} {valueDebtRatio}
+       
+                 <label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
+                   <span class="label-text text-white">Below</span> 
+                 </label>
+                 <label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
+                   <span class="label-text text-white">Above</span> 
+                 </label>
+       
+               </div>
+       
+                 
+                 <div class="w-full pt-5">
+                   <input type="range" min="0" max="50" step="0.5" bind:value={valueDebtRatio} class="range range-secondary" />
+       
+                 </div>
+       
+               {/if}
+
+
+               {#if ruleName === 'debtEquityRatio'}
+              
+               <div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
+                 Debt Equity Ratio {ruleCondition[ruleName]} {valueDebtEquityRatio}
+       
+                 <label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
+                   <span class="label-text text-white">Below</span> 
+                 </label>
+                 <label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
+                   <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
+                   <span class="label-text text-white">Above</span> 
+                 </label>
+       
+               </div>
+       
+                 
+                 <div class="w-full pt-5">
+                   <input type="range" min="0" max="50" step="0.5" bind:value={valueDebtEquityRatio} class="range range-secondary" />
+       
+                 </div>
+       
+               {/if}
+
               <!--Start Rule-->
               {#if ruleName === 'payoutRatio'}
               
diff --git a/src/routes/stocks/[tickerID]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts
index 9b361fd2..aad524b9 100644
--- a/src/routes/stocks/[tickerID]/+layout.server.ts
+++ b/src/routes/stocks/[tickerID]/+layout.server.ts
@@ -41,7 +41,7 @@ const fetchCommunitySentiment = async (pb, ticker, cookies) => {
 
   return {
     alreadyVoted: cookieVote || null,
-    sentimentData: output[0] || {}
+    sentimentData: output?.at(0) || {}
   };
 };
 
@@ -51,7 +51,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
 
   const endpoints = [
     '/similar-stocks', '/stockdeck', '/analyst-summary-rating', '/stock-quote',
-    '/bull-bear-say', '/wiim', '/top-etf-ticker-holder', '/one-day-price'
+    '/bull-bear-say','/wiim', '/top-etf-ticker-holder', '/one-day-price','/next-earnings'
   ];
 
   const promises = [
@@ -63,7 +63,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
 
   const [
     getSimilarStock, getStockDeck, getAnalystRating, getStockQuote,
-    getBullBearSay, getWhyPriceMoved, getTopETFHolder, getOneDayPrice,
+    getBullBearSay, getWhyPriceMoved, getTopETFHolder, getOneDayPrice,  getNextEarnings,
     getUserWatchlist, getCommunitySentiment
   ] = await Promise.all(promises);
 
@@ -78,8 +78,9 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     getWhyPriceMoved,
     getTopETFHolder,
     getOneDayPrice,
+    getNextEarnings,
     getUserWatchlist,
     getCommunitySentiment,
-    companyName: cleanString(getStockDeck?.[0]?.companyName),
+    companyName: cleanString(getStockDeck?.at(0)?.companyName),
   };
 };
\ No newline at end of file
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 3f3bd8cc..66d9bdcc 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1,51 +1,23 @@
 <script lang="ts">
-  import { AreaSeries, Chart, PriceLine, CandlestickSeries } from "svelte-lightweight-charts";
 
-  import { TrackingModeExitMode } from "lightweight-charts";
-  import {
-    getCache,
-    setCache,
-    corporateLobbyingComponent,
-    taRatingComponent,
-    swapComponent,
-    governmentContractComponent,
-    optionsNetFlowComponent,
-    borrowedShareComponent,
-    clinicalTrialComponent,
-    optionComponent,
-    failToDeliverComponent,
-    marketMakerComponent,
-    screenWidth,
-    displayCompanyName,
-    numberOfUnreadNotification,
-    globalForm,
-    varComponent,
-    shareStatisticsComponent,
-    enterpriseComponent,
-    darkPoolComponent,
-    retailVolumeComponent,
-    shareholderComponent,
-    isCrosshairMoveActive,
-    realtimePrice,
-    priceIncrease,
-    currentPortfolioPrice,
-    stockTicker,
-    isOpen,
-    isBeforeMarketOpen,
-    isWeekend,
-  } from "$lib/store";
-  import { onDestroy, onMount } from "svelte";
-  import BullBearSay from "$lib/components/BullBearSay.svelte";
-  import CommunitySentiment from "$lib/components/CommunitySentiment.svelte";
-  import Lazy from "$lib/components/Lazy.svelte";
-
-  export let data;
-  export let form;
-
-  let displayChartType = "line";
-
-  let prePostData = {};
-  let communitySentiment = {};
+  import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
+  
+  import { TrackingModeExitMode } from 'lightweight-charts';
+  import {getCache, setCache, corporateLobbyingComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, borrowedShareComponent, clinicalTrialComponent, optionComponent, failToDeliverComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent,  revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
+  import { onDestroy, onMount } from 'svelte';
+  import BullBearSay from '$lib/components/BullBearSay.svelte';
+  import NextEarnings from '$lib/components/NextEarnings.svelte';
+  import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
+  import Lazy from '$lib/components/Lazy.svelte';
+    
+  
+    export let data;
+    export let form;
+  
+    let displayChartType = 'line';
+  
+    let prePostData = {};
+    let communitySentiment = {};
 
   $: previousClose = data?.getStockQuote?.previousClose;
 
@@ -630,369 +602,560 @@
               </div>
             </div>
 
-            <div class="ml-auto">
-              {#if Object?.keys(prePostData)?.length !== 0 && prePostData?.price !== 0}
-                <div class="flex flex-col justify-end items-end">
-                  <div class="flex flex-row items-center justify-end">
-                    <span class="text-white text-lg sm:text-2xl font-bold">
-                      ${prePostData?.price}
-                    </span>
-                    {#if prePostData?.changesPercentage >= 0}
-                      <span class="ml-1 items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span>
-                    {:else if prePostData?.changesPercentage < 0}
-                      <span class="ml-1 items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span>
-                    {/if}
-                  </div>
-                  {#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
-                    <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
-                      <span>Pre-market:</span>
-                      <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
-                        ><path
-                          fill="#EA9703"
-                          d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"
-                        /></svg
-                      >
-                    </div>
-                  {:else}
-                    <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
-                      <span>Post-market:</span>
-                      <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
-                        ><path
-                          fill="#70A1EF"
-                          d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
-                        /></svg
-                      >
-                    </div>
-                  {/if}
-                </div>
-              {/if}
-            </div>
-          </div>
-          <!-----End-Header-CandleChart-Indicators------>
-          <!--Start Time Interval-->
-          <div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4">
-            <div class="flex flex-col items-center mr-4">
-              <button on:click={() => changeData("1D")} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}"> 1D </button>
-              <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
-            </div>
-            <div class="flex flex-col items-center mr-4">
-              <button on:click={() => changeData("1W")} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}"> 1W </button>
-              <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-            </div>
-            <div class="flex flex-col items-center mr-4">
-              <button on:click={() => changeData("1M")} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}"> 1M </button>
-              <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-            </div>
-            <div class="flex flex-col items-center mr-4">
-              <button on:click={() => changeData("6M")} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}"> 6M </button>
-              <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-            </div>
-            <div class="flex flex-col items-center mr-4">
-              <button on:click={() => changeData("1Y")} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}"> 1Y </button>
-              <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-            </div>
+                                      <div class="ml-auto">
+                                      {#if Object?.keys(prePostData)?.length !== 0 && prePostData?.price !== 0}
+                                      <div class="flex flex-col justify-end items-end">
+                                        <div class="flex flex-row items-center justify-end">
+                                        <span class="text-white text-lg sm:text-2xl font-bold">
+                                          ${prePostData?.price}
+                                        </span>
+                                        {#if prePostData?.changesPercentage >= 0}
+                                        <span class="ml-1 items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span> 
+                                        {:else if prePostData?.changesPercentage < 0}
+                                        <span class="ml-1 items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span> 
+                                        {/if}
+                                        </div>
+                                        {#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
+                                        <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
+                                          <span>Pre-market:</span>
+                                            <svg class="ml-1 w-4 h-4 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#EA9703" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
+                                        </div>
+                                        {:else}
+                                        <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
+                                          <span>Post-market:</span>
+                                            <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
+                                        </div>
+                                        {/if}
 
-            <div 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>
+                                      {/if}
+                                      
+                                    </div>
+                                
+                                </div>
+                                <!-----End-Header-CandleChart-Indicators------>
+                                   <!--Start Time Interval-->
+                                   <div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4">
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1D
+                                    </button>
+                                    <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
+                                    </div>
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1W
+                                    </button>
+                                    <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                    </div>
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1M
+                                    </button>
+                                    <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                    </div>
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        6M
+                                    </button>
+                                    <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                    </div>
+                                  <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1Y
+                                    </button>
+                                    <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                  </div>
+                                  
+                                  <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        MAX
+                                    </button>
+                                    <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                  
+                                  </div>
 
-            <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
-              {#if displayChartType === "line"}
-                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z" /></svg>
-              {:else}
-                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5" /></svg>
-              {/if}
-            </label>
-          </div>
-          <!--End Time Interval-->
 
-          <!--End Ticker Section-->
-          <!-- Start Graph -->
+  
+                                  <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
+                                    {#if displayChartType === 'line'}
+                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
+                                      {:else}
+                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5"/></svg>
+                                      {/if}
+                                </label>
+                                  
+                                </div>
+                                  <!--End Time Interval-->
+                                
+                                  <!--End Ticker Section-->
+                                <!-- Start Graph -->
+  
+                                {#if output !== null}
+                                  <div class ="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
+                                    {#if displayData === '1D' && oneDayPrice?.length === 0}
+                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
+                                      No data available
+                                    </h2>
+                                    {:else if displayData === '1W' && oneWeekPrice?.length === 0}
+                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
+                                      No data available
+                                    </h2>
+                                    {:else if displayData === '1M' && oneMonthPrice?.length === 0}
+                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
+                                      No data available
+                                    </h2>
+                                    {:else if displayData === '6M' && sixMonthPrice?.length === 0}
+                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
+                                      No data available
+                                    </h2>
+                                    {:else if displayData === '1Y' && oneYearPrice?.length === 0}
+                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
+                                      No data available
+                                    </h2>
+                                    {:else if displayData === 'MAX' && threeYearPrice?.length === 0}
+                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
+                                      No data available
+                                    </h2>
+                                    {:else}
+  
+                                    <Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
+                                    
+                                    {#if displayData === '1D'}
+                                      {#if displayChartType === 'line'}
+                                      <AreaSeries 
+                                        data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
+                                        lineWidth={1.5}
+                                        priceScaleId="left"
+                                        lineColor={colorChange}
+                                        topColor={topColorChange}
+                                        bottomColor={bottomColorChange}
+                                        crosshairMarkerVisible={false}
+                                        ref={handleSeriesReference}
+                                        priceLineVisible= {false}
+                                        lastPriceAnimation={1}
+                                        >
+                                        <PriceLine
+                                          price={oneDayPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                      </AreaSeries>
+                                      {:else}
+                                      <CandlestickSeries
+                                          data={oneDayPrice}
+                                          crosshairMarkerVisible={false}
+                                          ref={handleSeriesReference}
+                                          priceLineVisible= {false}
+                                          >
+                                        <PriceLine
+                                          price={oneDayPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                    </CandlestickSeries>
+                                      {/if}
+                                      {:else if displayData === '1W'}
+                                      {#if displayChartType === 'line'}
+                                      <AreaSeries 
+                                        data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
+                                        lineWidth={1.5}
+                                        priceScaleId="left"
+                                        lineColor={colorChange}
+                                        topColor={topColorChange}
+                                        bottomColor={bottomColorChange}
+                                        crosshairMarkerVisible={false}
+                                        ref={handleSeriesReference}
+                                        priceLineVisible= {false}
+                                        lastPriceAnimation={1}
+                                        >
+                                        <PriceLine
+                                          price={oneWeekPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                      </AreaSeries>
+                                      {:else}
+                                      <CandlestickSeries
+                                          data={oneWeekPrice}
+                                          crosshairMarkerVisible={false}
+                                          ref={handleSeriesReference}
+                                          priceLineVisible= {false}
+                                          >
+                                        <PriceLine
+                                          price={oneWeekPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                    </CandlestickSeries>
+                                      {/if}
+  
+                                      {:else if displayData === '1M'}
+                                      {#if displayChartType === 'line'}
+                                      <AreaSeries 
+                                        data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
+                                        lineWidth={1.5}
+                                        priceScaleId="left"
+                                        lineColor={colorChange}
+                                        topColor={topColorChange}
+                                        bottomColor={bottomColorChange}
+                                        crosshairMarkerVisible={false}
+                                        ref={handleSeriesReference}
+                                        priceLineVisible= {false}
+                                        lastPriceAnimation={1}
+                                        >
+                                        <PriceLine
+                                          price={oneMonthPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                      </AreaSeries>
+                                      {:else}
+                                      <CandlestickSeries
+                                          data={oneMonthPrice}
+                                          crosshairMarkerVisible={false}
+                                          ref={handleSeriesReference}
+                                          priceLineVisible= {false}
+                                          >
+                                        <PriceLine
+                                          price={oneMonthPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                    </CandlestickSeries>
+                                      {/if}
+  
+  
+                                      {:else if displayData === '6M'}
+                                      {#if displayChartType === 'line'}
+                                      <AreaSeries 
+                                      data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
+                                        lineWidth={1.5}
+                                        priceScaleId="left"
+                                        lineColor={colorChange}
+                                        topColor={topColorChange}
+                                        bottomColor={bottomColorChange}
+                                        crosshairMarkerVisible={false}
+                                        ref={handleSeriesReference}
+                                        priceLineVisible= {false}
+                                        lastPriceAnimation={1}
+                                        >
+                                        <PriceLine
+                                          price={sixMonthPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                      </AreaSeries>
+                                      {:else}
+                                      <CandlestickSeries
+                                          data={sixMonthPrice}
+                                          crosshairMarkerVisible={false}
+                                          ref={handleSeriesReference}
+                                          priceLineVisible= {false}
+                                          >
+                                        <PriceLine
+                                          price={sixMonthPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                    </CandlestickSeries>
+                                      {/if}
+  
+  
+  
+                                      {:else if displayData === '1Y'}
+                                      {#if displayChartType === 'line'}
+                                      <AreaSeries 
+                                      data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
+                                        lineWidth={1.5}
+                                        priceScaleId="left"
+                                        lineColor={colorChange}
+                                        topColor={topColorChange}
+                                        bottomColor={bottomColorChange}
+                                        crosshairMarkerVisible={false}
+                                        ref={handleSeriesReference}
+                                        priceLineVisible= {false}
+                                        lastPriceAnimation={1}
+                                        >
+                                        <PriceLine
+                                          price={oneYearPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                      </AreaSeries>
+                                      {:else}
+                                      <CandlestickSeries
+                                          data={oneYearPrice}
+                                          crosshairMarkerVisible={false}
+                                          ref={handleSeriesReference}
+                                          priceLineVisible= {false}
+                                          >
+                                        <PriceLine
+                                          price={oneYearPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                    </CandlestickSeries>
+                                      {/if}
+  
+  
+  
+                                      {:else if displayData === 'MAX'}
+                                      {#if displayChartType === 'line'}
+                                      <AreaSeries 
+                                        data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
+                                        lineWidth={1.5}
+                                        priceScaleId="left"
+                                        lineColor={colorChange}
+                                        topColor={topColorChange}
+                                        bottomColor={bottomColorChange}
+                                        crosshairMarkerVisible={false}
+                                        ref={handleSeriesReference}
+                                        priceLineVisible= {false}
+                                        lastPriceAnimation={1}
+                                        >
+                                        <PriceLine
+                                          price={threeYearPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                      </AreaSeries>
+                                      {:else}
+                                      <CandlestickSeries
+                                          data={threeYearPrice}
+                                          crosshairMarkerVisible={false}
+                                          ref={handleSeriesReference}
+                                          priceLineVisible= {false}
+                                          >
+                                        <PriceLine
+                                          price={threeYearPrice?.at(0)?.close}
+                                          lineWidth = {1}
+                                          color="#fff"
+                                        />
+                                    </CandlestickSeries>
+                                      {/if}
+  
+  
+                                    {/if}
+                                    </Chart>
+                                    {/if}
+  
+                                  </div>
+                                  {:else}
+                                  <!-- else output not loaded yet-->
+                                    <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
+                                        <div class="relative">
+                                          <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                                            <span class="loading loading-spinner loading-md"></span>
+                                          </label>
+                                      </div>  
+                                    </div>
+                                  {/if}
+                                  
+                                  <!--End Graph-->
+  
+                                    <!--Start Time Interval-->
+                                    <div class="pl-1 w-screen sm:hidden flex flex-row items-center">
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1D
+                                    </button>
+                                    <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
+                                    </div>
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1W
+                                    </button>
+                                    <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                    </div>
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1M
+                                    </button>
+                                    <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                    </div>
+                                    <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        6M
+                                    </button>
+                                    <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                    </div>
+                                  <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        1Y
+                                    </button>
+                                    <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                  </div>
+                                  
+                                  <div class="flex flex-col items-center mr-4">
+                                    <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
+                                        MAX
+                                    </button>
+                                    <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+                                  </div>
 
-          {#if output !== null}
-            <div class="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
-              {#if displayData === "1D" && oneDayPrice?.length === 0}
-                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
-              {:else if displayData === "1W" && oneWeekPrice?.length === 0}
-                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
-              {:else if displayData === "1M" && oneMonthPrice?.length === 0}
-                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
-              {:else if displayData === "6M" && sixMonthPrice?.length === 0}
-                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
-              {:else if displayData === "1Y" && oneYearPrice?.length === 0}
-                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
-              {:else if displayData === "MAX" && threeYearPrice?.length === 0}
-                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
-              {:else}
-                <Chart {...options} autoSize={true} ref={(ref) => (chart = ref)} on:crosshairMove={handleCrosshairMove}>
-                  {#if displayData === "1D"}
-                    {#if displayChartType === "line"}
-                      <AreaSeries
-                        data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
-                        lineWidth={1.5}
-                        priceScaleId="left"
-                        lineColor={colorChange}
-                        topColor={topColorChange}
-                        bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
-                        ref={handleSeriesReference}
-                        priceLineVisible={false}
-                        lastPriceAnimation={1}
-                      >
-                        <PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </AreaSeries>
-                    {:else}
-                      <CandlestickSeries data={oneDayPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
-                        <PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </CandlestickSeries>
-                    {/if}
-                  {:else if displayData === "1W"}
-                    {#if displayChartType === "line"}
-                      <AreaSeries
-                        data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
-                        lineWidth={1.5}
-                        priceScaleId="left"
-                        lineColor={colorChange}
-                        topColor={topColorChange}
-                        bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
-                        ref={handleSeriesReference}
-                        priceLineVisible={false}
-                        lastPriceAnimation={1}
-                      >
-                        <PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </AreaSeries>
-                    {:else}
-                      <CandlestickSeries data={oneWeekPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
-                        <PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </CandlestickSeries>
-                    {/if}
-                  {:else if displayData === "1M"}
-                    {#if displayChartType === "line"}
-                      <AreaSeries
-                        data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                        lineWidth={1.5}
-                        priceScaleId="left"
-                        lineColor={colorChange}
-                        topColor={topColorChange}
-                        bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
-                        ref={handleSeriesReference}
-                        priceLineVisible={false}
-                        lastPriceAnimation={1}
-                      >
-                        <PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </AreaSeries>
-                    {:else}
-                      <CandlestickSeries data={oneMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
-                        <PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </CandlestickSeries>
-                    {/if}
-                  {:else if displayData === "6M"}
-                    {#if displayChartType === "line"}
-                      <AreaSeries
-                        data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                        lineWidth={1.5}
-                        priceScaleId="left"
-                        lineColor={colorChange}
-                        topColor={topColorChange}
-                        bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
-                        ref={handleSeriesReference}
-                        priceLineVisible={false}
-                        lastPriceAnimation={1}
-                      >
-                        <PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </AreaSeries>
-                    {:else}
-                      <CandlestickSeries data={sixMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
-                        <PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </CandlestickSeries>
-                    {/if}
-                  {:else if displayData === "1Y"}
-                    {#if displayChartType === "line"}
-                      <AreaSeries
-                        data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                        lineWidth={1.5}
-                        priceScaleId="left"
-                        lineColor={colorChange}
-                        topColor={topColorChange}
-                        bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
-                        ref={handleSeriesReference}
-                        priceLineVisible={false}
-                        lastPriceAnimation={1}
-                      >
-                        <PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </AreaSeries>
-                    {:else}
-                      <CandlestickSeries data={oneYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
-                        <PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </CandlestickSeries>
-                    {/if}
-                  {:else if displayData === "MAX"}
-                    {#if displayChartType === "line"}
-                      <AreaSeries
-                        data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                        lineWidth={1.5}
-                        priceScaleId="left"
-                        lineColor={colorChange}
-                        topColor={topColorChange}
-                        bottomColor={bottomColorChange}
-                        crosshairMarkerVisible={false}
-                        ref={handleSeriesReference}
-                        priceLineVisible={false}
-                        lastPriceAnimation={1}
-                      >
-                        <PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </AreaSeries>
-                    {:else}
-                      <CandlestickSeries data={threeYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
-                        <PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
-                      </CandlestickSeries>
-                    {/if}
-                  {/if}
-                </Chart>
-              {/if}
-            </div>
-          {:else}
-            <!-- else output not loaded yet-->
-            <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
-              <div class="relative">
-                <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
-                </label>
-              </div>
-            </div>
-          {/if}
+                                    
+                                    </div>
+                                    <!--End Time Interval-->
 
-          <!--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="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+                                      <CommunitySentiment communitySentiment={communitySentiment}/>
+                                  </div>
 
-            <div class="flex flex-col items-center mr-4">
-              <button on:click={() => changeData("MAX")} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}"> MAX </button>
-              <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-            </div>
-          </div>
-          <!--End Time Interval-->
 
-          <div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-            <CommunitySentiment {communitySentiment} />
-          </div>
+                                {#if $screenWidth <= 1022} <!--BUG: Dont remove since when changing ETF symbol display freezes-->
+                               
+                                <div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
+                                  <Lazy>
+                                    <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+                                      Key Information
+                                    </h3>
+                                    {#await import('$lib/components/StockKeyInformation.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp}
+                                        data={data} />
+                                    {/await}
+                                  </Lazy>
 
-          {#if $screenWidth <= 1022}
-            <!--BUG: Dont remove since when changing ETF symbol display freezes-->
+                                  </div>
+                                  {/if}
 
-            <div class="w-full mt-10 m-auto sm:p-6 lg:hidden">
-              <Lazy>
-                <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">Key Information</h3>
-                {#await import("$lib/components/StockKeyInformation.svelte") then { default: Comp }}
-                  <svelte:component this={Comp} {data} />
-                {/await}
-              </Lazy>
-            </div>
-          {/if}
+                               
+                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getNextEarnings || {})?.length !== 0 ? '' : 'hidden'}">
+                                    <NextEarnings data={data}/>
+                                  </div>
 
-          <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
-            <BullBearSay {data} />
-          </div>
+                                <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
+                                  <BullBearSay data={data}/>
+                                </div>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0 ? '' : 'hidden'}">
-              {#await import("$lib/components/WIIM.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0  ? '' : 'hidden'}">
+                                  {#await import('$lib/components/WIIM.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/ClinicalTrial.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
 
-          <Lazy>
-            <div class="w-full 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:pl-6 sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/AnalystInsight.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/GovernmentContract.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/ClinicalTrial.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/CorporateLobbying.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/Swap.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
+                                
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/Enterprise.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/FundamentalAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/OptionsData.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
 
-          <!--
+                                <Lazy>
+                                  <div class="w-full 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 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/AnalystEstimate.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data}/>
+                                  {/await}
+                                  </div>
+                                </Lazy>
+
+                                
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/GovernmentContract.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
+
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/CorporateLobbying.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
+                                  </div>
+                                </Lazy>
+
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/Swap.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
+                                  </div>
+                                </Lazy>
+
+                                  <Lazy>
+                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/Enterprise.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
+                                  </div>
+                                  </Lazy>
+
+                                  <Lazy>
+                                    <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
+                                  </div>
+                                  </Lazy>
+
+                                  <Lazy>
+                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
+                                      {#await import('$lib/components/OptionsNetFlow.svelte') then {default: Comp}}
+                                        <svelte:component this={Comp} data={data} />
+                                      {/await}
+                                    </div>
+                                  </Lazy>
+                                
+                                  <!--
                                   <Lazy>
                                     <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$impliedVolatilityComponent ? 'hidden' : ''}">
                                       {#await import('$lib/components/ImpliedVolatility.svelte') then {default: Comp}}
@@ -1001,74 +1164,95 @@
                                     </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>
+                                 <!--Start RevenueSegmentation-->
+                                  <Lazy>
+                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} apiURL={data?.apiURL} apiKey={data?.apiKey} userTier={data?.user?.tier}/>
+                                    {/await}
+                                    </div>
+                                    </Lazy>
+                               <!--End RevenueSegmentation-->
+                              
+                              <Lazy>
+                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/FailToDeliver.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                              </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/BorrowedShare.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                              <Lazy>
+                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/BorrowedShare.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                              </Lazy>
+                              
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/MarketMaker.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                              <Lazy>
+                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/MarketMaker.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                              </Lazy>
+                              
+                              
+                               <Lazy>
+                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent ? 'hidden' : ''}">
+                                {#await import('$lib/components/DarkPool.svelte') then {default: Comp}}
+                                  <svelte:component this={Comp} data={data} />
+                                {/await}
+                              </div>
+                              </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/DarkPool.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/RetailVolume.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
+                               <Lazy>
+                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
+                                {#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
+                                  <svelte:component this={Comp} data={data} />
+                                {/await}
+                              </div>
+                              </Lazy>
 
-          <Lazy>
-            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/ShareStatistics.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
 
-          <!--Start Shareholders-->
-          <Lazy>
-            <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
-              {#await import("$lib/components/ShareHolders.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-          <!--End Shareholders-->
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/ShareStatistics.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data}/>
+                                  {/await}
+                                </div>
+                                </Lazy>
 
-          <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>
+                                  
+                                   <!--Start Shareholders-->
+                                   <Lazy>
+                                    <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data}/>
+                                    {/await}
+                                    </div>
+                                    </Lazy>
+                                   <!--End Shareholders-->
 
-          <!--
+  
+                                 
+                              
+                                  <Lazy>
+                                    <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
+                                      {#await import('$lib/components/TARating.svelte') then {default: Comp}}
+                                        <svelte:component this={Comp} data={data}/>
+                                      {/await}
+                                    </div>
+                                  </Lazy>
+
+  
+                  
+                                  <!--
                                   <Lazy>
                                   <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$dcfComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/DCF.svelte') then {default: Comp}}
@@ -1085,22 +1269,36 @@
                                   </div>
                                   -->
 
-          <Lazy>
-            <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
-              {#await import("$lib/components/StockSplits.svelte") then { default: Comp }}
-                <svelte:component this={Comp} stockDeck={data?.getStockDeck} />
-              {/await}
-            </div>
-          </Lazy>
-        </div>
-      </div>
+                                  <Lazy>
+                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
+                                      {#await import('$lib/components/StockSplits.svelte') then {default: Comp}}
+                                        <svelte:component this={Comp} stockDeck={data?.getStockDeck}/>
+                                      {/await}
+                                  </div>
+                                </Lazy>
+  
+
+                              
+  
+  
+                      
+  
+                            </div>
+          </div>
     </div>
-  </div>
-</section>
-
-<!--End-Indicator-Modal-->
-
-<style lang="scss">
+  </section>
+  
+  
+  
+  
+  
+  
+  <!--End-Indicator-Modal-->
+  
+  
+  <style lang='scss'>
+     
+  
   canvas {
     width: 100%;
     height: 100%;
diff --git a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
index 8bf61d9c..5dad06a8 100644
--- a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
@@ -609,22 +609,26 @@ $: {
                                                       </td>
           
                                                       <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                                          {#if index+1-tableList?.length === 0}
-                                                          -
-                                                          {:else}
-                                                          {#if (item?.value- tableList[index+1]?.value) > 0}
-                                                          <span class="text-[#10DB06]">
-                                                            +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                          </span>
-                                                          {:else if (item?.value - tableList[index+1]?.value ) < 0}
-                                                          <span class="text-[#FF2F1F]">
-                                                            -{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                          </span>
-                                                          {:else}
-                                                          -
-                                                          {/if}
-                                                          {/if}
-                                                      </td>
+                                                        {#if index + 1 - tableList?.length === 0}
+                                                            -
+                                                        {:else}
+                                                            {#if (item?.value === 0 && tableList[index+1]?.value < 0)}
+                                                                <span class="text-[#FF2F1F]">-100.00%</span>
+                                                            {:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
+                                                                <span class="text-[#10DB06]">100.00%</span>
+                                                            {:else if ((item?.value - tableList[index+1]?.value) > 0)}
+                                                                <span class="text-[#10DB06]">
+                                                                    {(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                                </span>
+                                                            {:else if ((item?.value - tableList[index+1]?.value) < 0)}
+                                                                <span class="text-[#FF2F1F]">
+                                                                    -{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                                </span>
+                                                            {:else}
+                                                                -
+                                                            {/if}
+                                                        {/if}
+                                                    </td>
           
                                                   </tr>
                                                   {/each}
diff --git a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
index 5f7e9255..70141b86 100644
--- a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
@@ -565,22 +565,26 @@ $: {
                                           </td>
 
                                           <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                              {#if index+1-tableList?.length === 0}
-                                              -
-                                              {:else}
-                                              {#if (item?.value- tableList[index+1]?.value) > 0}
-                                              <span class="text-[#10DB06]">
-                                                +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                              </span>
-                                              {:else if (item?.value - tableList[index+1]?.value ) < 0}
-                                              <span class="text-[#FF2F1F]">
-                                                -{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                              </span>
-                                              {:else}
-                                              -
-                                              {/if}
-                                              {/if}
-                                          </td>
+                                            {#if index + 1 - tableList?.length === 0}
+                                                -
+                                            {:else}
+                                                {#if (item?.value === 0 && tableList[index+1]?.value < 0)}
+                                                    <span class="text-[#FF2F1F]">-100.00%</span>
+                                                {:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
+                                                    <span class="text-[#10DB06]">100.00%</span>
+                                                {:else if ((item?.value - tableList[index+1]?.value) > 0)}
+                                                    <span class="text-[#10DB06]">
+                                                        {(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                    </span>
+                                                {:else if ((item?.value - tableList[index+1]?.value) < 0)}
+                                                    <span class="text-[#FF2F1F]">
+                                                        -{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                    </span>
+                                                {:else}
+                                                    -
+                                                {/if}
+                                            {/if}
+                                        </td>
 
                                       </tr>
                                       {/each}
diff --git a/src/routes/stocks/[tickerID]/stats/income/+page.svelte b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
index d1e20197..c574c965 100644
--- a/src/routes/stocks/[tickerID]/stats/income/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
@@ -519,41 +519,46 @@ $: {
                                   </thead>
                                   <tbody>
                                     {#each tableList as item, index}
-                                        <!-- row -->
-                                        <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
+                                    <!-- row -->
+                                    <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
+                                    
+                                        <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+                                        {item?.date}
+                                        </td>
+
+                                        <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
+                                        {abbreviateNumber(item?.value)}
+                                        </td>
+
+                                        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                            {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
+                                        </td>
+
+                                        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                            {#if index + 1 - tableList?.length === 0}
+                                                -
+                                            {:else}
+                                                {#if (item?.value === 0 && tableList[index+1]?.value < 0)}
+                                                    <span class="text-[#FF2F1F]">-100.00%</span>
+                                                {:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
+                                                    <span class="text-[#10DB06]">100.00%</span>
+                                                {:else if ((item?.value - tableList[index+1]?.value) > 0)}
+                                                    <span class="text-[#10DB06]">
+                                                        {(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                    </span>
+                                                {:else if ((item?.value - tableList[index+1]?.value) < 0)}
+                                                    <span class="text-[#FF2F1F]">
+                                                        -{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                    </span>
+                                                {:else}
+                                                    -
+                                                {/if}
+                                            {/if}
+                                        </td>
                                         
-                                            <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                                            {item?.date}
-                                            </td>
 
-                                            <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
-                                            {abbreviateNumber(item?.value)}
-                                            </td>
-
-                                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                                {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
-                                            </td>
-
-                                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                                {#if index+1-tableList?.length === 0}
-                                                -
-                                                {:else}
-                                                {#if (item?.value- tableList[index+1]?.value) > 0}
-                                                <span class="text-[#10DB06]">
-                                                  +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                </span>
-                                                {:else if (item?.value - tableList[index+1]?.value ) < 0}
-                                                <span class="text-[#FF2F1F]">
-                                                  -{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                </span>
-                                                {:else}
-                                                -
-                                                {/if}
-                                                {/if}
-                                            </td>
-
-                                        </tr>
-                                        {/each}
+                                    </tr>
+                                    {/each}
 
                                   </tbody>
                                 </table>
diff --git a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
index 40411715..61407136 100644
--- a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
@@ -503,22 +503,26 @@ $: {
                                                   </td>
       
                                                   <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                                      {#if index+1-tableList?.length === 0}
-                                                      -
-                                                      {:else}
-                                                      {#if (item?.value- tableList[index+1]?.value) > 0}
-                                                      <span class="text-[#10DB06]">
-                                                        +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                      </span>
-                                                      {:else if (item?.value - tableList[index+1]?.value ) < 0}
-                                                      <span class="text-[#FF2F1F]">
-                                                        -{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                      </span>
-                                                      {:else}
-                                                      -
-                                                      {/if}
-                                                      {/if}
-                                                  </td>
+                                                    {#if index + 1 - tableList?.length === 0}
+                                                        -
+                                                    {:else}
+                                                        {#if (item?.value === 0 && tableList[index+1]?.value < 0)}
+                                                            <span class="text-[#FF2F1F]">-100.00%</span>
+                                                        {:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
+                                                            <span class="text-[#10DB06]">100.00%</span>
+                                                        {:else if ((item?.value - tableList[index+1]?.value) > 0)}
+                                                            <span class="text-[#10DB06]">
+                                                                {(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                            </span>
+                                                        {:else if ((item?.value - tableList[index+1]?.value) < 0)}
+                                                            <span class="text-[#FF2F1F]">
+                                                                -{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
+                                                            </span>
+                                                        {:else}
+                                                            -
+                                                        {/if}
+                                                    {/if}
+                                                </td>
       
                                               </tr>
                                               {/each}
diff --git a/src/routes/watchlist/+page.svelte b/src/routes/watchlist/+page.svelte
index 0ccec118..672981e5 100644
--- a/src/routes/watchlist/+page.svelte
+++ b/src/routes/watchlist/+page.svelte
@@ -9,6 +9,8 @@ import Input from '$lib/components/Input.svelte';
 import WatchListCard from '$lib/components/WatchListCard.svelte';
 import {screenWidth, switchWatchList } from '$lib/store';
 import MiniPlot from '$lib/components/MiniPlot.svelte';
+import { goto } from '$app/navigation';
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
 let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
@@ -389,11 +391,26 @@ onDestroy( () => {
         
     
     
-<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
+<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
+  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+    <ul>
+      <li><a href="/" class="text-gray-300">Home</a></li>
+      <li class="text-gray-300">Watchlist</li>
+    </ul>
+  </div>
+          
+  <div class="w-full overflow-hidden m-auto mt-5">
     
-     
-  <div  class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+        <div class="relative flex justify-center items-start overflow-hidden w-full">
+
+
+            <main class="w-full lg:w-3/4 lg:pr-5">
+
+
+              <div class="w-full  m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
       <div>
@@ -441,7 +458,7 @@ onDestroy( () => {
     </div>
 
     <div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0">
-      <div class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 ">
+      <div class="w-full grid grid-cols-2 md:grid-cols-3 gap-y-3 gap-x-3 ">
       <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
       <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
       <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
@@ -534,7 +551,68 @@ onDestroy( () => {
 
     {/if}
     
-</section>
+
+  </main>
+
+
+  <aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+  
+    {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+    <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+        <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <div class="w-full flex justify-between items-center p-3 mt-3">
+            <h2 class="text-start text-xl font-semibold text-white ml-3">
+            Pro Subscription
+            </h2>
+            <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+            </div>
+            <span class="text-white p-3 ml-3 mr-3">
+                Upgrade now for unlimited access to all data and tools.
+            </span>
+        </div>
+    </div>
+    {/if}
+  
+    <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+        <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <div class="w-full flex justify-between items-center p-3 mt-3">
+            <h2 class="text-start text-xl font-semibold text-white ml-3">
+            Wallstreet Analyst
+            </h2>
+            <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+            </div>
+            <span class="text-white p-3 ml-3 mr-3">
+                Get the latest top Wall Street analyst ratings.
+            </span>
+        </div>
+    </div>
+  
+    <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+        <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <div class="w-full flex justify-between items-center p-3 mt-3">
+            <h2 class="text-start text-xl font-semibold text-white ml-3">
+            Congress Trading
+            </h2>
+            <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+            </div>
+            <span class="text-white p-3 ml-3 mr-3">
+                Get the latest top Congress trading insights.
+            </span>
+        </div>
+    </div>
+  
+  </aside>
+  
+  </div>
+  </div>
+  
+  
+  </div>
+  
+  
+  
+  </section>
+  
     
     
 
diff --git a/static/robots.txt b/static/robots.txt
index 2d1aa039..be5c9a31 100644
--- a/static/robots.txt
+++ b/static/robots.txt
@@ -1,3 +1,6 @@
-# https://www.robotstxt.org/robotstxt.html
+# Allow all web crawlers full access to all content
 User-agent: *
-Disallow: /
\ No newline at end of file
+Disallow:
+
+# Sitemap for better indexing
+Sitemap: https://stocknear.com/sitemap.xml