From ceda1eaba3d5846b307c430cc8d53896e65b98a1 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 25 Oct 2024 18:32:39 +0200
Subject: [PATCH] bugfixing ui

---
 src/routes/stocks/[tickerID]/+layout.svelte   |    3 +-
 .../stocks/[tickerID]/dividends/+page.svelte  |  716 +++---
 .../[tickerID]/financials/+layout.svelte      |    2 +-
 .../stocks/[tickerID]/forecast/+layout.svelte |   67 +-
 .../stocks/[tickerID]/forecast/+page.svelte   |  423 +++-
 .../stocks/[tickerID]/insider/+layout.svelte  |  266 +-
 .../stocks/[tickerID]/insider/+page.svelte    |   52 +-
 .../stocks/[tickerID]/options/+page.svelte    | 2139 +++++++++--------
 .../[tickerID]/statistics/+layout.svelte      |    2 +-
 9 files changed, 2120 insertions(+), 1550 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index bb8cde3f..a76685c5 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -105,6 +105,7 @@ function handleTypeOfTrade(state:string)
       dividends: "/dividends",
       statistics: "/statistics",
       forecast: "/forecast",
+      financials: "/financials",
       news: "/news",
     };
 
@@ -759,7 +760,7 @@ function handleTypeOfTrade(state:string)
                         : ''} mb-2"
                     >
                       <ul
-                        class="pr-4 sm:pr-0 w-screen sm:w-full overflow-x-scroll font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
+                        class="pr-4 sm:pr-0 w-screen overflow-x-scroll font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
                       >
                         <li class="cursor-pointer flex flex-col items-center">
                           <a
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 02ac480f..db04e8b6 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -1,350 +1,434 @@
 <script lang="ts">
-  import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
-  import { onMount } from 'svelte';
-  
-  import { Chart } from 'svelte-echarts'
-  import { init, use } from 'echarts/core'
-  import { LineChart, BarChart } from 'echarts/charts'
-  import { GridComponent, TooltipComponent } from 'echarts/components'
-  import { CanvasRenderer } from 'echarts/renderers'
-  use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
-  
-  
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    stockTicker,
+  } from "$lib/store";
+  import { onMount } from "svelte";
+
+  import { Chart } from "svelte-echarts";
+  import { init, use } from "echarts/core";
+  import { LineChart, BarChart } from "echarts/charts";
+  import { GridComponent, TooltipComponent } from "echarts/components";
+  import { CanvasRenderer } from "echarts/renderers";
+  use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]);
+
   export let data;
   let isLoaded = false;
   let dateDistance;
   let rawData = data?.getStockDividend;
   let optionsDividend;
-      
-      
-    
+
   let exDividendDate = rawData?.history?.at(0)?.date;
   let dividendYield = rawData?.dividendYield;
   let annualDividend = rawData?.annualDividend;
   let payoutFrequency = rawData?.payoutFrequency;
   let payoutRatio = rawData?.payoutRatio;
   let dividendGrowth = rawData?.dividendGrowth;
-      
-  
-    
-  
+
   async function plotDividend() {
-  
     // Combine the data into an array of objects to keep them linked
-    const combinedData = rawData?.history?.map(item => ({
-        date: item?.paymentDate,
-        dividend: item?.adjDividend?.toFixed(2)
+    const combinedData = rawData?.history?.map((item) => ({
+      date: item?.paymentDate,
+      dividend: item?.adjDividend?.toFixed(2),
     }));
 
     // Sort the combined data array based on the date
     combinedData.sort((a, b) => new Date(a?.date) - new Date(b?.date));
 
     // Separate the sorted data back into individual arrays
-    const dates = combinedData.map(item => item.date);
-    const dividendList = combinedData.map(item => item.dividend);
+    const dates = combinedData.map((item) => item.date);
+    const dividendList = combinedData.map((item) => item.dividend);
 
-  
     const options = {
-       tooltip: {
-          trigger: 'axis',
-          hideDelay: 100, // Set the delay in milliseconds
+      tooltip: {
+        trigger: "axis",
+        hideDelay: 100, // Set the delay in milliseconds
       },
       animation: false,
-          grid: {
-          left: '3%',
-          right: '3%',
-          bottom: '10%',
-          top: '10%',
-          containLabel: true
-          },
-        xAxis: {
-          data: dates,
-          type: 'category',
-          axisLabel: {
-            color: '#fff',
-          },
+      grid: {
+        left: "3%",
+        right: "3%",
+        bottom: "10%",
+        top: "10%",
+        containLabel: true,
+      },
+      xAxis: {
+        data: dates,
+        type: "category",
+        axisLabel: {
+          color: "#fff",
+        },
+        splitLine: {
+          show: false, // Disable x-axis grid lines
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
           splitLine: {
-              show: false, // Disable x-axis grid lines
+            show: false, // Disable x-axis grid lines
+          },
+
+          axisLabel: {
+            show: false, // Hide y-axis labels
           },
         },
-        yAxis: [
-          {
-          type: 'value',
-          splitLine: {
-                show: false, // Disable x-axis grid lines
-          },
-          
-          axisLabel: {
-            show: false // Hide y-axis labels
-          }
-    },
-        ],
-        series: [
-          {
-            name: 'Dividend per Share',
-            data: dividendList,
-            type: 'bar',
-            smooth: true,
-          },
-        ],
-      };
-      
-      
-          return options;
+      ],
+      series: [
+        {
+          name: "Dividend per Share",
+          data: dividendList,
+          type: "bar",
+          smooth: true,
+        },
+      ],
+    };
+
+    return options;
   }
-  
-  
-  
-  
-  
-  onMount(async() => {
-    optionsDividend = await plotDividend()
+
+  onMount(async () => {
+    optionsDividend = await plotDividend();
     isLoaded = true;
-  })
-  
-  
-  </script>
-  
-   
-  <svelte:head>
-  
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>
-      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Dividend History, Dates & Yield · stocknear
-    </title>
-  
-    <meta name="description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}>
-    <!-- Other meta tags -->
-    <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}/>
-    <meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), including dividend history, yield, key dates, growth and other metrics.`} />
-    <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}) Dividend History, Dates & Yield · stocknear`}/>
-    <meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-    <!-- Add more Twitter meta tags as needed -->
-  
-  </svelte:head>
-    
-  
-            
-      <section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
-          <div class="w-full flex h-full overflow-hidden">
-              <div class="w-full relative flex justify-center items-center overflow-hidden">
-                    <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
-                          <div class="w-full mb-6">
-                              <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
-                                  Dividends
-                              </h1>
-      
-                  
-                              
-                            
-                          <div class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
-                            <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
-  
-                            
-                                {#if rawData?.history?.length !== 0}
-                                {#if !dateDistance}
-                                    {$displayCompanyName} has an annual dividend of
-                                      ${annualDividend}
-                                    per share, with a forward yield of
-                                      {dividendYield}%.
-                                    The dividend is paid every
-                                    {payoutFrequency === 4 ? '3 months' : payoutFrequency === 2 ? '6 months' : payoutFrequency === 1 ? '12 months' : 'n/a'} 
-                                    and the last ex-dividend date was
-                                      {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                                {:else}
-                                  {$displayCompanyName} issued its most recent dividend on 
-                                  {new Date(rawData?.history?.at(0)?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}. 
-                                  Since then, the company has not distributed any further dividends for over 12 months.
-                                {/if}
-  
-                             
-                              {:else}
-                              No dividend history available for {$displayCompanyName}.
-                              {/if}
-                            
-                          </div>
-      
-                          </div>
-      
-                        {#if rawData?.history?.length !== 0}
-                        
-                        <div class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 divide-x">
-                        <div class="p-4 bp:p-5 sm:p-6">
-                          <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                            Dividend Yield
-                          </label>   
-                            <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
-                              {dividendYield !== '0.00' ? dividendYield : '0'}%
-                            </div> 
-                        </div>
-                        <div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast ">
-                          <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                            Annual Dividend
-                          </label>  
-            
-                            <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
-                             {annualDividend !== '0.00' ? annualDividend : '0'}
-                            </div> 
-                        </div>
-                        <div class="p-4 bp:p-5 sm:p-6 border-r border-contrast ">
-                          <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                            Ex-Dividend Date
-                          </label>    
-                         
-                            <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
-                             {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                            </div> 
-                        </div>
+  });
+</script>
 
-                        <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
-                          <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                            Payout Frequency
-                          </label>    
-                         
-                            <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
-                             {payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
-                            </div> 
-                        </div>
-                        <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
-                          <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                            Payout Ratio 
-                          </label>    
-                         
-                            <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
-                             {payoutRatio !== '0.00' ? payoutRatio : '0'}%
-                            </div> 
-                        </div>
-                        <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
-                          <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                            Dividend Growth
-                          </label>    
-                         
-                            <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
-                             {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
-                            </div> 
-                        </div>
-  
-                           
-                      </div>
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Dividend History, Dates & Yield ·
+    stocknear
+  </title>
 
+  <meta
+    name="description"
+    content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+  />
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), including dividend history, yield, key dates, growth and other metrics.`}
+  />
+  <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}) Dividend History, Dates & Yield · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
 
-                            <div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
-          
-                              <h3 class="text-xl text-white font-semibold ">
-                                Dividends History
-                              </h3>
-          
-        
-          
-                            </div>
-        
-  
-                    {#if isLoaded} 
-                          {#if rawData?.history?.length !== 0 && optionsDividend}
-        
-                          <div class="app w-full">
-                            <Chart {init} options={optionsDividend} class="chart" />
-                          </div>
-        
-                          
-                              <div class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
-                                <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
-                                  <thead>
-                                    <tr class="bg-[#09090B] border-b-slate-600 shadow-md">
-                                      <th class="text-start bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
-                                        Ex-Divid. Date
-                                      </th>
-                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
-                                        Cash Amount
-                                      </th>
-                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
-                                        Record Date
-                                      </th>
-                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
-                                        Pay Date
-                                      </th>
-                                    </tr>
-                                  </thead>
-                                  <tbody class="shadow-md">
-                                    {#each rawData?.history as item}
-                                    <tr class="text-gray-200 odd:bg-[#27272A]">
-                                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]">
-                                        {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                                      </td>
-                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
-                                        {item?.adjDividend?.toFixed(3)}
-                                      </td>
-                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
-                                        {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
-                                      </td>
-                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
-                                        {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
-                                      </td>
-                                    </tr>
-                                  {/each}
-                                  </tbody>
-                                </table>
-                              </div>
-                              <span class="text-gray-200 text-sm italic">
-                                * Dividend amounts are adjusted for stock splits when applicable.
-                              </span>
-        
-                          {:else}
-                          <h1 class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10">
-                            No history found
-                          </h1>
-                          {/if}
-        
-        
-                      {:else}
-                      <div class="flex justify-center items-center h-80">
-                          <div class="relative">
-                          <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                              <span class="loading loading-spinner loading-md text-gray-400"></span>
-                          </label>
-                          </div>
-                      </div>
-                      {/if}
-                        
-  
-                      {/if}
-  
-  
-                       
-                    
-      
-                    </div>
-              </div>
+<section
+  class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
+>
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <div class="w-full mb-6">
+          <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
+            Dividends
+          </h1>
+
+          <div
+            class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+          >
+            <svg
+              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              ><path
+                fill="#a474f6"
+                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+              /></svg
+            >
+
+            {#if rawData?.history?.length !== 0}
+              {#if !dateDistance}
+                {$displayCompanyName} has an annual dividend of ${annualDividend}
+                per share, with a forward yield of
+                {dividendYield}%. The dividend is paid every
+                {payoutFrequency === 4
+                  ? "3 months"
+                  : payoutFrequency === 2
+                    ? "6 months"
+                    : payoutFrequency === 1
+                      ? "12 months"
+                      : "n/a"}
+                and the last ex-dividend date was
+                {new Date(exDividendDate)?.toLocaleString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                  daySuffix: "2-digit",
+                })}
+              {:else}
+                {$displayCompanyName} issued its most recent dividend on
+                {new Date(rawData?.history?.at(0)?.date)?.toLocaleString(
+                  "en-US",
+                  {
+                    month: "short",
+                    day: "numeric",
+                    year: "numeric",
+                    daySuffix: "2-digit",
+                  },
+                )}. Since then, the company has not distributed any further
+                dividends for over 12 months.
+              {/if}
+            {:else}
+              No dividend history available for {$displayCompanyName}.
+            {/if}
           </div>
-      
-          
-      </section>
-      
-      
-      
-          
-                  
-      <style>
-        .app {
-            height: 400px;
-            width: 100%;
-        }
-        
-        @media (max-width: 560px) {
-            .app {
-                width: 100%;
-                height: 300px;
-            }
-        }
-    
-        .chart {
-            width: 100%;
-        }
-    </style>
\ No newline at end of file
+        </div>
+
+        {#if rawData?.history?.length !== 0}
+          <div
+            class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 divide-x"
+          >
+            <div class="p-4 bp:p-5 sm:p-6">
+              <label
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Dividend Yield
+              </label>
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
+              >
+                {dividendYield !== "0.00" ? dividendYield : "0"}%
+              </div>
+            </div>
+            <div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast">
+              <label
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Annual Dividend
+              </label>
+
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
+              >
+                {annualDividend !== "0.00" ? annualDividend : "0"}
+              </div>
+            </div>
+            <div class="p-4 bp:p-5 sm:p-6 border-r border-contrast">
+              <label
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Ex-Dividend Date
+              </label>
+
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
+              >
+                {new Date(exDividendDate)?.toLocaleString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                  daySuffix: "2-digit",
+                })}
+              </div>
+            </div>
+
+            <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast">
+              <label
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Payout Frequency
+              </label>
+
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
+              >
+                {payoutFrequency === 4
+                  ? "Quartely"
+                  : payoutFrequency === 2
+                    ? "Half-Yearly"
+                    : payoutFrequency === 1
+                      ? "Annually"
+                      : "n/a"}
+              </div>
+            </div>
+            <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast">
+              <label
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Payout Ratio
+              </label>
+
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
+              >
+                {payoutRatio !== "0.00" ? payoutRatio : "0"}%
+              </div>
+            </div>
+            <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast">
+              <label
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Dividend Growth
+              </label>
+
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
+              >
+                {dividendGrowth !== "NaN" ? dividendGrowth + "%" : "-"}
+              </div>
+            </div>
+          </div>
+
+          <div
+            class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8"
+          >
+            <h3 class="text-xl text-white font-semibold">Dividends History</h3>
+          </div>
+
+          {#if isLoaded}
+            {#if rawData?.history?.length !== 0 && optionsDividend}
+              <div class="app w-full">
+                <Chart {init} options={optionsDividend} class="chart" />
+              </div>
+
+              <div
+                class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4"
+              >
+                <table
+                  class="table table-sm table-compact flex justify-start items-center w-full m-auto"
+                >
+                  <thead>
+                    <tr class="bg-[#09090B] border-b-slate-600 shadow-md">
+                      <th
+                        class="text-start bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
+                      >
+                        Ex-Divid. Date
+                      </th>
+                      <th
+                        class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
+                      >
+                        Cash Amount
+                      </th>
+                      <th
+                        class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
+                      >
+                        Record Date
+                      </th>
+                      <th
+                        class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
+                      >
+                        Pay Date
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="shadow-md">
+                    {#each rawData?.history as item}
+                      <tr class="text-gray-200 odd:bg-[#27272A]">
+                        <td
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]"
+                        >
+                          {new Date(item?.date)?.toLocaleString("en-US", {
+                            month: "short",
+                            day: "numeric",
+                            year: "numeric",
+                            daySuffix: "2-digit",
+                          })}
+                        </td>
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
+                        >
+                          {item?.adjDividend?.toFixed(3)}
+                        </td>
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
+                        >
+                          {item?.recordDate?.length !== 0
+                            ? new Date(item?.recordDate)?.toLocaleString(
+                                "en-US",
+                                {
+                                  month: "short",
+                                  day: "numeric",
+                                  year: "numeric",
+                                  daySuffix: "2-digit",
+                                },
+                              )
+                            : "n/a"}
+                        </td>
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
+                        >
+                          {item?.paymentDate?.length !== 0
+                            ? new Date(item?.paymentDate)?.toLocaleString(
+                                "en-US",
+                                {
+                                  month: "short",
+                                  day: "numeric",
+                                  year: "numeric",
+                                  daySuffix: "2-digit",
+                                },
+                              )
+                            : "n/a"}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+              <span class="text-gray-200 text-sm italic">
+                * Dividend amounts are adjusted for stock splits when
+                applicable.
+              </span>
+            {:else}
+              <h1
+                class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10"
+              >
+                No history found
+              </h1>
+            {/if}
+          {:else}
+            <div class="flex justify-center items-center h-80">
+              <div class="relative">
+                <label
+                  class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                >
+                  <span class="loading loading-spinner loading-md text-gray-400"
+                  ></span>
+                </label>
+              </div>
+            </div>
+          {/if}
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .app {
+    height: 400px;
+    width: 100%;
+  }
+
+  @media (max-width: 560px) {
+    .app {
+      width: 100%;
+      height: 300px;
+    }
+  }
+
+  .chart {
+    width: 100%;
+  }
+</style>
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index 0ed08988..74a55990 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -47,7 +47,7 @@
   class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
 >
   <div class="m-auto h-full overflow-hidden">
-    <main class="w-fit sm:w-full sm:max-w-2xl">
+    <main class="w-full">
       <div class="m-auto">
         <div
           class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
index ab49d3e2..35a76ccc 100644
--- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -13,9 +13,14 @@
       analyst: "analyst",
     };
 
-    const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
+    const foundSection = parts?.find((part) =>
+      Object?.values(sectionMap)?.includes(part),
+    );
 
-    displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
+    displaySubSection =
+      Object?.keys(sectionMap)?.find(
+        (key) => sectionMap[key] === foundSection,
+      ) || "overview";
   }
 
   function changeSubSection(state) {
@@ -39,7 +44,10 @@
 
   const unsubscribe = page.subscribe(($page) => {
     const splitRoute = $page.url.pathname.split("/");
-    const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview";
+    const routeState =
+      splitRoute[splitRoute.length - 1] !== "forecast"
+        ? splitRoute[splitRoute.length - 1]
+        : "overview";
 
     changeSubSection(routeState);
   });
@@ -49,37 +57,70 @@
   });
 </script>
 
-<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
+<section
+  class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
+>
   <div class="m-auto h-full overflow-hidden">
-    <main class="w-fit sm:w-full sm:max-w-2xl">
+    <main class="w-full">
       <div class="m-auto">
-        <div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2">
-          <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
+        <div
+          class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
+            ? 'overflow-auto scrollbar'
+            : 'no-scrollbar'} mb-2"
+        >
+          <ul
+            class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
+          >
             <li class="cursor-pointer flex flex-col items-center">
               <a
                 href={`/stocks/${$stockTicker}/forecast`}
                 on:click={() => changeSubSection("overview")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}"
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                'overview'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
               >
                 Overview
               </a>
-              <div class="{displaySubSection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+              <div
+                class="{displaySubSection === 'overview'
+                  ? 'bg-[#75D377]'
+                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
+              />
             </li>
             <li class="cursor-pointer flex flex-col items-center">
-              <a href={`/stocks/${$stockTicker}/forecast/ai`} on:click={() => changeSubSection("ai")} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ai' ? 'text-white ' : 'bg-[#09090B]'}">
+              <a
+                href={`/stocks/${$stockTicker}/forecast/ai`}
+                on:click={() => changeSubSection("ai")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                'ai'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
+              >
                 AI
               </a>
-              <div class="{displaySubSection === 'ai' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+              <div
+                class="{displaySubSection === 'ai'
+                  ? 'bg-[#75D377]'
+                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
+              />
             </li>
             <li class="cursor-pointer flex flex-col items-center">
               <a
                 href={`/stocks/${$stockTicker}/forecast/analyst`}
                 on:click={() => changeSubSection("analyst")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'analyst' ? 'text-white ' : 'bg-[#09090B]'}"
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                'analyst'
+                  ? 'text-white '
+                  : 'bg-[#09090B]'}"
               >
                 Analysts
               </a>
-              <div class="{displaySubSection === 'analyst' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+              <div
+                class="{displaySubSection === 'analyst'
+                  ? 'bg-[#75D377]'
+                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
+              />
             </li>
           </ul>
         </div>
diff --git a/src/routes/stocks/[tickerID]/forecast/+page.svelte b/src/routes/stocks/[tickerID]/forecast/+page.svelte
index 6ac03cb8..7101ecdb 100644
--- a/src/routes/stocks/[tickerID]/forecast/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+page.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystEstimateComponent } from "$lib/store";
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    stockTicker,
+    analystEstimateComponent,
+  } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
 
   export let data;
@@ -9,48 +14,53 @@
   let changeEBITDA = 0;
   let changeEPS = 0;
 
-function findIndex(data) {
-  const currentYear = new Date().getFullYear();
-  
-  // Find the index where the item's date is greater than the current year and revenue is null
-  const index = data?.findIndex((item) => item?.date > currentYear && item?.revenue === null);
-  
-  // If index is found and there is at least one item in the data for the current year with non-null revenue
-  if (index !== -1) {
-    const hasNonNullRevenue = data?.some((item) => item?.date === currentYear && item?.revenue !== null);
-    
-    // Add +1 to the index if the condition is met
-    return hasNonNullRevenue ? index + 1 : index;
-  }
-  
-  return index; // Return the index or -1 if not found
-}
+  function findIndex(data) {
+    const currentYear = new Date().getFullYear();
 
+    // Find the index where the item's date is greater than the current year and revenue is null
+    const index = data?.findIndex(
+      (item) => item?.date > currentYear && item?.revenue === null,
+    );
 
+    // If index is found and there is at least one item in the data for the current year with non-null revenue
+    if (index !== -1) {
+      const hasNonNullRevenue = data?.some(
+        (item) => item?.date === currentYear && item?.revenue !== null,
+      );
 
- const calculateChange = (current, previous) => {
-    if (previous !== undefined && previous !== 0) {
-        const change = ((Math.abs(current) / Math.abs(previous)) - 1) * 100;
-        // Preserve the direction of change (positive/negative)
-        const direction = (current < 0 || previous < 0) ? -1 : 1;
-        return change * direction;
-    } else {
-        return null;
+      // Add +1 to the index if the condition is met
+      return hasNonNullRevenue ? index + 1 : index;
     }
-};
 
-if (data?.getAnalystEstimate?.length !== 0) {
+    return index; // Return the index or -1 if not found
+  }
+
+  const calculateChange = (current, previous) => {
+    if (previous !== undefined && previous !== 0) {
+      const change = (Math.abs(current) / Math.abs(previous) - 1) * 100;
+      // Preserve the direction of change (positive/negative)
+      const direction = current < 0 || previous < 0 ? -1 : 1;
+      return change * direction;
+    } else {
+      return null;
+    }
+  };
+
+  if (data?.getAnalystEstimate?.length !== 0) {
     index = findIndex(data?.getAnalystEstimate);
 
-
     // Calculate changes using the helper function
-    const estimatedRevenueAvg = data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg;
+    const estimatedRevenueAvg =
+      data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg;
     const revenue = data?.getAnalystEstimate[index - 2]?.revenue;
-    const estimatedNetIncomeAvg = data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg;
+    const estimatedNetIncomeAvg =
+      data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg;
     const netIncome = data?.getAnalystEstimate[index - 2]?.netIncome;
-    const estimatedEbitdaAvg = data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg;
+    const estimatedEbitdaAvg =
+      data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg;
     const ebitda = data?.getAnalystEstimate[index - 2]?.ebitda;
-    const estimatedEpsAvg = data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg;
+    const estimatedEpsAvg =
+      data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg;
     const eps = data?.getAnalystEstimate[index - 2]?.eps;
 
     // Calculate percentage changes for each metric
@@ -58,8 +68,7 @@ if (data?.getAnalystEstimate?.length !== 0) {
     changeNetIncome = calculateChange(estimatedNetIncomeAvg, netIncome);
     changeEBITDA = calculateChange(estimatedEbitdaAvg, ebitda);
     changeEPS = calculateChange(estimatedEpsAvg, eps);
-
-}
+  }
 </script>
 
 <svelte:head>
@@ -69,111 +78,271 @@ if (data?.getAnalystEstimate?.length !== 0) {
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
     {$displayCompanyName} ({$stockTicker}) Forecast Overview · stocknear
   </title>
-  <meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <meta
+    name="description"
+    content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
+  />
 
   <!-- Other meta tags -->
-  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
-  <meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
+  />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
-  <meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
+  />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
-  <div class="flex justify-center m-auto h-full overflow-hidden w-full">
-    <div class="relative flex justify-center items-center overflow-hidden w-full">
+<section
+  class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
+>
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
       <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
-        <h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">Financial Forecast this Year</h2>
-        {#if data?.getAnalystEstimate?.length !== 0}
-          <div class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
-            <div class="p-4 bp:p-5 sm:p-6">
-              <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Revenue </label>
-              <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
-                <div class="flex items-baseline text-2xl font-semibold text-white">
-                  {abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg)}
-                </div>
-                <div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
-                  <svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeRevenue > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
-                    ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
-                  >
-                  {abbreviateNumber(changeRevenue?.toFixed(1))}%
-                </div>
-              </div>
-              <div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
-                from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.revenue)}
-              </div>
-            </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
-              <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Net Income </label>
-              <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
-                <div class="flex items-baseline text-2xl font-semibold text-white">
-                  {abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg)}
-                </div>
-                <div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
-                  <svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeNetIncome > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
-                    ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
-                  >
-                  {abbreviateNumber(changeNetIncome?.toFixed(1))}%
-                </div>
-              </div>
-              <div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
-                from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.netIncome)}
-              </div>
-            </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
-              <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> EBITDA </label>
-              <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
-                <div class="flex items-baseline text-2xl font-semibold text-white">
-                  {abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg)}
-                </div>
-                <div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
-                  <svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEBITDA > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
-                    ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
-                  >
-                  {abbreviateNumber(changeEBITDA?.toFixed(2))}%
-                </div>
-              </div>
-              <div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
-                from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.ebitda)}
-              </div>
-            </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
-              <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> EPS </label>
-              <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
-                <div class="flex items-baseline text-2xl font-semibold text-white">
-                  {data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg}
-                </div>
-                <div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
-                  <svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEPS > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
-                    ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
-                  >
-                  {abbreviateNumber(changeEPS?.toFixed(1))}%
-                </div>
-              </div>
-              <div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
-                from {data?.getAnalystEstimate[index - 2]?.eps}
-              </div>
-            </div>
-          </div>
-
-          <div class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
-            {#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
-              <svelte:component this={Comp} {data} />
-            {/await}
-          </div>
-        {:else}
-          <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
-            <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
-              ><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16" /></svg
+        <div class="w-full mb-6">
+          <h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+            Financial Forecast this Year
+          </h2>
+          {#if data?.getAnalystEstimate?.length !== 0}
+            <div
+              class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x"
             >
-            No analyst forecast available for {$displayCompanyName}.
-          </div>
-        {/if}
+              <div class="p-4 bp:p-5 sm:p-6">
+                <label
+                  class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
+                >
+                  Revenue
+                </label>
+                <div
+                  class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
+                >
+                  <div
+                    class="flex items-baseline text-2xl font-semibold text-white"
+                  >
+                    {abbreviateNumber(
+                      data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg,
+                    )}
+                  </div>
+                  <div
+                    class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
+                  >
+                    <svg
+                      class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeRevenue >
+                      0
+                        ? ''
+                        : 'rotate-180'}"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      style="max-width:40px"
+                      aria-hidden="true"
+                      ><path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M7 11l5-5m0 0l5 5m-5-5v12"
+                      ></path></svg
+                    >
+                    {abbreviateNumber(changeRevenue?.toFixed(1))}%
+                  </div>
+                </div>
+                <div
+                  class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
+                >
+                  from {abbreviateNumber(
+                    data?.getAnalystEstimate[index - 2]?.revenue,
+                  )}
+                </div>
+              </div>
+              <div
+                class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0"
+              >
+                <label
+                  class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
+                >
+                  Net Income
+                </label>
+                <div
+                  class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
+                >
+                  <div
+                    class="flex items-baseline text-2xl font-semibold text-white"
+                  >
+                    {abbreviateNumber(
+                      data?.getAnalystEstimate[index - 1]
+                        ?.estimatedNetIncomeAvg,
+                    )}
+                  </div>
+                  <div
+                    class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
+                  >
+                    <svg
+                      class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeNetIncome >
+                      0
+                        ? ''
+                        : 'rotate-180'}"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      style="max-width:40px"
+                      aria-hidden="true"
+                      ><path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M7 11l5-5m0 0l5 5m-5-5v12"
+                      ></path></svg
+                    >
+                    {abbreviateNumber(changeNetIncome?.toFixed(1))}%
+                  </div>
+                </div>
+                <div
+                  class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
+                >
+                  from {abbreviateNumber(
+                    data?.getAnalystEstimate[index - 2]?.netIncome,
+                  )}
+                </div>
+              </div>
+              <div
+                class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0"
+              >
+                <label
+                  class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
+                >
+                  EBITDA
+                </label>
+                <div
+                  class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
+                >
+                  <div
+                    class="flex items-baseline text-2xl font-semibold text-white"
+                  >
+                    {abbreviateNumber(
+                      data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg,
+                    )}
+                  </div>
+                  <div
+                    class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
+                  >
+                    <svg
+                      class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEBITDA >
+                      0
+                        ? ''
+                        : 'rotate-180'}"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      style="max-width:40px"
+                      aria-hidden="true"
+                      ><path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M7 11l5-5m0 0l5 5m-5-5v12"
+                      ></path></svg
+                    >
+                    {abbreviateNumber(changeEBITDA?.toFixed(2))}%
+                  </div>
+                </div>
+                <div
+                  class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
+                >
+                  from {abbreviateNumber(
+                    data?.getAnalystEstimate[index - 2]?.ebitda,
+                  )}
+                </div>
+              </div>
+              <div
+                class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0"
+              >
+                <label
+                  class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
+                >
+                  EPS
+                </label>
+                <div
+                  class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
+                >
+                  <div
+                    class="flex items-baseline text-2xl font-semibold text-white"
+                  >
+                    {data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg}
+                  </div>
+                  <div
+                    class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
+                  >
+                    <svg
+                      class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEPS >
+                      0
+                        ? ''
+                        : 'rotate-180'}"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      style="max-width:40px"
+                      aria-hidden="true"
+                      ><path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M7 11l5-5m0 0l5 5m-5-5v12"
+                      ></path></svg
+                    >
+                    {abbreviateNumber(changeEPS?.toFixed(1))}%
+                  </div>
+                </div>
+                <div
+                  class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
+                >
+                  from {data?.getAnalystEstimate[index - 2]?.eps}
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent
+                ? 'hidden'
+                : ''}"
+            >
+              {#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          {:else}
+            <div
+              class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+            >
+              <svg
+                class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+                ><path
+                  fill="#a474f6"
+                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+                /></svg
+              >
+              No analyst forecast available for {$displayCompanyName}.
+            </div>
+          {/if}
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index 8e2e1881..d7d8d896 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -1,122 +1,148 @@
-<script lang='ts'>
-    import { stockTicker, screenWidth } from "$lib/store";
-    import { page } from "$app/stores";
-    
-    let displaySubSection = '';
-    
-    
-    
-    
-    if (!displaySubSection || displaySubSection.length === 0) {
-      const parts = $page?.url?.pathname.split('/');
-      const sectionMap = {
-        'congress-trading': 'congress-trading',
-        'transcripts': 'transcripts',
-      };
-    
-      const foundSection = parts?.find(part => Object?.values(sectionMap)?.includes(part));
-    
-      displaySubSection = Object?.keys(sectionMap)?.find(key => sectionMap[key] === foundSection) || 'insider';
-    }
-    
-    
-    
-    function changeSubSection(state) {
-      const subSectionMap = {
-        'congress-trading': '/insider/congress-trading',
-        'transcripts': '/insider/transcripts',
-      };
-    
-      if (state !== 'insider' && subSectionMap[state]) {
-        displaySubSection = state;
-        //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
-      } else {
-        displaySubSection = state;
-        //goto(`/stocks/${$stockTicker}/insider`);
-      }
-    }
-    
-    
-    
-    </script>
-    
-    <section class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
-      <div class="h-full overflow-hidden">
-                <main class="w-full">
-                                        
- 
-                        <div class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
-                          <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2">
-                            <li class="cursor-pointer flex flex-col items-center">
-                              <a href={`/stocks/${$stockTicker}/insider`} on:click={() => (changeSubSection('insider'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'insider' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                Insider Trading
-                              </a>
-                              <div class="{displaySubSection === 'insider' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]" />
-                            </li>
-                            <li class="cursor-pointer flex flex-col items-center">
-                              <a href={`/stocks/${$stockTicker}/insider/congress-trading`} on:click={() => (changeSubSection('congress-trading'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'congress-trading' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                Congress Trading
-                              </a>
-                              <div class="{displaySubSection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]" />
-                            </li>
-                            <li class="cursor-pointer flex flex-col items-center">
-                              <a href={`/stocks/${$stockTicker}/insider/transcripts`} on:click={() => (changeSubSection('transcripts'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'transcripts' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                Transcripts
-                              </a>
-                              <div class="{displaySubSection === 'transcripts' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
-                            </li>
-                          </ul>
-                        </div>
+<script lang="ts">
+  import { stockTicker, screenWidth } from "$lib/store";
+  import { page } from "$app/stores";
 
-                        
-    
-                </main>
-    
-                <slot/>
-            </div>
-    </section>
-    
-    
-    
-    
-    <style lang='scss'>
-       
+  let displaySubSection = "";
 
-      .scrollbar {
-          display: grid;
-          grid-gap: 17px;
-          grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
-          grid-auto-flow: column;
-          overflow-x: auto;
-          scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
-          scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
-      }
-      
-      /* Custom scrollbar for Webkit (Chrome, Safari) */
-      .scrollbar::-webkit-scrollbar {
-          width: 0; /* Hide the width of the scrollbar */
-          height: 0; /* Hide the height of the scrollbar */
-      }
-      
-      .scrollbar::-webkit-scrollbar-thumb {
-          background: transparent; /* Make the thumb transparent */
-      }
-      
-      ::-webkit-scrollbar {
-          height: 7px;
-          width: 10px;
-          background: #09090B;
-      }
-      
-      ::-webkit-scrollbar-thumb {
-          background: #6B6F79;
-          -webkit-border-radius: 1ex;
-          -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
-      }
-      
-      ::-webkit-scrollbar-corner {
-          background: #09090B;
-      }
-      
-      
-      </style>
\ No newline at end of file
+  if (!displaySubSection || displaySubSection.length === 0) {
+    const parts = $page?.url?.pathname.split("/");
+    const sectionMap = {
+      "congress-trading": "congress-trading",
+      transcripts: "transcripts",
+    };
+
+    const foundSection = parts?.find((part) =>
+      Object?.values(sectionMap)?.includes(part),
+    );
+
+    displaySubSection =
+      Object?.keys(sectionMap)?.find(
+        (key) => sectionMap[key] === foundSection,
+      ) || "insider";
+  }
+
+  function changeSubSection(state) {
+    const subSectionMap = {
+      "congress-trading": "/insider/congress-trading",
+      transcripts: "/insider/transcripts",
+    };
+
+    if (state !== "insider" && subSectionMap[state]) {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
+    } else {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}/insider`);
+    }
+  }
+</script>
+
+<section
+  class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
+>
+  <div class="h-full overflow-hidden">
+    <main class="w-full">
+      <div
+        class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
+          ? 'overflow-auto scrollbar no-scrollbar'
+          : ''} mb-2"
+      >
+        <ul
+          class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2"
+        >
+          <li class="cursor-pointer flex flex-col items-center">
+            <a
+              href={`/stocks/${$stockTicker}/insider`}
+              on:click={() => changeSubSection("insider")}
+              class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+              'insider'
+                ? 'text-white '
+                : 'bg-[#09090B]'}"
+            >
+              Insider Trading
+            </a>
+            <div
+              class="{displaySubSection === 'insider'
+                ? 'bg-[#75D377]'
+                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
+            />
+          </li>
+          <li class="cursor-pointer flex flex-col items-center">
+            <a
+              href={`/stocks/${$stockTicker}/insider/congress-trading`}
+              on:click={() => changeSubSection("congress-trading")}
+              class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+              'congress-trading'
+                ? 'text-white '
+                : 'bg-[#09090B]'}"
+            >
+              Congress Trading
+            </a>
+            <div
+              class="{displaySubSection === 'congress-trading'
+                ? 'bg-[#75D377]'
+                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
+            />
+          </li>
+          <li class="cursor-pointer flex flex-col items-center">
+            <a
+              href={`/stocks/${$stockTicker}/insider/transcripts`}
+              on:click={() => changeSubSection("transcripts")}
+              class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+              'transcripts'
+                ? 'text-white '
+                : 'bg-[#09090B]'}"
+            >
+              Transcripts
+            </a>
+            <div
+              class="{displaySubSection === 'transcripts'
+                ? 'bg-[#75D377]'
+                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
+            />
+          </li>
+        </ul>
+      </div>
+    </main>
+
+    <slot />
+  </div>
+</section>
+
+<style lang="scss">
+  .scrollbar {
+    display: grid;
+    grid-gap: 17px;
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    grid-auto-flow: column;
+    overflow-x: auto;
+    scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
+    scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
+  }
+
+  /* Custom scrollbar for Webkit (Chrome, Safari) */
+  .scrollbar::-webkit-scrollbar {
+    width: 0; /* Hide the width of the scrollbar */
+    height: 0; /* Hide the height of the scrollbar */
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: transparent; /* Make the thumb transparent */
+  }
+
+  ::-webkit-scrollbar {
+    height: 7px;
+    width: 10px;
+    background: #09090b;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #6b6f79;
+    -webkit-border-radius: 1ex;
+    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: #09090b;
+  }
+</style>
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 56d4eb8b..436994e7 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -11,7 +11,6 @@
   import { Button } from "$lib/components/shadcn/button/index.js";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
-
   export let data;
   let isLoaded = false;
 
@@ -22,7 +21,6 @@
   let quarter = Math.floor(now.getMonth() / 3) + 1;
   let yearRange = [];
 
-
   function calculateInsiderTradingStatistics(data, year, quarter) {
     // Helper function to check if the transaction date is within the current quarter
     const isInCurrentQuarter = (transactionDate) => {
@@ -114,9 +112,7 @@
 
     yearRange = Array.from(
       new Set(
-        rawData?.map((item) =>
-          (new Date(item?.transactionDate))?.getFullYear(),
-        ),
+        rawData?.map((item) => new Date(item?.transactionDate)?.getFullYear()),
       ),
     )?.sort((a, b) => b - a);
     if (yearRange?.length > 0) {
@@ -150,7 +146,6 @@
     "n/a": { text: "n/a", class: "text-gray-300" },
   };
 
-
   let columns = [
     { key: "reportingName", label: "Name", align: "left" },
     { key: "transactionDate", label: "Date", align: "right" },
@@ -167,8 +162,7 @@
     value: { order: "none", type: "number" },
   };
 
-
-    const sortData = (key) => {
+  const sortData = (key) => {
     // Reset all other keys to 'none' except the current key
     for (const k in sortOrders) {
       if (k !== key) {
@@ -188,7 +182,7 @@
 
     // Reset to original data when 'none' and stop further sorting
     if (sortOrder === "none") {
-      insiderTradingList = [...originalData]?.slice(0,50); // Reset to original data (spread to avoid mutation)
+      insiderTradingList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
       return;
     }
 
@@ -223,11 +217,11 @@
     };
 
     // Sort using the generic comparison function
-    insiderTradingList = [...originalData].sort(compareValues)?.slice(0,50);
+    insiderTradingList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
 
-$: {
-    if((year || quarter ) && typeof window !== 'undefined') {
+  $: {
+    if ((year || quarter) && typeof window !== "undefined") {
       statistics = calculateInsiderTradingStatistics(rawData, year, quarter);
       buySellRatio =
         statistics?.soldShares !== 0
@@ -276,14 +270,14 @@ $: {
 </svelte:head>
 
 <section
-  class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"
+  class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
 >
-  <div class="flex justify-center m-auto h-full overflow-hidden w-full">
+  <div class="w-full flex h-full overflow-hidden">
     <div
-      class="relative flex justify-center items-center overflow-hidden w-full"
+      class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      <div class="xl:p-7 w-full m-auto mt-2">
-        <div class="mb-6">
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <div class="w-full mb-6">
           <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
             Insider Trading
           </h1>
@@ -391,13 +385,13 @@ $: {
                       </DropdownMenu.Label>
                       <DropdownMenu.Separator />
                       <DropdownMenu.Group>
-                        {#each [1,2,3,4] as index}
-                        <DropdownMenu.Item
-                          on:click={() => (quarter = index)}
-                          class="cursor-pointer hover:bg-[#27272A]"
-                        >
-                          Q{index}
-                        </DropdownMenu.Item>
+                        {#each [1, 2, 3, 4] as index}
+                          <DropdownMenu.Item
+                            on:click={() => (quarter = index)}
+                            class="cursor-pointer hover:bg-[#27272A]"
+                          >
+                            Q{index}
+                          </DropdownMenu.Item>
                         {/each}
                       </DropdownMenu.Group>
                     </DropdownMenu.Content>
@@ -613,9 +607,9 @@ $: {
               <table
                 class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
               >
-               <thead>
-                    <TableHeader {columns} {sortOrders} {sortData} />
-                  </thead>
+                <thead>
+                  <TableHeader {columns} {sortOrders} {sortData} />
+                </thead>
                 <tbody>
                   {#each data?.user?.tier === "Pro" ? insiderTradingList : insiderTradingList?.slice(0, 3) as item, index}
                     {#if item?.price > 0}
@@ -675,9 +669,7 @@ $: {
                                 class={transactionStyles[item?.transactionType]
                                   ?.class}
                               >
-                                {abbreviateNumber(
-                                  item?.value,
-                                )}
+                                {abbreviateNumber(item?.value)}
                               </div>
                               <div
                                 class="{transactionStyles[item?.transactionType]
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index c9ca8357..c0820002 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -1,24 +1,28 @@
 <script lang="ts">
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    screenWidth,
+    stockTicker,
+    setCache,
+    getCache,
+  } 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, LineChart } from "echarts/charts";
+  import { GridComponent, TooltipComponent } from "echarts/components";
+  import { CanvasRenderer } from "echarts/renderers";
 
-  import {numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker, setCache, getCache} 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,LineChart } from 'echarts/charts'
-  import { GridComponent, TooltipComponent } from 'echarts/components'
-  import { CanvasRenderer } from 'echarts/renderers'
-
-  use([BarChart,LineChart, GridComponent, TooltipComponent, CanvasRenderer])
-  
-  
-export let data;
-let isLoaded = false;
-let activeEX = 0;
-let activeIdx = 0;
+  use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
+  export let data;
+  let isLoaded = false;
+  let activeEX = 0;
+  let activeIdx = 0;
 
   const getDailyTransactions = async (transactionId) => {
     let output;
@@ -47,1025 +51,1281 @@ let activeIdx = 0;
     return output;
   };
 
-    let rawPlotData = data?.getOptionsPlotData;
-    let filteredList = [];
-    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 optionsEX;
+  let rawPlotData = data?.getOptionsPlotData;
+  let filteredList = [];
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
 
-    let rawData = data?.getOptionsHistoricalData;
-    let optionList = rawData?.slice(0,30);
-    let optionChainList = data?.getOptionsChainData?.at(0)?.chain || [];
+  let optionsPlotData = data?.getOptionsPlotData?.plot;
+  let displayData = "volume";
+  let options;
+  let optionsEX;
 
-    let totalVolume //= data?.getOptionsPlotData?.totalVolume;
-    
-    let totalOpenInterest //= data?.getOptionsPlotData?.totalOpenInterest;
-    
-    
-    // Computing the put-call ratio for open interest
-    let putCallOpenInterestRatio //= data?.getOptionsPlotData?.putCallOpenInterestRatio;
-    let putCallRatio;
-    let displayTotalVolume //= new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
-    let displayTotalOpenInterest //= new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
-    let displayTotalPutCall
-    let dateList //= data?.getOptionsPlotData?.dateList;
-    
-    let callVolumeList //= data?.getOptionsPlotData?.callVolumeList;
-    let putVolumeList //= data?.getOptionsPlotData?.putVolumeList;
-    let callOpenInterestList //= data?.getOptionsPlotData?.callOpenInterestList;
-    let putOpenInterestList //= data?.getOptionsPlotData?.putOpenInterestList;
-    
-    
-    let displayTimePeriod = 'threeMonths'
+  let rawData = data?.getOptionsHistoricalData;
+  let optionList = rawData?.slice(0, 30);
+  let optionChainList = data?.getOptionsChainData?.at(0)?.chain || [];
 
+  let totalVolume; //= data?.getOptionsPlotData?.totalVolume;
 
-    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;
-    }
-    
+  let totalOpenInterest; //= data?.getOptionsPlotData?.totalOpenInterest;
 
-    function changeTimePeriod(event)
-    {
-      displayTimePeriod = event.target.value;
-    }
-    
-  function changeVolumeOI(event)
-    {
-      displayData = event.target.value;
-    }
-    
-    
-function plotData(callData, putData) {
+  // Computing the put-call ratio for open interest
+  let putCallOpenInterestRatio; //= data?.getOptionsPlotData?.putCallOpenInterestRatio;
+  let putCallRatio;
+  let displayTotalVolume; //= new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
+  let displayTotalOpenInterest; //= new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
+  let displayTotalPutCall;
+  let dateList; //= data?.getOptionsPlotData?.dateList;
+
+  let callVolumeList; //= data?.getOptionsPlotData?.callVolumeList;
+  let putVolumeList; //= data?.getOptionsPlotData?.putVolumeList;
+  let callOpenInterestList; //= data?.getOptionsPlotData?.callOpenInterestList;
+  let putOpenInterestList; //= data?.getOptionsPlotData?.putOpenInterestList;
+
+  let displayTimePeriod = "threeMonths";
+
+  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 changeTimePeriod(event) {
+    displayTimePeriod = event.target.value;
+  }
+
+  function changeVolumeOI(event) {
+    displayData = event.target.value;
+  }
+
+  function plotData(callData, putData) {
     const options = {
       animation: false,
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-            type: 'shadow'
-            }
+      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, // Disable x-axis grid lines
       },
-      
-       axisLabel: {
-        show: false // Hide y-axis labels
-      }
-    },
-    { 
-        type: 'value',
-        splitLine: {
-            show: false, // Disable x-axis grid lines
+      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}`;
+            },
+          },
         },
-        position: 'right',
-        axisLabel: {
-          show: false // Hide y-axis labels
-       },
-    },
-    ],
-        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'
-                },
-            },
-        ]
+      ],
+      yAxis: [
+        {
+          type: "value",
+          splitLine: {
+            show: false, // Disable x-axis grid lines
+          },
+
+          axisLabel: {
+            show: false, // Hide y-axis labels
+          },
+        },
+        {
+          type: "value",
+          splitLine: {
+            show: false, // Disable x-axis grid lines
+          },
+          position: "right",
+          axisLabel: {
+            show: false, // Hide y-axis labels
+          },
+        },
+      ],
+      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 getEXPlot(state) {
-  let dates = [];
-  let valueList = [];
-  let priceList = [];
-  
-  data?.getOptionsGexData?.forEach(item => {
-
-  dates?.push(item?.date);
-  valueList?.push(item[state]);
-  priceList?.push(item?.close)
-
-  });
+  function getEXPlot(state) {
+    let dates = [];
+    let valueList = [];
+    let priceList = [];
 
+    data?.getOptionsGexData?.forEach((item) => {
+      dates?.push(item?.date);
+      valueList?.push(item[state]);
+      priceList?.push(item?.close);
+    });
 
     const option = {
-    silent: true,
-    animation: false,
-    tooltip: {
-        trigger: 'axis',
+      silent: true,
+      animation: false,
+      tooltip: {
+        trigger: "axis",
         hideDelay: 100, // Set the delay in milliseconds
-    },
-    grid: {
-        left: '0%',
-        right: '0%',
-        bottom: '0%',
-        top: '5%',
-        containLabel: true
-    },
-    xAxis: {
-        type: 'category',
+      },
+      grid: {
+        left: "0%",
+        right: "0%",
+        bottom: "0%",
+        top: "5%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
         boundaryGap: false,
         data: dates,
         axisLabel: {
-        color: '#fff',
-        formatter: function (value) {
+          color: "#fff",
+          formatter: function (value) {
             // Assuming dates are in the format 'yyyy-mm-dd'
             // Extract the month and day from the date string and convert the month to its abbreviated name
-            const dateParts = value.split('-');
+            const dateParts = value.split("-");
             const day = dateParts[2].substring(0); // Extracting the last two digits of the year
             const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
             return `${day} ${monthNames[monthIndex]}`;
-        }
-        }
-    },
-    yAxis: [
-    {
-      type: 'value',
-      splitLine: {
-            show: false, // Disable x-axis grid lines
+          },
+        },
       },
-      
-       axisLabel: {
-        show: false // Hide y-axis labels
-      }
-    },
-    { 
-        type: 'value',
-        splitLine: {
+      yAxis: [
+        {
+          type: "value",
+          splitLine: {
             show: false, // Disable x-axis grid lines
-        },
-        position: 'right',
-        axisLabel: {
-          show: false // Hide y-axis labels
-       },
-    },
-    ],
-    series: [
-        {
-          name: 'Price',
-            data: priceList,
-            type: 'line',
-            yAxisIndex: 0,
-            itemStyle: {
-                color: '#fff' // Change bar color to white
-            },
-            showSymbol: false
+          },
+
+          axisLabel: {
+            show: false, // Hide y-axis labels
+          },
         },
         {
-            name: state?.toUpperCase(),
-            data: valueList,
-            type: 'bar',
-            yAxisIndex: 1,
-            itemStyle: {
-                color: '#8e53f4' // Change bar color to white
-            },
-            
+          type: "value",
+          splitLine: {
+            show: false, // Disable x-axis grid lines
+          },
+          position: "right",
+          axisLabel: {
+            show: false, // Hide y-axis labels
+          },
         },
-    ]
+      ],
+      series: [
+        {
+          name: "Price",
+          data: priceList,
+          type: "line",
+          yAxisIndex: 0,
+          itemStyle: {
+            color: "#fff", // Change bar color to white
+          },
+          showSymbol: false,
+        },
+        {
+          name: state?.toUpperCase(),
+          data: valueList,
+          type: "bar",
+          yAxisIndex: 1,
+          itemStyle: {
+            color: "#8e53f4", // Change bar color to white
+          },
+        },
+      ],
     };
 
-
-return option;
-}
-
-
-function filterDate(filteredList, displayTimePeriod) {
-  const now = Date.now();
-  let cutoffDate;
-
-  switch (displayTimePeriod) {
-    case 'oneWeek':
-      cutoffDate = now - 7 * 24 * 60 * 60 * 1000;
-      break;
-    case 'oneMonth':
-      cutoffDate = now - 30 * 24 * 60 * 60 * 1000;
-      break;
-    case 'threeMonths':
-      cutoffDate = now - 90 * 24 * 60 * 60 * 1000;
-      break;
-    case 'sixMonths':
-      cutoffDate = now - 180 * 24 * 60 * 60 * 1000;
-      break;
-    case 'oneYear':
-      cutoffDate = now - 365 * 24 * 60 * 60 * 1000;
-      break;
-    default:
-      throw new Error('Invalid time period');
+    return option;
   }
 
-  return filteredList?.filter(item => {
-    // Convert YYYY-MM-DD to a timestamp
-    const [year, month, day] = item?.date?.split('-')?.map(Number);
-    const itemTimestamp = new Date(year, month - 1, day)?.getTime();
-   
-    return itemTimestamp >= cutoffDate;
-  });
-}
+  function filterDate(filteredList, displayTimePeriod) {
+    const now = Date.now();
+    let cutoffDate;
 
-
-function processPlotData(filteredList: any[]) {
-  const totals = filteredList?.reduce((acc, obj) => {
-    acc.callVolume += obj?.CALL?.volume;
-    acc.putVolume += obj?.PUT?.volume;
-    acc.callOpenInterest += obj?.CALL?.open_interest;
-    acc.putOpenInterest += obj?.PUT?.open_interest;
-    return acc;
-  }, { callVolume: 0, putVolume: 0, callOpenInterest: 0, putOpenInterest: 0 });
-
-  putCallRatio = (totals.putVolume / totals.callVolume)?.toFixed(2);
-  totalVolume = totals.callVolume + totals.putVolume;
-  totalOpenInterest = totals.callOpenInterest + totals.putOpenInterest;
-  putCallOpenInterestRatio = (totals.putOpenInterest / totals.callOpenInterest)?.toFixed(2);
-
-  dateList = filteredList?.map(item => item.date);
-  callVolumeList = filteredList?.map(item => item?.CALL?.volume);
-  putVolumeList = filteredList?.map(item => item?.PUT?.volume);
-  callOpenInterestList = filteredList?.map(item => item?.CALL?.open_interest);
-  putOpenInterestList = filteredList?.map(item => item?.PUT?.open_interest);
-
-  displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(totalVolume);
-  displayTotalPutCall = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(putCallRatio);
-  displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(totalOpenInterest);
-
-  // Determine the type of plot data to generate based on displayData
-  if (displayData === 'volume') {
-      options = plotData(callVolumeList, putVolumeList);
-    } else if (displayData === 'openInterest') {
-      options = plotData(callOpenInterestList, putOpenInterestList);
+    switch (displayTimePeriod) {
+      case "oneWeek":
+        cutoffDate = now - 7 * 24 * 60 * 60 * 1000;
+        break;
+      case "oneMonth":
+        cutoffDate = now - 30 * 24 * 60 * 60 * 1000;
+        break;
+      case "threeMonths":
+        cutoffDate = now - 90 * 24 * 60 * 60 * 1000;
+        break;
+      case "sixMonths":
+        cutoffDate = now - 180 * 24 * 60 * 60 * 1000;
+        break;
+      case "oneYear":
+        cutoffDate = now - 365 * 24 * 60 * 60 * 1000;
+        break;
+      default:
+        throw new Error("Invalid time period");
     }
 
-}
+    return filteredList?.filter((item) => {
+      // Convert YYYY-MM-DD to a timestamp
+      const [year, month, day] = item?.date?.split("-")?.map(Number);
+      const itemTimestamp = new Date(year, month - 1, day)?.getTime();
 
-    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 () => {
-  if(data?.getOptionsGexData?.length !== 0) {
-    optionsEX = getEXPlot('gex');
+      return itemTimestamp >= cutoffDate;
+    });
   }
-  
 
-  if(data?.user?.tier === 'Pro') {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-        window.removeEventListener('scroll', handleScroll);
-    };
+  function processPlotData(filteredList: any[]) {
+    const totals = filteredList?.reduce(
+      (acc, obj) => {
+        acc.callVolume += obj?.CALL?.volume;
+        acc.putVolume += obj?.PUT?.volume;
+        acc.callOpenInterest += obj?.CALL?.open_interest;
+        acc.putOpenInterest += obj?.PUT?.open_interest;
+        return acc;
+      },
+      { callVolume: 0, putVolume: 0, callOpenInterest: 0, putOpenInterest: 0 },
+    );
+
+    putCallRatio = (totals.putVolume / totals.callVolume)?.toFixed(2);
+    totalVolume = totals.callVolume + totals.putVolume;
+    totalOpenInterest = totals.callOpenInterest + totals.putOpenInterest;
+    putCallOpenInterestRatio = (
+      totals.putOpenInterest / totals.callOpenInterest
+    )?.toFixed(2);
+
+    dateList = filteredList?.map((item) => item.date);
+    callVolumeList = filteredList?.map((item) => item?.CALL?.volume);
+    putVolumeList = filteredList?.map((item) => item?.PUT?.volume);
+    callOpenInterestList = filteredList?.map(
+      (item) => item?.CALL?.open_interest,
+    );
+    putOpenInterestList = filteredList?.map((item) => item?.PUT?.open_interest);
+
+    displayTotalVolume = new Intl.NumberFormat("en", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(totalVolume);
+    displayTotalPutCall = new Intl.NumberFormat("en", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(putCallRatio);
+    displayTotalOpenInterest = new Intl.NumberFormat("en", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(totalOpenInterest);
+
+    // Determine the type of plot data to generate based on displayData
+    if (displayData === "volume") {
+      options = plotData(callVolumeList, putVolumeList);
+    } else if (displayData === "openInterest") {
+      options = plotData(callOpenInterestList, putOpenInterestList);
+    }
   }
-})
 
+  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];
+    }
+  }
 
-function daysLeft(targetDate) {
-  const targetTime = new Date(targetDate).getTime();
-  const currentTime = new Date().getTime();
-  const difference = targetTime - currentTime;
+  onMount(async () => {
+    if (data?.getOptionsGexData?.length !== 0) {
+      optionsEX = getEXPlot("gex");
+    }
 
-  const millisecondsPerDay = 1000 * 60 * 60 * 24;
-  const daysLeft = Math?.ceil(difference / millisecondsPerDay);
+    if (data?.user?.tier === "Pro") {
+      window.addEventListener("scroll", handleScroll);
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
+  });
 
-  return daysLeft;
-}
+  function daysLeft(targetDate) {
+    const targetTime = new Date(targetDate).getTime();
+    const currentTime = new Date().getTime();
+    const difference = targetTime - currentTime;
 
-let optionHistoryList = [];
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const daysLeft = Math?.ceil(difference / millisecondsPerDay);
 
-let container;
-let rawDataHistory = [];
+    return daysLeft;
+  }
 
-function getScroll() {
+  let optionHistoryList = [];
+
+  let container;
+  let rawDataHistory = [];
+
+  function getScroll() {
     const scrollThreshold = container.scrollHeight * 0.8; // 80% of the container height
 
     // Check if the user has scrolled to the bottom based on the threshold
-    const isBottom = container.scrollTop + container.clientHeight >= scrollThreshold;
+    const isBottom =
+      container.scrollTop + container.clientHeight >= scrollThreshold;
 
     // Only load more data if at the bottom and there is still data to load
     if (isBottom && optionHistoryList?.length !== rawDataHistory?.length) {
-        const nextIndex = optionHistoryList.length;  // Ensure optionHistoryList is defined
-        const filteredNewResults = rawDataHistory.slice(nextIndex, nextIndex + 25);  // Ensure rawData is defined
-        optionHistoryList = [...optionHistoryList, ...filteredNewResults];
+      const nextIndex = optionHistoryList.length; // Ensure optionHistoryList is defined
+      const filteredNewResults = rawDataHistory.slice(
+        nextIndex,
+        nextIndex + 25,
+      ); // Ensure rawData is defined
+      optionHistoryList = [...optionHistoryList, ...filteredNewResults];
     }
-}
+  }
 
-async function handleViewData(date:string) {
-  isLoaded = false;
-  optionDetailsDesktopModal?.showModal()
+  async function handleViewData(date: string) {
+    isLoaded = false;
+    optionDetailsDesktopModal?.showModal();
 
-  rawDataHistory = await getDailyTransactions($stockTicker+'-'+date);
+    rawDataHistory = await getDailyTransactions($stockTicker + "-" + date);
 
-  rawDataHistory?.forEach((item) => {
-        item.dte = daysLeft(item?.date_expiration);
-      });
-  
-  optionHistoryList = rawDataHistory?.slice(0,20)
-  isLoaded = true;
-}
+    rawDataHistory?.forEach((item) => {
+      item.dte = daysLeft(item?.date_expiration);
+    });
 
-function handleMode(i) {
+    optionHistoryList = rawDataHistory?.slice(0, 20);
+    isLoaded = true;
+  }
+
+  function handleMode(i) {
     activeIdx = i;
   }
-  
-  const tabs = [
-      {
-        title: "Historical Data",
-      },
-      {
-        title: "Chain Data",
-      },
-    ];
-  
-function changeStatement(event)
-{
-    optionChainList = (data?.getOptionsChainData?.filter(item => item?.date_expiration === event.target.value))?.at(0)?.chain || [];
-}
 
+  const tabs = [
+    {
+      title: "Historical Data",
+    },
+    {
+      title: "Chain Data",
+    },
+  ];
+
+  function changeStatement(event) {
+    optionChainList =
+      data?.getOptionsChainData
+        ?.filter((item) => item?.date_expiration === event.target.value)
+        ?.at(0)?.chain || [];
+  }
 
   const tabEX = [
-      {
-        title: "GEX",
-      },
-      {
-        title: "DEX",
-      },
-    ];
+    {
+      title: "GEX",
+    },
+    {
+      title: "DEX",
+    },
+  ];
 
-
-function handleEXMode(i) {
-  activeEX = i;
-  optionsEX = getEXPlot(activeEX === 0 ? 'gex' : 'dex');
-}
-
-
-
-$: {
-  if ((displayTimePeriod || displayData) && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
-    // Filter the raw plot data based on the selected time period
-    filteredList = filterDate(rawPlotData, displayTimePeriod);
-    
-    // Process the filtered list to generate the plot data
-    processPlotData(filteredList);
+  function handleEXMode(i) {
+    activeEX = i;
+    optionsEX = getEXPlot(activeEX === 0 ? "gex" : "dex");
   }
-}
 
+  $: {
+    if (
+      (displayTimePeriod || displayData) &&
+      optionsPlotData?.length !== 0 &&
+      typeof window !== "undefined"
+    ) {
+      // Filter the raw plot data based on the selected time period
+      filteredList = filterDate(rawPlotData, displayTimePeriod);
 
-  
-    
-    
-    </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="xl:p-7 w-full m-auto mt-2 ">
-                            <div class="mb-6">
-                                <h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
-                                    Unsual Options Activity
-                                </h2>
-        
-                                <div class="w-fit 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}
-                                    1 Year 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="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
-                          <div class="p-4 bp:p-5 sm:p-6">
-                            <label for="totaVolume" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                              Total Volume
-                              <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={"totaVolume"}
-                            />
-                            </label>
-                               
-                              <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
-                                {displayTotalVolume}
-                              </div> 
-                          </div>
-                          <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
-                            <label for="totalOpenInterest" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                              Total OI 
-                              <InfoModal
-                              title={"Total OI"}
-                              content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
-                              id={"totalOpenInterest"}
-                            />
-                            </label>
-                              <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
-                                {displayTotalOpenInterest}
-                              </div> 
-                          </div>
-                          <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
-                            <label for="putCallRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                              P/C Ratio
-                              <InfoModal
-                              title={"P/C Ratio"}
-                              content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
-                              id={"putCallRatio"}
-                              />
-                            </label> 
-                              <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
-                                {putCallRatio !== 'Infinity' ? putCallRatio : '> 1'}
-                              </div> 
-                          </div>
-                          <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
-                            <label for="openInteresteRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                              OI P/C Ratio
-                              <InfoModal
-                                title={"OI P/C 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={"openInteresteRatio"}
-                                />
-                            </label>   
-   
-                              <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
-                                {putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}
-                              </div> 
-                          </div>
-                        </div>
+      // Process the filtered list to generate the plot data
+      processPlotData(filteredList);
+    }
+  }
+</script>
 
-                                <div class="flex flex-row items-center w-full mt-10">
-                                    <select class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeTimePeriod}>
-                                        <option disabled>Choose a time period</option>
-                                        <option value="oneWeek">1 Week</option>
-                                        <option value="oneMonth" selected>1 Month</option>
-                                        <option value="threeMonths" selected>3 Months</option>
-                                        <option value="sixMonths">6 Months</option>
-                                        <option value="oneYear">1 Year</option>
-                                    </select>
+<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}).`}
+  />
 
-                                    <select class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeVolumeOI}>
-                                      <option disabled>Choose a category</option>
-                                      <option value="volume" selected>Volume</option>
-                                      <option value="openInterest">Open Interest</option>
-                                  </select>
+  <!-- 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 -->
 
-                                </div>
+  <!-- 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>
 
-                                
-                            
-                                
-                                <div class="app w-full bg-[#09090B] rounded-xl">
-                                  {#if filteredList?.length !== 0}  
-                                  <Chart {init} options={options} class="chart" />
-                                  {:else}
-                                  <span class="text-xl text-white m-auto flex justify-center items-center h-full">
-                                    <div class="text-gray-100 text-sm sm:text-[1rem] sm: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>
-                                  </span>
-                                  {/if}
-                                </div>
-                                
+<section
+  class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
+>
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <div class="w-full mb-6">
+          <h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
+            Unsual Options Activity
+          </h2>
 
-                                {#if data?.getOptionsGexData?.length !== 0}  
-                                <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
-                                    {activeEX === 0 ? 'Daily Gamma Exposure (GEX)' : 'Daily Delta Exposure (DEX)'}
-                                </h3>
+          <div
+            class="w-fit 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
+            >
 
-                                <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-6 mb-6">
-                                  {#each tabEX as item, i}
-                                    <button
-                                      on:click={() => handleEXMode(i)}
-                                      class="group relative z-[1] rounded-full px-6 py-1 {activeEX === i
-                                        ? 'z-0'
-                                        : ''} "
-                                    >
-                                      {#if activeEX === i}
-                                          <div
-                                            class="absolute inset-0 rounded-lg bg-purple-600"
-                                          ></div>
-                                      {/if}
-                                      <span
-                                        class="relative text-sm block font-medium duration-200 text-white">
-                                        {item.title}
-                                      </span>
-                                    </button>
-                                  {/each}
-                              </div>
+            {#if optionsPlotData?.length !== 0}
+              1 Year 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>
 
-                                <div class="app w-full bg-[#09090B] rounded-xl mb-24">
-                                  
-                                  <Chart {init} options={optionsEX} class="chart" />
-                                </div>
-                                {/if}
-    
-                                
-                                <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
-                                    {activeIdx === 0 ? 'Historical Option Data' : 'Option Chain Data'}
-                                </h3>
-    
-                               
-                                {#if optionList?.length !== 0}
-                          
-                                 <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-6 mb-6">
-                                  {#each tabs as item, i}
-                                    <button
-                                      on:click={() => handleMode(i)}
-                                      class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
-                                        ? 'z-0'
-                                        : ''} "
-                                    >
-                                      {#if activeIdx === i}
-                                          <div
-                                            class="absolute inset-0 rounded-lg bg-purple-600"
-                                          ></div>
-                                      {/if}
-                                      <span
-                                        class="relative text-sm block font-medium duration-200 text-white">
-                                        {item.title}
-                                      </span>
-                                    </button>
-                                  {/each}
-                              </div>
+        {#if optionsPlotData?.length !== 0}
+          <div
+            class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x"
+          >
+            <div class="p-4 bp:p-5 sm:p-6">
+              <label
+                for="totaVolume"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Total Volume
+                <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={"totaVolume"}
+                />
+              </label>
 
-                               {#if activeIdx === 1}
-                                <div class="relative mb-6">
-                                <select class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeStatement}>
-                                    <option disabled>Choose an Expiration Date</option>
-                                    {#each data?.getOptionsChainData as item, index}
-                                    <option value={item?.date_expiration} selected={index === 0 ? true : false}>
-                                      {new Date(item?.date_expiration)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                                    </option>   
-                                    {/each}                            
-                                </select>
-                                </div>
-                                {/if}
-    
-
-                                <div class="flex justify-start items-center m-auto overflow-x-auto">
-                                    
-                                  {#if activeIdx === 0}
-                                    <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="border-b border-[#27272A]">
-                                            <td class="text-slate-200 font-semibold text-sm text-start">Date</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-end">% Change</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-end">P/C</td>
-                                             <td class="text-slate-200 font-semibold text-sm text-center">Bear/Bull</td>
-                                             <td class="text-slate-200 font-semibold text-sm text-center">Bid/Ask Vol</td>
-                                              <td class="text-slate-200 font-semibold text-sm text-end">% OTM</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-end">Total Volume</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-end">Total OI</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-end">Total Prem</td>
-                                          </tr>
-                                        </thead>
-                                        <tbody>
-                                          {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
-                                          <tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($stockTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] 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-sm text-start">
-                                              {formatDate(item?.date)}
-                                            </td>
-    
-                                            <td class="text-white text-sm sm:text-[1rem] text-end">
-                                              {#if item?.changesPercentage >=0}
-                                                <span class="text-[#37C97D]">+{item?.changesPercentage >= 1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}%</span>
-                                              {:else}
-                                                <span class="text-[#FF2F1F]">{item?.changesPercentage <= -1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}% </span> 
-                                              {/if}
-                                            </td>
-                                            
-                                            <td class="text-sm sm:text-[1rem] text-end text-white">
-                                              {item?.c_vol !== 0 ? (item?.p_vol/item?.c_vol)?.toFixed(1) : '-'}
-                                            </td>
-    
-                                           <td class="whitespace-nowrap text-sm sm:text-[1rem] text-center">
-                                            {#if item?.bear_ratio > (item?.neutral_ratio ?? 0) && item?.bear_ratio > (item?.bull_ratio ?? 0)}
-                                              <div class="badge bg-[#FF2F1F] text-white font-semibold gap-2">
-                                                {item?.bear_ratio?.toFixed(0)}% Bearish
-                                              </div>
-                                            {:else if item?.bull_ratio > (item?.neutral_ratio ?? 0) && item?.bull_ratio > (item?.bear_ratio ?? 0)}
-                                              <div class="badge bg-[#75D377] text-black font-semibold gap-2">
-                                                {item?.bull_ratio?.toFixed(0)}% Bullish
-                                              </div>
-                                            {:else if item?.neutral_ratio > (item?.bull_ratio ?? 0) && item?.neutral_ratio > (item?.bear_ratio ?? 0)}
-                                              <div class="badge bg-[#FBCE3C] text-black font-semibold gap-2">
-                                                {item?.neutral_ratio?.toFixed(0)}% Neutral
-                                              </div>
-                                            {:else if item?.bear_ratio === item?.bull_ratio && item?.bear_ratio > (item?.neutral_ratio ?? 0)}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                {item?.bear_ratio?.toFixed(0)}% Bear/Bull Tie
-                                              </div>
-                                            {:else if item?.bear_ratio === item?.neutral_ratio && item?.bear_ratio > (item?.bull_ratio ?? 0)}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                {item?.bear_ratio?.toFixed(0)}% Bear/Neutral Tie
-                                              </div>
-                                            {:else if item?.bull_ratio === item?.neutral_ratio && item?.bull_ratio > (item?.bear_ratio ?? 0)}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                {item?.bull_ratio?.toFixed(0)}% Bull/Neutral Tie
-                                              </div>
-                                            {:else}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                Equal Distribution
-                                              </div>
-                                            {/if}
-                                          </td>
-
-                                           <td class="whitespace-nowrap text-sm sm:text-[1rem] text-center">
-                                            {#if item?.bid_ratio > (item?.midpoint_ratio ?? 0) && item?.bid_ratio > (item?.ask_ratio ?? 0)}
-                                              <div class="badge bg-[#FF2F1F] text-white font-semibold gap-2">
-                                                {item?.bid_ratio?.toFixed(0)}% Bid
-                                              </div>
-                                            {:else if item?.ask_ratio > (item?.midpoint_ratio ?? 0) && item?.ask_ratio > (item?.bid_ratio ?? 0)}
-                                              <div class="badge bg-[#75D377] text-black font-semibold gap-2">
-                                                {item?.ask_ratio?.toFixed(0)}% Ask
-                                              </div>
-                                            {:else if item?.midpoint_ratio > (item?.ask_ratio ?? 0) && item?.midpoint_ratio > (item?.bid_ratio ?? 0)}
-                                              <div class="badge bg-[#FBCE3C] text-black font-semibold gap-2">
-                                                {item?.midpoint_ratio?.toFixed(0)}% Midpoint
-                                              </div>
-                                            {:else if item?.bid_ratio === item?.ask_ratio && item?.bid_ratio > (item?.midpoint_ratio ?? 0)}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                {item?.bid_ratio?.toFixed(0)}% Bid/Ask Tie
-                                              </div>
-                                            {:else if item?.bid_ratio === item?.midpoint_ratio && item?.bid_ratio > (item?.ask_ratio ?? 0)}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                {item?.bid_ratio?.toFixed(0)}% Bid/Neutral Tie
-                                              </div>
-                                            {:else if item?.ask_ratio === item?.midpoint_ratio && item?.ask_ratio > (item?.bid_ratio ?? 0)}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                {item?.ask_ratio?.toFixed(0)}% Ask/Neutral Tie
-                                              </div>
-                                            {:else}
-                                              <div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
-                                                Equal Distribution
-                                              </div>
-                                            {/if}
-                                          </td>
-
-                                           <td class="text-sm sm:text-[1rem] text-white text-end">
-                                            {item?.otm_ratio?.toFixed(0)}%
-                                          </td>
-
-
-    
-                                            <td class="text-sm sm:text-[1rem] text-white text-end">
-                                              {abbreviateNumber(item?.total_volume)}
-                                            </td>
-    
-                                            <td class="text-sm sm:text-[1rem] text-end text-white">
-                                              {abbreviateNumber(item?.total_oi)}
-                                            </td>
-                                          
-
-                                          <td class="text-sm sm:text-[1rem] text-end text-white">
-                                            {abbreviateNumber(item?.total_bull_prem+item?.total_bear_prem+item?.total_neutral_prem,true)}
-                                          </td>
-                                            
-                                    
-                            
-                                          </tr>
-                                          
-                                      
-                                          {/each}
-    
-                                        </tbody>
-                                    </table>
-                                  {:else}
-                                    <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-end">Call Prem</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-end">Call OI</td>
-                                             <td class="text-slate-200 font-semibold text-sm text-end">Call Volume</td>
-                                              <td class="text-slate-200 font-semibold text-sm text-center">Strike Price</td>
-                                              <td class="text-slate-200 font-semibold text-sm text-start">Put Volume</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-start">Put OI</td>
-                                            <td class="text-slate-200 font-semibold text-sm text-start">Put Prem</td>
-                                          </tr>
-                                        </thead>
-                                        <tbody>
-                                          {#each (data?.user?.tier === 'Pro' ? optionChainList : optionChainList?.slice(0,3)) as item, index}
-                                          <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionChainList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
-                                            
-                                            <td class="text-white text-sm sm:text-[1rem] text-end">
-                                               {abbreviateNumber(item?.total_premium_call,true)}
-                                            </td>
-                                            
-                                            <td class="text-sm sm:text-[1rem] text-end text-white">
-                                              {abbreviateNumber(item?.total_open_interest_call)}
-                                            </td>
-
-                                            <td class="text-sm sm:text-[1rem] text-end text-white">
-                                              {abbreviateNumber(item?.total_volume_call)}
-                                            </td>
-    
-                                           <td class="whitespace-nowrap text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FF2F1F]'} text-end">
-                                            <div class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#FBCE3C] text-black m-auto flex justify-center  items-center">
-                                                {item?.strike_price}
-                                              </div>
-                                          </td>
-
-                                           <td class="text-sm sm:text-[1rem] text-start text-white">
-                                              {abbreviateNumber(item?.total_volume_put)}
-                                            </td>
-    
-                                           <td class="text-sm sm:text-[1rem] text-start text-white">
-                                              {abbreviateNumber(item?.total_open_interest_put)}
-                                            </td>
-
-    
-                                           <td class="text-white text-sm sm:text-[1rem] text-start">
-                                             {abbreviateNumber(item?.total_premium_put,true)}
-                                            </td>
-                                          
-                            
-                                          </tr>
-                                          
-                                      
-                                          {/each}
-    
-                                        </tbody>
-                                    </table>
-                                  {/if}
-                                    
-                                    
-                                </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}
-            
-                      
-    
-    
-                      </div>
-    
-                      
-                </div>
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-lg"
+              >
+                {displayTotalVolume}
+              </div>
             </div>
-        
-            
-        </section>
-        
+            <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
+              <label
+                for="totalOpenInterest"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                Total OI
+                <InfoModal
+                  title={"Total OI"}
+                  content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
+                  id={"totalOpenInterest"}
+                />
+              </label>
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-lg"
+              >
+                {displayTotalOpenInterest}
+              </div>
+            </div>
+            <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
+              <label
+                for="putCallRatio"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                P/C Ratio
+                <InfoModal
+                  title={"P/C Ratio"}
+                  content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
+                  id={"putCallRatio"}
+                />
+              </label>
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-lg"
+              >
+                {putCallRatio !== "Infinity" ? putCallRatio : "> 1"}
+              </div>
+            </div>
+            <div
+              class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0"
+            >
+              <label
+                for="openInteresteRatio"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+              >
+                OI P/C Ratio
+                <InfoModal
+                  title={"OI P/C 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={"openInteresteRatio"}
+                />
+              </label>
 
-        
+              <div
+                class="mt-1 break-words font-semibold leading-8 text-light text-lg"
+              >
+                {putCallOpenInterestRatio !== "Infinity"
+                  ? putCallOpenInterestRatio
+                  : "> 1"}
+              </div>
+            </div>
+          </div>
 
+          <div class="flex flex-row items-center w-full mt-10">
+            <select
+              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
+              on:change={changeTimePeriod}
+            >
+              <option disabled>Choose a time period</option>
+              <option value="oneWeek">1 Week</option>
+              <option value="oneMonth" selected>1 Month</option>
+              <option value="threeMonths" selected>3 Months</option>
+              <option value="sixMonths">6 Months</option>
+              <option value="oneYear">1 Year</option>
+            </select>
+
+            <select
+              class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
+              on:change={changeVolumeOI}
+            >
+              <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]">
+            {#if filteredList?.length !== 0}
+              <Chart {init} {options} class="chart" />
+            {:else}
+              <span
+                class="text-xl text-white m-auto flex justify-center items-center h-full"
+              >
+                <div
+                  class="text-gray-100 text-sm sm:text-[1rem] sm: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>
+              </span>
+            {/if}
+          </div>
+
+          {#if data?.getOptionsGexData?.length !== 0}
+            <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
+              {activeEX === 0
+                ? "Daily Gamma Exposure (GEX)"
+                : "Daily Delta Exposure (DEX)"}
+            </h3>
+
+            <div
+              class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-6 mb-6"
+            >
+              {#each tabEX as item, i}
+                <button
+                  on:click={() => handleEXMode(i)}
+                  class="group relative z-[1] rounded-full px-6 py-1 {activeEX ===
+                  i
+                    ? 'z-0'
+                    : ''} "
+                >
+                  {#if activeEX === i}
+                    <div
+                      class="absolute inset-0 rounded-lg bg-purple-600"
+                    ></div>
+                  {/if}
+                  <span
+                    class="relative text-sm block font-medium duration-200 text-white"
+                  >
+                    {item.title}
+                  </span>
+                </button>
+              {/each}
+            </div>
+
+            <div class="app w-full bg-[#09090B] mb-24">
+              <Chart {init} options={optionsEX} class="chart" />
+            </div>
+          {/if}
+
+          <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
+            {activeIdx === 0 ? "Historical Option Data" : "Option Chain Data"}
+          </h3>
+
+          {#if optionList?.length !== 0}
+            <div
+              class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-6 mb-6"
+            >
+              {#each tabs as item, i}
+                <button
+                  on:click={() => handleMode(i)}
+                  class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
+                  i
+                    ? 'z-0'
+                    : ''} "
+                >
+                  {#if activeIdx === i}
+                    <div
+                      class="absolute inset-0 rounded-lg bg-purple-600"
+                    ></div>
+                  {/if}
+                  <span
+                    class="relative text-sm block font-medium duration-200 text-white"
+                  >
+                    {item.title}
+                  </span>
+                </button>
+              {/each}
+            </div>
+
+            {#if activeIdx === 1}
+              <div class="relative mb-6">
+                <select
+                  class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
+                  on:change={changeStatement}
+                >
+                  <option disabled>Choose an Expiration Date</option>
+                  {#each data?.getOptionsChainData as item, index}
+                    <option
+                      value={item?.date_expiration}
+                      selected={index === 0 ? true : false}
+                    >
+                      {new Date(item?.date_expiration)?.toLocaleString(
+                        "en-US",
+                        {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                          daySuffix: "2-digit",
+                        },
+                      )}
+                    </option>
+                  {/each}
+                </select>
+              </div>
+            {/if}
+
+            <div class="flex justify-start items-center m-auto overflow-x-auto">
+              {#if activeIdx === 0}
+                <table
+                  class="w-full table table-sm table-compact rounded-none sm:rounded-md border-bg-[#09090B] m-auto mt-4 overflow-x-auto"
+                >
+                  <thead>
+                    <tr class="border-b border-[#27272A]">
+                      <td class="text-white font-semibold text-sm text-start"
+                        >Date</td
+                      >
+                      <td class="text-white font-semibold text-sm text-end"
+                        >% Change</td
+                      >
+                      <td class="text-white font-semibold text-sm text-end"
+                        >P/C</td
+                      >
+                      <td class="text-white font-semibold text-sm text-center"
+                        >Bear/Bull</td
+                      >
+                      <td class="text-white font-semibold text-sm text-center"
+                        >Bid/Ask Vol</td
+                      >
+                      <td class="text-white font-semibold text-sm text-end"
+                        >% OTM</td
+                      >
+                      <td class="text-white font-semibold text-sm text-end"
+                        >Total Volume</td
+                      >
+                      <td class="text-white font-semibold text-sm text-end"
+                        >Total OI</td
+                      >
+                      <td class="text-white font-semibold text-sm text-end"
+                        >Total Prem</td
+                      >
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
+                      <tr
+                        on:click={() => handleViewData(item?.date)}
+                        on:mouseover={() =>
+                          getDailyTransactions($stockTicker + "+" + item?.date)}
+                        class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] 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-sm text-start">
+                          {formatDate(item?.date)}
+                        </td>
+
+                        <td class="text-white text-sm sm:text-[1rem] text-end">
+                          {#if item?.changesPercentage >= 0}
+                            <span class="text-[#37C97D]"
+                              >+{item?.changesPercentage >= 1000
+                                ? abbreviateNumber(item?.changesPercentage)
+                                : item?.changesPercentage?.toFixed(2)}%</span
+                            >
+                          {:else}
+                            <span class="text-[#FF2F1F]"
+                              >{item?.changesPercentage <= -1000
+                                ? abbreviateNumber(item?.changesPercentage)
+                                : item?.changesPercentage?.toFixed(2)}%
+                            </span>
+                          {/if}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end text-white">
+                          {item?.c_vol !== 0
+                            ? (item?.p_vol / item?.c_vol)?.toFixed(1)
+                            : "-"}
+                        </td>
+
+                        <td
+                          class="whitespace-nowrap text-sm sm:text-[1rem] text-center"
+                        >
+                          {#if item?.bear_ratio > (item?.neutral_ratio ?? 0) && item?.bear_ratio > (item?.bull_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#FF2F1F] text-white font-semibold gap-2"
+                            >
+                              {item?.bear_ratio?.toFixed(0)}% Bearish
+                            </div>
+                          {:else if item?.bull_ratio > (item?.neutral_ratio ?? 0) && item?.bull_ratio > (item?.bear_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#75D377] text-black font-semibold gap-2"
+                            >
+                              {item?.bull_ratio?.toFixed(0)}% Bullish
+                            </div>
+                          {:else if item?.neutral_ratio > (item?.bull_ratio ?? 0) && item?.neutral_ratio > (item?.bear_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
+                            >
+                              {item?.neutral_ratio?.toFixed(0)}% Neutral
+                            </div>
+                          {:else if item?.bear_ratio === item?.bull_ratio && item?.bear_ratio > (item?.neutral_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              {item?.bear_ratio?.toFixed(0)}% Bear/Bull Tie
+                            </div>
+                          {:else if item?.bear_ratio === item?.neutral_ratio && item?.bear_ratio > (item?.bull_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              {item?.bear_ratio?.toFixed(0)}% Bear/Neutral Tie
+                            </div>
+                          {:else if item?.bull_ratio === item?.neutral_ratio && item?.bull_ratio > (item?.bear_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              {item?.bull_ratio?.toFixed(0)}% Bull/Neutral Tie
+                            </div>
+                          {:else}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              Equal Distribution
+                            </div>
+                          {/if}
+                        </td>
+
+                        <td
+                          class="whitespace-nowrap text-sm sm:text-[1rem] text-center"
+                        >
+                          {#if item?.bid_ratio > (item?.midpoint_ratio ?? 0) && item?.bid_ratio > (item?.ask_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#FF2F1F] text-white font-semibold gap-2"
+                            >
+                              {item?.bid_ratio?.toFixed(0)}% Bid
+                            </div>
+                          {:else if item?.ask_ratio > (item?.midpoint_ratio ?? 0) && item?.ask_ratio > (item?.bid_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#75D377] text-black font-semibold gap-2"
+                            >
+                              {item?.ask_ratio?.toFixed(0)}% Ask
+                            </div>
+                          {:else if item?.midpoint_ratio > (item?.ask_ratio ?? 0) && item?.midpoint_ratio > (item?.bid_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
+                            >
+                              {item?.midpoint_ratio?.toFixed(0)}% Midpoint
+                            </div>
+                          {:else if item?.bid_ratio === item?.ask_ratio && item?.bid_ratio > (item?.midpoint_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              {item?.bid_ratio?.toFixed(0)}% Bid/Ask Tie
+                            </div>
+                          {:else if item?.bid_ratio === item?.midpoint_ratio && item?.bid_ratio > (item?.ask_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              {item?.bid_ratio?.toFixed(0)}% Bid/Neutral Tie
+                            </div>
+                          {:else if item?.ask_ratio === item?.midpoint_ratio && item?.ask_ratio > (item?.bid_ratio ?? 0)}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              {item?.ask_ratio?.toFixed(0)}% Ask/Neutral Tie
+                            </div>
+                          {:else}
+                            <div
+                              class="badge bg-[#B8B8B8] text-black font-semibold gap-2"
+                            >
+                              Equal Distribution
+                            </div>
+                          {/if}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-white text-end">
+                          {item?.otm_ratio?.toFixed(0)}%
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-white text-end">
+                          {abbreviateNumber(item?.total_volume)}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end text-white">
+                          {abbreviateNumber(item?.total_oi)}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end text-white">
+                          {abbreviateNumber(
+                            item?.total_bull_prem +
+                              item?.total_bear_prem +
+                              item?.total_neutral_prem,
+                            true,
+                          )}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              {:else}
+                <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-end"
+                        >Call Prem</td
+                      >
+                      <td class="text-slate-200 font-semibold text-sm text-end"
+                        >Call OI</td
+                      >
+                      <td class="text-slate-200 font-semibold text-sm text-end"
+                        >Call Volume</td
+                      >
+                      <td
+                        class="text-slate-200 font-semibold text-sm text-center"
+                        >Strike Price</td
+                      >
+                      <td
+                        class="text-slate-200 font-semibold text-sm text-start"
+                        >Put Volume</td
+                      >
+                      <td
+                        class="text-slate-200 font-semibold text-sm text-start"
+                        >Put OI</td
+                      >
+                      <td
+                        class="text-slate-200 font-semibold text-sm text-start"
+                        >Put Prem</td
+                      >
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {#each data?.user?.tier === "Pro" ? optionChainList : optionChainList?.slice(0, 3) as item, index}
+                      <tr
+                        class="odd:bg-[#27272A] border-b-[#09090B] {index +
+                          1 ===
+                          optionChainList?.slice(0, 3)?.length &&
+                        data?.user?.tier !== 'Pro'
+                          ? 'opacity-[0.1]'
+                          : ''}"
+                      >
+                        <td class="text-white text-sm sm:text-[1rem] text-end">
+                          {abbreviateNumber(item?.total_premium_call, true)}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end text-white">
+                          {abbreviateNumber(item?.total_open_interest_call)}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end text-white">
+                          {abbreviateNumber(item?.total_volume_call)}
+                        </td>
+
+                        <td
+                          class="whitespace-nowrap text-sm sm:text-[1rem] {item?.put_call ===
+                          'Calls'
+                            ? 'text-[#00FC50]'
+                            : 'text-[#FF2F1F]'} text-end"
+                        >
+                          <div
+                            class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#FBCE3C] text-black m-auto flex justify-center items-center"
+                          >
+                            {item?.strike_price}
+                          </div>
+                        </td>
+
+                        <td
+                          class="text-sm sm:text-[1rem] text-start text-white"
+                        >
+                          {abbreviateNumber(item?.total_volume_put)}
+                        </td>
+
+                        <td
+                          class="text-sm sm:text-[1rem] text-start text-white"
+                        >
+                          {abbreviateNumber(item?.total_open_interest_put)}
+                        </td>
+
+                        <td
+                          class="text-white text-sm sm:text-[1rem] text-start"
+                        >
+                          {abbreviateNumber(item?.total_premium_put, true)}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              {/if}
+            </div>
+
+            <UpgradeToPro
+              {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}
+      </div>
+    </div>
+  </div>
+</section>
 
 <!--Start Options Detail Desktop Modal-->
 
-
 <!-- Put this part before </body> tag -->
 
-<dialog id="optionDetailsDesktopModal" class="modal modal-bottom sm:modal-middle cursor-pointer bg-[#fff] bg-opacity-[0.02]">
-  <div class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#141417] sm:bg-[#09090B] border-t sm:border border-gray-600 h-auto">
+<dialog
+  id="optionDetailsDesktopModal"
+  class="modal modal-bottom sm:modal-middle cursor-pointer bg-[#fff] bg-opacity-[0.02]"
+>
+  <div
+    class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#141417] sm:bg-[#09090B] border-t sm:border border-gray-600 h-auto"
+  >
     <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
-      <button class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white">
-        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"/>
+      <button
+        class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white"
+      >
+        <svg
+          class="w-8 h-8"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="white"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          />
         </svg>
       </button>
     </form>
 
     <p class="text-gray-200 mt-10 cursor-text">
-      <span class="text-white text-xl font-semibold mb-4">Option Data Details:</span>
-      <br class="">
+      <span class="text-white text-xl font-semibold mb-4"
+        >Option Data Details:</span
+      >
+      <br class="" />
       {#if optionHistoryList?.length !== 0}
-        <div class="mt-3">{rawDataHistory?.length} individual contracts for {new Date(optionHistoryList?.at(0)?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}</div>
+        <div class="mt-3">
+          {rawDataHistory?.length} individual contracts for {new Date(
+            optionHistoryList?.at(0)?.date,
+          )?.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            daySuffix: "2-digit",
+          })}
+        </div>
       {:else}
-      <div class="mt-3">No data available.</div>
+        <div class="mt-3">No data available.</div>
       {/if}
     </p>
     <div class="border-gray-600 border-b w-full mb-3 mt-5"></div>
-    <div bind:this={container} on:scroll={getScroll} class="h-full max-h-[500px] overflow-y-scroll overflow-x-auto">
-     <div class="flex justify-start items-center m-auto">
-                                    
-      {#if isLoaded}                         
-        <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">
+    <div
+      bind:this={container}
+      on:scroll={getScroll}
+      class="h-full max-h-[500px] overflow-y-scroll overflow-x-auto"
+    >
+      <div class="flex justify-start items-center m-auto">
+        {#if isLoaded}
+          <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 text-start">Exec.</td>
-                <td class="text-slate-200 font-semibold text-sm 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 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>
+                <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 text-start"
+                  >Exec.</td
+                >
+                <td class="text-slate-200 font-semibold text-sm 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 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 optionHistoryList as item}
-              <!-- row -->
-              <tr class="odd:bg-[#27272A] border-b-[#09090B]">
-                
-                <td class="text-white text-sm text-start whitespace-nowrap">
-                  {formatTime(item?.time)}
-                </td>
+                <!-- row -->
+                <tr class="odd:bg-[#27272A] border-b-[#09090B]">
+                  <td class="text-white text-sm text-start whitespace-nowrap">
+                    {formatTime(item?.time)}
+                  </td>
 
-                <td class="text-white text-sm sm:text-[1rem] text-start">
-                  {formatDate(item?.date)}
-                </td>
+                  <td class="text-white text-sm sm:text-[1rem] text-start">
+                    {formatDate(item?.date)}
+                  </td>
 
-                <td class="text-white text-sm sm:text-[1rem] text-end">
-                  {item?.dte < 0 ? 'expired' : item?.dte +'d'}
-                </td>
-                
-                <td class="text-sm sm:text-[1rem] text-end text-white">
-                  {item?.strike_price}
-                </td>
+                  <td class="text-white text-sm sm:text-[1rem] text-end">
+                    {item?.dte < 0 ? "expired" : item?.dte + "d"}
+                  </td>
 
-                <td class="text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FF2F1F]'} text-start">
-                  {item?.put_call}
-                </td>
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {item?.strike_price}
+                  </td>
 
-                <td class="text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FF2F1F]' : 'text-[#C6A755]'} text-start">
-                  {item?.sentiment}
-                </td>
-                 <td class="text-sm sm:text-[1rem] text-white text-start whitespace-nowrap">
-                  {item?.execution_estimate}
-                </td>
+                  <td
+                    class="text-sm sm:text-[1rem] {item?.put_call === 'Calls'
+                      ? 'text-[#00FC50]'
+                      : 'text-[#FF2F1F]'} text-start"
+                  >
+                    {item?.put_call}
+                  </td>
 
-                <td class="text-sm sm:text-[1rem] text-end text-white">
-                  {item?.underlying_price}
-                </td>
-              
-              <td class="text-sm sm:text-[1rem] text-end text-white">
-                {item?.price}
-              </td>
-              
-              <td class="text-sm sm:text-[1rem] text-end font-medium {item?.put_call === 'Puts' ? 'text-[#CB281C]' : 'text-[#0FB307]'} ">
-                {abbreviateNumber(item?.cost_basis)}
-              </td>
+                  <td
+                    class="text-sm sm:text-[1rem] {item?.sentiment === 'Bullish'
+                      ? 'text-[#00FC50]'
+                      : item?.sentiment === 'Bearish'
+                        ? 'text-[#FF2F1F]'
+                        : 'text-[#C6A755]'} text-start"
+                  >
+                    {item?.sentiment}
+                  </td>
+                  <td
+                    class="text-sm sm:text-[1rem] text-white text-start whitespace-nowrap"
+                  >
+                    {item?.execution_estimate}
+                  </td>
 
-              <td class="text-sm sm:text-[1rem] text-start {item?.type === 'Sweep' ? 'text-[#C6A755]' : 'text-[#976DB7]'}">
-                {item?.type}
-              </td>
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {item?.underlying_price}
+                  </td>
 
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {item?.price}
+                  </td>
 
+                  <td
+                    class="text-sm sm:text-[1rem] text-end font-medium {item?.put_call ===
+                    'Puts'
+                      ? 'text-[#CB281C]'
+                      : 'text-[#0FB307]'} "
+                  >
+                    {abbreviateNumber(item?.cost_basis)}
+                  </td>
 
-              <td class="text-white text-end text-sm sm:text-[1rem]">
-                  {new Intl.NumberFormat("en", {
+                  <td
+                    class="text-sm sm:text-[1rem] text-start {item?.type ===
+                    'Sweep'
+                      ? 'text-[#C6A755]'
+                      : 'text-[#976DB7]'}"
+                  >
+                    {item?.type}
+                  </td>
+
+                  <td class="text-white text-end text-sm sm:text-[1rem]">
+                    {new Intl.NumberFormat("en", {
                       minimumFractionDigits: 0,
-                      maximumFractionDigits: 0
-                  }).format(item?.volume)}
-              </td>
+                      maximumFractionDigits: 0,
+                    }).format(item?.volume)}
+                  </td>
 
-              <td class="text-white text-end text-sm sm:text-[1rem]">
-                {new Intl.NumberFormat("en", {
-                  minimumFractionDigits: 0,
-                  maximumFractionDigits: 0
-              }).format(item?.open_interest)}
-              </td>
-
-
-        
-
-              </tr>
-              
-          
+                  <td class="text-white text-end text-sm sm:text-[1rem]">
+                    {new Intl.NumberFormat("en", {
+                      minimumFractionDigits: 0,
+                      maximumFractionDigits: 0,
+                    }).format(item?.open_interest)}
+                  </td>
+                </tr>
               {/each}
-
             </tbody>
-        </table>
-      {:else}
-        <div class="m-auto flex justify-center items-center h-80">
+          </table>
+        {:else}
+          <div class="m-auto flex justify-center items-center h-80">
             <div class="relative">
-            <label class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md text-gray-400"></span>
-            </label>
+              <label
+                class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+              >
+                <span class="loading loading-spinner loading-md text-gray-400"
+                ></span>
+              </label>
             </div>
-        </div>
+          </div>
         {/if}
       </div>
     </div>
@@ -1075,25 +1335,22 @@ $: {
   </form>
 </dialog>
 
-
-
 <!--End Options Detial Desktop Modal-->
 
-    
-    <style>
-      .app {
-          height: 400px;
-          width: 100%;
-      }
-      
-      @media (max-width: 560px) {
-          .app {
-              width: 100%;
-              height: 300px;
-          }
-      }
-  
-      .chart {
-          width: 100%;
-      }
-  </style>
\ No newline at end of file
+<style>
+  .app {
+    height: 400px;
+    width: 100%;
+  }
+
+  @media (max-width: 560px) {
+    .app {
+      width: 100%;
+      height: 300px;
+    }
+  }
+
+  .chart {
+    width: 100%;
+  }
+</style>
diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
index 221135d4..7fcc52f8 100644
--- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
@@ -43,7 +43,7 @@
   class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
 >
   <div class="m-auto h-full overflow-hidden">
-    <main class="w-fit sm:w-full sm:max-w-2xl">
+    <main class="w-full">
       <div class="m-auto">
         <div
           class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640