diff --git a/src/routes/api/historical-price/+server.ts b/src/routes/api/historical-price/+server.ts
index 9d1409b0..1f23b232 100644
--- a/src/routes/api/historical-price/+server.ts
+++ b/src/routes/api/historical-price/+server.ts
@@ -15,6 +15,5 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   });
 
   const output = await response.json();
-
   return new Response(JSON.stringify(output));
 };
diff --git a/src/routes/watchlist/options/+page.server.ts b/src/routes/watchlist/options/+page.server.ts
index 5cbff952..84c3f54c 100644
--- a/src/routes/watchlist/options/+page.server.ts
+++ b/src/routes/watchlist/options/+page.server.ts
@@ -1,3 +1,14 @@
+  function daysLeft(targetDate) {
+    const targetTime = new Date(targetDate).getTime();
+    const currentTime = new Date().getTime();
+    const difference = targetTime - currentTime;
+
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const daysLeft = Math?.ceil(difference / millisecondsPerDay);
+
+    return daysLeft;
+  }
+  
 export const load = async ({ locals }) => {
   const getOptionsWatchlist = async () => {
     const { apiKey, apiURL, pb, user } = locals;
@@ -21,6 +32,13 @@ export const load = async ({ locals }) => {
           body: JSON.stringify(postData),
         });
         const output = await response.json();
+
+        output?.forEach((item) => {
+        item.dte = daysLeft(item?.date_expiration);
+        item.size = Math.floor(item?.cost_basis / (item?.price * 100));
+      });
+
+
         return { id: watchList?.id, optionsList: output };
       } else {
         return { id: "", optionsList: [] };
diff --git a/src/routes/watchlist/options/+page.svelte b/src/routes/watchlist/options/+page.svelte
index ef0ee0c4..4bc61484 100644
--- a/src/routes/watchlist/options/+page.svelte
+++ b/src/routes/watchlist/options/+page.svelte
@@ -7,6 +7,7 @@
   import { screenWidth, setCache, getCache } from "$lib/store";
   import { onMount } from "svelte";
   import { toast } from "svelte-sonner";
+  import highcharts from "$lib/highcharts.ts";
   import { mode } from "mode-watcher";
 
   export let data;
@@ -16,7 +17,7 @@
   let deleteOptionsId = [];
 
   let isLoaded = false;
-  let configContract = null;
+  let config = null;
 
   let optionHistoryList = [];
   let selectGraphType = "Vol/OI";
@@ -24,6 +25,7 @@
   let rawDataHistory = [];
   let strikePrice;
   let optionType;
+  let optionSymbol;
   let dateExpiration;
   let ticker;
 
@@ -38,7 +40,7 @@
     return daysLeft;
   }
 
-  let optionsWatchlist = data?.getOptionsWatchlist?.optionsList;
+  let rawData = data?.getOptionsWatchlist?.optionsList;
 
   function reformatDate(dateString) {
     return (
@@ -137,17 +139,6 @@
     }
   }
 
-  onMount(async () => {
-    if (optionsWatchlist?.length !== 0) {
-      optionsWatchlist?.forEach((item) => {
-        item.dte = daysLeft(item?.date_expiration);
-        item.size = Math.floor(item?.cost_basis / (item?.price * 100));
-      });
-    }
-    originalData = [...optionsWatchlist];
-    isLoaded = true;
-  });
-
   function getScroll() {
     const scrollThreshold = container.scrollHeight * 0.8; // 80% of the container height
 
@@ -166,17 +157,19 @@
     }
   }
 
-  const getContractHistory = async (contractId) => {
+  const getContractHistory = async () => {
     let output;
-    const cachedData = getCache(contractId, "getContractHistory");
+    const cachedData = getCache(optionSymbol, "getContractHistory");
     if (cachedData) {
       output = cachedData;
     } else {
       const postData = {
         ticker: ticker,
-        contract: contractId,
+        contract: optionSymbol,
       };
 
+      console.log(postData);
+
       // make the POST request to the endpoint
       const response = await fetch("/api/options-contract-history", {
         method: "POST",
@@ -188,7 +181,35 @@
 
       output = await response.json();
 
-      setCache(contractId, output, "getContractHistory");
+      setCache(optionSymbol, output, "getContractHistory");
+    }
+
+    return output;
+  };
+
+  const getHistoricalPrice = async () => {
+    let output;
+    const cachedData = getCache(ticker, "getHistoricalPrice");
+    if (cachedData) {
+      output = cachedData;
+    } else {
+      const postData = {
+        timePeriod: "six-months",
+        ticker: ticker,
+      };
+
+      // make the POST request to the endpoint
+      const response = await fetch("/api/historical-price", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
+
+      output = await response.json();
+
+      setCache(ticker, output, "getHistoricalPrice");
     }
 
     return output;
@@ -201,13 +222,18 @@
 
     strikePrice = item?.strike_price;
     optionType = item?.option_type;
+    ticker = item?.ticker;
     dateExpiration = item?.date_expiration;
-    const output = await getContractHistory(item?.option_symbol);
+    optionSymbol = item?.option_symbol;
+    const output = await getContractHistory();
+    const historicalPrice = await getHistoricalPrice();
+
+    console.log(historicalPrice);
     rawDataHistory = output?.history;
 
     if (rawDataHistory?.length > 0) {
       rawDataHistory.forEach((entry) => {
-        const matchingData = data?.getHistoricalPrice?.find(
+        const matchingData = historicalPrice?.find(
           (d) => d?.time === entry?.date,
         );
         if (matchingData) {
@@ -215,19 +241,19 @@
         }
       });
 
-      configContract = plotContractHistory();
+      config = plotData();
       rawDataHistory = rawDataHistory?.sort(
         (a, b) => new Date(b?.date) - new Date(a?.date),
       );
       optionHistoryList = rawDataHistory?.slice(0, 20);
     } else {
-      configContract = null;
+      config = null;
     }
 
     isLoaded = true;
   }
 
-  function plotContractHistory() {
+  function plotData() {
     // Ensure rawDataHistory exists and sort it by date
     const sortedData =
       rawDataHistory?.sort((a, b) => new Date(a?.date) - new Date(b?.date)) ||
@@ -503,10 +529,9 @@
     sortOrders[key].order =
       orderCycle[(currentOrderIndex + 1) % orderCycle.length];
     const sortOrder = sortOrders[key].order;
-
-    // Reset to original data when 'none' and stop further sorting
+    let originalData = data?.getOptionsWatchlist?.optionsList;
     if (sortOrder === "none") {
-      optionsWatchlist = [...originalData]?.slice(0, 150);
+      rawData = [...originalData]?.slice(0, 150);
       return;
     }
 
@@ -548,8 +573,21 @@
     };
 
     // Sort using the generic comparison function
-    optionsWatchlist = [...originalData].sort(compareValues)?.slice(0, 150);
+    rawData = [...originalData].sort(compareValues)?.slice(0, 150);
   };
+
+  $: {
+    if (selectGraphType) {
+      isLoaded = false;
+      if (rawDataHistory?.length > 0) {
+        config = plotData();
+      } else {
+        config = null;
+      }
+
+      isLoaded = true;
+    }
+  }
 </script>
 
 <SEO
@@ -566,292 +604,276 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full">
-          {#if isLoaded}
-            {#if optionsWatchlist?.length !== 0}
-              <div class="flex flex-row justify-end items-center pb-2">
-                <h2 class="font-semibold text-xl mr-auto">
-                  {optionsWatchlist?.length} Options
-                </h2>
-                <a
-                  href="/options-flow"
-                  class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out dark:sm:hover:text-gray-300"
-                >
-                  <Star class="inline-block w-5 h-5" />
-                  <span class="ml-1 text-sm"> Add Contracts </span>
-                </a>
-                {#if editMode}
-                  <label
-                    on:click={handleDelete}
-                    class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-red-500"
-                  >
-                    <svg
-                      class="inline-block w-5 h-5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="currentColor"
-                        d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
-                      /></svg
-                    >
-                    <span class="ml-1 text-sm">
-                      {numberOfChecked}
-                    </span>
-                  </label>
-                {/if}
-
+          {#if rawData?.length !== 0}
+            <div class="flex flex-row justify-end items-center pb-2">
+              <h2 class="font-semibold text-xl mr-auto">
+                {rawData?.length} Options
+              </h2>
+              <a
+                href="/options-flow"
+                class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out dark:sm:hover:text-gray-300"
+              >
+                <Star class="inline-block w-5 h-5" />
+                <span class="ml-1 text-sm"> Add Contracts </span>
+              </a>
+              {#if editMode}
                 <label
-                  on:click={() => (editMode = !editMode)}
-                  class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-gray-800 dark:sm:hover:text-gray-200"
+                  on:click={handleDelete}
+                  class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-red-500"
                 >
                   <svg
                     class="inline-block w-5 h-5"
                     xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 1024 1024"
+                    viewBox="0 0 24 24"
                     ><path
                       fill="currentColor"
-                      d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
-                    /><path
-                      fill="currentColor"
-                      d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
+                      d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
                     /></svg
                   >
-                  {#if !editMode}
-                    <span class="ml-1 text-sm"> Edit </span>
-                  {:else}
-                    <span class="ml-1 text-sm"> Cancel </span>
-                  {/if}
+                  <span class="ml-1 text-sm">
+                    {numberOfChecked}
+                  </span>
                 </label>
-              </div>
+              {/if}
 
-              <!--Start Table-->
-              <div
-                class="w-full rounded-md overflow-hidden overflow-x-auto no-scrollbar"
+              <label
+                on:click={() => (editMode = !editMode)}
+                class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-gray-800 dark:sm:hover:text-gray-200"
               >
-                <table
-                  class="table table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-2 overflow-x-auto border border-gray-300 dark:border-gray-800"
+                <svg
+                  class="inline-block w-5 h-5"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 1024 1024"
+                  ><path
+                    fill="currentColor"
+                    d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
+                  /><path
+                    fill="currentColor"
+                    d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
+                  /></svg
                 >
-                  <thead>
-                    <TableHeader {columns} {sortOrders} {sortData} />
-                  </thead>
-                  <tbody>
-                    {#each optionsWatchlist as item, index}
-                      <!-- row -->
-                      <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
-                        <td
-                          class="text-xs sm:text-sm text-start whitespace-nowrap"
-                        >
-                          {formatTime(item?.time)}
-                        </td>
-
-                        <td
-                          on:click={() => handleFilter(item?.id)}
-                          class="{index % 2
-                            ? 'bg-white dark:bg-default'
-                            : 'bg-[#F6F7F8] dark:bg-odd'} font-normal text-sm sm:text-[1rem] text-center"
-                        >
-                          <div class=" flex flex-row items-center">
-                            <input
-                              type="checkbox"
-                              checked={deleteOptionsId?.includes(item?.id) ??
-                                false}
-                              class="{!editMode
-                                ? 'hidden'
-                                : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3"
-                            />
-                            {#if !editMode}
-                              <HoverStockChart
-                                symbol={item?.ticker}
-                                assetType={item?.underlying_type}
-                              />
-                            {:else}
-                              <span
-                                class="text-blue-800 dark:text-blue-400 cursor-pointer"
-                                >{item?.ticker}</span
-                              >
-                            {/if}
-                          </div>
-                        </td>
-
-                        <td
-                          class="text-sm sm:text-[1rem] text-start whitespace-nowrap flex justify-between"
-                        >
-                          <label
-                            on:click={() => handleViewData(item)}
-                            on:mouseover={() =>
-                              getContractHistory(item?.option_symbol)}
-                            class="cursor-pointer flex flex-row items-center justify-between text-blue-800 dark:text-blue-400 dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
-                          >
-                            <div>
-                              {item?.put_call === "Puts" ? "P" : "C"}
-                              {item?.strike_price}
-
-                              {" " + item?.date_expiration}
-                            </div>
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="inline-block w-4 h-4 ml-1"
-                              viewBox="0 0 512 512"
-                              fill="currentColor"
-                              ><path
-                                d="M104 496H72a24 24 0 01-24-24V328a24 24 0 0124-24h32a24 24 0 0124 24v144a24 24 0 01-24 24zM328 496h-32a24 24 0 01-24-24V232a24 24 0 0124-24h32a24 24 0 0124 24v240a24 24 0 01-24 24zM440 496h-32a24 24 0 01-24-24V120a24 24 0 0124-24h32a24 24 0 0124 24v352a24 24 0 01-24 24zM216 496h-32a24 24 0 01-24-24V40a24 24 0 0124-24h32a24 24 0 0124 24v432a24 24 0 01-24 24z"
-                              ></path></svg
-                            >
-                          </label>
-                        </td>
-
-                        <td class=" text-sm sm:text-[1rem] text-center">
-                          {reformatDate(item?.date_expiration)}
-                        </td>
-
-                        <td class=" text-sm sm:text-[1rem] text-center">
-                          {item?.dte < 0 ? "expired" : item?.dte + "d"}
-                        </td>
-
-                        <td
-                          class="text-sm sm:text-[1rem] {item?.sentiment ===
-                          'Bullish'
-                            ? 'dark:text-[#00FC50]'
-                            : item?.sentiment === 'Bearish'
-                              ? 'dark:text-[#FF2F1F]'
-                              : 'text-[#C6A755]'} text-center"
-                        >
-                          {item?.sentiment}
-                        </td>
-                        <td class="text-sm sm:text-[1rem] text-center">
-                          {item?.size?.toLocaleString("en-US")}
-                        </td>
-                        <td
-                          class="text-sm sm:text-[1rem] text-center whitespace-nowrap"
-                        >
-                          {item?.execution_estimate}
-                        </td>
-
-                        <td class="text-sm sm:text-[1rem] text-center">
-                          {item?.price}
-                        </td>
-
-                        <td class="text-sm sm:text-[1rem] text-center">
-                          {item?.underlying_price}
-                        </td>
-
-                        <td
-                          class="text-sm sm:text-[1rem] text-center {item?.put_call ===
-                          'Puts'
-                            ? 'dark:text-green-400'
-                            : 'dark:text-red-400'} "
-                        >
-                          {abbreviateNumber(item?.cost_basis)}
-                        </td>
-
-                        <td
-                          class="text-sm sm:text-[1rem] text-center {item?.option_activity_type ===
-                          'Sweep'
-                            ? 'dark:text-[#C6A755]'
-                            : 'dark:text-[#976DB7]'}"
-                        >
-                          {item?.option_activity_type}
-                        </td>
-
-                        <td
-                          class=" text-center text-sm sm:text-[1rem] text-center"
-                        >
-                          {new Intl.NumberFormat("en", {
-                            minimumFractionDigits: 0,
-                            maximumFractionDigits: 0,
-                          }).format(item?.volume)}
-                        </td>
-
-                        <td
-                          class=" text-center text-sm sm:text-[1rem] text-center"
-                        >
-                          {new Intl.NumberFormat("en", {
-                            minimumFractionDigits: 0,
-                            maximumFractionDigits: 0,
-                          }).format(item?.open_interest)}
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-              <!--End Table-->
-            {:else}
-              <div
-                class="flex flex-col justify-center items-center m-auto pt-8"
-              >
-                <span class=" font-bold text-2xl sm:text-3xl">
-                  Empty Options List
-                </span>
-
-                <span class=" text-sm sm:text-lg m-auto p-4 text-center">
-                  Add your unusual options contracts and start tracking them
-                  now!
-                </span>
-                {#if !data?.user}
-                  <a
-                    class="w-64 flex mt-10 justify-center items-center m-auto btn text-black bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
-                    href="/register"
-                  >
-                    Get Started
-                    <span
-                      class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
-                    >
-                      <svg
-                        class="w-4 h-4"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        ><g transform="rotate(90 12 12)"
-                          ><g fill="none"
-                            ><path
-                              d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
-                            /><path
-                              fill="black"
-                              d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
-                            /></g
-                          ></g
-                        ></svg
-                      >
-                    </span>
-                  </a>
+                {#if !editMode}
+                  <span class="ml-1 text-sm"> Edit </span>
                 {:else}
-                  <a
-                    href="/options-flow"
-                    class="w-64 flex mt-5 justify-center items-center m-auto btn bg-blue-700 sm:hover:bg-blue-600 border border-gray-300 dark:border-gray-600 group"
+                  <span class="ml-1 text-sm"> Cancel </span>
+                {/if}
+              </label>
+            </div>
+
+            <!--Start Table-->
+            <div
+              class="w-full rounded-md overflow-hidden overflow-x-auto no-scrollbar"
+            >
+              <table
+                class="table table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-2 overflow-x-auto border border-gray-300 dark:border-gray-800"
+              >
+                <thead>
+                  <TableHeader {columns} {sortOrders} {sortData} />
+                </thead>
+                <tbody>
+                  {#each rawData as item, index}
+                    <!-- row -->
+                    <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
+                      <td
+                        class="text-xs sm:text-sm text-start whitespace-nowrap"
+                      >
+                        {formatTime(item?.time)}
+                      </td>
+
+                      <td
+                        on:click={() => handleFilter(item?.id)}
+                        class="{index % 2
+                          ? 'bg-white dark:bg-default'
+                          : 'bg-[#F6F7F8] dark:bg-odd'} font-normal text-sm sm:text-[1rem] text-center"
+                      >
+                        <div class=" flex flex-row items-center">
+                          <input
+                            type="checkbox"
+                            checked={deleteOptionsId?.includes(item?.id) ??
+                              false}
+                            class="{!editMode
+                              ? 'hidden'
+                              : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3"
+                          />
+                          {#if !editMode}
+                            <HoverStockChart
+                              symbol={item?.ticker}
+                              assetType={item?.underlying_type}
+                            />
+                          {:else}
+                            <span
+                              class="text-blue-800 dark:text-blue-400 cursor-pointer"
+                              >{item?.ticker}</span
+                            >
+                          {/if}
+                        </div>
+                      </td>
+
+                      <td
+                        class="text-sm sm:text-[1rem] text-start whitespace-nowrap flex justify-between"
+                      >
+                        <label
+                          on:click={() => handleViewData(item)}
+                          on:mouseover={() =>
+                            getContractHistory(item?.option_symbol)}
+                          class="cursor-pointer flex flex-row items-center justify-between text-blue-800 dark:text-blue-400 dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                        >
+                          <div>
+                            {item?.put_call === "Puts" ? "P" : "C"}
+                            {item?.strike_price}
+
+                            {" " + item?.date_expiration}
+                          </div>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="inline-block w-4 h-4 ml-1"
+                            viewBox="0 0 512 512"
+                            fill="currentColor"
+                            ><path
+                              d="M104 496H72a24 24 0 01-24-24V328a24 24 0 0124-24h32a24 24 0 0124 24v144a24 24 0 01-24 24zM328 496h-32a24 24 0 01-24-24V232a24 24 0 0124-24h32a24 24 0 0124 24v240a24 24 0 01-24 24zM440 496h-32a24 24 0 01-24-24V120a24 24 0 0124-24h32a24 24 0 0124 24v352a24 24 0 01-24 24zM216 496h-32a24 24 0 01-24-24V40a24 24 0 0124-24h32a24 24 0 0124 24v432a24 24 0 01-24 24z"
+                            ></path></svg
+                          >
+                        </label>
+                      </td>
+
+                      <td class=" text-sm sm:text-[1rem] text-center">
+                        {reformatDate(item?.date_expiration)}
+                      </td>
+
+                      <td class=" text-sm sm:text-[1rem] text-center">
+                        {item?.dte < 0 ? "expired" : item?.dte + "d"}
+                      </td>
+
+                      <td
+                        class="text-sm sm:text-[1rem] {item?.sentiment ===
+                        'Bullish'
+                          ? 'dark:text-[#00FC50]'
+                          : item?.sentiment === 'Bearish'
+                            ? 'dark:text-[#FF2F1F]'
+                            : 'text-[#C6A755]'} text-center"
+                      >
+                        {item?.sentiment}
+                      </td>
+                      <td class="text-sm sm:text-[1rem] text-center">
+                        {item?.size?.toLocaleString("en-US")}
+                      </td>
+                      <td
+                        class="text-sm sm:text-[1rem] text-center whitespace-nowrap"
+                      >
+                        {item?.execution_estimate}
+                      </td>
+
+                      <td class="text-sm sm:text-[1rem] text-center">
+                        {item?.price}
+                      </td>
+
+                      <td class="text-sm sm:text-[1rem] text-center">
+                        {item?.underlying_price}
+                      </td>
+
+                      <td
+                        class="text-sm sm:text-[1rem] text-center {item?.put_call ===
+                        'Puts'
+                          ? 'dark:text-green-400'
+                          : 'dark:text-red-400'} "
+                      >
+                        {abbreviateNumber(item?.cost_basis)}
+                      </td>
+
+                      <td
+                        class="text-sm sm:text-[1rem] text-center {item?.option_activity_type ===
+                        'Sweep'
+                          ? 'dark:text-[#C6A755]'
+                          : 'dark:text-[#976DB7]'}"
+                      >
+                        {item?.option_activity_type}
+                      </td>
+
+                      <td
+                        class=" text-center text-sm sm:text-[1rem] text-center"
+                      >
+                        {new Intl.NumberFormat("en", {
+                          minimumFractionDigits: 0,
+                          maximumFractionDigits: 0,
+                        }).format(item?.volume)}
+                      </td>
+
+                      <td
+                        class=" text-center text-sm sm:text-[1rem] text-center"
+                      >
+                        {new Intl.NumberFormat("en", {
+                          minimumFractionDigits: 0,
+                          maximumFractionDigits: 0,
+                        }).format(item?.open_interest)}
+                      </td>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+            <!--End Table-->
+          {:else}
+            <div class="flex flex-col justify-center items-center m-auto pt-8">
+              <span class=" font-bold text-2xl sm:text-3xl">
+                Empty Options List
+              </span>
+
+              <span class=" text-sm sm:text-lg m-auto p-4 text-center">
+                Add your unusual options contracts and start tracking them now!
+              </span>
+              {#if !data?.user}
+                <a
+                  class="w-64 flex mt-10 justify-center items-center m-auto btn text-black bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
+                  href="/register"
+                >
+                  Get Started
+                  <span
+                    class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
                   >
-                    <span class="font-semibold text-[1rem]"
-                      >Follow the Whales
-                      <svg
-                        class="inline-block -mt-2 -ml-1 w-8 h-8"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 32 32"
+                    <svg
+                      class="w-4 h-4"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><g transform="rotate(90 12 12)"
                         ><g fill="none"
                           ><path
-                            fill="#00a6ed"
-                            d="M24.04 6.508C27.007 9.5 29 12.953 29 16.468c0 6.422-1.95 10.392-6.648 12.315a16 16 0 0 1-1.652-.318l-.012.582c-.105.563-.485 1.352-1.625.703c-.84-.478-2.112-1.55-2.33-4.281c-.511-1.271-.617-2.91-.733-4.969c-.164-2.91-3.078-3.89-5-4c-1.84-.105-8.316-.467-8.869-.498a15 15 0 0 1-.01-1.111c0-2.66 3.363-4.9 5.713-4.9h6.55c3.46 0 6.27 2.81 6.27 6.27c-.17 2.411 3.373 3.405 3.82.78c.492-2.896-.591-6.166-2.435-8.494c-.195-.047-.308-.047-.445.047c-1.258 1.258-2.16 1.312-3.852.914a1 1 0 0 0-.239-.103c-.228-.077-.435-.147-.331-.608c.14-.625 1.125-1.719 1.125-1.719c.773-.906 1.758-1.11 2.226-1.055c.402.047.515-.068.58-.135l.03-.029c.065-.051.133-.437.133-.437c-.164-.875.043-1.678.547-2.383c0 0 .882-1.266 1.687-1.344c.72-.07.803.37.879.768q.012.071.027.139c.334 1.535.17 1.902-.215 2.765c-.065.147-.137.308-.214.492c-.13.308-.058.434.038.605zM8.219 29.938c-1.735 0-3.64-2.438-3.11-5.922c.313.2 2.615 2.052 3.75 3.14c.329.844.11 2.782-.64 2.782"
+                            d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
                           /><path
-                            fill="#1c1c1c"
-                            d="M15.517 15a.61.61 0 0 1-.604-.604v-.758c0-.33.274-.604.604-.604s.604.274.604.604v.758a.604.604 0 0 1-.604.604"
-                          /><path
-                            fill="#aeddff"
-                            d="M20.706 28.208q.745.278 1.692.556q-.84.348-1.8.608q.06-.166.09-.325zm-3.973-4.468c-.107-.771-.157-1.671-.217-2.74l-.016-.281c-.164-2.911-3.766-4.61-5.687-4.719c-1.839-.105-8.138-.01-8.682 0c.339 7.399 6.034 14.639 13.885 14.095a27 27 0 0 0 3.007-.367c-1-.583-2.564-2.007-2.29-5.988"
+                            fill="black"
+                            d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
                           /></g
-                        ></svg
-                      >
-                    </span>
-                  </a>
-                {/if}
-              </div>
-            {/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"
+                        ></g
+                      ></svg
+                    >
+                  </span>
+                </a>
+              {:else}
+                <a
+                  href="/options-flow"
+                  class="w-64 flex mt-5 justify-center items-center m-auto btn bg-blue-700 sm:hover:bg-blue-600 border border-gray-300 dark:border-gray-600 group"
                 >
-                  <span class="loading loading-spinner loading-md text-gray-400"
-                  ></span>
-                </label>
-              </div>
+                  <span class="font-semibold text-[1rem]"
+                    >Follow the Whales
+                    <svg
+                      class="inline-block -mt-2 -ml-1 w-8 h-8"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 32 32"
+                      ><g fill="none"
+                        ><path
+                          fill="#00a6ed"
+                          d="M24.04 6.508C27.007 9.5 29 12.953 29 16.468c0 6.422-1.95 10.392-6.648 12.315a16 16 0 0 1-1.652-.318l-.012.582c-.105.563-.485 1.352-1.625.703c-.84-.478-2.112-1.55-2.33-4.281c-.511-1.271-.617-2.91-.733-4.969c-.164-2.91-3.078-3.89-5-4c-1.84-.105-8.316-.467-8.869-.498a15 15 0 0 1-.01-1.111c0-2.66 3.363-4.9 5.713-4.9h6.55c3.46 0 6.27 2.81 6.27 6.27c-.17 2.411 3.373 3.405 3.82.78c.492-2.896-.591-6.166-2.435-8.494c-.195-.047-.308-.047-.445.047c-1.258 1.258-2.16 1.312-3.852.914a1 1 0 0 0-.239-.103c-.228-.077-.435-.147-.331-.608c.14-.625 1.125-1.719 1.125-1.719c.773-.906 1.758-1.11 2.226-1.055c.402.047.515-.068.58-.135l.03-.029c.065-.051.133-.437.133-.437c-.164-.875.043-1.678.547-2.383c0 0 .882-1.266 1.687-1.344c.72-.07.803.37.879.768q.012.071.027.139c.334 1.535.17 1.902-.215 2.765c-.065.147-.137.308-.214.492c-.13.308-.058.434.038.605zM8.219 29.938c-1.735 0-3.64-2.438-3.11-5.922c.313.2 2.615 2.052 3.75 3.14c.329.844.11 2.782-.64 2.782"
+                        /><path
+                          fill="#1c1c1c"
+                          d="M15.517 15a.61.61 0 0 1-.604-.604v-.758c0-.33.274-.604.604-.604s.604.274.604.604v.758a.604.604 0 0 1-.604.604"
+                        /><path
+                          fill="#aeddff"
+                          d="M20.706 28.208q.745.278 1.692.556q-.84.348-1.8.608q.06-.166.09-.325zm-3.973-4.468c-.107-.771-.157-1.671-.217-2.74l-.016-.281c-.164-2.911-3.766-4.61-5.687-4.719c-1.839-.105-8.138-.01-8.682 0c.339 7.399 6.034 14.639 13.885 14.095a27 27 0 0 0 3.007-.367c-1-.583-2.564-2.007-2.29-5.988"
+                        /></g
+                      ></svg
+                    >
+                  </span>
+                </a>
+              {/if}
             </div>
           {/if}
         </main>
@@ -948,7 +970,7 @@
         </div>
         <div
           class="mt-2 border border-gray-300 dark:border-gray-800 rounded"
-          use:highcharts={configContract}
+          use:highcharts={config}
         ></div>
       </div>