diff --git a/src/lib/components/Options/Volatility.svelte b/src/lib/components/Options/Volatility.svelte
index 03009ea6..a9129d79 100644
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@@ -69,7 +69,9 @@
     const volatilitySpread = filteredData?.map((item) =>
       item?.volatilitySpread ? Number(item?.volatilitySpread) : null,
     );
-    const priceList = filteredData?.map((item) => item.price);
+    const priceList = filteredData
+      .map((item) => item.price)
+      .filter((price) => price != null); // Filter out null/undefined
 
     return {
       dateList,
diff --git a/src/routes/index/[tickerID]/+layout.svelte b/src/routes/index/[tickerID]/+layout.svelte
index 192073ed..0c45f922 100644
--- a/src/routes/index/[tickerID]/+layout.svelte
+++ b/src/routes/index/[tickerID]/+layout.svelte
@@ -374,201 +374,196 @@
         <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 sm:hidden">
-              <div class="navbar w-full px-4 py-2">
+            <div
+              class="fixed top-0 left-0 right-0 z-20 sm:hidden {isScrolled
+                ? 'border-b border-gray-300 dark:border-gray-800 ease-in shadow'
+                : 'ease-out'} m-auto w-full"
+            >
+              <div class="navbar h-full w-full px-4 bg-white dark:bg-default">
                 <div
-                  class="{isScrolled
-                    ? 'border-b border-gray-600 ease-in'
-                    : 'ease-out'} m-auto w-full"
+                  class="flex-1 shrink-0 flex flex-row items-center justify-between"
                 >
-                  <div
-                    class="flex-1 shrink-0 flex flex-row items-center justify-between -mt-2"
+                  <a
+                    href={/^\/(stocks|etf|index)/.test($previousPage || "")
+                      ? "/"
+                      : $previousPage || "/"}
                   >
-                    <a
-                      href={/^\/(stocks|etf|index)/.test($previousPage || "")
-                        ? "/"
-                        : $previousPage || "/"}
+                    <svg
+                      class="w-5 h-5 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 1024 1024"
+                      ><g transform="rotate(-90 512 512)"
+                        ><path
+                          fill={$mode === "light" ? "#2C6288" : "white"}
+                          d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
+                        /></g
+                      ></svg
                     >
-                      <svg
-                        class="w-5 h-5 inline-block"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 1024 1024"
-                        ><g transform="rotate(-90 512 512)"
-                          ><path
-                            fill="white"
-                            d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
-                          /></g
-                        ></svg
-                      >
-                    </a>
+                  </a>
 
-                    <div
-                      class={!isScrolled
-                        ? "hidden"
-                        : "flex flex-col items-center ml-6 transition-transform ease-in"}
+                  <div
+                    class={!isScrolled
+                      ? "hidden"
+                      : "flex flex-col items-center ml-6 transition-transform ease-in"}
+                  >
+                    <span class=" text-xs font-semibold">
+                      {$indexTicker}
+                    </span>
+                    <span class=" text-sm">
+                      {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
+                        {$currentPortfolioPrice}
+                      {:else}
+                        {data?.getStockQuote?.price}
+                      {/if}
+                    </span>
+                  </div>
+
+                  <!--Start Search Button-->
+                  <label class="ml-auto mr-4" for="searchBarModal">
+                    <svg
+                      class="w-6 h-6 inline-block"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
+                      /></svg
                     >
-                      <span class=" text-xs font-semibold">
-                        {$indexTicker}
-                      </span>
-                      <span class=" text-sm">
-                        {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
-                          {$currentPortfolioPrice}
-                        {:else}
-                          {data?.getStockQuote?.price}
-                        {/if}
-                      </span>
+                  </label>
+                  <!--End Search Button-->
+
+                  <!--Start Share Button-->
+                  <label
+                    class="mr-4"
+                    on:click={() =>
+                      shareContent(
+                        "https://stocknear.com/stocks/" + $indexTicker,
+                      )}
+                  >
+                    <svg
+                      class="w-6 h-6 inline-block"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      stroke="currentColor"
+                      ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                        id="SVGRepo_tracerCarrier"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ></g><g id="SVGRepo_iconCarrier">
+                        <path
+                          d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z"
+                          fill={$mode === "light" ? "#2C6288" : "white"}
+                        ></path>
+                      </g></svg
+                    >
+                  </label>
+                  <!--End Share Button-->
+
+                  <!--Start Watchlist-->
+
+                  {#if data?.user}
+                    <div class="flex flex-col mr-4">
+                      {#if userWatchList?.length !== 0}
+                        <label
+                          for="addWatchListModal"
+                          class="cursor-pointer shrink-0"
+                        >
+                          {#if isTickerIncluded}
+                            <svg
+                              class="w-6 h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill={$mode === "light" ? "#2C6288" : "white"}
+                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                              /></svg
+                            >
+                          {:else}
+                            <svg
+                              class="w-6 h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill={$mode === "light" ? "black" : "white"}
+                                d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                              /></svg
+                            >
+                          {/if}
+                        </label>
+                      {:else if userWatchList?.length === 0}
+                        <label
+                          on:click={() => toggleUserWatchlist("firstList")}
+                          class="cursor-pointer shrink-0"
+                        >
+                          {#if isTickerIncluded}
+                            <svg
+                              class="w-6 h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill={$mode === "light" ? "#2C6288" : "white"}
+                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                              /></svg
+                            >
+                          {:else}
+                            <svg
+                              class="w-6 h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              ><path
+                                fill={$mode === "light" ? "black" : "white"}
+                                d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                              /></svg
+                            >
+                          {/if}
+                        </label>
+                      {/if}
                     </div>
-
-                    <!--Start Search Button-->
-                    <label class="ml-auto mr-4" for="searchBarModal">
+                  {:else}
+                    <label for="userLogin" class="cursor-pointer shrink-0 mr-4">
                       <svg
                         class="w-6 h-6 inline-block"
                         xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
+                        viewBox="0 0 16 16"
                         ><path
-                          fill="none"
-                          stroke="white"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                          d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
+                          fill={$mode === "light" ? "black" : "white"}
+                          d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                         /></svg
                       >
                     </label>
-                    <!--End Search Button-->
+                  {/if}
+                  <!--End Watchlist-->
 
-                    <!--Start Share Button-->
-                    <label
-                      class="mr-4"
-                      on:click={() =>
-                        shareContent(
-                          "https://stocknear.com/index/" + $indexTicker,
-                        )}
-                    >
-                      <svg
-                        class="w-6 h-6 inline-block"
-                        viewBox="0 0 24 24"
+                  <!--Start Price Alert-->
+                  <label
+                    on:click={() => ($openPriceAlert = true)}
+                    for={data?.user ? "priceAlertModal" : "userLogin"}
+                    class="mr-2"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="w-7 h-7 inline-block mt-1"
+                      viewBox="0 0 24 24"
+                      ><g
                         fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        stroke="#fff"
-                        ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-                          id="SVGRepo_tracerCarrier"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        ></g><g id="SVGRepo_iconCarrier">
-                          <path
-                            d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z"
-                            fill="#fff"
-                          ></path>
-                        </g></svg
-                      >
-                    </label>
-                    <!--End Share Button-->
-
-                    <!--Start Watchlist-->
-
-                    {#if data?.user}
-                      <div class="flex flex-col mr-4">
-                        {#if userWatchList?.length !== 0}
-                          <label
-                            for="addWatchListModal"
-                            class="cursor-pointer shrink-0"
-                          >
-                            {#if isTickerIncluded}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="#fff"
-                                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
-                                /></svg
-                              >
-                            {:else}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="white"
-                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
-                                /></svg
-                              >
-                            {/if}
-                          </label>
-                        {:else if userWatchList?.length === 0}
-                          <label
-                            on:click={() => toggleUserWatchlist("firstList")}
-                            class="cursor-pointer shrink-0"
-                          >
-                            {#if isTickerIncluded}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="#fff"
-                                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
-                                /></svg
-                              >
-                            {:else}
-                              <svg
-                                class="w-6 h-6 inline-block"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 16 16"
-                                ><path
-                                  fill="white"
-                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
-                                /></svg
-                              >
-                            {/if}
-                          </label>
-                        {/if}
-                      </div>
-                    {:else}
-                      <label
-                        for="userLogin"
-                        class="cursor-pointer shrink-0 mr-4"
-                      >
-                        <svg
-                          class="w-6 h-6 inline-block"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 16 16"
-                          ><path
-                            fill="white"
-                            d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
-                          /></svg
-                        >
-                      </label>
-                    {/if}
-                    <!--End Watchlist-->
-
-                    <!--Start Price Alert-->
-                    <label
-                      on:click={() => ($openPriceAlert = true)}
-                      for={data?.user ? "priceAlertModal" : "userLogin"}
-                      class="mr-2"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        ><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
+                          cx="12"
+                          cy="13"
+                          r="8"
+                        /><path d="M9.5 13h5M12 10.5v5" /></g
+                      ></svg
                     >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="w-7 h-7 inline-block mt-1"
-                        viewBox="0 0 24 24"
-                        ><g
-                          fill="none"
-                          stroke="white"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                          ><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
-                            cx="12"
-                            cy="13"
-                            r="8"
-                          /><path d="M9.5 13h5M12 10.5v5" /></g
-                        ></svg
-                      >
-                    </label>
-                    <!--End Price Alert -->
-                  </div>
+                  </label>
+                  <!--End Price Alert -->
                 </div>
               </div>
             </div>
@@ -944,12 +939,12 @@
   <div class="modal-box rounded-md w-full bg-secondary border border-gray-600">
     <label
       for="addWatchListModal"
-      class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem]"
+      class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem] text-white"
     >
       ✕
     </label>
 
-    <div class="">
+    <div class="text-white">
       <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
       <div class="flex flex-col items-center w-full max-w-3xl bg-secondary">
@@ -966,10 +961,10 @@
                 : 'border-gray-600'}"
             >
               <div class="flex flex-col items-center w-full">
-                <span class="ml-1 mr-auto">
+                <span class="ml-1 text-white mr-auto">
                   {item?.title}
                 </span>
-                <span class="ml-1 text-sm mr-auto">
+                <span class="ml-1 text-white text-sm mr-auto">
                   {item?.ticker?.length}
                   {item?.ticker?.length !== 1 ? "Companies" : "Company"}
                 </span>