diff --git a/src/routes/options-calculator/+page.svelte b/src/routes/options-calculator/+page.svelte
index 47fbcda3..d23b09d4 100644
--- a/src/routes/options-calculator/+page.svelte
+++ b/src/routes/options-calculator/+page.svelte
@@ -334,22 +334,22 @@
           const profitLossPctChange = (profitLoss / premium) * 100;
 
           return `
-          <div class="flex flex-col items-start text-sm">
-            <div>
-              <span class="text-start font-semibold">Underlying Price:</span> 
-              $${underlyingPrice} 
-              (<span>${underlyingPctChange.toFixed(2)}%</span>)
-            </div>
-            <br>
-          <div class="">
-            <span class="text-start font-semibold">Profit or Loss:</span> 
-            ${profitLoss < 0 ? "-$" : "$"}${Math.abs(profitLoss).toLocaleString("en-US")} 
-            (<span>${profitLossPctChange.toFixed(2)}%</span>)
-          </div>
-          </div>
-        `;
+      <div class="flex flex-col items-start text-sm">
+        <div>
+          <span class="text-start font-semibold">Underlying Price:</span> 
+          $${underlyingPrice} 
+          (<span>${underlyingPctChange.toFixed(2)}%</span>)
+        </div>
+        <div class="">
+          <span class="text-start font-semibold">Profit or Loss:</span> 
+          ${profitLoss < 0 ? "-$" : "$"}${Math.abs(profitLoss).toLocaleString("en-US")} 
+          (<span>${profitLossPctChange.toFixed(2)}%</span>)
+        </div>
+      </div>
+    `;
         },
       },
+
       plotOptions: {
         area: {
           fillOpacity: 0.2,
@@ -621,257 +621,258 @@
             </p>
 
             <div class="mt-4">
-              <!-- Table header -->
-
-              <!-- Table container -->
-              <div
-                class="overflow-x-auto border border-gray-300 dark:border-gray-600 rounded"
-              >
-                <table
-                  class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"
+              {#if isLoaded && config}
+                <!-- Table container -->
+                <div
+                  class="overflow-x-auto border border-gray-300 dark:border-gray-600 rounded"
                 >
-                  <!-- Table head -->
-                  <thead class="bg-gray-50 dark:bg-secondary">
-                    <tr>
-                      <th
-                        scope="col"
-                        class="px-4 py-1.5 text-left text-sm font-semibold"
-                      >
-                        Ticker
-                      </th>
-                      <th
-                        scope="col"
-                        class="px-4 py-1.5 text-left text-sm font-semibold"
-                      >
-                        Action
-                      </th>
-                      <th
-                        scope="col"
-                        class="px-4 py-1.5 text-left text-sm font-semibold"
-                      >
-                        Quantity
-                      </th>
-                      <th
-                        scope="col"
-                        class="px-4 py-1.5 text-left text-sm font-semibold"
-                      >
-                        Expiration Date
-                      </th>
-                      <th
-                        scope="col"
-                        class="px-4 py-1.5 text-left text-sm font-semibold"
-                      >
-                        Strike
-                      </th>
-                      <th
-                        scope="col"
-                        class="px-4 py-1.5 text-left text-sm font-semibold"
-                      >
-                        Type
-                      </th>
-                      <th
-                        scope="col"
-                        class="px-4 py-1.5 text-left text-sm font-semibold"
-                      >
-                        Price
-                      </th>
-                      <th scope="col" class="px-4 py-1.5 text-sm font-semibold"
-                      ></th>
-                    </tr>
-                  </thead>
-
-                  <!-- Table body -->
-                  <tbody
-                    class="bg-[#F8F9FA] dark:bg-secondary divide-y divide-gray-200 dark:divide-gray-800 text-sm"
+                  <table
+                    class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"
                   >
-                    <!-- Example Option Leg Row -->
-                    <tr>
-                      <td class="px-4 py-3 whitespace-nowrap font-semibold">
-                        <Combobox.Root
-                          items={searchBarData}
-                          bind:inputValue
-                          bind:touchedInput
+                    <!-- Table head -->
+                    <thead class="bg-gray-50 dark:bg-secondary">
+                      <tr>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-left text-sm font-semibold"
                         >
-                          <div class="relative w-full">
-                            <Combobox.Input
-                              on:input={search}
-                              class="text-sm controls-input bg-white dark:bg-[#2A2E39] focus:outline-hidden  border border-gray-300 dark:border-gray-500 rounded placeholder:text-gray-600 dark:placeholder:text-gray-200 px-2 py-1.5 grow w-full min-w-54"
-                              placeholder="Search Ticker"
-                              aria-label="Search new stock"
-                            />
-                          </div>
-                          {#if inputValue?.length !== 0 && inputValue !== selectedTicker}
-                            <Combobox.Content
-                              class=" z-10 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-default px-1 py-3 shadow-sm outline-hidden"
-                              sideOffset={8}
-                            >
-                              {#each searchBarData as item}
-                                <Combobox.Item
-                                  class="cursor-pointer border-b border-gray-300 dark:border-gray-500 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-gray-200 dark:data-highlighted:bg-primary"
-                                  value={item?.symbol}
-                                  label={item?.symbol}
-                                  on:click={(e) => changeTicker(item)}
-                                >
-                                  <div class="flex flex-col items-start">
-                                    <span
-                                      class="text-sm text-blue-700 dark:text-blue-400"
-                                      >{item?.symbol}</span
-                                    >
-                                    <span
-                                      class="text-xs sm:text-sm text-muted dark:text-white"
-                                      >{item?.name}</span
-                                    >
-                                  </div>
-                                </Combobox.Item>
-                              {:else}
-                                <span class="block px-5 py-2 text-sm">
-                                  No results found
-                                </span>
-                              {/each}
-                            </Combobox.Content>
-                          {/if}
-                        </Combobox.Root>
-                      </td>
-                      <td class="px-4 py-3 whitespace-nowrap">
-                        <label
-                          on:click={handleAction}
-                          class="badge px-2 select-none rounded-md {selectedAction ===
-                          'Buy'
-                            ? 'bg-green-100 text-green-800 dark:bg-green-300 dark:text-muted'
-                            : 'bg-red-100 text-red-800 dark:bg-red-300 dark:text-muted'} font-semibold cursor-pointer"
-                          >{selectedAction}</label
+                          Ticker
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-left text-sm font-semibold"
                         >
-                      </td>
-                      <td class="px-4 py-3 whitespace-nowrap">
-                        <input
-                          type="number"
-                          min="1"
-                          bind:value={selectedQuantity}
-                          on:input={handleQuantityInput}
-                          class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-20 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                        />
-                      </td>
-                      <td class="px-4 py-3 whitespace-nowrap">
-                        <DropdownMenu.Root>
-                          <DropdownMenu.Trigger asChild let:builder>
-                            <Button
-                              builders={[builder]}
-                              class="mb-1 border border-gray-300 dark:border-none  bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
-                            >
-                              <span class="truncate text-sm"
-                                >{formatDate(selectedDate)}</span
-                              >
-                              <svg
-                                class="-mr-1 ml-2 h-5 w-5 inline-block"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                style="max-width:40px"
-                                aria-hidden="true"
-                              >
-                                <path
-                                  fill-rule="evenodd"
-                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                                  clip-rule="evenodd"
-                                ></path>
-                              </svg>
-                            </Button>
-                          </DropdownMenu.Trigger>
+                          Action
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-left text-sm font-semibold"
+                        >
+                          Quantity
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-left text-sm font-semibold"
+                        >
+                          Expiration Date
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-left text-sm font-semibold"
+                        >
+                          Strike
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-left text-sm font-semibold"
+                        >
+                          Type
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-left text-sm font-semibold"
+                        >
+                          Price
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-4 py-1.5 text-sm font-semibold"
+                        ></th>
+                      </tr>
+                    </thead>
 
-                          <DropdownMenu.Content
-                            class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
+                    <!-- Table body -->
+                    <tbody
+                      class="bg-[#F8F9FA] dark:bg-secondary divide-y divide-gray-200 dark:divide-gray-800 text-sm"
+                    >
+                      <!-- Example Option Leg Row -->
+                      <tr>
+                        <td class="px-4 py-3 whitespace-nowrap font-semibold">
+                          <Combobox.Root
+                            items={searchBarData}
+                            bind:inputValue
+                            bind:touchedInput
                           >
-                            <!-- Dropdown items -->
-                            <DropdownMenu.Group class="pb-2"
-                              >{#each dateList as item}
-                                <DropdownMenu.Item
-                                  on:click={() => {
-                                    selectedDate = item;
-                                    loadData("default");
-                                  }}
-                                  class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
-                                >
-                                  {formatDate(item)}
-                                </DropdownMenu.Item>
-                              {/each}</DropdownMenu.Group
-                            >
-                          </DropdownMenu.Content>
-                        </DropdownMenu.Root>
-                      </td>
-                      <td class="px-4 py-3 whitespace-nowrap">
-                        <DropdownMenu.Root>
-                          <DropdownMenu.Trigger asChild let:builder>
-                            <Button
-                              builders={[builder]}
-                              class="mb-1 border border-gray-300 dark:border-none  bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
-                            >
-                              <span class="truncate text-sm"
-                                >{selectedStrike}</span
+                            <div class="relative w-full">
+                              <Combobox.Input
+                                on:input={search}
+                                class="text-sm controls-input bg-white dark:bg-[#2A2E39] focus:outline-hidden  border border-gray-300 dark:border-gray-500 rounded placeholder:text-gray-600 dark:placeholder:text-gray-200 px-2 py-1.5 grow w-full min-w-54"
+                                placeholder="Search Ticker"
+                                aria-label="Search new stock"
+                              />
+                            </div>
+                            {#if inputValue?.length !== 0 && inputValue !== selectedTicker}
+                              <Combobox.Content
+                                class=" z-10 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-default px-1 py-3 shadow-sm outline-hidden"
+                                sideOffset={8}
                               >
-                              <svg
-                                class="-mr-1 ml-2 h-5 w-5 inline-block"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                style="max-width:40px"
-                                aria-hidden="true"
-                              >
-                                <path
-                                  fill-rule="evenodd"
-                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                                  clip-rule="evenodd"
-                                ></path>
-                              </svg>
-                            </Button>
-                          </DropdownMenu.Trigger>
-
-                          <DropdownMenu.Content
-                            class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
+                                {#each searchBarData as item}
+                                  <Combobox.Item
+                                    class="cursor-pointer border-b border-gray-300 dark:border-gray-500 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-gray-200 dark:data-highlighted:bg-primary"
+                                    value={item?.symbol}
+                                    label={item?.symbol}
+                                    on:click={(e) => changeTicker(item)}
+                                  >
+                                    <div class="flex flex-col items-start">
+                                      <span
+                                        class="text-sm text-blue-700 dark:text-blue-400"
+                                        >{item?.symbol}</span
+                                      >
+                                      <span
+                                        class="text-xs sm:text-sm text-muted dark:text-white"
+                                        >{item?.name}</span
+                                      >
+                                    </div>
+                                  </Combobox.Item>
+                                {:else}
+                                  <span class="block px-5 py-2 text-sm">
+                                    No results found
+                                  </span>
+                                {/each}
+                              </Combobox.Content>
+                            {/if}
+                          </Combobox.Root>
+                        </td>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                          <label
+                            on:click={handleAction}
+                            class="badge px-2 select-none rounded-md {selectedAction ===
+                            'Buy'
+                              ? 'bg-green-100 text-green-800 dark:bg-green-300 dark:text-muted'
+                              : 'bg-red-100 text-red-800 dark:bg-red-300 dark:text-muted'} font-semibold cursor-pointer"
+                            >{selectedAction}</label
                           >
-                            <!-- Dropdown items -->
-                            <DropdownMenu.Group class="pb-2">
-                              <!-- Added padding to avoid overlapping with Reset button -->
-                              {#each strikeList as item}
-                                <DropdownMenu.Item
-                                  on:click={() => {
-                                    selectedStrike = item;
-                                    loadData("default");
-                                  }}
-                                  class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
+                        </td>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                          <input
+                            type="number"
+                            min="1"
+                            bind:value={selectedQuantity}
+                            on:input={handleQuantityInput}
+                            class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-20 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                          />
+                        </td>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                          <DropdownMenu.Root>
+                            <DropdownMenu.Trigger asChild let:builder>
+                              <Button
+                                builders={[builder]}
+                                class="mb-1 border border-gray-300 dark:border-none  bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
+                              >
+                                <span class="truncate text-sm"
+                                  >{formatDate(selectedDate)}</span
                                 >
-                                  {item}
-                                </DropdownMenu.Item>
-                              {/each}
-                            </DropdownMenu.Group>
-                          </DropdownMenu.Content>
-                        </DropdownMenu.Root>
-                      </td>
-                      <td class="px-4 py-3 whitespace-nowrap">
-                        <label
-                          on:click={handleOptionType}
-                          class="select-none badge px-2 rounded-md bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-muted font-semibold cursor-pointer"
-                          >{selectedOptionType}</label
-                        >
-                      </td>
-                      <td class="px-4 py-3 whitespace-nowrap">
-                        <input
-                          type="number"
-                          step="0.1"
-                          bind:value={selectedOptionPrice}
-                          on:input={handleOptionPriceInput}
-                          class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                        />
-                      </td>
-                      <td class="px-4 py-3 whitespace-nowrap">
-                        <a
-                          href={`/${["stocks", "stock"]?.includes(assetType) ? "stocks" : assetType === "etf" ? "etf" : "index"}/${selectedTicker}/options/contract-lookup?query=${optionSymbol}`}
-                          rel="noopener noreferrer"
-                          target="_blank"
-                          class="option-leg-link-to-contract"
-                        >
-                          <Link class="w-4 h-4 text-gray-100" />
-                        </a>
-                      </td>
+                                <svg
+                                  class="-mr-1 ml-2 h-5 w-5 inline-block"
+                                  viewBox="0 0 20 20"
+                                  fill="currentColor"
+                                  style="max-width:40px"
+                                  aria-hidden="true"
+                                >
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                    clip-rule="evenodd"
+                                  ></path>
+                                </svg>
+                              </Button>
+                            </DropdownMenu.Trigger>
 
-                      <!--
+                            <DropdownMenu.Content
+                              class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
+                            >
+                              <!-- Dropdown items -->
+                              <DropdownMenu.Group class="pb-2"
+                                >{#each dateList as item}
+                                  <DropdownMenu.Item
+                                    on:click={() => {
+                                      selectedDate = item;
+                                      loadData("default");
+                                    }}
+                                    class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
+                                  >
+                                    {formatDate(item)}
+                                  </DropdownMenu.Item>
+                                {/each}</DropdownMenu.Group
+                              >
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Root>
+                        </td>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                          <DropdownMenu.Root>
+                            <DropdownMenu.Trigger asChild let:builder>
+                              <Button
+                                builders={[builder]}
+                                class="mb-1 border border-gray-300 dark:border-none  bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
+                              >
+                                <span class="truncate text-sm"
+                                  >{selectedStrike}</span
+                                >
+                                <svg
+                                  class="-mr-1 ml-2 h-5 w-5 inline-block"
+                                  viewBox="0 0 20 20"
+                                  fill="currentColor"
+                                  style="max-width:40px"
+                                  aria-hidden="true"
+                                >
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                    clip-rule="evenodd"
+                                  ></path>
+                                </svg>
+                              </Button>
+                            </DropdownMenu.Trigger>
+
+                            <DropdownMenu.Content
+                              class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
+                            >
+                              <!-- Dropdown items -->
+                              <DropdownMenu.Group class="pb-2">
+                                <!-- Added padding to avoid overlapping with Reset button -->
+                                {#each strikeList as item}
+                                  <DropdownMenu.Item
+                                    on:click={() => {
+                                      selectedStrike = item;
+                                      loadData("default");
+                                    }}
+                                    class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
+                                  >
+                                    {item}
+                                  </DropdownMenu.Item>
+                                {/each}
+                              </DropdownMenu.Group>
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Root>
+                        </td>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                          <label
+                            on:click={handleOptionType}
+                            class="select-none badge px-2 rounded-md bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-muted font-semibold cursor-pointer"
+                            >{selectedOptionType}</label
+                          >
+                        </td>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                          <input
+                            type="number"
+                            step="0.1"
+                            bind:value={selectedOptionPrice}
+                            on:input={handleOptionPriceInput}
+                            class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                          />
+                        </td>
+                        <td class="px-4 py-3 whitespace-nowrap">
+                          <a
+                            href={`/${["stocks", "stock"]?.includes(assetType) ? "stocks" : assetType === "etf" ? "etf" : "index"}/${selectedTicker}/options/contract-lookup?query=${optionSymbol}`}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            class="option-leg-link-to-contract"
+                          >
+                            <Link class="w-4 h-4 text-gray-100" />
+                          </a>
+                        </td>
+
+                        <!--
                       <td class="px-4 py-3 whitespace-nowrap">
                         <input
                           type="range"
@@ -883,7 +884,7 @@
                         />
                       </td>
                       -->
-                      <!--
+                        <!--
                       <td class="px-4 py-3 whitespace-nowrap">
                         <button class="text-gray-500 hover:text-red-500">
                           <svg
@@ -903,20 +904,17 @@
                         </button>
                       </td>
                       -->
-                    </tr>
+                      </tr>
 
-                    <!-- Add more rows as needed -->
-                  </tbody>
-                </table>
-              </div>
+                      <!-- Add more rows as needed -->
+                    </tbody>
+                  </table>
+                </div>
 
-              {#if isLoaded}
-                {#if config}
-                  <div
-                    class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded"
-                    use:highcharts={config}
-                  ></div>
-                {/if}
+                <div
+                  class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded"
+                  use:highcharts={config}
+                ></div>
 
                 <div class="mt-5">
                   <h1