ui fixes

src/routes/stocks/[tickerID]/dividends/+layout.svelte

@@ -1,7 +1,35 @@
 <script lang="ts">
+  import { stockTicker } from "$lib/store";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   export let data;
+
+  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" : ""}`;
+    }
+  };
 </script>
 
 <section class="w-auto overflow-hidden min-h-screen">
@@ -25,7 +53,7 @@
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
                   <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -36,43 +64,31 @@
             </div>
           {/if}
 
+          {#if data?.getNews?.length !== 0}
             <div
               class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
             >
+              <div class="p-4 text-sm">
+                <h3 class="text-lg text-white font-semibold mb-3">
+                  {$stockTicker} News
+                </h3>
+                <ul class="text-gray-200">
+                  {#each data?.getNews?.slice(0, 10) as item}
+                    <li class="mb-3 last:mb-1">
+                      {formatDate(item?.publishedDate)} ago -
                       <a
-              href={"/price-alert"}
+                        class="sm:hover:text-white text-blue-400"
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+                        href={item?.url}
+                        target="_blank"
+                        rel="noopener noreferrer nofollow">{item?.title}</a
                       >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
+                      - {item?.site}
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    </li>
-                  Price Alert ⏰
+                  {/each}
-                </h2>
+                </ul>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Customize your alerts to never miss out again
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/stock-screener"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Stock Screener 🔎
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable stocks.
-              </span>
-            </a>
             </div>
+          {/if}
         </aside>
       </div>
     </div>

src/routes/stocks/[tickerID]/financials/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { stockTicker, screenWidth } from "$lib/store";
+  import { stockTicker, screenWidth, coolMode } from "$lib/store";
-  import { page } from "$app/stores";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
+  import { page } from "$app/stores";
+  export let data;
   let displaySubSection = "income";
 
   function changeSubSection(state) {
@@ -43,9 +45,13 @@
   }
 </script>
 
-<section class="w-auto bg-[#09090B] overflow-hidden h-full">
+<section class="w-full overflow-hidden min-h-screen">
-  <div class="m-auto h-full overflow-hidden">
+  <div class="w-full overflow-hidden m-auto">
-    <main class="w-full">
+    <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 {$coolMode ? 'lg:w-3/4' : 'w-full'}  ">
           <div class="m-auto">
             <div
               class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
@@ -127,9 +133,77 @@
               </ul>
             </div>
           </div>
+          <slot />
         </main>
 
-    <slot />
+        {#if $coolMode}
+          <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+            {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
+              <div
+                class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+              >
+                <a
+                  href="/pricing"
+                  class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+                >
+                  <div
+                    class="w-full flex justify-between items-center p-3 mt-3"
+                  >
+                    <h2
+                      class="text-start text-xl font-semibold text-white ml-3"
+                    >
+                      Pro Subscription
+                    </h2>
+                    <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                  </div>
+                  <span class="text-white p-3 ml-3 mr-3">
+                    Upgrade now for unlimited access to all data and tools.
+                  </span>
+                </a>
+              </div>
+            {/if}
+
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <a
+                href={"/watchlist/stocks"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Watchlist
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Build your watchlist to keep track of your favorite stocks.
+                </span>
+              </a>
+            </div>
+
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <a
+                href={"/analysts/top-stocks"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Top Stocks
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Get the latest top Wall Street Analyst Ratings
+                </span>
+              </a>
+            </div>
+          </aside>
+        {/if}
+      </div>
+    </div>
   </div>
 </section>
 

src/routes/stocks/[tickerID]/financials/+page.svelte

@@ -3,6 +3,7 @@
     numberOfUnreadNotification,
     displayCompanyName,
     stockTicker,
+    coolMode,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -28,7 +29,7 @@
   let filterRule = "annual";
   let displayStatement = "revenue";
 
-  let mode = false;
+  $coolMode = false;
   let timeFrame = "10Y";
 
   onMount(async () => {
@@ -141,7 +142,7 @@
   ];
 
   function toggleMode() {
-    mode = !mode;
+    $coolMode = !$coolMode;
   }
 
   function changeStatement(event) {
@@ -330,7 +331,7 @@
       }
       income = filterStatement(fullStatement, timeFrame);
 
-      if (mode === true) {
+      if ($coolMode === true) {
         optionsData = plotData();
       }
     }
@@ -379,7 +380,7 @@
           <div class="sm:p-7 m-auto mt-2 sm:mt-0">
             <div class="mb-3">
               <h1 class="text-2xl text-gray-200 font-bold">
-                {#if mode}
+                {#if $coolMode}
                   {statementConfig?.find(
                     (item) => item?.propertyName === displayStatement,
                   )?.label}
@@ -405,7 +406,7 @@
                   /></svg
                 >
 
-                {#if mode}
+                {#if $coolMode}
                   {statementConfig?.find(
                     (item) => item?.propertyName === displayStatement,
                   )?.text}
@@ -471,14 +472,14 @@
                   <input
                     on:click={toggleMode}
                     type="checkbox"
-                    checked={mode}
+                    checked={$coolMode}
-                    value={mode}
+                    value={$coolMode}
                     class="sr-only peer"
                   />
                   <div
                     class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
                   ></div>
-                  {#if mode}
+                  {#if $coolMode}
                     <span class="ml-2 text-sm font-medium text-white">
                       Cool Mode
                     </span>
@@ -565,7 +566,7 @@
                 </div>
               </div>
 
-              {#if mode}
+              {#if $coolMode}
                 <div class="sm:w-full">
                   <div class="relative">
                     <select

src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  import { coolMode } from "$lib/store";
-
-  export let data;
-</script>
-
-<section class="w-full overflow-hidden min-h-screen">
-  <div class="w-full overflow-hidden m-auto">
-    <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 {$coolMode ? 'lg:w-3/4' : 'w-full'}  ">
-          <slot />
-        </main>
-
-        {#if $coolMode}
-          <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-            {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-              <div
-                class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-              >
-                <a
-                  href="/pricing"
-                  class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-                >
-                  <div
-                    class="w-full flex justify-between items-center p-3 mt-3"
-                  >
-                    <h2
-                      class="text-start text-xl font-semibold text-white ml-3"
-                    >
-                      Pro Subscription 🔥
-                    </h2>
-                    <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                  </div>
-                  <span class="text-white p-3 ml-3 mr-3">
-                    Upgrade now for unlimited access to all data and tools.
-                  </span>
-                </a>
-              </div>
-            {/if}
-
-            <div
-              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/price-alert"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Price Alert ⏰
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Customize your alerts to never miss out again
-                </span>
-              </a>
-            </div>
-
-            <div
-              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/stock-screener"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Stock Screener 🔎
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Build your Stock Screener to find profitable stocks.
-                </span>
-              </a>
-            </div>
-          </aside>
-        {/if}
-      </div>
-    </div>
-  </div>
-</section>

src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte

@@ -2,6 +2,7 @@
   import {
     numberOfUnreadNotification,
     displayCompanyName,
+    coolMode,
     stockTicker,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
@@ -25,7 +26,7 @@
   let filterRule = "annual";
   let displayStatement = "netIncome";
 
-  let mode = false;
+  $coolMode = false;
   let tableList = [];
 
   let timeFrame = "10Y";
@@ -160,7 +161,7 @@
   ];
 
   function toggleMode() {
-    mode = !mode;
+    $coolMode = !$coolMode;
   }
 
   function changeStatement(event) {
@@ -351,7 +352,7 @@
 
       cashFlow = filterStatement(fullStatement, timeFrame);
 
-      if (mode === true) {
+      if ($coolMode === true) {
         optionsData = plotData();
       }
     }
@@ -404,7 +405,7 @@
         <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
             <h1 class="text-2xl text-gray-200 font-bold">
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.label}
@@ -428,7 +429,7 @@
                 /></svg
               >
 
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.text}
@@ -494,14 +495,14 @@
                 <input
                   on:click={toggleMode}
                   type="checkbox"
-                  checked={mode}
+                  checked={$coolMode}
-                  value={mode}
+                  value={$coolMode}
                   class="sr-only peer"
                 />
                 <div
                   class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
                 ></div>
-                {#if mode}
+                {#if $coolMode}
                   <span class="ml-2 text-sm font-medium text-white">
                     Cool Mode
                   </span>
@@ -588,7 +589,7 @@
               </div>
             </div>
 
-            {#if mode}
+            {#if $coolMode}
               <div class="sm:w-full">
                 <div class="relative">
                   <select

src/routes/stocks/[tickerID]/financials/ratios/+page.svelte

@@ -4,6 +4,7 @@
     numberOfUnreadNotification,
     displayCompanyName,
     stockTicker,
+    coolMode,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -27,7 +28,7 @@
 
   let displayStatement = "priceEarningsRatio";
 
-  let mode = false;
+  $coolMode = false;
   let timeFrame = "10Y";
 
   const statementConfig = [
@@ -124,7 +125,7 @@
   ];
 
   function toggleMode() {
-    mode = !mode;
+    $coolMode = !$coolMode;
   }
 
   function changeStatement(event) {
@@ -314,7 +315,7 @@
 
       ratios = filterStatement(fullStatement, timeFrame);
 
-      if (mode === true) {
+      if ($coolMode === true) {
         optionsData = plotData();
       }
     }
@@ -368,7 +369,7 @@
         <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
             <h1 class="text-2xl text-gray-200 font-bold">
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.label}
@@ -392,7 +393,7 @@
                 /></svg
               >
 
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.text}
@@ -458,14 +459,14 @@
                 <input
                   on:click={toggleMode}
                   type="checkbox"
-                  checked={mode}
+                  checked={$coolMode}
-                  value={mode}
+                  value={$coolMode}
                   class="sr-only peer"
                 />
                 <div
                   class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
                 ></div>
-                {#if mode}
+                {#if $coolMode}
                   <span class="ml-2 text-sm font-medium text-white">
                     Cool Mode
                   </span>
@@ -552,7 +553,7 @@
               </div>
             </div>
 
-            {#if mode}
+            {#if $coolMode}
               <div class="sm:w-full">
                 <div class="relative">
                   <select

src/routes/stocks/[tickerID]/insider/+layout.svelte

@@ -1,9 +1,38 @@
 <script lang="ts">
   import { stockTicker, screenWidth } from "$lib/store";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
   import { page } from "$app/stores";
 
   export let data;
 
+  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) {
@@ -39,9 +68,13 @@
   }
 </script>
 
-<section class="w-full bg-[#09090B] overflow-hidden h-full">
+<section class="w-auto overflow-hidden min-h-screen">
-  <div class="h-full overflow-hidden w-full">
+  <div class="w-full overflow-hidden m-auto">
-    <main class="w-full">
+    <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">
           <div
             class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
               ? 'overflow-auto scrollbar no-scrollbar'
@@ -103,9 +136,59 @@
               </li>
             </ul>
           </div>
+          <slot />
         </main>
 
-    <slot />
+        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <a
+                href="/pricing"
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Pro Subscription
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Upgrade now for unlimited access to all data and tools.
+                </span>
+              </a>
+            </div>
+          {/if}
+
+          {#if data?.getNews?.length !== 0}
+            <div
+              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
+            >
+              <div class="p-4 text-sm">
+                <h3 class="text-lg text-white font-semibold mb-3">
+                  {$stockTicker} News
+                </h3>
+                <ul class="text-gray-200">
+                  {#each data?.getNews?.slice(0, 10) as item}
+                    <li class="mb-3 last:mb-1">
+                      {formatDate(item?.publishedDate)} ago -
+                      <a
+                        class="sm:hover:text-white text-blue-400"
+                        href={item?.url}
+                        target="_blank"
+                        rel="noopener noreferrer nofollow">{item?.title}</a
+                      >
+                      - {item?.site}
+                    </li>
+                  {/each}
+                </ul>
+              </div>
+            </div>
+          {/if}
+        </aside>
+      </div>
+    </div>
   </div>
 </section>
 

src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte

@@ -1,80 +0,0 @@
-<script lang="ts">
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-
-  export let data;
-</script>
-
-<section class="w-full overflow-hidden min-h-screen">
-  <div class="w-full overflow-hidden m-auto">
-    <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">
-          <slot />
-        </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href="/pricing"
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription 🔥
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          <div
-            class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/price-alert"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Price Alert ⏰
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Customize your alerts to never miss out again
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/stock-screener"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Stock Screener 🔎
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable stocks.
-              </span>
-            </a>
-          </div>
-        </aside>
-      </div>
-    </div>
-  </div>
-</section>

src/routes/stocks/[tickerID]/options/+layout.svelte

@@ -40,17 +40,17 @@
             class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
-              href={"/price-alert"}
+              href={"/options-flow"}
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Price Alert ⏰
+                  Options Flow
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
-                Customize your alerts to never miss out again
+                Get realtime options flow and customize your screener
               </span>
             </a>
           </div>
@@ -64,7 +64,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Stock Screener 🔎
+                  Stock Screener
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>