From 79c869b7411061a26b682b49c27fd2fc45a8edfe Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 11 Mar 2025 22:36:36 +0100
Subject: [PATCH] ui fix

---
 .../Options/HottestContracts.svelte           |   4 +-
 .../components/Options/UnusualActivity.svelte |   4 +-
 src/routes/etf/[tickerID]/+layout.svelte      |  12 +-
 .../etf/[tickerID]/dark-pool/+layout.svelte   |   4 +-
 .../etf/[tickerID]/dark-pool/+page.server.ts  |  98 +++----
 .../etf/[tickerID]/dark-pool/+page.svelte     |   5 +-
 .../etf/[tickerID]/dividends/+layout.svelte   |   6 +-
 .../etf/[tickerID]/dividends/+page.svelte     |  90 +++----
 .../etf/[tickerID]/history/+page.svelte       | 254 ++++++++----------
 .../etf/[tickerID]/holdings/+page.svelte      |  10 +-
 .../etf/[tickerID]/insider/+layout.svelte     |  81 +++++-
 .../etf/[tickerID]/insider/+page.svelte       |  58 ++--
 .../etf/[tickerID]/options/+layout.svelte     |  20 +-
 .../etf/[tickerID]/options/+page.svelte       | 158 ++++-------
 .../etf/[tickerID]/options/dex/+layout.svelte |   4 +-
 .../etf/[tickerID]/options/dex/+page.svelte   |   6 +-
 .../options/dex/expiry/+page.svelte           |   4 +-
 .../options/dex/strike/+page.svelte           |  48 +++-
 .../etf/[tickerID]/options/gex/+page.svelte   |   4 +-
 .../options/gex/expiry/+page.server.ts        |   3 -
 .../options/gex/expiry/+page.svelte           |   6 +-
 .../options/gex/strike/+page.svelte           |   8 +-
 .../etf/[tickerID]/options/oi/+layout.svelte  |   6 +-
 .../etf/[tickerID]/options/oi/+page.svelte    |   2 +-
 .../options/volatility/+page.svelte           |   2 +-
 25 files changed, 437 insertions(+), 460 deletions(-)
diff --git a/src/lib/components/Options/HottestContracts.svelte b/src/lib/components/Options/HottestContracts.svelte
index 0b53e41a..3f61f5e1 100644
--- a/src/lib/components/Options/HottestContracts.svelte
+++ b/src/lib/components/Options/HottestContracts.svelte
@@ -850,11 +850,11 @@
       </p>
       <button class="cursor-pointer text-[1.8rem] focus:outline-hidden">
         <svg
-          class="w-8 h-8"
+          class="w-8 h-8 text-muted dark:text-white"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           ><path
-            fill="white"
+            fill="currentColor"
             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>
diff --git a/src/lib/components/Options/UnusualActivity.svelte b/src/lib/components/Options/UnusualActivity.svelte
index dc2a1f90..99ecd074 100644
--- a/src/lib/components/Options/UnusualActivity.svelte
+++ b/src/lib/components/Options/UnusualActivity.svelte
@@ -888,11 +888,11 @@
       </p>
       <button class="cursor-pointer text-[1.8rem] focus:outline-hidden">
         <svg
-          class="w-8 h-8"
+          class="w-8 h-8 text-muted dark:text-white"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           ><path
-            fill="white"
+            fill="currentColor"
             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>
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index a31ccbdc..1aa9d6be 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -364,7 +364,7 @@
 <svelte:window bind:scrollY={y} />
 
 <body
-  class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
+  class="w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
 >
   <!-- Page wrapper -->
   <div class="mt-5 flex flex-col w-full relative w-full">
@@ -373,7 +373,7 @@
         <div class="w-full">
           <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
             <!--Start Mobile Navbar-->
-            <div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden">
+            <div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
               <div class="navbar w-full px-4 py-2">
                 <div
                   class="{isScrolled
@@ -590,7 +590,7 @@
                           <div class="flex flex-col ml-auto mr-2">
                             {#if userWatchList?.length !== 0}
                               <div
-                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                               >
                                 <label
                                   for="addWatchListModal"
@@ -621,7 +621,7 @@
                               </div>
                             {:else if userWatchList?.length === 0}
                               <div
-                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                                class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                               >
                                 <label
                                   on:click={() =>
@@ -655,7 +655,7 @@
                           </div>
                         {:else}
                           <div
-                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                            class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                           >
                             <label
                               for="userLogin"
@@ -678,7 +678,7 @@
                         <!--Start Price Alert -->
 
                         <div
-                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
+                          class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
                         >
                           <label
                             on:click={() => ($openPriceAlert = true)}
diff --git a/src/routes/etf/[tickerID]/dark-pool/+layout.svelte b/src/routes/etf/[tickerID]/dark-pool/+layout.svelte
index 6c155449..d05ee749 100644
--- a/src/routes/etf/[tickerID]/dark-pool/+layout.svelte
+++ b/src/routes/etf/[tickerID]/dark-pool/+layout.svelte
@@ -10,11 +10,11 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           <div
             class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
diff --git a/src/routes/etf/[tickerID]/dark-pool/+page.server.ts b/src/routes/etf/[tickerID]/dark-pool/+page.server.ts
index 8f28436c..55b481f1 100644
--- a/src/routes/etf/[tickerID]/dark-pool/+page.server.ts
+++ b/src/routes/etf/[tickerID]/dark-pool/+page.server.ts
@@ -3,60 +3,62 @@ import { validateData } from "$lib/utils";
 import { loginUserSchema, registerUserSchema } from "$lib/schemas";
 
 
-export const load = async ({ params, locals }) => {
-      const { apiURL, apiKey, user } = locals;
 
-    const postData = {
-      ticker: params.tickerID,
+
+export const load = async ({ locals, params }) => {
+  const { apiURL, apiKey, user } = locals;
+  const ticker = params.tickerID;
+
+  if (!ticker) {
+    return { error: 'Invalid ticker ID' };
+  }
+
+  // Define the endpoints you want to fetch in bulk
+  const endpoints = [
+    "/dark-pool-level",
+    "/historical-dark-pool",
+  ];
+
+  // Prepare the payload for the bulk request
+  const postData = {
+    ticker,
+    endpoints
+  };
+
+  try {
+    const response = await fetch(`${apiURL}/bulk-data`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch bulk data");
+    }
+
+    const bulkData = await response.json();
+
+    // Process analyst ticker history: if user isn't Pro, limit to 6 items
+    let priceLevel = bulkData["/dark-pool-level"];
+   if (user?.tier !== "Pro") {
+      priceLevel.hottestTrades = priceLevel?.hottestTrades?.slice(0, 3);
+    }
+
+    return {
+      getPriceLevel: priceLevel,
+      getHistoricalDarkPool: bulkData["/historical-dark-pool"],
     };
-
-  const getPriceLevel = async () => {
-
-
-    const response = await fetch(apiURL + "/dark-pool-level", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    let output = await response.json();
-    output.hottestTrades = user?.tier !== "Pro" ? output?.hottestTrades?.slice(0, 3) : output.hottestTrades;
-
-
-    return output;
-  };
-
-  const getHistoricalDarkPool = async () => {
-
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/historical-dark-pool", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getPriceLevel: await getPriceLevel(),
-    getHistoricalDarkPool: await getHistoricalDarkPool(),
-
-  };
+  } catch (error) {
+    return { error: "Failed to load data" };
+  }
 };
 
 
 
+
 export const actions = {
   login: async ({ url, request, locals }) => {
 
diff --git a/src/routes/etf/[tickerID]/dark-pool/+page.svelte b/src/routes/etf/[tickerID]/dark-pool/+page.svelte
index 7f5c8c5b..dc0aed88 100644
--- a/src/routes/etf/[tickerID]/dark-pool/+page.svelte
+++ b/src/routes/etf/[tickerID]/dark-pool/+page.svelte
@@ -19,7 +19,7 @@
   description={`Explore exclusive dark pool trading data for ${$displayCompanyName} (${$etfTicker}). Get insights into hidden market activity, stock price movements, institutional trades, financials, and key statistics.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -34,7 +34,7 @@
             <div class="flex flex-row items-center mb-4 sm:mb-0">
               <label
                 for="darkPoolInfo"
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+                class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
               >
                 Dark Pool Data
               </label>
@@ -59,6 +59,7 @@
         {#if hottestTrades?.length > 0}
           <HottestTrades {data} rawData={hottestTrades} />
         {/if}
+
         {#if historicalDarkPool?.length > 10}
           <HistoricalVolume {data} rawData={historicalDarkPool} />
         {/if}
diff --git a/src/routes/etf/[tickerID]/dividends/+layout.svelte b/src/routes/etf/[tickerID]/dividends/+layout.svelte
index 1a82fab4..c034346c 100644
--- a/src/routes/etf/[tickerID]/dividends/+layout.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+layout.svelte
@@ -20,13 +20,13 @@
         <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if newsList?.length !== 0}
             <div
-              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
             >
               <div class="p-4 text-sm">
-                <h3 class="text-lg text-white font-semibold mb-3">
+                <h3 class="text-lg font-semibold mb-3">
                   {$etfTicker} News
                 </h3>
-                <ul class="text-white">
+                <ul class="">
                   {#each newsList?.slice(0, 10) as item}
                     <li class="mb-3 last:mb-1">
                       {formatDate(item?.publishedDate)} &#183;
diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte
index 4e32e39a..e36b9855 100644
--- a/src/routes/etf/[tickerID]/dividends/+page.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+page.svelte
@@ -68,59 +68,53 @@
   description={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
         <div class="w-full mb-6">
-          <h1 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4 w-full">
-            Dividends
-          </h1>
+          <h1 class="text-xl sm:text-2xl font-bold mb-4 w-full">Dividends</h1>
 
           <Infobox text={htmlOutput} />
         </div>
 
         {#if rawData?.history?.length !== 0}
           <div
-            class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
+            class="shadow-sm mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 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]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Dividend Yield
               </label>
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {dividendYield !== "0.00" ? dividendYield : "0"}%
               </div>
             </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-b border-gray-600">
+            <div
+              class="p-4 bp:p-5 sm:p-6 border-b border-gray-300 dark:border-gray-600"
+            >
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Annual Dividend
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {annualDividend !== "0.00" ? annualDividend : "0"}
               </div>
             </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-none">
+            <div class="p-4 bp:p-5 sm:p-6 border-t border-b sm:border-none">
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Ex-Dividend Date
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {new Date(exDividendDate)?.toLocaleString("en-US", {
                   month: "short",
                   day: "numeric",
@@ -132,53 +126,47 @@
 
             <div class="p-4 bp:p-5 sm:p-6 border-t">
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Payout Frequency
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {payoutFrequency ? payoutFrequency : "n/a"}
               </div>
             </div>
             <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]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Payout Ratio
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {payoutRatio !== "0.00" && payoutRatio !== null
                   ? payoutRatio + "%"
                   : "n/a"}
               </div>
             </div>
-            <div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600">
+            <div
+              class="p-4 bp:p-5 sm:p-6 border-t border-gray-300 dark:border-gray-600"
+            >
               <label
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
               >
                 Dividend Growth
               </label>
 
-              <div
-                class="mt-1 break-words font-semibold leading-8 text-light text-xl"
-              >
+              <div class="mt-1 break-words font-semibold leading-8 text-xl">
                 {dividendGrowth ? dividendGrowth + "%" : "n/a"}
               </div>
             </div>
           </div>
 
           <div
-            class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-8"
+            class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-4"
           >
-            <h2 class="text-xl sm:text-2xl text-white font-bold">
-              Dividends History
-            </h2>
+            <h2 class="text-xl sm:text-2xl font-bold">Dividends History</h2>
           </div>
 
           {#if rawData?.history?.length !== 0}
@@ -186,32 +174,32 @@
               class="overflow-x-auto no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
             >
               <table
-                class="table table-sm table-compact bg-table border border-gray-800 flex justify-start items-center w-full m-auto"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
               >
-                <thead class="bg-default">
+                <thead class="text-muted dark:text-white dark:bg-default">
                   <tr class="">
-                    <th class="text-start text-white text-sm font-semibold">
+                    <th class="text-start text-sm font-semibold">
                       Ex-Dividend Date
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
+                    <th class="text-end text-sm font-semibold">
                       Cash Amount
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
+                    <th class="text-end text-sm font-semibold">
                       Declaration Date
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
+                    <th class="text-end text-sm font-semibold">
                       Record Date
                     </th>
-                    <th class="text-end text-white text-sm font-semibold">
-                      Pay Date
-                    </th>
+                    <th class="text-end text-sm font-semibold"> Pay Date </th>
                   </tr>
                 </thead>
                 <tbody class="">
                   {#each rawData?.history as item}
-                    <tr class="text-white odd:bg-odd">
+                    <tr
+                      class=" dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
+                    >
                       <td
-                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {new Date(item?.date)?.toLocaleString("en-US", {
                           month: "short",
@@ -221,12 +209,12 @@
                         })}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         ${item?.adjDividend?.toFixed(3)}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.declarationDate?.length !== 0
                           ? new Date(item?.declarationDate)?.toLocaleString(
@@ -241,7 +229,7 @@
                           : "n/a"}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.recordDate?.length !== 0
                           ? new Date(item?.recordDate)?.toLocaleString(
@@ -256,7 +244,7 @@
                           : "n/a"}
                       </td>
                       <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                       >
                         {item?.paymentDate?.length !== 0
                           ? new Date(item?.paymentDate)?.toLocaleString(
diff --git a/src/routes/etf/[tickerID]/history/+page.svelte b/src/routes/etf/[tickerID]/history/+page.svelte
index 716adb3c..aea76706 100644
--- a/src/routes/etf/[tickerID]/history/+page.svelte
+++ b/src/routes/etf/[tickerID]/history/+page.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    etfTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
+  import { stockTicker, displayCompanyName } from "$lib/store";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -11,11 +7,9 @@
   import { goto } from "$app/navigation";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import SEO from "$lib/components/SEO.svelte";
-
   import { onMount } from "svelte";
 
   export let data;
-  let isLoaded = false;
   let timePeriod = "Daily";
   let rawData = data?.getData || [];
   let originalData = [];
@@ -253,7 +247,7 @@
       const a = document.createElement("a");
       a.setAttribute("hidden", "");
       a.setAttribute("href", url);
-      a.setAttribute("download", `${$etfTicker}_price_history.csv`);
+      a.setAttribute("download", `${$stockTicker}_price_history.csv`);
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -263,36 +257,34 @@
   }
 
   $: {
-    if (timePeriod && typeof window !== "undefined") {
-      isLoaded = false;
+    if (timePeriod) {
       rawData = prepareDataset(data?.getData, timePeriod);
       originalData = rawData;
       stockList = rawData?.slice(0, 50);
-      isLoaded = true;
     }
   }
 </script>
 
 <SEO
-  title={`${$displayCompanyName} (${$etfTicker}) Stock Price History`}
-  description={`Get a complete stock price history for ${$displayCompanyName} (${$etfTicker}), starting from its first trading day. Includes open, high, low, close and volume.`}
+  title={`${$displayCompanyName} (${$stockTicker}) Stock Price History · Stocknear`}
+  description={`Get a complete stock price history for ${$displayCompanyName} (${$stockTicker}), starting from its first trading day. Includes open, high, low, close and volume.`}
 />
 
 <section
-  class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
+  class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
 >
   <div class="w-full overflow-hidden m-auto mt-5">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
             <div
               class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5"
             >
               <h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0">
-                {$etfTicker} Stock Price History
+                {$stockTicker} Stock Price History
               </h1>
               <div
                 class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0"
@@ -302,11 +294,9 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-fit sm:w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                        class="shadow-sm w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                       >
-                        <span class="truncate text-white px-1"
-                          >{timePeriod}</span
-                        >
+                        <span class="truncate px-1">{timePeriod}</span>
                         <svg
                           class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                           viewBox="0 0 20 20"
@@ -325,20 +315,20 @@
                     <DropdownMenu.Content
                       class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                     >
-                      <DropdownMenu.Label class="text-gray-400">
+                      <DropdownMenu.Label class="text-muted dark:text-gray-400">
                         Select time frame
                       </DropdownMenu.Label>
                       <DropdownMenu.Separator />
                       <DropdownMenu.Group>
                         <DropdownMenu.Item
                           on:click={() => (timePeriod = "Daily")}
-                          class="cursor-pointer hover:bg-primary"
+                          class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                         >
                           Daily
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                           on:click={() => (timePeriod = "Weekly")}
-                          class="cursor-pointer hover:bg-primary"
+                          class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                         >
                           Weekly
                         </DropdownMenu.Item>
@@ -346,7 +336,7 @@
                           {#each ["Monthly", "Quarterly", "Annual"] as entry}
                             <DropdownMenu.Item
                               on:click={() => goto("/pricing")}
-                              class="cursor-pointer hover:bg-primary"
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                             >
                               {entry}
                               <svg
@@ -354,7 +344,7 @@
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24"
                                 ><path
-                                  fill="#A3A3A3"
+                                  fill="currentColor"
                                   d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                                 /></svg
                               >
@@ -363,19 +353,19 @@
                         {:else}
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Monthly")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Monthly
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Quarterly")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Quarterly
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => (timePeriod = "Annual")}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Annual
                           </DropdownMenu.Item>
@@ -387,9 +377,9 @@
 
                 <Button
                   on:click={() => exportData()}
-                  class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                  class="shadow-sm ml-2 border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                 >
-                  <span class="truncate text-white">Download</span>
+                  <span class="truncate">Download</span>
                   <svg
                     class="{['Pro', 'Plus']?.includes(data?.user?.tier)
                       ? 'hidden'
@@ -397,128 +387,114 @@
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
                     ><path
-                      fill="#A3A3A3"
+                      fill="currentColor"
                       d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                     /></svg
                   >
                 </Button>
               </div>
             </div>
-            {#if isLoaded}
-              {#if rawData?.length !== 0}
-                <div class="w-full m-auto mt-2">
-                  <div
-                    class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
+            {#if rawData?.length !== 0}
+              <div class="w-full m-auto mt-2">
+                <div
+                  class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
+                >
+                  <table
+                    class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
                   >
-                    <table
-                      class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
-                    >
-                      <thead>
-                        <TableHeader {columns} {sortOrders} {sortData} />
-                      </thead>
+                    <thead>
+                      <TableHeader {columns} {sortOrders} {sortData} />
+                    </thead>
 
-                      <tbody>
-                        {#each stockList as item, index}
-                          <tr
-                            class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
-                              1 ===
-                              rawData?.length &&
-                            !['Pro', 'Plus']?.includes(data?.user?.tier)
-                              ? 'opacity-[0.1]'
-                              : ''}"
+                    <tbody>
+                      {#each stockList as item, index}
+                        <tr
+                          class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
+                            1 ===
+                            rawData?.length &&
+                          !['Pro', 'Plus']?.includes(data?.user?.tier)
+                            ? 'opacity-[0.1]'
+                            : ''}"
+                        >
+                          <td
+                            class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                           >
-                            <td
-                              class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {#if timePeriod === "Weekly"}
-                                Week of {new Date(item?.time).toLocaleString(
-                                  "en-US",
-                                  {
-                                    month: "short",
-                                    day: "numeric",
-                                    year: "numeric",
-                                    daySuffix: "2-digit",
-                                  },
-                                )}
-                              {:else}
-                                {new Date(item?.time).toLocaleString("en-US", {
+                            {#if timePeriod === "Weekly"}
+                              Week of {new Date(item?.time).toLocaleString(
+                                "en-US",
+                                {
                                   month: "short",
                                   day: "numeric",
                                   year: "numeric",
-                                  daySuffix: "2-digit",
-                                })}
-                              {/if}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.open?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.high?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.low?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.close?.toFixed(2)}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.change !== null ? item?.change : "n/a"}
-                            </td>
-                            <td
-                              class="text-sm sm:text-[1rem] {item?.changesPercentage >=
-                                0 && item?.changesPercentage !== null
-                                ? "text-[#00FC50] before:content-['+'] "
-                                : item?.changesPercentage < 0 &&
-                                    item?.changesPercentage !== null
-                                  ? 'text-red-600 dark:text-[#FF2F1F]'
-                                  : 'text-white'} text-end"
-                            >
-                              {item?.changesPercentage !== null
-                                ? item?.changesPercentage + "%"
-                                : "n/a"}
-                            </td>
-                            <td
-                              class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                            >
-                              {item?.volume?.toLocaleString("en-US")}
-                            </td>
-                          </tr>
-                        {/each}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              {:else}
-                <Infobox
-                  text={`No price history are available for ${$displayCompanyName}.`}
-                />
-              {/if}
-            {:else}
-              <div class="flex justify-center items-center h-80">
-                <div class="relative">
-                  <label
-                    class="bg-secondary rounded-md 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>
+                                  timeZone: "Europe/Berlin",
+                                },
+                              )}
+                            {:else}
+                              {new Date(item?.time).toLocaleString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric",
+                                timeZone: "Europe/Berlin",
+                              })}
+                            {/if}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.open?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.high?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.low?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.close?.toFixed(2)}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.change !== null ? item?.change : "n/a"}
+                          </td>
+                          <td
+                            class="text-sm sm:text-[1rem] {item?.changesPercentage >=
+                              0 && item?.changesPercentage !== null
+                              ? "text-green-600 dark:text-[#00FC50] before:content-['+'] "
+                              : item?.changesPercentage < 0 &&
+                                  item?.changesPercentage !== null
+                                ? 'text-red-600 dark:text-[#FF2F1F]'
+                                : ''} text-end"
+                          >
+                            {item?.changesPercentage !== null
+                              ? item?.changesPercentage + "%"
+                              : "n/a"}
+                          </td>
+                          <td
+                            class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                          >
+                            {item?.volume?.toLocaleString("en-US")}
+                          </td>
+                        </tr>
+                      {/each}
+                    </tbody>
+                  </table>
                 </div>
               </div>
+            {:else}
+              <Infobox
+                text={`No price history are available for ${$displayCompanyName}.`}
+              />
             {/if}
           </div>
         </main>
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           <div
             class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
@@ -530,9 +506,7 @@
                 <h2 class="text-start text-xl font-semibold ml-3">
                   Stock Screener
                 </h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
+                <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
               </div>
               <span class="p-3 ml-3 mr-3">
                 Filter, sort and analyze all stocks to find your next
@@ -550,9 +524,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
+                <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
               </div>
               <span class="p-3 ml-3 mr-3">
                 Keep track of your favorite stocks in real-time.
diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index 92c87d3f..c1e31dee 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    etfTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
+  import { etfTicker, displayCompanyName } from "$lib/store";
   import { formatString } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
@@ -64,7 +60,7 @@
 />
 
 <section
-  class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
+  class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
 >
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
@@ -83,7 +79,7 @@
             </div>
           {/if}
         </div>
-        <div class="mt-5 mb-10">
+        <div class="mt-5">
           <Infobox text={htmlOutput} />
         </div>
 
diff --git a/src/routes/etf/[tickerID]/insider/+layout.svelte b/src/routes/etf/[tickerID]/insider/+layout.svelte
index e16b3071..50ab9d00 100644
--- a/src/routes/etf/[tickerID]/insider/+layout.svelte
+++ b/src/routes/etf/[tickerID]/insider/+layout.svelte
@@ -1,11 +1,74 @@
 <script lang="ts">
   import { etfTicker } from "$lib/store";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  import { formatDate } from "$lib/utils";
+
+  import { page } from "$app/stores";
 
   export let data;
 
   let newsList = data?.getNews ?? [];
+
+  const formatDate = (dateString) => {
+    // Create a date object for the input dateString
+    const inputDate = new Date(dateString);
+
+    // Create a date object for the current time in New York City
+    const nycTime = new Date().toLocaleString("en-US", {
+      timeZone: "America/New_York",
+    });
+    const currentNYCDate = new Date(nycTime);
+
+    // Calculate the difference in milliseconds
+    const difference = inputDate.getTime() - currentNYCDate.getTime();
+
+    // Convert the difference to minutes
+    const minutes = Math.abs(Math.round(difference / (1000 * 60)));
+
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    } else if (minutes < 1440) {
+      const hours = Math.round(minutes / 60);
+      return `${hours} hour${hours !== 1 ? "s" : ""}`;
+    } else {
+      const days = Math.round(minutes / 1440);
+      return `${days} day${days !== 1 ? "s" : ""}`;
+    }
+  };
+
+  let displaySubSection = "";
+
+  if (!displaySubSection || displaySubSection.length === 0) {
+    const parts = $page?.url?.pathname.split("/");
+    const sectionMap = {
+      institute: "institute",
+      "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",
+      institute: "/insider/institute",
+      transcripts: "/insider/transcripts",
+    };
+
+    if (state !== "insider" && subSectionMap[state]) {
+      displaySubSection = state;
+      //goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
+    } else {
+      displaySubSection = state;
+      //goto(`/stocks/${$etfTicker}/insider`);
+    }
+  }
 </script>
 
 <section class="w-auto overflow-hidden">
@@ -18,21 +81,19 @@
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
+        <aside class="hidden lg:block relative fixed w-1/4">
           {#if newsList?.length !== 0}
             <div
-              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <div class="p-4 text-sm">
-                <h3 class="text-lg text-white font-semibold mb-3">
-                  {$etfTicker} News
-                </h3>
-                <ul class="text-white">
+                <h3 class="text-xl font-bold mb-3">{$etfTicker} News</h3>
+                <ul class="">
                   {#each newsList?.slice(0, 10) as item}
                     <li class="mb-3 last:mb-1">
-                      {formatDate(item?.publishedDate)} &#183;
+                      {formatDate(item?.publishedDate)} ago -
                       <a
-                        class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
+                        class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
                         href={item?.url}
                         target="_blank"
                         rel="noopener noreferrer nofollow">{item?.title}</a
diff --git a/src/routes/etf/[tickerID]/insider/+page.svelte b/src/routes/etf/[tickerID]/insider/+page.svelte
index 55b1ad87..8235462f 100644
--- a/src/routes/etf/[tickerID]/insider/+page.svelte
+++ b/src/routes/etf/[tickerID]/insider/+page.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import {
-    displayCompanyName,
-    numberOfUnreadNotification,
-    etfTicker,
-  } from "$lib/store";
+  import { displayCompanyName, etfTicker } from "$lib/store";
   import { getPartyForPoliticians } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import SEO from "$lib/components/SEO.svelte";
@@ -189,16 +185,12 @@
   description={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$etfTicker}) from democrates and republicans.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden min-h-screen text-white h-full"
->
+<section class="w-full overflow-hidden min-h-screen h-full">
   <div class="h-full overflow-hidden w-full">
     <div class="relative flex justify-center items-center overflow-hidden">
       <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full mt-2 sm:mt-0">
         <div class="mb-6">
-          <h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
-            Congress Trading
-          </h1>
+          <h1 class="text-xl sm:text-2xl font-bold mb-4">Congress Trading</h1>
 
           {#if isLoaded}
             {#if senateTradingList?.length !== 0}
@@ -211,16 +203,13 @@
                 >
                   <!--Start Buy/Sell-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
-                      <span
-                        class="font-semibold text-white text-sm sm:text-[1rem]"
+                      <span class="font-semibold text-sm sm:text-[1rem]"
                         >Buy/Sell</span
                       >
-                      <span
-                        class="text-start text-sm sm:text-[1rem] text-white"
-                      >
+                      <span class="text-start text-sm sm:text-[1rem]">
                         {buySellRatio?.toFixed(3)}
                       </span>
                     </div>
@@ -237,7 +226,7 @@
                           cy="18"
                           r="16"
                           fill="none"
-                          class="stroke-current text-[#3E3E3E]"
+                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                           stroke-width="3"
                         ></circle>
                         <!-- Progress Circle inside a group with rotation -->
@@ -262,8 +251,7 @@
                       <div
                         class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                       >
-                        <span
-                          class="text-center text-white text-sm sm:text-[1rem]"
+                        <span class="text-center text-sm sm:text-[1rem]"
                           >{buySellRatio?.toFixed(2)}</span
                         >
                       </div>
@@ -273,16 +261,13 @@
                   <!--End Buy/Sell-->
                   <!--Start Dem/Rep-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
-                      <span
-                        class="font-semibold text-white text-sm sm:text-[1rem]"
+                      <span class="font-semibold text-sm sm:text-[1rem]"
                         >Dem/Rep</span
                       >
-                      <span
-                        class="text-start text-sm sm:text-[1rem] text-white"
-                      >
+                      <span class="text-start text-sm sm:text-[1rem]">
                         {partyRatio?.toFixed(3)}
                       </span>
                     </div>
@@ -299,7 +284,7 @@
                           cy="18"
                           r="16"
                           fill="none"
-                          class="stroke-current text-[#3E3E3E]"
+                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                           stroke-width="3"
                         ></circle>
                         <!-- Progress Circle inside a group with rotation -->
@@ -322,8 +307,7 @@
                       <div
                         class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                       >
-                        <span
-                          class="text-center text-white text-sm sm:text-[1rem]"
+                        <span class="text-center text-sm sm:text-[1rem]"
                           >{partyRatio?.toFixed(2)}</span
                         >
                       </div>
@@ -339,7 +323,7 @@
                 class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded mb-4 overflow-x-auto"
               >
                 <table
-                  class="table table-sm sm:table-md table-compact rounded-none sm:rounded w-full bg-table border border-gray-800 m-auto"
+                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
                 >
                   <thead>
                     <TableHeader {columns} {sortOrders} {sortData} />
@@ -347,10 +331,10 @@
                   <tbody>
                     {#each senateTradingList as item}
                       <tr
-                        class="odd:bg-odd sm:hover:bg-[#245073]/10 border-b border-gray-800"
+                        class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
                       >
                         <td
-                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
+                          class=" text-sm sm:text-[1rem] whitespace-nowrap pb-3"
                         >
                           <div class="flex flex-row items-center">
                             <div
@@ -371,7 +355,7 @@
                             <div class="flex flex-col ml-3 font-normal">
                               <a
                                 href={`/politicians/${item?.id}`}
-                                class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
+                                class="text-blue-500 sm:hover:text-muted dark:sm:hover: dark:text-blue-400"
                                 >{getAbbreviatedName(
                                   item?.representative?.replace("_", " "),
                                 )}</a
@@ -382,13 +366,13 @@
                         </td>
 
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.party}
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {new Date(item?.transactionDate)?.toLocaleString(
                             "en-US",
@@ -402,12 +386,12 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.amount}
                         </td>
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {#if item?.type === "Bought"}
                             <span class="text-green-600 dark:text-[#00FC50]"
diff --git a/src/routes/etf/[tickerID]/options/+layout.svelte b/src/routes/etf/[tickerID]/options/+layout.svelte
index d741182e..e812cb2e 100644
--- a/src/routes/etf/[tickerID]/options/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/+layout.svelte
@@ -20,8 +20,10 @@
 
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
+      //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
     } else {
       displaySubSection = state;
+      //goto(`/etf/${$etfTicker}/statistics`);
     }
   }
 
@@ -56,13 +58,9 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main
-          class="w-full {displaySubSection === 'overview'
-            ? ''
-            : 'lg:w-3/4 lg:pr-10'}"
-        >
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <nav
-            class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
+            class="sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
           >
             <ul class="flex flex-row items-center w-full">
               <a
@@ -139,11 +137,7 @@
           </div>
         </main>
 
-        <aside
-          class="{displaySubSection === 'overview'
-            ? 'hidden'
-            : '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 border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
@@ -159,7 +153,7 @@
                   class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
                 />
               </div>
-              <span class="p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Get realtime options flow and customize your screener
               </span>
             </a>
@@ -180,7 +174,7 @@
                   class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
                 />
               </div>
-              <span class="p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Build your Stock Screener to find profitable stocks.
               </span>
             </a>
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 30ff9ee9..89df9cc9 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -3,7 +3,7 @@
   import DailyStats from "$lib/components/Options/DailyStats.svelte";
   import TickerFlow from "$lib/components/Options/TickerFlow.svelte";
 
-  import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
+  import { abbreviateNumber, monthNames } from "$lib/utils";
   import { onMount } from "svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
@@ -90,7 +90,7 @@
               marker +
               param.seriesName +
               ": " +
-              abbreviateNumberWithColor(param.value, false, true) +
+              abbreviateNumber(param.value, false, true) +
               "<br/>";
           });
 
@@ -279,10 +279,10 @@
 
 <SEO
   title="Options Activity"
-  description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
+  description={`Explore unusual options activity for ${$displayCompanyName} (${$etfTicker}), providing insights into market sentiment and potential stock movement.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white min-h-screen">
+<section class="w-full overflow-hidden min-h-screen">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -318,15 +318,15 @@
             </select>
           </div>
 
-          <div class="app w-full bg-default">
+          <div class="app w-full ">
             {#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"
+                class="text-xl  m-auto flex justify-center items-center h-full"
               >
                 <div
-                  class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
+                  class=" text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
                 >
                   <svg
                     class="w-5 h-5 inline-block sm:mr-2 shrink-0"
@@ -345,64 +345,42 @@
           -->
 
           {#if optionList?.length !== 0}
-            <h3 class="text-xl sm:text-2xl text-white font-bold text-start">
+            <h3 class="text-xl sm:text-2xl font-bold text-start">
               Historical {$etfTicker} Data
             </h3>
 
             <div class="flex justify-start items-center m-auto overflow-x-auto">
               <table
-                class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-3"
               >
-                <thead class="bg-default">
+                <thead class="text-muted dark:text-white dark:bg-default">
                   <tr class="">
-                    <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"
-                      >Volume</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >C Volume</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >P Volume</td
-                    >
+                    <td class=" font-semibold text-sm text-start">Date</td>
+                    <td class=" font-semibold text-sm text-end">% Change</td>
+                    <td class=" font-semibold text-sm text-end">P/C</td>
+                    <td class=" font-semibold text-sm text-center">Volume</td>
+                    <td class=" font-semibold text-sm text-center">C Volume</td>
+                    <td class=" font-semibold text-sm text-center">P Volume</td>
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Vol/30D</td
                     >
                       -->
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" 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
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >C Prem</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >P Prem</td
-                    >
+                    <td class=" font-semibold text-sm text-end">Total OI</td>
+                    <td class=" font-semibold text-sm text-end">OI Change</td>
+                    <td class=" font-semibold text-sm text-end">% OI Change</td>
+                    <td class=" font-semibold text-sm text-end">C Prem</td>
+                    <td class=" font-semibold text-sm text-end">P Prem</td>
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Net Prem</td
                     >
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Total Prem</td
                     >
                       -->
@@ -411,32 +389,28 @@
                 <tbody>
                   {#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
                     <tr
-                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800 {index +
+                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                         1 ===
                         optionList?.slice(0, 3)?.length &&
                       !['Pro']?.includes(data?.user?.tier)
                         ? 'opacity-[0.1]'
                         : ''}"
                     >
-                      <td class="text-white text-sm sm:text-[1rem] text-start">
+                      <td class=" text-sm sm:text-[1rem] text-start">
                         {formatDate(item?.date)}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
                           <span class="text-green-600 dark:text-[#00FC50]"
                             >+{item?.changesPercentage >= 1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentage,
-                                )
+                              ? abbreviateNumber(item?.changesPercentage)
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
                           <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentage,
-                                )
+                              ? abbreviateNumber(item?.changesPercentage)
                               : item?.changesPercentage?.toFixed(2)}%
                           </span>
                         {:else}
@@ -444,11 +418,11 @@
                         {/if}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
+                      <td class="text-sm sm:text-[1rem] text-end">
                         {item?.putCallRatio}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
+                      <td class="text-sm sm:text-[1rem] text-end">
                         {item?.volume?.toLocaleString("en-US")}
                       </td>
 
@@ -464,7 +438,7 @@
                         {item?.put_volume?.toLocaleString("en-US")}
                       </td>
                       <!--
-                      <td class="text-sm sm:text-[1rem] text-white text-end">
+                      <td class="text-sm sm:text-[1rem]  text-end">
                         {item?.avgVolumeRatio?.toFixed(2)}
                       </td>
                       -->
@@ -512,24 +486,24 @@
                           >
                             <div class="flex justify-between space-x-4">
                               <div
-                                class="space-y-1 flex flex-col items-start text-white"
+                                class="space-y-1 flex flex-col items-start "
                               >
                                 <div>
-                                  Bearish: {@html abbreviateNumberWithColor(
+                                  Bearish: {@html abbreviateNumber(
                                     item?.premium_ratio[0],
                                     false,
                                     true,
                                   )}
                                 </div>
                                 <div>
-                                  Neutral: {@html abbreviateNumberWithColor(
+                                  Neutral: {@html abbreviateNumber(
                                     item?.premium_ratio[1],
                                     false,
                                     true,
                                   )}
                                 </div>
                                 <div>
-                                  Bullish: {@html abbreviateNumberWithColor(
+                                  Bullish: {@html abbreviateNumber(
                                     item?.premium_ratio[2],
                                     false,
                                     true,
@@ -542,15 +516,15 @@
                       </td>
                       -->
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(
                           item?.total_open_interest,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changeOI >= 0}
                           <span class="text-green-600 dark:text-[#00FC50]"
                             >+{item?.changeOI?.toLocaleString("en-US")}</span
@@ -560,58 +534,50 @@
                             >{item?.changeOI?.toLocaleString("en-US")}
                           </span>
                         {:else}
-                          <span class="text-white"> n/a </span>
+                          <span class=""> n/a </span>
                         {/if}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentageOI >= 0}
                           <span class="text-green-600 dark:text-[#00FC50]"
                             >+{item?.changesPercentageOI >= 1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentageOI,
-                                )
+                              ? abbreviateNumber(item?.changesPercentageOI)
                               : item?.changesPercentageOI?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentageOI < 0}
                           <span class="text-red-600 dark:text-[#FF2F1F]"
                             >{item?.changesPercentageOI <= -1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentageOI,
-                                )
+                              ? abbreviateNumber(item?.changesPercentageOI)
                               : item?.changesPercentageOI?.toFixed(2)}%
                           </span>
                         {:else}
-                          <span class="text-white"> n/a </span>
+                          <span class=""> n/a </span>
                         {/if}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(
                           item?.call_premium,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
-                          item?.put_premium,
-                          false,
-                          true,
-                        )}
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(item?.put_premium, false, true)}
                       </td>
                       <!--
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end ">
+                        {@html abbreviateNumber(
                           item?.net_premium,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end ">
+                        {@html abbreviateNumber(
                           item?.total_premium,
                           false,
                           true,
@@ -633,21 +599,3 @@
 </section>
 
 <!--Start Options Detail Desktop Modal-->
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/etf/[tickerID]/options/dex/+layout.svelte b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
index e4445444..6784092c 100644
--- a/src/routes/etf/[tickerID]/options/dex/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/+layout.svelte
@@ -15,10 +15,10 @@
 
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
-      //goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
+      //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
     } else {
       displaySubSection = state;
-      //goto(`/stocks/${$etfTicker}/statistics`);
+      //goto(`/etf/${$etfTicker}/statistics`);
     }
   }
 
diff --git a/src/routes/etf/[tickerID]/options/dex/+page.svelte b/src/routes/etf/[tickerID]/options/dex/+page.svelte
index 09685ef6..cb8942e5 100644
--- a/src/routes/etf/[tickerID]/options/dex/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { etfTicker, displayCompanyName } from "$lib/store";
   import Infobox from "$lib/components/Infobox.svelte";
   import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
   import SEO from "$lib/components/SEO.svelte";
@@ -8,10 +7,9 @@
 </script>
 
 <SEO
-  title="Daily Gamma Exposure"
-  description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+  title="Daily Delta Exposure"
+  description="Analyze daily delta exposure with historic options volume and open interest data. Save individual contracts for future reference and optimize your trading strategy."
 />
-
 <section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
diff --git a/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
index 2a4d6f73..d5ccb95f 100644
--- a/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
@@ -10,8 +10,8 @@
 </script>
 
 <SEO
-  title="Delta Exposure By Expiry"
-  description={`Analyze delta exposure for ${$displayCompanyName} (${$etfTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+  title="Delta Exposure by Expiry"
+  description={`Analyze Delta 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 overflow-hidden min-h-screen pb-40">
diff --git a/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte b/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
index 110e3eba..ce40f091 100644
--- a/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
@@ -1,18 +1,54 @@
 <script lang="ts">
-  import { etfTicker, displayCompanyName } from "$lib/store";
+  import {
+    etfTicker,
+    numberOfUnreadNotification,
+    displayCompanyName,
+  } from "$lib/store";
 
   import Infobox from "$lib/components/Infobox.svelte";
-  import SEO from "$lib/components/SEO.svelte";
 
   import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
 
   export let data;
 </script>
 
-<SEO
-  title="Delta Exposure By Strike Price"
-  description={`Analyze delta exposure for ${$displayCompanyName} (${$etfTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
-/>
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$etfTicker}) 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.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$etfTicker}) 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.`}
+  />
+  <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}) 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.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
 
 <section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
diff --git a/src/routes/etf/[tickerID]/options/gex/+page.svelte b/src/routes/etf/[tickerID]/options/gex/+page.svelte
index bb0bfaa9..bc3a52a3 100644
--- a/src/routes/etf/[tickerID]/options/gex/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { etfTicker, displayCompanyName } from "$lib/store";
+
   import Infobox from "$lib/components/Infobox.svelte";
   import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
   import SEO from "$lib/components/SEO.svelte";
@@ -11,13 +12,14 @@
   title="Daily Gamma Exposure"
   description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
 />
+
 <section class="w-full overflow-hidden min-h-screen pb-40">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       {#if data?.getData?.length > 0}
-        <GreekExposure {data} title="Gamma" params="" />
+        <GreekExposure {data} title="Gamma" />
       {:else}
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
           <div class="mt-2">
diff --git a/src/routes/etf/[tickerID]/options/gex/expiry/+page.server.ts b/src/routes/etf/[tickerID]/options/gex/expiry/+page.server.ts
index ffcde4bb..c9af0fa7 100644
--- a/src/routes/etf/[tickerID]/options/gex/expiry/+page.server.ts
+++ b/src/routes/etf/[tickerID]/options/gex/expiry/+page.server.ts
@@ -24,9 +24,6 @@ export const load = async ({ locals, params }) => {
   }; 
 
 
-
-  
-
   // Make sure to return a promise
   return {
     getData: await getData(),
diff --git a/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte b/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
index 8c4a8f9c..59856287 100644
--- a/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
   import { etfTicker, displayCompanyName } from "$lib/store";
-  import SEO from "$lib/components/SEO.svelte";
 
   import Infobox from "$lib/components/Infobox.svelte";
   import GreekByExpiry from "$lib/components/Options/GreekByExpiry.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
   let rawData = data?.getData || [];
 </script>
 
 <SEO
-  title="Gamma Exposure By Expiry"
-  description={`Analyze gamma exposure for ${$displayCompanyName} (${$etfTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+  title="Gamma Exposure 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 overflow-hidden min-h-screen pb-40">
diff --git a/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte b/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
index 550a2ff4..55d3078a 100644
--- a/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
   import { etfTicker, displayCompanyName } from "$lib/store";
-
-  import Infobox from "$lib/components/Infobox.svelte";
   import SEO from "$lib/components/SEO.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
 
   export let data;
 </script>
 
 <SEO
-  title="Gamma Exposure By Strike Price"
-  description={`Analyze gamma exposure for ${$displayCompanyName} (${$etfTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
+  title={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Strike Price`}
+  description={`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.`}
 />
 
 <section class="w-full overflow-hidden min-h-screen pb-40">
diff --git a/src/routes/etf/[tickerID]/options/oi/+layout.svelte b/src/routes/etf/[tickerID]/options/oi/+layout.svelte
index 0fcc5960..483a518f 100644
--- a/src/routes/etf/[tickerID]/options/oi/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/+layout.svelte
@@ -14,10 +14,10 @@
 
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
-      //goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
+      //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
     } else {
       displaySubSection = state;
-      //goto(`/stocks/${$etfTicker}/statistics`);
+      //goto(`/etf/${$etfTicker}/statistics`);
     }
   }
 
@@ -49,7 +49,7 @@
       >
         <main class="w-full">
           <nav
-            class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
+            class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
           >
             <ul class="flex flex-row items-center w-full">
               <a
diff --git a/src/routes/etf/[tickerID]/options/oi/+page.svelte b/src/routes/etf/[tickerID]/options/oi/+page.svelte
index 7ed77814..6f47a93f 100644
--- a/src/routes/etf/[tickerID]/options/oi/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/oi/+page.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <SEO
-  title="Open Interet by Strike Price"
+  title="Open Interest 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.`}
 />
 
diff --git a/src/routes/etf/[tickerID]/options/volatility/+page.svelte b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
index 42bb84a6..b0e9ee54 100644
--- a/src/routes/etf/[tickerID]/options/volatility/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
@@ -14,7 +14,7 @@
   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 overflow-hidden min-h-screen pb-40">
+<section class="w-full overflow-hidden min-h-screen">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
