From a2a72ef004588b564fdbaaf66efa006d46cc19ea Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 23 Jan 2025 20:58:46 +0100
Subject: [PATCH] remove temporarily market flow & update option etf page

---
 src/lib/components/Options/Volatility.svelte  |  51 +--
 src/routes/+layout.svelte                     |   4 +
 .../etf/[tickerID]/options/+layout.svelte     |  16 +-
 .../etf/[tickerID]/options/+page.svelte       | 117 +++----
 .../etf/[tickerID]/options/dex/+layout.svelte |  12 +-
 .../etf/[tickerID]/options/dex/+page.svelte   |   8 +-
 .../options/dex/expiry/+page.svelte           |  14 +-
 .../options/dex/strike/+page.svelte           |  14 +-
 .../etf/[tickerID]/options/gex/+layout.svelte |  13 +-
 .../etf/[tickerID]/options/gex/+page.svelte   |   8 +-
 .../options/gex/expiry/+page.svelte           |  14 +-
 .../options/gex/strike/+page.svelte           |  14 +-
 .../options/hottest-contracts/+page.svelte    | 324 ++++--------------
 .../etf/[tickerID]/options/oi/+page.svelte    |  48 +--
 .../[tickerID]/options/oi/expiry/+page.svelte |  47 +--
 .../options/volatility/+page.svelte           |  47 +--
 .../stocks/[tickerID]/options/+layout.svelte  |   2 +
 .../options/hottest-contracts/+page.svelte    |   2 +-
 .../stocks/[tickerID]/options/oi/+page.svelte |  42 +--
 .../[tickerID]/options/oi/expiry/+page.svelte |  41 +--
 .../options/volatility/+page.svelte           |  47 +--
 21 files changed, 220 insertions(+), 665 deletions(-)

diff --git a/src/lib/components/Options/Volatility.svelte b/src/lib/components/Options/Volatility.svelte
index ada8cc26..240ad740 100644
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@@ -34,17 +34,13 @@
   rawData = rawData?.map((item) => ({
     ...item,
     volatilitySpread:
-      item?.realized_volatility !== null
-        ? (item?.implied_volatility - item?.realized_volatility)?.toFixed(2)
-        : null,
+      item?.rv !== null ? (item?.iv - item?.rv)?.toFixed(2) : null,
   }));
 
   const avgIV =
-    rawData?.reduce((acc, entry) => acc + entry.implied_volatility, 0) /
-    rawData?.length;
+    rawData?.reduce((acc, entry) => acc + entry.iv, 0) / rawData?.length;
   const avgRV =
-    rawData?.reduce((acc, entry) => acc + entry.realized_volatility, 0) /
-    rawData?.length;
+    rawData?.reduce((acc, entry) => acc + entry.rv, 0) / rawData?.length;
 
   let displayList = rawData?.slice(0, 150);
   let timePeriod = "3M";
@@ -88,12 +84,8 @@
 
     // Extract the dates and gamma values from the filtered data
     const dateList = filteredData?.map((item) => item.date);
-    const impliedVolatility = filteredData?.map(
-      (item) => item?.implied_volatility,
-    );
-    const realizedVolatility = filteredData?.map(
-      (item) => item?.realized_volatility,
-    );
+    const impliedVolatility = filteredData?.map((item) => item?.iv);
+    const realizedVolatility = filteredData?.map((item) => item?.rv);
 
     const volatilitySpread = filteredData?.map(
       (item) => item?.volatilitySpread,
@@ -161,7 +153,7 @@
       },
       silent: true,
       grid: {
-        left: $screenWidth < 640 ? "5%" : "0%",
+        left: $screenWidth < 640 ? "5%" : "4%",
         right: $screenWidth < 640 ? "5%" : "0%",
         bottom: "10%",
         containLabel: true,
@@ -318,12 +310,12 @@
       align: "right",
     },
     {
-      key: "implied_volatility",
-      label: "IV (30D)",
+      key: "iv",
+      label: "Implied Volatility",
       align: "right",
     },
     {
-      key: "realized_volatility",
+      key: "rv",
       label: "Realized Vol.",
       align: "right",
     },
@@ -334,8 +326,8 @@
     date: { order: "none", type: "date" },
     changesPercentage: { order: "none", type: "number" },
     putCallRatio: { order: "none", type: "number" },
-    implied_volatility: { order: "none", type: "number" },
-    realized_volatility: { order: "none", type: "number" },
+    iv: { order: "none", type: "number" },
+    rv: { order: "none", type: "number" },
     volatilitySpread: { order: "none", type: "number" },
     total_open_interest: { order: "none", type: "number" },
     changesPercentageOI: { order: "none", type: "number" },
@@ -422,19 +414,6 @@
   <div class="w-full overflow-hidden m-auto mt-5">
     {#if options !== null}
       <div class="app w-full relative">
-        <div class="flex justify-start space-x-2 absolute right-0 top-0 z-10">
-          {#each ["3M", "6M", "1Y"] as item}
-            <label
-              on:click={() => (timePeriod = item)}
-              class="px-3 py-1 text-sm {timePeriod === item
-                ? 'bg-white text-black '
-                : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
-            >
-              {item}
-            </label>
-          {/each}
-        </div>
-
         <Chart {init} {options} class="chart" />
       </div>
     {:else}
@@ -474,13 +453,13 @@
             </td>
 
             <td class="text-white text-sm sm:text-[1rem] text-end">
-              {#if item?.changesPercentage >= 0}
+              {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
                 <span class="text-[#00FC50]"
                   >+{item?.changesPercentage >= 1000
                     ? abbreviateNumberWithColor(item?.changesPercentage)
                     : item?.changesPercentage?.toFixed(2)}%</span
                 >
-              {:else if item?.changesPercentage < 0}
+              {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
                 <span class="text-[#FF2F1F]"
                   >{item?.changesPercentage <= -1000
                     ? abbreviateNumberWithColor(item?.changesPercentage)
@@ -524,12 +503,12 @@
             <td
               class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
             >
-              {item?.implied_volatility}
+              {item?.iv}
             </td>
             <td
               class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
             >
-              {item?.realized_volatility ?? "n/a"}
+              {item?.rv ?? "n/a"}
             </td>
 
             <td
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2f90b1a1..8ebc6ce0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -707,6 +707,7 @@
                     >
                       <Sheet.Close asChild let:builder>
                         <div class="flex flex-col items-start">
+                          <!--
                           <Button
                             builders={[builder]}
                             type="submit"
@@ -718,6 +719,7 @@
                               >Market Flow</a
                             >
                           </Button>
+                        -->
 
                           <Button
                             builders={[builder]}
@@ -1150,11 +1152,13 @@
                         class="border-l border-gray-500 ml-2 mt-5"
                       >
                         <div class="flex flex-col items-start">
+                          <!--
                           <a
                             href="/market-flow"
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Market Flow</a
                           >
+                            -->
                           <a
                             href="/options-flow"
                             class="text-[1rem] text-white ml-4 mt-4"
diff --git a/src/routes/etf/[tickerID]/options/+layout.svelte b/src/routes/etf/[tickerID]/options/+layout.svelte
index e6431ed7..8c2a3078 100644
--- a/src/routes/etf/[tickerID]/options/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { etfTicker } from "$lib/store";
-  //import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { page } from "$app/stores";
 
   export let data;
@@ -19,10 +19,10 @@
 
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
-      //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
+      //goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
     } else {
       displaySubSection = state;
-      //goto(`/etf/${$etfTicker}/statistics`);
+      //goto(`/stocks/${$etfTicker}/statistics`);
     }
   }
 
@@ -56,7 +56,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <nav
             class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
           >
@@ -100,6 +100,7 @@
               >
                 OI
               </a>
+              <!--
               <a
                 href={`/etf/${$etfTicker}/options/gex`}
                 on:click={() => changeSubSection("gex")}
@@ -118,15 +119,15 @@
               >
                 DEX
               </a>
+              -->
             </ul>
           </nav>
           <div class="mt-2 sm:mt-0">
             <slot />
           </div>
         </main>
-        <!--
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
 
+        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
           >
@@ -160,12 +161,11 @@
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable etf.
+                Build your Stock Screener to find profitable stocks.
               </span>
             </a>
           </div>
         </aside>
-        -->
       </div>
     </div>
   </div>
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 62f62cf4..9769618c 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -1,17 +1,8 @@
 <script lang="ts">
-  import {
-    numberOfUnreadNotification,
-    displayCompanyName,
-    screenWidth,
-    etfTicker,
-  } from "$lib/store";
+  import { displayCompanyName, screenWidth, etfTicker } from "$lib/store";
   import DailyStats from "$lib/components/Options/DailyStats.svelte";
   import { Chart } from "svelte-echarts";
-  import {
-    abbreviateNumber,
-    abbreviateNumberWithColor,
-    monthNames,
-  } from "$lib/utils";
+  import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
   import { onMount } from "svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import { init, use } from "echarts/core";
@@ -19,7 +10,7 @@
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
   import Infobox from "$lib/components/Infobox.svelte";
-  import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
+  import SEO from "$lib/components/SEO.svelte";
 
   use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
@@ -42,7 +33,7 @@
   let putOpenInterestList; //= data?.getOptionsPlotData?.putOpenInterestList;
   let priceList;
 
-  let displayTimePeriod = "threeMonths";
+  let displayTimePeriod = "oneYear";
 
   function formatDate(dateStr) {
     // Parse the input date string (YYYY-mm-dd)
@@ -65,10 +56,6 @@
     return formattedDate;
   }
 
-  function changeTimePeriod(event) {
-    displayTimePeriod = event.target.value;
-  }
-
   function changeVolumeOI(event) {
     displayData = event.target.value;
   }
@@ -110,7 +97,7 @@
               marker +
               param.seriesName +
               ": " +
-              abbreviateNumber(param.value) +
+              abbreviateNumberWithColor(param.value, false, true) +
               "<br/>";
           });
 
@@ -126,7 +113,7 @@
       grid: {
         left: $screenWidth < 640 ? "5%" : "2%",
         right: $screenWidth < 640 ? "5%" : "2%",
-        bottom: "20%",
+        bottom: "10%",
         containLabel: true,
       },
       xAxis: [
@@ -288,7 +275,7 @@
   });
 
   $: {
-    if ((displayTimePeriod || displayData) && typeof window !== "undefined") {
+    if (displayTimePeriod || displayData) {
       // Filter the raw plot data based on the selected time period
       filteredList = filterDate(rawData, displayTimePeriod);
       // Process the filtered list to generate the plot data
@@ -297,42 +284,10 @@
   }
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Options Activity · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Options Activity · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Options Activity · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title="Options Activity"
+  description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
+/>
 
 <section class="w-full bg-default overflow-hidden text-white min-h-screen">
   <div class="w-full flex h-full overflow-hidden">
@@ -352,20 +307,22 @@
 
         {#if rawData?.length > 0}
           <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-secondary"
               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="oneMonth">1 Month</option>
+              <option value="threeMonths">3 Months</option>
               <option value="sixMonths">6 Months</option>
-              <option value="oneYear">1 Year</option>
+              <option value="oneYear" selected>1 Year</option>
             </select>
+            -->
 
             <select
-              class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
+              class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeVolumeOI}
             >
               <option disabled>Choose a category</option>
@@ -428,15 +385,22 @@
                     <td class="text-white font-semibold text-sm text-center"
                       >P Volume</td
                     >
+                    <!--
                     <td class="text-white font-semibold text-sm text-end"
                       >Vol/30D</td
                     >
+                      -->
+                    <!--
                     <td class="text-white font-semibold text-sm text-end"
                       >🐻/🐂 Prem</td
                     >
+                  -->
                     <td class="text-white font-semibold text-sm text-end"
                       >Total OI</td
                     >
+                    <td class="text-white font-semibold text-sm text-end"
+                      >OI Change</td
+                    >
                     <td class="text-white font-semibold text-sm text-end"
                       >% OI Change</td
                     >
@@ -446,12 +410,14 @@
                     <td class="text-white font-semibold text-sm text-end"
                       >P Prem</td
                     >
+                    <!--
                     <td class="text-white font-semibold text-sm text-end"
                       >Net Prem</td
                     >
                     <td class="text-white font-semibold text-sm text-end"
                       >Total Prem</td
                     >
+                      -->
                   </tr>
                 </thead>
                 <tbody>
@@ -469,7 +435,7 @@
                       </td>
 
                       <td class="text-white text-sm sm:text-[1rem] text-end">
-                        {#if item?.changesPercentage >= 0}
+                        {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
                           <span class="text-[#00FC50]"
                             >+{item?.changesPercentage >= 1000
                               ? abbreviateNumberWithColor(
@@ -477,7 +443,7 @@
                                 )
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
-                        {:else if item?.changesPercentage < 0}
+                        {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
                           <span class="text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
                               ? abbreviateNumberWithColor(
@@ -509,22 +475,21 @@
                       >
                         {item?.put_volume?.toLocaleString("en-US")}
                       </td>
-
+                      <!--
                       <td class="text-sm sm:text-[1rem] text-white text-end">
                         {item?.avgVolumeRatio?.toFixed(2)}
                       </td>
-
+                      -->
+                      <!--
                       <td class="text-sm sm:text-[1rem] text-end">
                         <HoverCard.Root>
                           <HoverCard.Trigger
                             class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
                           >
                             <div class="flex items-center justify-end">
-                              <!-- Bar Container -->
                               <div
                                 class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
                               >
-                                <!-- Bearish -->
                                 <div
                                   class="bg-red-500 h-full"
                                   style="width: calc(({item
@@ -534,7 +499,6 @@
                                     ?.premium_ratio[2]})) * 100%)"
                                 ></div>
 
-                                <!-- Neutral -->
                                 <div
                                   class="bg-gray-300 h-full"
                                   style="width: calc(({item
@@ -544,7 +508,6 @@
                                     ?.premium_ratio[2]})) * 100%)"
                                 ></div>
 
-                                <!-- Bullish -->
                                 <div
                                   class="bg-green-500 h-full"
                                   style="width: calc(({item
@@ -589,6 +552,7 @@
                           </HoverCard.Content>
                         </HoverCard.Root>
                       </td>
+                      -->
 
                       <td class="text-sm sm:text-[1rem] text-end text-white">
                         {@html abbreviateNumberWithColor(
@@ -598,6 +562,20 @@
                         )}
                       </td>
 
+                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                        {#if item?.changeOI >= 0}
+                          <span class="text-[#00FC50]"
+                            >+{item?.changeOI?.toLocaleString("en-US")}</span
+                          >
+                        {:else if item?.changeOI < 0}
+                          <span class="text-[#FF2F1F]"
+                            >{item?.changeOI?.toLocaleString("en-US")}
+                          </span>
+                        {:else}
+                          <span class="text-white"> n/a </span>
+                        {/if}
+                      </td>
+
                       <td class="text-white text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentageOI >= 0}
                           <span class="text-[#00FC50]"
@@ -635,7 +613,7 @@
                           true,
                         )}
                       </td>
-
+                      <!--
                       <td class="text-sm sm:text-[1rem] text-end text-white">
                         {@html abbreviateNumberWithColor(
                           item?.net_premium,
@@ -651,6 +629,7 @@
                           true,
                         )}
                       </td>
+                      -->
                     </tr>
                   {/each}
                 </tbody>
diff --git a/src/routes/etf/[tickerID]/options/dex/+layout.svelte b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
index f87fa854..3822b3cc 100644
--- a/src/routes/etf/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { etfTicker } from "$lib/store";
+  import { stockTicker } from "$lib/store";
   import { page } from "$app/stores";
 
   export let data;
@@ -15,10 +15,10 @@
 
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
-      //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
+      //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
     } else {
       displaySubSection = state;
-      //goto(`/etf/${$etfTicker}/statistics`);
+      //goto(`/stocks/${$stockTicker}/statistics`);
     }
   }
 
@@ -55,7 +55,7 @@
           >
             <ul class="flex flex-row items-center w-full text-white">
               <a
-                href={`/etf/${$etfTicker}/options/dex`}
+                href={`/stocks/${$stockTicker}/options/dex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
                   ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@@ -65,7 +65,7 @@
               </a>
 
               <a
-                href={`/etf/${$etfTicker}/options/dex/strike`}
+                href={`/stocks/${$stockTicker}/options/dex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
                   ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@@ -74,7 +74,7 @@
                 By Strike
               </a>
               <a
-                href={`/etf/${$etfTicker}/options/dex/expiry`}
+                href={`/stocks/${$stockTicker}/options/dex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
                   ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
diff --git a/src/routes/etf/[tickerID]/options/dex/+page.svelte b/src/routes/etf/[tickerID]/options/dex/+page.svelte
index 3cb55849..e2f90f03 100644
--- a/src/routes/etf/[tickerID]/options/dex/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    etfTicker,
+    stockTicker,
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
@@ -15,7 +15,7 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Delta Exposure · Stocknear
+    {$displayCompanyName} ({$stockTicker}) Delta Exposure · Stocknear
   </title>
   <meta
     name="description"
@@ -25,7 +25,7 @@
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure · Stocknear`}
   />
   <meta
     property="og:description"
@@ -38,7 +38,7 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure · Stocknear`}
   />
   <meta
     name="twitter:description"
diff --git a/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
index 9379c96a..b82557f4 100644
--- a/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    etfTicker,
+    stockTicker,
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
@@ -17,21 +17,21 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Delta Exposure by Expiry · Stocknear
+    {$displayCompanyName} ({$stockTicker}) Delta Exposure by Expiry · Stocknear
   </title>
   <meta
     name="description"
-    content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+    content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
   />
 
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Expiry · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Expiry · Stocknear`}
   />
   <meta
     property="og:description"
-    content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+    content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
   />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
@@ -40,11 +40,11 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Expiry · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Expiry · Stocknear`}
   />
   <meta
     name="twitter:description"
-    content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+    content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
   />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
diff --git a/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte b/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
index 0e368b17..1a4d70f2 100644
--- a/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    etfTicker,
+    stockTicker,
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
@@ -17,22 +17,22 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Delta Exposure by Strike Price ·
+    {$displayCompanyName} ({$stockTicker}) Delta Exposure by Strike Price ·
     Stocknear
   </title>
   <meta
     name="description"
-    content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+    content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
   />
 
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Strike Price · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Strike Price · Stocknear`}
   />
   <meta
     property="og:description"
-    content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+    content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
   />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
@@ -41,11 +41,11 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Strike Price · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Strike Price · Stocknear`}
   />
   <meta
     name="twitter:description"
-    content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+    content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
   />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
diff --git a/src/routes/etf/[tickerID]/options/gex/+layout.svelte b/src/routes/etf/[tickerID]/options/gex/+layout.svelte
index 9dbd9bfe..b52eb53c 100644
--- a/src/routes/etf/[tickerID]/options/gex/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { etfTicker } from "$lib/store";
+  import { stockTicker } from "$lib/store";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { page } from "$app/stores";
 
   export let data;
@@ -15,10 +16,10 @@
 
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
-      //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
+      //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
     } else {
       displaySubSection = state;
-      //goto(`/etf/${$etfTicker}/statistics`);
+      //goto(`/stocks/${$stockTicker}/statistics`);
     }
   }
 
@@ -55,7 +56,7 @@
           >
             <ul class="flex flex-row items-center w-full text-white">
               <a
-                href={`/etf/${$etfTicker}/options/gex`}
+                href={`/stocks/${$stockTicker}/options/gex`}
                 on:click={() => changeSubSection("overview")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
                   ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@@ -65,7 +66,7 @@
               </a>
 
               <a
-                href={`/etf/${$etfTicker}/options/gex/strike`}
+                href={`/stocks/${$stockTicker}/options/gex/strike`}
                 on:click={() => changeSubSection("strike")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
                   ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@@ -74,7 +75,7 @@
                 By Strike
               </a>
               <a
-                href={`/etf/${$etfTicker}/options/gex/expiry`}
+                href={`/stocks/${$stockTicker}/options/gex/expiry`}
                 on:click={() => changeSubSection("expiry")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
                   ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
diff --git a/src/routes/etf/[tickerID]/options/gex/+page.svelte b/src/routes/etf/[tickerID]/options/gex/+page.svelte
index 4dfec7d4..9f7008b6 100644
--- a/src/routes/etf/[tickerID]/options/gex/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    etfTicker,
+    stockTicker,
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
@@ -15,7 +15,7 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Gamma Exposure · Stocknear
+    {$displayCompanyName} ({$stockTicker}) Gamma Exposure · Stocknear
   </title>
   <meta
     name="description"
@@ -25,7 +25,7 @@
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure · Stocknear`}
   />
   <meta
     property="og:description"
@@ -38,7 +38,7 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure · Stocknear`}
   />
   <meta
     name="twitter:description"
diff --git a/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
index befad50e..d3e2086d 100644
--- a/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    etfTicker,
+    stockTicker,
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
@@ -17,21 +17,21 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Gamma Exposure by Expiry · Stocknear
+    {$displayCompanyName} ({$stockTicker}) Gamma Exposure by Expiry · Stocknear
   </title>
   <meta
     name="description"
-    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
   />
 
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Expiry · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Expiry · Stocknear`}
   />
   <meta
     property="og:description"
-    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
   />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
@@ -40,11 +40,11 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Expiry · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Expiry · Stocknear`}
   />
   <meta
     name="twitter:description"
-    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
   />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
diff --git a/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte b/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
index 4dc6d35a..1002e411 100644
--- a/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    etfTicker,
+    stockTicker,
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
@@ -17,22 +17,22 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Gamma Exposure by Strike Price ·
+    {$displayCompanyName} ({$stockTicker}) Gamma Exposure by Strike Price ·
     Stocknear
   </title>
   <meta
     name="description"
-    content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+    content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
   />
 
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Strike Price · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price · Stocknear`}
   />
   <meta
     property="og:description"
-    content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+    content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
   />
   <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
@@ -41,11 +41,11 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Strike Price · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price · Stocknear`}
   />
   <meta
     name="twitter:description"
-    content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+    content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
   />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
diff --git a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
index b8ce14f3..e540c366 100644
--- a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
@@ -12,7 +12,6 @@
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
-  import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
 
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@@ -42,7 +41,7 @@
   let optionsData = null;
 
   let optionHistoryList = [];
-  let selectGraphType = "Bid/Ask";
+  let selectGraphType = "Vol/OI";
   let container;
   let rawDataHistory = [];
   let strikePrice;
@@ -164,12 +163,12 @@
     { key: "strike_price", label: "Chain", align: "left" },
     { key: "dte", label: "DTE", align: "right" },
     { key: "otm", label: "% OTM", align: "right" },
-    { key: "last_price", label: "Last", align: "right" },
-    { key: "high_price", label: "Low-High", align: "right" },
+    { key: "last", label: "Last", align: "right" },
+    { key: "high", label: "Low-High", align: "right" },
     { key: "volume", label: "Volume", align: "right" },
     { key: "open_interest", label: "OI", align: "right" },
     { key: "open_interest_change", label: "OI Change", align: "right" },
-    { key: "bid_volume", label: "Bid/Ask Vol", align: "right" },
+    { key: "iv", label: "IV", align: "right" },
     { key: "total_premium", label: "Total Prem", align: "right" },
   ];
 
@@ -177,12 +176,12 @@
     strike_price: { order: "none", type: "number" },
     dte: { order: "none", type: "number" },
     otm: { order: "none", type: "number" },
-    last_price: { order: "none", type: "number" },
-    high_price: { order: "none", type: "number" },
+    last: { order: "none", type: "number" },
+    high: { order: "none", type: "number" },
     volume: { order: "none", type: "number" },
     open_interest: { order: "none", type: "number" },
     open_interest_change: { order: "none", type: "number" },
-    bid_volume: { order: "none", type: "number" },
+    iv: { order: "none", type: "number" },
     total_premium: { order: "none", type: "number" },
   };
 
@@ -305,13 +304,9 @@
       (a, b) => new Date(a?.date) - new Date(b?.date),
     );
     let dates = data?.map((item) => item?.date);
-    let avgPrice = data?.map((item) => item?.avg_price);
+    let avgPrice = data?.map((item) => item?.mark);
     let priceList = data?.map((item) => item?.price);
 
-    let bidVolume = data?.map((item) => item?.bid_volume);
-    let askVolume = data?.map((item) => item?.ask_volume);
-    let midVolume = data?.map((item) => item?.mid_volume);
-
     let volumeList = data?.map((item) => item?.volume);
     let oiList = data?.map((item) => item?.open_interest);
     let ivList = data?.map((item) =>
@@ -339,15 +334,7 @@
     });
 
     let series = [];
-    if (selectGraphType === "Bid/Ask") {
-      series = [
-        createBarSeries("Ask", askVolume, "#33B890", "Ratio"),
-        createBarSeries("Mid", midVolume, "#007BFF", "Ratio"),
-        createBarSeries("Bid", bidVolume, "#EE5365", "Ratio"),
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
-        createLineSeries("Stock Price", priceList, "#fff", 2),
-      ];
-    } else if (selectGraphType === "Vol/OI") {
+    if (selectGraphType === "Vol/OI") {
       series = [
         createBarSeries("Volume", volumeList, "#FD7E14"),
         createBarSeries("OI", oiList, "#33B890"),
@@ -406,27 +393,14 @@
               param.color +
               '"></span>';
 
-            if (param.seriesName === "Bid") {
-              bidValue = param.value;
-              bidColor = marker;
-            } else if (param.seriesName === "Ask") {
-              askValue = param.value;
-              askColor = marker;
-            } else {
-              result +=
-                marker +
-                param.seriesName +
-                ": " +
-                abbreviateNumberWithColor(param.value, false, true) +
-                "<br/>";
-            }
+            result +=
+              marker +
+              param.seriesName +
+              ": " +
+              abbreviateNumberWithColor(param.value, false, true) +
+              "<br/>";
           });
 
-          // Add Bid x Ask line if both are present
-          if (bidValue !== null && askValue !== null) {
-            result += `${bidColor}Bid x ${askColor}Ask: ${bidValue} x ${askValue}<br/>`;
-          }
-
           if (rawDataPoint?.dte !== undefined) {
             result += `Days to Expiration : ${rawDataPoint.dte}<br/>`;
           }
@@ -509,7 +483,8 @@
       output = cachedData;
     } else {
       const postData = {
-        params: contractId,
+        ticker: $etfTicker,
+        contract: contractId,
       };
 
       // make the POST request to the endpoint
@@ -531,7 +506,7 @@
 
   async function handleViewData(item) {
     isLoaded = false;
-    selectGraphType = "Bid/Ask";
+    selectGraphType = "Vol/OI";
     optionDetailsDesktopModal?.showModal();
 
     strikePrice = item?.strike_price;
@@ -539,7 +514,9 @@
     dateExpiration = item?.date_expiration;
     otmPercentage = item?.otm;
 
-    rawDataHistory = await getContractHistory(item?.option_symbol);
+    const output = await getContractHistory(item?.option_symbol);
+    rawDataHistory = output?.history;
+
     if (rawDataHistory?.length > 0) {
       rawDataHistory.forEach((entry) => {
         const matchingData = data?.getHistoricalPrice?.find(
@@ -690,12 +667,12 @@
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
                     >
-                      {item?.last_price}
+                      {item?.last}
                     </td>
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
                     >
-                      {item?.low_price}-{item?.high_price}
+                      {item?.low}-{item?.high}
                     </td>
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@@ -710,82 +687,18 @@
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
                     >
-                      {#if item?.open_interest_change >= 0}
+                      {#if item?.changeOI >= 0}
                         <span class="text-[#00FC50]"
-                          >+{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >+{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else}
                         <span class="text-[#FF2F1F]"
-                          >{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {/if}
                     </td>
                     <td class="text-sm sm:text-[1rem] text-end">
-                      <HoverCard.Root>
-                        <HoverCard.Trigger
-                          class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
-                        >
-                          <div class="flex items-center justify-end">
-                            <!-- Bar Container -->
-                            <div
-                              class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
-                            >
-                              <!-- Bearish -->
-                              <div
-                                class="bg-red-500 h-full"
-                                style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                              ></div>
-
-                              <!-- Neutral -->
-                              <div
-                                class="bg-gray-300 h-full"
-                                style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                              ></div>
-
-                              <!-- Bullish -->
-                              <div
-                                class="bg-green-500 h-full"
-                                style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                              ></div>
-                            </div>
-                          </div>
-                        </HoverCard.Trigger>
-                        <HoverCard.Content
-                          class="w-auto bg-secondary border border-gray-600"
-                        >
-                          <div class="flex justify-between space-x-4">
-                            <div
-                              class="space-y-1 flex flex-col items-start text-white"
-                            >
-                              <div>
-                                Bid Vol: {@html abbreviateNumberWithColor(
-                                  item?.bid_volume,
-                                  false,
-                                  true,
-                                )}
-                              </div>
-                              <div>
-                                Mid Vol: {@html abbreviateNumberWithColor(
-                                  item?.mid_volume,
-                                  false,
-                                  true,
-                                )}
-                              </div>
-                              <div>
-                                Ask Vol: {@html abbreviateNumberWithColor(
-                                  item?.ask_volume,
-                                  false,
-                                  true,
-                                )}
-                              </div>
-                            </div>
-                          </div>
-                        </HoverCard.Content>
-                      </HoverCard.Root>
+                      {item?.iv}%
                     </td>
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@@ -868,12 +781,12 @@
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
                     >
-                      {item?.last_price}
+                      {item?.last}
                     </td>
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
                     >
-                      {item?.low_price}-{item?.high_price}
+                      {item?.low}-{item?.high}
                     </td>
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@@ -888,82 +801,18 @@
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
                     >
-                      {#if item?.open_interest_change >= 0}
+                      {#if item?.changeOI >= 0}
                         <span class="text-[#00FC50]"
-                          >+{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >+{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else}
                         <span class="text-[#FF2F1F]"
-                          >{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {/if}
                     </td>
                     <td class="text-sm sm:text-[1rem] text-end">
-                      <HoverCard.Root>
-                        <HoverCard.Trigger
-                          class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
-                        >
-                          <div class="flex items-center justify-end">
-                            <!-- Bar Container -->
-                            <div
-                              class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
-                            >
-                              <!-- Bearish -->
-                              <div
-                                class="bg-red-500 h-full"
-                                style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                              ></div>
-
-                              <!-- Neutral -->
-                              <div
-                                class="bg-gray-300 h-full"
-                                style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                              ></div>
-
-                              <!-- Bullish -->
-                              <div
-                                class="bg-green-500 h-full"
-                                style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                              ></div>
-                            </div>
-                          </div>
-                        </HoverCard.Trigger>
-                        <HoverCard.Content
-                          class="w-auto bg-secondary border border-gray-600"
-                        >
-                          <div class="flex justify-between space-x-4">
-                            <div
-                              class="space-y-1 flex flex-col items-start text-white"
-                            >
-                              <div>
-                                Bid Vol: {@html abbreviateNumberWithColor(
-                                  item?.bid_volume,
-                                  false,
-                                  true,
-                                )}
-                              </div>
-                              <div>
-                                Mid Vol: {@html abbreviateNumberWithColor(
-                                  item?.mid_volume,
-                                  false,
-                                  true,
-                                )}
-                              </div>
-                              <div>
-                                Ask Vol: {@html abbreviateNumberWithColor(
-                                  item?.ask_volume,
-                                  false,
-                                  true,
-                                )}
-                              </div>
-                            </div>
-                          </div>
-                        </HoverCard.Content>
-                      </HoverCard.Root>
+                      {item?.iv}%
                     </td>
                     <td
                       class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@@ -1055,7 +904,7 @@
         </div>
         <div class="mr-3 whitespace-nowrap">
           <span class="text-[var(--light-text-color)] font-normal">Avg:</span>
-          ${optionHistoryList?.at(0)?.avg_price}
+          ${optionHistoryList?.at(0)?.mark}
         </div>
         <div class="mr-3 whitespace-nowrap">
           <span class="text-[var(--light-text-color)] font-normal">Prem:</span>
@@ -1079,7 +928,7 @@
           class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-600 overflow-hidden"
         >
           <div class="flex justify-end ml-auto w-fit mr-2 mt-2">
-            {#each ["Bid/Ask", "Vol/OI", "IV"] as item}
+            {#each ["Vol/OI", "IV"] as item}
               <label
                 on:click={() => (selectGraphType = item)}
                 class="px-3 py-1.5 mr-2 {selectGraphType === item
@@ -1132,28 +981,18 @@
                   <td class="text-white font-semibold text-sm text-end"
                     >% Change OI</td
                   >
-                  <td class="text-white font-semibold text-sm text-start"
+                  <td class="text-white font-semibold text-sm text-end"
                     >Last Price</td
                   >
-                  <td class="text-white font-semibold text-sm text-start"
+                  <td class="text-white font-semibold text-sm text-end"
                     >Avg Price</td
                   >
-                  <td class="text-white font-semibold text-sm text-start"
-                    >Bid/Ask</td
-                  >
                   <td class="text-white font-semibold text-sm text-end">IV</td>
-                  <td class="text-white font-semibold text-sm text-end"
-                    >Floor</td
-                  >
-                  <td class="text-white font-semibold text-sm text-end"
-                    >Sweep</td
-                  >
-                  <td class="text-white font-semibold text-sm text-start"
-                    >Multileg Vol</td
-                  >
                   <td class="text-white font-semibold text-sm text-end"
                     >Total Prem</td
                   >
+                  <td class="text-white font-semibold text-sm text-end">GEX</td>
+                  <td class="text-white font-semibold text-sm text-end">DEX</td>
                 </tr>
               </thead>
               <tbody>
@@ -1165,7 +1004,9 @@
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.volume?.toLocaleString("en-US")}
+                      {item?.volume !== null
+                        ? item?.volume?.toLocaleString("en-US")
+                        : 0}
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
@@ -1174,17 +1015,13 @@
                         : "n/a"}
                     </td>
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {#if item?.open_interest_change >= 0 && item?.open_interest_change !== undefined}
+                      {#if item?.changeOI >= 0 && item?.changeOI !== undefined}
                         <span class="text-[#00FC50]"
-                          >+{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >+{item?.changeOI?.toLocaleString("en-US")}</span
                         >
-                      {:else if item?.open_interest_change < 0 && item?.open_interest_change !== undefined}
+                      {:else if item?.changeOI < 0 && item?.changeOI !== undefined}
                         <span class="text-[#FF2F1F]"
-                          >{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else}
                         n/a
@@ -1192,15 +1029,15 @@
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {#if item?.open_interest_change_percent > 0 && item?.open_interest_change_percent !== undefined}
+                      {#if item?.changesPercentageOI > 0 && item?.changesPercentageOI !== undefined}
                         <span class="text-[#00FC50]"
-                          >+{item?.open_interest_change_percent + "%"}</span
+                          >+{item?.changesPercentageOI + "%"}</span
                         >
-                      {:else if item?.open_interest_change_percent < 0 && item?.open_interest_change_percent !== undefined}
+                      {:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI !== undefined}
                         <span class="text-[#FF2F1F]"
-                          >{item?.open_interest_change_percent + "%"}</span
+                          >{item?.changesPercentageOI + "%"}</span
                         >
-                      {:else if item?.open_interest_change_percent === 0 && item?.open_interest_change_percent !== undefined}
+                      {:else if item?.changesPercentageOI === 0 && item?.changesPercentageOI !== undefined}
                         0%
                       {:else}
                         n/a
@@ -1208,38 +1045,11 @@
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.last_price}
+                      {item?.close}
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.avg_price}
-                    </td>
-
-                    <td class="text-sm sm:text-[1rem] text-end">
-                      <div class="flex items-center justify-end">
-                        <!-- Bar Container -->
-                        <div
-                          class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
-                        >
-                          <!-- Bearish -->
-                          <div
-                            class="bg-red-500 h-full"
-                            style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Neutral -->
-                          <div
-                            class="bg-gray-300 h-full"
-                            style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Bullish -->
-                          <div
-                            class="bg-green-500 h-full"
-                            style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-                        </div>
-                      </div>
+                      {item?.mark}
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
@@ -1248,28 +1058,6 @@
                       ) + "%"}
                     </td>
 
-                    <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.volume > 0
-                        ? ((item?.floor_volume / item?.volume) * 100)?.toFixed(
-                            2,
-                          ) + "%"
-                        : "n/a"}
-                    </td>
-                    <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.volume > 0
-                        ? ((item?.sweep_volume / item?.volume) * 100)?.toFixed(
-                            2,
-                          ) + "%"
-                        : "n/a"}
-                    </td>
-                    <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.volume > 0
-                        ? (
-                            (item?.multi_leg_volume / item?.volume) *
-                            100
-                          )?.toFixed(2) + "%"
-                        : "n/a"}
-                    </td>
                     <td class="text-sm sm:text-[1rem] text-end text-white">
                       {@html abbreviateNumberWithColor(
                         item?.total_premium,
@@ -1277,6 +1065,12 @@
                         true,
                       )}
                     </td>
+                    <td class="text-sm sm:text-[1rem] text-end text-white">
+                      {@html abbreviateNumberWithColor(item?.gex, false, true)}
+                    </td>
+                    <td class="text-sm sm:text-[1rem] text-end text-white">
+                      {@html abbreviateNumberWithColor(item?.dex, false, true)}
+                    </td>
                   </tr>
                 {/each}
               </tbody>
diff --git a/src/routes/etf/[tickerID]/options/oi/+page.svelte b/src/routes/etf/[tickerID]/options/oi/+page.svelte
index abb348af..266e052b 100644
--- a/src/routes/etf/[tickerID]/options/oi/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/+page.svelte
@@ -1,54 +1,18 @@
 <script lang="ts">
-  import {
-    etfTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
+  import { etfTicker, displayCompanyName } from "$lib/store";
 
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   import OpenInterestByStrike from "$lib/components/Options/OpenInterestByStrike.svelte";
 
   export let data;
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Open Interet by Strike Price ·
-    Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Open Interest by Strike Price · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Open Interest by Strike Price · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title="Open Interet by Strike Price"
+  description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
diff --git a/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
index 0a5d14d7..84fee2ba 100644
--- a/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-  import {
-    etfTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
+  import { etfTicker, displayCompanyName } from "$lib/store";
 
+  import SEO from "$lib/components/SEO.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
   import OpenInterestByExpiry from "$lib/components/Options/OpenInterestByExpiry.svelte";
 
@@ -12,42 +9,10 @@
   let rawData = data?.getData || [];
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) OpenInterest by Expiry · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) OpenInterest by Expiry · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Analyze OpenInterest by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) OpenInterest by Expiry · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Analyze OpenInterest by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title="Open Interest by Expiry"
+  description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
diff --git a/src/routes/etf/[tickerID]/options/volatility/+page.svelte b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
index 6f56355e..239f8db6 100644
--- a/src/routes/etf/[tickerID]/options/volatility/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
@@ -1,53 +1,18 @@
 <script lang="ts">
-  import {
-    etfTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
+  import { etfTicker, displayCompanyName } from "$lib/store";
 
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   import Volatility from "$lib/components/Options/Volatility.svelte";
 
   export let data;
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Volatility · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Volatility · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Volatility · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title={`${$displayCompanyName} (${$etfTicker}) Volatility · Stocknear`}
+  description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
diff --git a/src/routes/stocks/[tickerID]/options/+layout.svelte b/src/routes/stocks/[tickerID]/options/+layout.svelte
index 8d7a3e53..80e9e4b4 100644
--- a/src/routes/stocks/[tickerID]/options/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/+layout.svelte
@@ -100,6 +100,7 @@
               >
                 OI
               </a>
+              <!--
               <a
                 href={`/stocks/${$stockTicker}/options/gex`}
                 on:click={() => changeSubSection("gex")}
@@ -118,6 +119,7 @@
               >
                 DEX
               </a>
+              -->
             </ul>
           </nav>
           <div class="mt-2 sm:mt-0">
diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
index e5f2e186..767c86a5 100644
--- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
@@ -904,7 +904,7 @@
         </div>
         <div class="mr-3 whitespace-nowrap">
           <span class="text-[var(--light-text-color)] font-normal">Avg:</span>
-          ${optionHistoryList?.at(0)?.avg_price}
+          ${optionHistoryList?.at(0)?.mark}
         </div>
         <div class="mr-3 whitespace-nowrap">
           <span class="text-[var(--light-text-color)] font-normal">Prem:</span>
diff --git a/src/routes/stocks/[tickerID]/options/oi/+page.svelte b/src/routes/stocks/[tickerID]/options/oi/+page.svelte
index 9eef6536..3127c35e 100644
--- a/src/routes/stocks/[tickerID]/options/oi/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/oi/+page.svelte
@@ -6,49 +6,17 @@
   } from "$lib/store";
 
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   import OpenInterestByStrike from "$lib/components/Options/OpenInterestByStrike.svelte";
 
   export let data;
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Open Interet by Strike Price ·
-    Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Open Interest by Strike Price · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
-  />
-  <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}) Open Interest by Strike Price · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title="Open Interet by Strike Price"
+  description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
diff --git a/src/routes/stocks/[tickerID]/options/oi/expiry/+page.svelte b/src/routes/stocks/[tickerID]/options/oi/expiry/+page.svelte
index 5a09779e..41509dfd 100644
--- a/src/routes/stocks/[tickerID]/options/oi/expiry/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/oi/expiry/+page.svelte
@@ -5,6 +5,7 @@
     displayCompanyName,
   } from "$lib/store";
 
+  import SEO from "$lib/components/SEO.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
   import OpenInterestByExpiry from "$lib/components/Options/OpenInterestByExpiry.svelte";
 
@@ -12,42 +13,10 @@
   let rawData = data?.getData || [];
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) OpenInterest by Expiry · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) OpenInterest by Expiry · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Analyze OpenInterest by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
-  />
-  <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}) OpenInterest by Expiry · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Analyze OpenInterest by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title="Open Interest by Expiry"
+  description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
diff --git a/src/routes/stocks/[tickerID]/options/volatility/+page.svelte b/src/routes/stocks/[tickerID]/options/volatility/+page.svelte
index 284b8fd2..ec554b52 100644
--- a/src/routes/stocks/[tickerID]/options/volatility/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/volatility/+page.svelte
@@ -1,53 +1,18 @@
 <script lang="ts">
-  import {
-    stockTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
+  import { stockTicker, displayCompanyName } from "$lib/store";
 
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   import Volatility from "$lib/components/Options/Volatility.svelte";
 
   export let data;
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Volatility · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Volatility · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
-  />
-  <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}) Volatility · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title={`${$displayCompanyName} (${$stockTicker}) Volatility · Stocknear`}
+  description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"