diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index 97721e78..40954fcc 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -453,12 +453,12 @@ $: {
 </script>
 
 <body class="bg-[#09090B] pb-40">    
-        <!-- Page wrapper -->
-        <div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40">
-            <main class="grow">
-                <section>
-                    <div class="w-full">
-                        <div class="sm:flex sm:justify-start w-full">
+  <!-- Page wrapper -->
+  <div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40">
+      <main class="grow">
+          <section>
+              <div class="w-full">
+                  <div class="sm:flex sm:justify-start w-full">
     
            <!--Start Mobile Navbar-->
            <div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden ">
@@ -543,17 +543,17 @@ $: {
           <!--End Mobile Navbar-->
          
       
-          <div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">      
+          <div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl m-auto px-3">      
                     
             <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                 <!-- Main content -->
-                <div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl">
+                <div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-5xl">
                     <div class="md:pr-6 lg:pr-10">
                                  
                 
                                     <!-----Start-Header-CandleChart-Indicators------>
       
-                                    <div class="m-auto pl-0 sm:pl-4 max-w-3xl overflow-hidden mb-5 md:mt-10">
+                                    <div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
       
                                       <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
 
@@ -702,7 +702,7 @@ $: {
                             </div>
                         </div>
 
-                        <aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
+                        <aside class="hidden xl:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
                             <div class="sm:pl-10">
                       
                               <CryptoProfileCard
diff --git a/src/routes/crypto/[tickerID]/+page.svelte b/src/routes/crypto/[tickerID]/+page.svelte
index 5f9df65b..93abe69f 100644
--- a/src/routes/crypto/[tickerID]/+page.svelte
+++ b/src/routes/crypto/[tickerID]/+page.svelte
@@ -681,7 +681,6 @@ afterUpdate(async () => {
     <!-- Other meta tags -->
     <meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
     <meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-    <!--<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
     <meta property="og:type" content="website"/>
     <!-- Add more Open Graph meta tags as needed -->
   
@@ -689,7 +688,6 @@ afterUpdate(async () => {
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
     <meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-    <!--<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
     <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
@@ -697,12 +695,12 @@ afterUpdate(async () => {
   
   <section class="bg-[#09090B] min-h-screen pb-40">
   
-              <div class="w-full max-w-4xl m-auto ">
+              <div class="w-full max-w-5xl m-auto ">
   
           
                     <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                         <!-- Main content -->
-                        <div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0">
+                        <div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
                           <div class="xl:pr-10">
   
       
@@ -798,7 +796,7 @@ afterUpdate(async () => {
 
 
   
-                                  <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
+                                  <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}
@@ -813,7 +811,7 @@ afterUpdate(async () => {
                                 <!-- Start Graph -->
   
                                 {#if output !== null}
-                                  <div class ="w-full sm:pl-7 ml-auto max-w-3xl mb-10">
+                                  <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
@@ -835,7 +833,7 @@ afterUpdate(async () => {
                                       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">
+                                    <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}
diff --git a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
index c301eca0..3e0bfccc 100644
--- a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
@@ -9,6 +9,7 @@
 	import { getPartyForPoliticians } from '$lib/utils';
   import { goto } from '$app/navigation';
 
+
   export let data;
 
   let rawData = data?.getSenateTrading;
@@ -65,7 +66,7 @@ const district = {
 
 function replaceMultipleStrings(inputString, replacements) {
   // Create a regular expression pattern by joining the keys of the replacements object with '|'
-  const pattern = new RegExp(Object.keys(replacements).join('|'), 'gi');
+  const pattern = new RegExp(Object?.keys(replacements)?.join('|'), 'gi');
 
   // Replace occurrences of the pattern with the corresponding values in the replacements object
   const resultString = inputString.replace(pattern, match => replacements[match]);
@@ -79,7 +80,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
       complete();
     } else {
       const nextIndex = senateTradingList?.length;
-      const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
+      const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
       senateTradingList = [...senateTradingList, ...newArticles];
       loaded();
     }
@@ -141,12 +142,13 @@ const typeCounts = rawData?.reduce((counts, item) => {
 }, {});
 
 partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"]/partyCounts["Republican"];
-buySellRatio = typeCounts['Bought']/typeCounts['Sold'];
+buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"]/typeCounts["Sold"];
 
 senateTradingList = rawData?.slice(0,20) ?? [];
 
 
 isLoaded = true;
+
 });
 </script>
 
@@ -164,7 +166,6 @@ isLoaded = true;
   <!-- Other meta tags -->
   <meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
   <meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
@@ -172,7 +173,6 @@ isLoaded = true;
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
   <meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -181,14 +181,14 @@ isLoaded = true;
 
     
           
-    <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
-        <div class="flex justify-center w-fit m-auto h-full overflow-hidden">
-            <div class="relative flex justify-center items-center overflow-hidden">
-                  <div class="sm:p-7 sm:w-full sm:max-w-3xl m-auto mt-5 sm:mt-0">
-                    <div class="mb-6">
-                        <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
-                            Congress Trading
-                        </h1>
+<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
+  <div class="h-full overflow-hidden">
+      <div class="relative flex justify-center items-center overflow-hidden">
+            <div class="sm:p-7 w-full mt-2 sm:mt-0">
+                  <div class="mb-6">
+                      <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
+                          Congress Trading
+                      </h1>
   
 
                         <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
@@ -210,7 +210,7 @@ isLoaded = true;
                       </h3>
                        <!--Start Widget-->
                        <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
-                        <div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
+                        <div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
         
                           <!--Start Buy/Sell-->  
                           <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
@@ -330,11 +330,14 @@ isLoaded = true;
                                 </td>
                             </tr>
                           {/each}
+
                           </tbody>
                         </table>
+
+                        
                     </div>
 
-                      <InfiniteLoading on:infinite={infiniteHandler} />
+                    <InfiniteLoading on:infinite={infiniteHandler} />
 
                       {:else}
                       <div class="relative w-full mt-10">
diff --git a/src/routes/crypto/[tickerID]/news/+page.svelte b/src/routes/crypto/[tickerID]/news/+page.svelte
index ea7c99ab..7fb7a00c 100644
--- a/src/routes/crypto/[tickerID]/news/+page.svelte
+++ b/src/routes/crypto/[tickerID]/news/+page.svelte
@@ -1,138 +1,135 @@
 <script lang='ts'>
-import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
-import { formatDate } from '$lib/utils';
-
-export let data;
-
-
-
-
-let rawNews = data?.getStockNews;
-let newsList = rawNews?.slice(0,20) ?? [];
-
-
-let videoId = null;
-
-function checkIfYoutubeVideo(link) {
-
-    const url = new URL(link);
-    if (url?.hostname === "www.youtube.com") {
-    const searchParams = url.searchParams;
-    searchParams.delete('t'); // Remove the "t" parameter
-    const videoIdMatch = url?.search?.match(/v=([^&]+)/);
-
-    if (videoIdMatch) {
-    return videoIdMatch[1];
-    }
-    } else {
-    return null;
-    }
-}
-
-function loadMoreData() {
-  const nextIndex = newsList?.length;
-  const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
-  newsList = [...newsList, ...newArticles];
-}
-
-
-
-
-</script>
-
-
-<svelte:head>
-
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear
-  </title>
-  <meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
+  import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
+  import { formatDate } from '$lib/utils';
   
-  <!-- Other meta tags -->
-  <meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
-  <meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
-  <meta property="og:type" content="website"/>
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
-  <meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
-  <!-- Add more Twitter meta tags as needed -->
-
-</svelte:head>
+  export let data;
   
-
-
-
-<section class="w-auto max-w-3xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
-    <div class="m-auto h-full overflow-hidden ">
-            <main class="">
-                <div class="sm:p-7 m-auto mt-2 sm:mt-0">
-                    <div class="mb-6">
-                        <h1 class="text-2xl sm:text-3xl text-white font-bold">
-                          News
-                        </h1>
-                      </div>
-
-                          {#if newsList.length !== 0}
-                          <div class="grid grid-cols-1 gap-2 pb-5">
-                          {#each newsList as item}
-                                <div class="flex flex-col bg-[#09090B] rounded-lg m-auto">
-                                    {#if videoId = checkIfYoutubeVideo(item.url)}
-                                        <iframe
-                                            class="w-full h-96 rounded-lg"
-                                            src={`https://www.youtube.com/embed/${videoId}`}
-                                            frameborder="0"
-                                            allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                                            allowfullscreen
-                                        ></iframe>
-                                    {:else}
-                                        <a href={item?.url} rel="noopener noreferrer" target="_blank">
-                                        <div class="flex-shrink-0 m-auto ">
-                                            <img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
-                                        </div>
-                                        </a>
-                                    {/if}
-                                    <div class="mb-1 w-full">
-                                        <h3 class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3">
-                                          {item?.site} · {formatDate(item?.publishedDate)} ago
-                                        </h3>
-                                        
-                                        <a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
-                                          {item?.title}
-                                        
-                                          <p class="text-white text-sm mt-2 font-normal">
-                                            {item?.text}
-                                          </p>
-                                        </a>
-                                    </div>
-                                </div>
-                          
-                                <hr class="border-blue-400 w-full m-auto mt-5 mb-5">
-                            {/each}
+  
+  
+  
+  let rawNews = data?.getStockNews;
+  let newsList = rawNews?.slice(0,20) ?? [];
+  
+  
+  let videoId = null;
+  
+  function checkIfYoutubeVideo(link) {
+  
+      const url = new URL(link);
+      if (url?.hostname === "www.youtube.com") {
+      const searchParams = url.searchParams;
+      searchParams.delete('t'); // Remove the "t" parameter
+      const videoIdMatch = url?.search?.match(/v=([^&]+)/);
+  
+      if (videoIdMatch) {
+      return videoIdMatch[1];
+      }
+      } else {
+      return null;
+      }
+  }
+  
+  function loadMoreData() {
+    const nextIndex = newsList?.length;
+    const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
+    newsList = [...newsList, ...newArticles];
+  }
+  
+  
+  
+  
+  </script>
+  
+  
+  <svelte:head>
+  
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>
+      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear
+    </title>
+    <meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
+    
+    <!-- Other meta tags -->
+    <meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
+    <meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
+    <meta property="og:type" content="website"/>
+    <!-- Add more Open Graph meta tags as needed -->
+  
+    <!-- Twitter specific meta tags -->
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
+    <meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
+    <!-- Add more Twitter meta tags as needed -->
+  
+  </svelte:head>
+    
+  
+  
+  
+  <section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
+      <div class="m-auto h-full overflow-hidden ">
+              <main class="">
+                  <div class="sm:p-7 m-auto mt-2 sm:mt-0">
+                      <div class="mb-6">
+                          <h1 class="text-2xl sm:text-3xl text-white font-bold">
+                            News
+                          </h1>
+                        </div>
+  
+                            {#if newsList?.length !== 0}
+                            <div class="grid grid-cols-1 gap-2 pb-5">
+                            {#each newsList as item}
+                                  <div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
+                                      {#if videoId = checkIfYoutubeVideo(item.url)}
+                                          <iframe
+                                              class="w-full h-96 rounded-lg border border-gray-800"
+                                              src={`https://www.youtube.com/embed/${videoId}`}
+                                              frameborder="0"
+                                              allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                              allowfullscreen
+                                          ></iframe>
+                                      {:else}
+                                          <a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
+                                          <div class="flex-shrink-0 m-auto ">
+                                              <img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
+                                          </div>
+                                          </a>
+                                      {/if}
+                                      <div class="mb-1 w-full">
+                                          <h3 class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3">
+                                            {item?.site} · {formatDate(item?.publishedDate)} ago
+                                          </h3>
+                                          
+                                          <a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
+                                            {item?.title}
+                                            <p class="text-white text-sm mt-2 font-normal">
+                                              {item?.text}
+                                            </p>
+                                          </a>
+                                      </div>
+                                  </div>
                             
-                          </div>
-                          {#if newsList?.length !== rawNews?.length}
-                          <label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-11/12 sm:w-full flex justify-center items-center py-3 h-full text-sm sm:text-lg text-center font-medium text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
-                            Load More News
-                          </label>
-                          {/if}
-
-
-                          {:else}
-                          <div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
-                            <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>      
-                            No news article published yet!
-                          </div>
-                          {/if}
-
-                    
-                </div>
-            </main>
-    </div>
-</section>
\ No newline at end of file
+                                  <hr class="border-blue-400 w-full m-auto mt-5 mb-5">
+                              {/each}
+                              
+                            </div>
+                            {#if newsList?.length !== rawNews?.length}
+                            <label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
+                              Load More News
+                            </label>
+                            {/if}
+  
+  
+                            {:else}
+                            <div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+                              <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>      
+                              No news article published yet!
+                            </div>
+                            {/if}
+  
+                      
+                  </div>
+              </main>
+      </div>
+  </section>
\ No newline at end of file
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index 53c754b1..f3ba85fa 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -873,7 +873,7 @@ async function initializePrice() {
   
   
     
-                                    <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#18181B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
+                                    <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}
diff --git a/src/routes/etf/[tickerID]/news/+page.svelte b/src/routes/etf/[tickerID]/news/+page.svelte
index 02e18e0f..a33a001c 100644
--- a/src/routes/etf/[tickerID]/news/+page.svelte
+++ b/src/routes/etf/[tickerID]/news/+page.svelte
@@ -1,5 +1,5 @@
 <script lang='ts'>
-  import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
+  import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
   import { formatDate } from '$lib/utils';
   
   export let data;
@@ -46,20 +46,20 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>
-      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking Stories · stocknear
+      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking Stories · stocknear
     </title>
-    <meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
+    <meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
     
     <!-- Other meta tags -->
-    <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
-    <meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
+    <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
+    <meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
     <meta property="og:type" content="website"/>
     <!-- Add more Open Graph meta tags as needed -->
   
     <!-- Twitter specific meta tags -->
     <meta name="twitter:card" content="summary_large_image"/>
-    <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
-    <meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
+    <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
+    <meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
     <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 1b20340f..efd2d5f9 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 
-import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
+import {numberOfUnreadNotification, displayCompanyName, screenWidth, etfTicker} from '$lib/store';
 import { Chart } from 'svelte-echarts'
 import { abbreviateNumber } from '$lib/utils';
 import InfoModal from '$lib/components/InfoModal.svelte';
@@ -108,8 +108,8 @@ use([BarChart, GridComponent, CanvasRenderer])
           },
           silent: true,
           grid: {
-              left: '10%',
-              right: '5%',
+              left: $screenWidth < 640 ? '5%' : '2%',
+              right: $screenWidth < 640 ? '5%' : '2%',
               bottom: '20%',
               containLabel: true
           },
@@ -392,7 +392,7 @@ use([BarChart, GridComponent, CanvasRenderer])
                               </div>
                           
                               
-                              <div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
+                              <div class="app w-full bg-[#09090B] rounded-xl">
                                   <Chart {init} options={options} class="chart" />
                               </div>
                               
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 5787a519..ab91f6e9 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -832,7 +832,7 @@ function changeChartType() {
 
 
   
-                                  <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
+                                  <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}
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index 2dbcb045..5be66d09 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -210,7 +210,7 @@ isLoaded = true;
                       </h3>
                        <!--Start Widget-->
                        <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
-                        <div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
+                        <div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
         
                           <!--Start Buy/Sell-->  
                           <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index aea7d05f..1bf1656b 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -1,681 +1,682 @@
 <script lang="ts">
 
-import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
-import { Chart } from 'svelte-echarts'
-import { abbreviateNumber } from '$lib/utils';
-import InfoModal from '$lib/components/InfoModal.svelte';
-import { onMount } from 'svelte'
-import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
-import { init, use } from 'echarts/core'
-import { BarChart } from 'echarts/charts'
-import { GridComponent } from 'echarts/components'
-import { CanvasRenderer } from 'echarts/renderers'
-use([BarChart, GridComponent, CanvasRenderer])
-
-export let data;
-
-const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
-let optionsPlotData = data?.getOptionsPlotData?.plot;
-let displayData = 'volume';
-let options;
-let rawData = data?.getOptionsFlowData
-let optionList = rawData?.slice(0,30);
-let flowSentiment = 'n/a';
-let callPercentage; 
-let putPercentage;
-let displayCallVolume;
-let displayPutVolume;
-let latestPutCallRatio;
-let displayOTMRatio;
-
-const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
-
-
-const totalVolume = data?.getOptionsPlotData?.totalVolume;
-
-const totalOpenInterest = data?.getOptionsPlotData?.totalOpenInterest;
-
-
-// Computing the put-call ratio for open interest
-const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
-
-const displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
-const displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
-
-const dateList = data?.getOptionsPlotData?.dateList;
-
-const callVolumeList = data?.getOptionsPlotData?.callVolumeList;
-const putVolumeList = data?.getOptionsPlotData?.putVolumeList;
-const callOpenInterestList = data?.getOptionsPlotData?.callOpenInterestList;
-const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
-
-
-
-
-function formatDate(dateStr) {
-  // Parse the input date string (YYYY-mm-dd)
-  var date = new Date(dateStr);
-
-  // Get month, day, and year
-  var month = date.getMonth() + 1; // Month starts from 0
-  var day = date.getDate();
-  var year = date.getFullYear();
-
-  // Extract the last two digits of the year
-  var shortYear = year.toString().slice(-2);
-
-  // Add leading zeros if necessary
-  month = (month < 10 ? "0" : "") + month;
-  day = (day < 10 ? "0" : "") + day;
-
-  var formattedDate = month + "/" + day + "/" + year;
-
-  return formattedDate;
-}
-
-function formatTime(timeString) {
-  // Split the time string into components
-  const [hours, minutes, seconds] = timeString.split(':').map(Number);
-
-  // Determine AM or PM
-  const period = hours >= 12 ? 'PM' : 'AM';
-
-  // Convert hours from 24-hour to 12-hour format
-  const formattedHours = hours % 12 || 12; // Converts 0 to 12 for midnight
-
-  // Format the time string
-  const formattedTimeString = `${formattedHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${period}`;
-
-  return formattedTimeString;
-}
-
-function changeStatement(event)
-{
-  displayData = event.target.value;
-}
-
-
-
-function plotData(callData, putData) {
-    const options = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-            type: 'shadow'
-            }
-        },
-        silent: true,
-        grid: {
-            left: '10%',
-            right: '5%',
-            bottom: '20%',
-            containLabel: true
-        },
-        xAxis: [
-            {
-            type: 'category',
-            data: dateList,
-            axisLabel: {
-              formatter: function (value) {
-                  // Assuming dates are in the format 'yyyy-mm-dd'
-                  const dateParts = value.split('-');
-                  const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-                  const year = parseInt(dateParts[0]);
-                  const day = parseInt(dateParts[2])
-                  return `${day} ${monthNames[monthIndex]} ${year}`;
+  import {numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker} from '$lib/store';
+  import { Chart } from 'svelte-echarts'
+  import { abbreviateNumber } from '$lib/utils';
+  import InfoModal from '$lib/components/InfoModal.svelte';
+  import { onMount } from 'svelte'
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import { init, use } from 'echarts/core'
+  import { BarChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+  use([BarChart, GridComponent, CanvasRenderer])
+  
+  
+    export let data;
+    
+    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    
+    let optionsPlotData = data?.getOptionsPlotData?.plot;
+    let displayData = 'volume';
+    let options;
+    let rawData = data?.getOptionsFlowData
+    let optionList = rawData?.slice(0,30);
+    let flowSentiment = 'n/a';
+    let callPercentage; 
+    let putPercentage;
+    let displayCallVolume;
+    let displayPutVolume;
+    let latestPutCallRatio;
+    let displayOTMRatio;
+    
+    const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
+    
+    
+    const totalVolume = data?.getOptionsPlotData?.totalVolume;
+    
+    const totalOpenInterest = data?.getOptionsPlotData?.totalOpenInterest;
+    
+    
+    // Computing the put-call ratio for open interest
+    const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
+    
+    const displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
+    const displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
+    
+    const dateList = data?.getOptionsPlotData?.dateList;
+    
+    const callVolumeList = data?.getOptionsPlotData?.callVolumeList;
+    const putVolumeList = data?.getOptionsPlotData?.putVolumeList;
+    const callOpenInterestList = data?.getOptionsPlotData?.callOpenInterestList;
+    const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
+    
+    
+    
+    
+    function formatDate(dateStr) {
+      // Parse the input date string (YYYY-mm-dd)
+      var date = new Date(dateStr);
+    
+      // Get month, day, and year
+      var month = date.getMonth() + 1; // Month starts from 0
+      var day = date.getDate();
+      var year = date.getFullYear();
+    
+      // Extract the last two digits of the year
+      var shortYear = year.toString().slice(-2);
+    
+      // Add leading zeros if necessary
+      month = (month < 10 ? "0" : "") + month;
+      day = (day < 10 ? "0" : "") + day;
+    
+      var formattedDate = month + "/" + day + "/" + year;
+    
+      return formattedDate;
+    }
+    
+    function formatTime(timeString) {
+      // Split the time string into components
+      const [hours, minutes, seconds] = timeString.split(':').map(Number);
+    
+      // Determine AM or PM
+      const period = hours >= 12 ? 'PM' : 'AM';
+    
+      // Convert hours from 24-hour to 12-hour format
+      const formattedHours = hours % 12 || 12; // Converts 0 to 12 for midnight
+    
+      // Format the time string
+      const formattedTimeString = `${formattedHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${period}`;
+    
+      return formattedTimeString;
+    }
+    
+    function changeStatement(event)
+    {
+      displayData = event.target.value;
+    }
+    
+    
+    
+    function plotData(callData, putData) {
+        const options = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                type: 'shadow'
+                }
+            },
+            silent: true,
+            grid: {
+                left: $screenWidth < 640 ? '5%' : '2%',
+                right: $screenWidth < 640 ? '5%' : '2%',
+                bottom: '20%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                type: 'category',
+                data: dateList,
+                axisLabel: {
+                  formatter: function (value) {
+                      // Assuming dates are in the format 'yyyy-mm-dd'
+                      const dateParts = value.split('-');
+                      const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+                      const year = parseInt(dateParts[0]);
+                      const day = parseInt(dateParts[2])
+                      return `${day} ${monthNames[monthIndex]} ${year}`;
+                  }
               }
-          }
+                }
+            ],
+            yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    show: false // Hide the y-axis label
+                }
             }
         ],
-        yAxis: [
-        {
-            type: 'value',
-            splitLine: {
-                show: false,
-            },
-            axisLabel: {
-                show: false // Hide the y-axis label
+            series: [
+                {
+                name: 'Call',
+                type: 'bar',
+                stack: 'Put-Call Ratio',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: callData,
+                itemStyle: {
+                    color: '#00FC50'
+                    },
+                },
+                {
+                name: 'Put',
+                type: 'bar',
+                stack: 'Put-Call Ratio',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: putData,
+                itemStyle: {
+                    color: '#EE5365' //'#7A1C16'
+                    },
+                },
+            ]
+        };
+        return options;
+    }
+    
+    function calculateStats() {
+        const currentPrice = parseFloat(data?.getStockQuote?.price);
+        
+        const { callVolumeSum, putVolumeSum, bullishCount, bearishCount, otmVolume, itmVolume } = rawData?.reduce((acc, item) => {
+            const volume = parseInt(item?.volume);
+            const strikePrice = parseFloat(item?.strike_price);
+    
+            if (item?.put_call === "Calls") {
+                acc.callVolumeSum += volume;
+                if (strikePrice > currentPrice) {
+                    acc.otmVolume += volume;
+                } else {
+                    acc.itmVolume += volume;
+                }
+            } else if (item?.put_call === "Puts") {
+                acc.putVolumeSum += volume;
+                if (strikePrice < currentPrice) {
+                    acc.itmVolume += volume;
+                } else {
+                    acc.otmVolume += volume;
+                }
+            }
+    
+            if (item?.sentiment === "Bullish") {
+                acc.bullishCount += 1;
+            } else if (item?.sentiment === "Bearish") {
+                acc.bearishCount += 1;
+            }
+    
+            return acc;
+        }, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0, otmVolume: 0, itmVolume: 0 });
+    
+        if (bullishCount > bearishCount) {
+            flowSentiment = 'Bullish';
+        } else if (bullishCount < bearishCount) {
+            flowSentiment = 'Bearish';
+        } else {
+            flowSentiment = 'Neutral';
+        }
+    
+        latestPutCallRatio = (putVolumeSum / callVolumeSum);
+        callPercentage = Math.floor((callVolumeSum) / (callVolumeSum + putVolumeSum) * 100);
+        putPercentage = (100 - callPercentage);
+        displayCallVolume = callVolumeSum;
+        displayPutVolume = putVolumeSum;
+        
+        // Calculate OTM/ITM ratio
+        displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0;
+    }
+    
+    async function handleScroll() {
+        const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+        const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+        if (isBottom && optionList?.length !== rawData?.length) {
+            const nextIndex = optionList?.length;
+            const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
+            optionList = [...optionList, ...filteredNewResults];
+        }
+      }
+    
+    
+    
+    onMount(async () => {
+      calculateStats();
+      
+      if(data?.user?.tier === 'Pro') {
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+      }
+    })
+    
+    
+    $: {
+        if(displayData && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
+            if (displayData === 'volume') {
+                options = plotData(callVolumeList, putVolumeList)
+            }
+            else if (displayData === 'openInterest') {
+                options = plotData(callOpenInterestList, putOpenInterestList)
             }
         }
-    ],
-        series: [
-            {
-            name: 'Call',
-            type: 'bar',
-            stack: 'Put-Call Ratio',
-            emphasis: {
-                focus: 'series'
-            },
-            data: callData,
-            itemStyle: {
-                color: '#00FC50'
-                },
-            },
-            {
-            name: 'Put',
-            type: 'bar',
-            stack: 'Put-Call Ratio',
-            emphasis: {
-                focus: 'series'
-            },
-            data: putData,
-            itemStyle: {
-                color: '#EE5365' //'#7A1C16'
-                },
-            },
-        ]
-    };
-    return options;
-}
-
-function calculateStats() {
-    const currentPrice = parseFloat(data?.getStockQuote?.price);
-    
-    const { callVolumeSum, putVolumeSum, bullishCount, bearishCount, otmVolume, itmVolume } = rawData?.reduce((acc, item) => {
-        const volume = parseInt(item?.volume);
-        const strikePrice = parseFloat(item?.strike_price);
-
-        if (item?.put_call === "Calls") {
-              acc.callVolumeSum += volume;
-              if (strikePrice > currentPrice) {
-                  acc.otmVolume += volume;
-              } else {
-                  acc.itmVolume += volume;
-              }
-          } else if (item?.put_call === "Puts") {
-              acc.putVolumeSum += volume;
-              if (strikePrice < currentPrice) {
-                  acc.itmVolume += volume;
-              } else {
-                  acc.otmVolume += volume;
-              }
-          }
-
-        if (item?.sentiment === "Bullish") {
-            acc.bullishCount += 1;
-        } else if (item?.sentiment === "Bearish") {
-            acc.bearishCount += 1;
-        }
-
-        return acc;
-    }, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0, otmVolume: 0, itmVolume: 0 });
-
-    if (bullishCount > bearishCount) {
-        flowSentiment = 'Bullish';
-    } else if (bullishCount < bearishCount) {
-        flowSentiment = 'Bearish';
-    } else {
-        flowSentiment = 'Neutral';
     }
-
-    latestPutCallRatio = (putVolumeSum / callVolumeSum);
-    callPercentage = Math.floor((callVolumeSum) / (callVolumeSum + putVolumeSum) * 100);
-    putPercentage = (100 - callPercentage);
-    displayCallVolume = callVolumeSum;
-    displayPutVolume = putVolumeSum;
     
-    // Calculate OTM/ITM ratio
-    displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0;
-}
-
-async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && optionList?.length !== rawData?.length) {
-        const nextIndex = optionList?.length;
-        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
-        optionList = [...optionList, ...filteredNewResults];
-    }
-  }
-
-
-
-onMount(async () => {
-  calculateStats();
-  
-  if(data?.user?.tier === 'Pro') {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-        window.removeEventListener('scroll', handleScroll);
-    };
-  }
-})
-
-
-$: {
-    if(displayData && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
-        if (displayData === 'volume') {
-            options = plotData(callVolumeList, putVolumeList)
-        }
-        else if (displayData === 'openInterest') {
-            options = plotData(callOpenInterestList, putOpenInterestList)
-        }
-    }
-}
-
-
-
-</script>
-
-
-  
-<svelte:head>
-
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-<title>
-  {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Options Activity · stocknear
-</title>
-<meta name="description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
-
-<!-- Other meta tags -->
-<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
-<meta property="og:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
-<meta property="og:type" content="website"/>
-<!-- Add more Open Graph meta tags as needed -->
-
-<!-- Twitter specific meta tags -->
-<meta name="twitter:card" content="summary_large_image"/>
-<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
-<meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
-<!-- Add more Twitter meta tags as needed -->
-
-</svelte:head>
-
-
-              
-    <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
-        <div class="flex justify-center m-auto h-full overflow-hidden w-full">
-            <div class="relative flex justify-center items-center overflow-hidden w-full">
-                  <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
-                        <div class="mb-6">
-                            <h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
-                                Unsual Options Activity
-                            </h2>
     
-                            <div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
-                              <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
-                              
-                              {#if optionsPlotData?.length !== 0}
-                                Last 3 months of options activity involving {$displayCompanyName} by major institutional traders and hedge funds.
-                                {:else}
-                                There's no data available, indicating that major traders may not be actively betting on {$displayCompanyName}.
-                              {/if}
-
-                          </div>
     
-                        </div>
-
-                
-                    {#if optionsPlotData?.length !== 0}
-
-                    <div class="stats stats-horizontal bg-[#272727] w-full rounded-lg">
-            
-                      <div class="grid grid-cols-2">
-          
-                        <div class="stat">
-                          <div class="flex flex-row items-center">
-                            <label for="totalVolume" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                              Total Volume
-                            </label>
-                            <InfoModal
-                              title={"Total Volume"}
-                              content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
-                              id={"totalVolume"}
-                            />
-                            </div>
-                          <div class="stat-value font-semibold mt-1 text-lg text-gray-200">{displayTotalVolume}</div>
-                        </div>
-                        
-          
-          
-                        <div class="stat">
-                          <div class="flex flex-row items-center">
-                          <label for="totalOpenInterestModal" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                            Total OI
-                          </label>
-                          <InfoModal
-                                title={"Total Open Interest"}
-                                content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
-                                id={"totalOpenInterestModal"}
-                              />
-                          </div>
-                          
-                          <div class="stat-value font-semibold mt-1 text-lg text-gray-200">{displayTotalOpenInterest}</div>
-                        </div>
-                        
-                        <div class="stat">
-                          <div class="flex flex-row items-center">
-                          <label for="revenueInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                            P/C Ratio
-                          </label>
-                          <InfoModal
-                            title={"Put-Call Ratio"}
-                            content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
-                              id={"revenueInfo"}
-                              />
-                            </div>
-                          <div class="stat-value font-semibold mt-1 text-lg text-gray-200">
-                            {totalPutCallRatio !== 'Infinity' ? totalPutCallRatio : '> 1'}
-                          </div>
-                        </div>
-          
-                        <div class="stat">
-                          <div class="flex flex-row items-center">
-                            <label for="profitsInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                              OI P/C Ratio
-                            </label>
-                            <InfoModal
-                              title={"Open Interest Put-Call Ratio"}
-                              content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
-                              id={"profitsInfo"}
-                              />
-                              </div>
-                          <div class="stat-value font-semibold mt-1 text-lg text-gray-200">{putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}</div>
-                        </div>
-          
-                        </div>
-                      
-                    </div>
-
-
-                          
-
-                            <div class="flex flex-row items-center w-full mt-5">
-                                <select class="mt-5 sm:mb-0 ml-1 w-40 select select-bordered select-sm p-0 pl-5  bg-[#2A303C]" on:change={changeStatement}>
-                                    <option disabled>Choose a category</option>
-                                    <option value="volume" selected>Volume</option>
-                                    <option value="openInterest">Open Interest</option>
-                                </select>
-                            </div>
-                        
-                            
-                            <div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
-                                <Chart {init} options={options} class="chart" />
-                            </div>
-                            
-
-                            
-                            <h3 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4 text-center sm:text-start">
-                                Latest Options Activity 
-                            </h3>
-
-
-
-                            {#if optionList?.length !== 0}
-                            <!--Start Widget-->
-
-                            <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
-                              <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
-                                <!--Start Flow Sentiment-->  
-                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
-                                    <div class="flex flex-col items-start">
-                                        <span class="font-medium text-gray-200 text-[1rem] ">Flow Sentiment</span>
-                                        <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
-                                    </div>
-                                    
-                                </div>
-                                <!--End Flow Sentiment-->
-                                <!--Start Put/Call-->  
-                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
-                                  <div class="flex flex-col items-start">
-                                      <span class="font-medium text-gray-200 text-[1rem] ">Put/Call</span>
-                                      <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
-                                        {latestPutCallRatio?.toFixed(3)}
-                                      </span>
-                                  </div>
-                                  <!-- Circular Progress -->
-                                    <div class="relative size-14 ml-auto">
-                                      <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                        <!-- Background Circle -->
-                                        <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
-                                        <!-- Progress Circle inside a group with rotation -->
-                                        <g class="origin-center -rotate-90 transform">
-                                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={latestPutCallRatio >=1 ? 0 : 100-(latestPutCallRatio*100)?.toFixed(2)}></circle>
-                                        </g>
-                                      </svg>
-                                      <!-- Percentage Text -->
-                                      <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                        <span class="text-center text-white text-sm">{latestPutCallRatio?.toFixed(2)}</span>
-                                      </div>
-                                    </div>
-                                  <!-- End Circular Progress -->
-                        
-                              </div>
-                              <!--End Put/Call-->
-                              <!--Start Call Flow-->  
-                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
-                                <div class="flex flex-col items-start">
-                                    <span class="font-medium text-gray-200 text-[1rem] ">Call Flow</span>
-                                    <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
-                                      {new Intl.NumberFormat("en", {
-                                        minimumFractionDigits: 0,
-                                        maximumFractionDigits: 0
-                                    }).format(displayCallVolume)}
-                                    </span>
-                                </div>
-                                <!-- Circular Progress -->
-                                <div class="relative size-14 ml-auto">
-                                  <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                    <!-- Background Circle -->
-                                    <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
-                                    <!-- Progress Circle inside a group with rotation -->
-                                    <g class="origin-center -rotate-90 transform">
-                                      <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#00FC50]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-callPercentage?.toFixed(2)}></circle>
-                                    </g>
-                                  </svg>
-                                  <!-- Percentage Text -->
-                                  <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                    <span class="text-center text-white text-sm">{callPercentage}%</span>
-                                  </div>
-                                </div>
-                                <!-- End Circular Progress -->
-                              </div>
-                              <!--End Call Flow-->
-                              <!--Start Put Flow-->  
-                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
-                                <div class="flex flex-col items-start">
-                                    <span class="font-medium text-gray-200 text-[1rem] ">Put Flow</span>
-                                    <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
-                                      {new Intl.NumberFormat("en", {
-                                        minimumFractionDigits: 0,
-                                        maximumFractionDigits: 0
-                                    }).format(displayPutVolume)}
-                                    </span>
-                                </div>
-                                <!-- Circular Progress -->
-                                <div class="relative size-14 ml-auto">
-                                  <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                    <!-- Background Circle -->
-                                    <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
-                                    <!-- Progress Circle inside a group with rotation -->
-                                    <g class="origin-center -rotate-90 transform">
-                                      <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-putPercentage?.toFixed(2)}></circle>
-                                    </g>
-                                  </svg>
-                                  <!-- Percentage Text -->
-                                  <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                    <span class="text-center text-white text-sm">{putPercentage}%</span>
-                                  </div>
-                                </div>
-                                <!-- End Circular Progress -->
-                                
-                              </div>
-                              <!--End Put Flow-->
-
-                                <!--Start Put/Call-->  
-                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
-                                  <div class="flex flex-col items-start">
-                                    <span class="font-medium text-gray-200 text-[1rem] ">OTM Ratio</span>
-                                    <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
-                                      Volume in %
-                                    </span>
-                                  </div>
-                                  <!-- Circular Progress -->
-                                    <div class="relative size-14 ml-auto">
-                                      <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                        <!-- Background Circle -->
-                                        <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
-                                        <!-- Progress Circle inside a group with rotation -->
-                                        <g class="origin-center -rotate-90 transform">
-                                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={displayOTMRatio >=1 ? 0 : 100-(displayOTMRatio*100)?.toFixed(2)}></circle>
-                                        </g>
-                                      </svg>
-                                      <!-- Percentage Text -->
-                                      <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                        <span class="text-center text-white text-sm">{(displayOTMRatio*100)?.toFixed(0)}%</span>
-                                      </div>
-                                    </div>
-                                  <!-- End Circular Progress -->
-                        
-                              </div>
-                              <!--End Put/Call-->
-                        
-                        
-                                </div>
-                            </div>
-                          <!--End Widget-->
-
-
-
-
-                            <div class="flex justify-start items-center m-auto overflow-x-auto">
-                                
-                                
-                                <table class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 overflow-x-auto">
-                                    <thead>
-                                      <tr class="">
-                                        <td class="text-slate-200 font-semibold text-sm text-start">Time</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-start">Date</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-end">Expiry</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-end">Strike</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-end">C/P</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-start">Sent.</td>
-                                        <td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-end">Spot</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-end">Price</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-end">Prem.</td>
-                                        <td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-start">Type</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-end">Vol.</td>
-                                        <td class="text-slate-200 font-semibold text-sm text-end">OI</td>
-                                      </tr>
-                                    </thead>
-                                    <tbody>
-                                      {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
-                                      <!-- row -->
-                                      <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
-                                        
-                                        <td class="text-white text-xs sm:text-sm text-start whitespace-nowrap">
-                                          {formatTime(item?.time)}
-                                        </td>
-
-                                        <td class="text-white text-xs sm:text-sm text-start">
-                                          {formatDate(item?.date)}
-                                        </td>
-
-                                        <td class="text-white text-sm text-end">
-                                          {item?.dte < 0 ? 'expired' : item?.dte +'d'}
-                                        </td>
-                                        
-                                        <td class="text-sm text-end text-white">
-                                          {item?.strike_price}
-                                        </td>
-
-                                        <td class="{item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-start">
-                                          {item?.put_call}
-                                        </td>
-
-                                        <td class="{item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
-                                          {item?.sentiment}
-                                        </td>
-
-                                        <td class="text-sm text-end text-white table-cell sm:hidden">
-                                          {item?.underlying_price}
-                                        </td>
-                                      
-                                      <td class="text-sm text-end text-white">
-                                        {item?.price}
-                                      </td>
-                                      
-                                      <td class="text-sm text-end font-medium {item?.put_call === 'Puts' ? 'text-[#CB281C]' : 'text-[#0FB307]'} ">
-                                        {abbreviateNumber(item?.cost_basis)}
-                                      </td>
+    </script>
+    
+    
+      
+    <svelte:head>
+    
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>
+      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Options Activity · stocknear
+    </title>
+    <meta name="description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
+    
+    <!-- Other meta tags -->
+    <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
+    <meta property="og:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
+    <meta property="og:type" content="website"/>
+    <!-- Add more Open Graph meta tags as needed -->
+    
+    <!-- Twitter specific meta tags -->
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
+    <meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
+    <!-- Add more Twitter meta tags as needed -->
+    
+    </svelte:head>
+    
+    
                   
-                                      <td class="text-sm text-start table-cell sm:hidden {item?.type === 'Sweep' ? 'text-[#C6A755]' : 'text-[#976DB7]'}">
-                                        {item?.type}
-                                      </td>
-                      
-                        
-                      
-                                      <td class="text-white text-end">
+        <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
+            <div class="flex justify-center m-auto h-full overflow-hidden w-full">
+                <div class="relative flex justify-center items-center overflow-hidden w-full">
+                      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+                            <div class="mb-6">
+                                <h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
+                                    Unsual Options Activity
+                                </h2>
+        
+                                <div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
+                                  <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
+                                  
+                                  {#if optionsPlotData?.length !== 0}
+                                    Last 3 months of options activity involving {$displayCompanyName} by major institutional traders and hedge funds.
+                                    {:else}
+                                    There's no data available, indicating that major traders may not be actively betting on {$displayCompanyName}.
+                                  {/if}
+    
+                              </div>
+        
+                            </div>
+    
+                    
+                        {#if optionsPlotData?.length !== 0}
+    
+                        <div class="stats stats-horizontal bg-[#27272A] w-full rounded-lg">
+                
+                          <div class="grid grid-cols-2">
+              
+                            <div class="stat">
+                              <div class="flex flex-row items-center">
+                                <label for="totalVolume" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
+                                  Total Volume
+                                </label>
+                                <InfoModal
+                                  title={"Total Volume"}
+                                  content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
+                                  id={"totalVolume"}
+                                />
+                                </div>
+                              <div class="stat-value font-semibold mt-1 text-lg text-gray-200">{displayTotalVolume}</div>
+                            </div>
+                            
+              
+              
+                            <div class="stat">
+                              <div class="flex flex-row items-center">
+                              <label for="totalOpenInterestModal" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
+                                Total OI
+                              </label>
+                              <InfoModal
+                                    title={"Total Open Interest"}
+                                    content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
+                                    id={"totalOpenInterestModal"}
+                                  />
+                              </div>
+                              
+                              <div class="stat-value font-semibold mt-1 text-lg text-gray-200">{displayTotalOpenInterest}</div>
+                            </div>
+                            
+                            <div class="stat">
+                              <div class="flex flex-row items-center">
+                              <label for="revenueInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
+                                P/C Ratio
+                              </label>
+                              <InfoModal
+                                title={"Put-Call Ratio"}
+                                content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
+                                  id={"revenueInfo"}
+                                  />
+                                </div>
+                              <div class="stat-value font-semibold mt-1 text-lg text-gray-200">
+                                {totalPutCallRatio !== 'Infinity' ? totalPutCallRatio : '> 1'}
+                              </div>
+                            </div>
+              
+                            <div class="stat">
+                              <div class="flex flex-row items-center">
+                                <label for="profitsInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
+                                  OI P/C Ratio
+                                </label>
+                                <InfoModal
+                                  title={"Open Interest Put-Call Ratio"}
+                                  content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
+                                  id={"profitsInfo"}
+                                  />
+                                  </div>
+                              <div class="stat-value font-semibold mt-1 text-lg text-gray-200">{putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}</div>
+                            </div>
+              
+                            </div>
+                          
+                        </div>
+    
+    
+                              
+    
+                                <div class="flex flex-row items-center w-full mt-5">
+                                    <select class="mt-5 sm:mb-0 ml-1 w-40 select select-bordered select-sm p-0 pl-5  bg-[#2A303C]" on:change={changeStatement}>
+                                        <option disabled>Choose a category</option>
+                                        <option value="volume" selected>Volume</option>
+                                        <option value="openInterest">Open Interest</option>
+                                    </select>
+                                </div>
+                            
+                                
+                                <div class="app w-full bg-[#09090B] rounded-xl">
+                                    <Chart {init} options={options} class="chart" />
+                                </div>
+                                
+    
+                                
+                                <h3 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4 text-center sm:text-start">
+                                    Latest Options Activity 
+                                </h3>
+    
+    
+    
+                                {#if optionList?.length !== 0}
+                                <!--Start Widget-->
+    
+                                <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
+                                  <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
+                                    <!--Start Flow Sentiment-->  
+                                    <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
+                                        <div class="flex flex-col items-start">
+                                            <span class="font-medium text-gray-200 text-[1rem] ">Flow Sentiment</span>
+                                            <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
+                                        </div>
+                                        
+                                    </div>
+                                    <!--End Flow Sentiment-->
+                                    <!--Start Put/Call-->  
+                                    <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
+                                      <div class="flex flex-col items-start">
+                                          <span class="font-medium text-gray-200 text-[1rem] ">Put/Call</span>
+                                          <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
+                                            {latestPutCallRatio?.toFixed(3)}
+                                          </span>
+                                      </div>
+                                      <!-- Circular Progress -->
+                                        <div class="relative size-14 ml-auto">
+                                          <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                                            <!-- Background Circle -->
+                                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                                            <!-- Progress Circle inside a group with rotation -->
+                                            <g class="origin-center -rotate-90 transform">
+                                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={latestPutCallRatio >=1 ? 0 : 100-(latestPutCallRatio*100)?.toFixed(2)}></circle>
+                                            </g>
+                                          </svg>
+                                          <!-- Percentage Text -->
+                                          <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
+                                            <span class="text-center text-white text-sm">{latestPutCallRatio?.toFixed(2)}</span>
+                                          </div>
+                                        </div>
+                                      <!-- End Circular Progress -->
+                            
+                                  </div>
+                                  <!--End Put/Call-->
+                                  <!--Start Call Flow-->  
+                                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
+                                    <div class="flex flex-col items-start">
+                                        <span class="font-medium text-gray-200 text-[1rem] ">Call Flow</span>
+                                        <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                                           {new Intl.NumberFormat("en", {
+                                            minimumFractionDigits: 0,
+                                            maximumFractionDigits: 0
+                                        }).format(displayCallVolume)}
+                                        </span>
+                                    </div>
+                                    <!-- Circular Progress -->
+                                    <div class="relative size-14 ml-auto">
+                                      <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                                        <!-- Background Circle -->
+                                        <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                                        <!-- Progress Circle inside a group with rotation -->
+                                        <g class="origin-center -rotate-90 transform">
+                                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#00FC50]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-callPercentage?.toFixed(2)}></circle>
+                                        </g>
+                                      </svg>
+                                      <!-- Percentage Text -->
+                                      <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
+                                        <span class="text-center text-white text-sm">{callPercentage}%</span>
+                                      </div>
+                                    </div>
+                                    <!-- End Circular Progress -->
+                                  </div>
+                                  <!--End Call Flow-->
+                                  <!--Start Put Flow-->  
+                                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
+                                    <div class="flex flex-col items-start">
+                                        <span class="font-medium text-gray-200 text-[1rem] ">Put Flow</span>
+                                        <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
+                                          {new Intl.NumberFormat("en", {
+                                            minimumFractionDigits: 0,
+                                            maximumFractionDigits: 0
+                                        }).format(displayPutVolume)}
+                                        </span>
+                                    </div>
+                                    <!-- Circular Progress -->
+                                    <div class="relative size-14 ml-auto">
+                                      <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                                        <!-- Background Circle -->
+                                        <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                                        <!-- Progress Circle inside a group with rotation -->
+                                        <g class="origin-center -rotate-90 transform">
+                                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-putPercentage?.toFixed(2)}></circle>
+                                        </g>
+                                      </svg>
+                                      <!-- Percentage Text -->
+                                      <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
+                                        <span class="text-center text-white text-sm">{putPercentage}%</span>
+                                      </div>
+                                    </div>
+                                    <!-- End Circular Progress -->
+                                    
+                                  </div>
+                                  <!--End Put Flow-->
+    
+                                    <!--Start Put/Call-->  
+                                    <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
+                                      <div class="flex flex-col items-start">
+                                          <span class="font-medium text-gray-200 text-[1rem] ">OTM Ratio</span>
+                                          <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
+                                            Volume in %
+                                          </span>
+                                      </div>
+                                      <!-- Circular Progress -->
+                                        <div class="relative size-14 ml-auto">
+                                          <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                                            <!-- Background Circle -->
+                                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                                            <!-- Progress Circle inside a group with rotation -->
+                                            <g class="origin-center -rotate-90 transform">
+                                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={displayOTMRatio >=1 ? 0 : 100-(displayOTMRatio*100)?.toFixed(2)}></circle>
+                                            </g>
+                                          </svg>
+                                          <!-- Percentage Text -->
+                                          <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
+                                            <span class="text-center text-white text-sm">{(displayOTMRatio*100)?.toFixed(0)}%</span>
+                                          </div>
+                                        </div>
+                                      <!-- End Circular Progress -->
+                            
+                                  </div>
+                                  <!--End Put/Call-->
+                            
+                            
+                                    </div>
+                                </div>
+                              <!--End Widget-->
+    
+    
+    
+    
+                                <div class="flex justify-start items-center m-auto overflow-x-auto">
+                                    
+                                    
+                                    <table class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 overflow-x-auto">
+                                        <thead>
+                                          <tr class="">
+                                            <td class="text-slate-200 font-semibold text-sm text-start">Time</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-start">Date</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">Expiry</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">Strike</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">C/P</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-start">Sent.</td>
+                                            <td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-end">Spot</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">Price</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">Prem.</td>
+                                            <td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-start">Type</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">Vol.</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">OI</td>
+                                          </tr>
+                                        </thead>
+                                        <tbody>
+                                          {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
+                                          <!-- row -->
+                                          <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                                            
+                                            <td class="text-white text-xs sm:text-sm text-start whitespace-nowrap">
+                                              {formatTime(item?.time)}
+                                            </td>
+    
+                                            <td class="text-white text-xs sm:text-sm text-start">
+                                              {formatDate(item?.date)}
+                                            </td>
+    
+                                            <td class="text-white text-sm text-end">
+                                              {item?.dte < 0 ? 'expired' : item?.dte +'d'}
+                                            </td>
+                                            
+                                            <td class="text-sm text-end text-white">
+                                              {item?.strike_price}
+                                            </td>
+    
+                                            <td class="{item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-start">
+                                              {item?.put_call}
+                                            </td>
+    
+                                            <td class="{item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
+                                              {item?.sentiment}
+                                            </td>
+    
+                                            <td class="text-sm text-end text-white table-cell sm:hidden">
+                                              {item?.underlying_price}
+                                            </td>
+                                          
+                                          <td class="text-sm text-end text-white">
+                                            {item?.price}
+                                          </td>
+                                          
+                                          <td class="text-sm text-end font-medium {item?.put_call === 'Puts' ? 'text-[#CB281C]' : 'text-[#0FB307]'} ">
+                                            {abbreviateNumber(item?.cost_basis)}
+                                          </td>
+                      
+                                          <td class="text-sm text-start table-cell sm:hidden {item?.type === 'Sweep' ? 'text-[#C6A755]' : 'text-[#976DB7]'}">
+                                            {item?.type}
+                                          </td>
+                          
+                            
+                          
+                                          <td class="text-white text-end">
+                                              {new Intl.NumberFormat("en", {
+                                                  minimumFractionDigits: 0,
+                                                  maximumFractionDigits: 0
+                                              }).format(item?.volume)}
+                                          </td>
+                          
+                                          <td class="text-white text-end">
+                                            {new Intl.NumberFormat("en", {
                                               minimumFractionDigits: 0,
                                               maximumFractionDigits: 0
-                                          }).format(item?.volume)}
-                                      </td>
+                                          }).format(item?.open_interest)}
+                                          </td>
                       
-                                      <td class="text-white text-end">
-                                        {new Intl.NumberFormat("en", {
-                                          minimumFractionDigits: 0,
-                                          maximumFractionDigits: 0
-                                      }).format(item?.open_interest)}
-                                      </td>
-                  
-                  
-                                
-                        
-                                      </tr>
+                      
+                                    
+                            
+                                          </tr>
+                                          
                                       
-                                  
-                                      {/each}
-
-                                    </tbody>
-                                </table>
-                                
-                            </div>
-
-                            <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
-
-                            {:else}
-                            <div class="flex justify-center items-center m-auto mt-16 mb-6">
-                                <div class="text-gray-100 text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4">
-                                <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
-                                No Options activity found
+                                          {/each}
+    
+                                        </tbody>
+                                    </table>
+                                    
                                 </div>
-                            </div>
+    
+                                <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
+    
+                                {:else}
+                                <div class="flex justify-center items-center m-auto mt-16 mb-6">
+                                    <div class="text-gray-100 text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4">
+                                    <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
+                                    No Options activity found
+                                    </div>
+                                </div>
+                                {/if}
+    
                             {/if}
-
-                        {/if}
-        
-                  
-
-
-                  </div>
-
-                  
+            
+                      
+    
+    
+                      </div>
+    
+                      
+                </div>
             </div>
-        </div>
-    
         
-    </section>
-    
-    
-
+            
+        </section>
         
-    <style>
-      .app {
-          height: 420px;
-          max-width: 1500px;
-      }
-      
-      @media (max-width: 560px) {
+        
+    
+            
+        <style>
           .app {
-              max-width: 520px;
               height: 420px;
+              max-width: 1500px;
           }
-      }
-    
-      .chart {
-          width: 100%;
-      }
-    </style>
\ No newline at end of file
+          
+          @media (max-width: 560px) {
+              .app {
+                  max-width: 520px;
+                  height: 420px;
+              }
+          }
+        
+          .chart {
+              width: 100%;
+          }
+        </style>
\ No newline at end of file
