From b2d943a0ccef87ee382326270c63e651b62634af Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 27 Oct 2024 20:34:10 +0100
Subject: [PATCH] refactor code

---
 src/lib/components/AIScore.svelte             | 275 ++++----
 src/lib/store.ts                              |   1 +
 src/routes/stocks/[tickerID]/+layout.svelte   |   4 +-
 .../[tickerID]/dividends/+layout.svelte       |  85 ++-
 .../stocks/[tickerID]/dividends/+page.svelte  |  10 +-
 .../[tickerID]/financials/+layout.svelte      |   2 +-
 .../financials/balance-sheet/+layout.svelte   |  87 +++
 .../financials/balance-sheet/+page.svelte     |  33 +-
 .../stocks/[tickerID]/insider/+layout.svelte  |   8 +-
 .../insider/congress-trading/+layout.svelte   |  80 +++
 .../insider/congress-trading/+page.svelte     | 602 +++++++++++-------
 .../stocks/[tickerID]/metrics/+layout.svelte  |   4 +-
 .../stocks/[tickerID]/metrics/+page.svelte    |   4 +-
 .../[tickerID]/metrics/[slug]/+layout.svelte  |  80 +++
 .../[tickerID]/metrics/[slug]/+page.svelte    |  29 +-
 .../stocks/[tickerID]/options/+layout.svelte  |  85 ++-
 .../stocks/[tickerID]/options/+page.svelte    |   4 +-
 .../statistics/employees/+layout.svelte       |   4 +-
 .../statistics/market-cap/+layout.svelte      |   8 +-
 19 files changed, 992 insertions(+), 413 deletions(-)
 create mode 100644 src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte
 create mode 100644 src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte
 create mode 100644 src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte

diff --git a/src/lib/components/AIScore.svelte b/src/lib/components/AIScore.svelte
index 3b8bf7ae..8cc303b4 100644
--- a/src/lib/components/AIScore.svelte
+++ b/src/lib/components/AIScore.svelte
@@ -1,131 +1,195 @@
 <script lang="ts">
-  import { scoreComponent, stockTicker } from '$lib/store';
-  
+  import { scoreComponent, stockTicker } from "$lib/store";
+
   export let score;
   export let tier;
 
   // Use the correct reactive declaration
   $: {
-    if ($stockTicker && typeof window !== 'undefined') {
+    if ($stockTicker && typeof window !== "undefined") {
       // Correctly check if score is neither undefined nor null
       $scoreComponent = score !== undefined && score !== null && score !== 0;
     }
   }
 </script>
 
-    
-    
-    <section class="overflow-hidden text-white">
-        <main class="overflow-hidden ">
-                        
-            <div class="w-full">
-                <div class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
-                    <div class="relative">
-                        <h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">AI Score</h3>
-
-                        <label for="scoreInfo" class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                            <svg class="h-[8px] w-[8px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                            </svg>
-                        </label>
-                    </div>
-
-                    <div class="flex flex-row items-center justify-between">
-                            <div class="relative size-[50px] sm:size-[60px] ml-auto">
-                            <svg class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                <!-- Background Circle -->
-                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="2"></circle>
-                                <!-- score Circle inside a group with rotation -->
-                                <g class="origin-center -rotate-90 transform">
-                                    <!-- score Circle -->
-                                    <circle cx="18" cy="18" r="16" fill="none"
-                                        class="stroke-current {score >= 7 ? 'text-[#37C97D]' : score >=4 ? 'text-[#FF9E21]' : 'text-[#FF2F1F]'}" 
-                                        stroke-width="3" 
-                                        stroke-dasharray="100.48" 
-                                        stroke-dashoffset="{100.48 - ((tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? score : 0) / 10) * 100.48}">
-                                    </circle>
-                                </g>
-                                <!-- Text in the middle -->
-                                <text x="18" y="21" text-anchor="middle" font-size="10" fill="#000">{tier === 'Pro' ||  ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? score : 0}</text>
-                            </svg>
-
-                            <!-- Percentage Text -->
-                            <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                              {#if tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) }
-                                <span class="text-center text-white text-xl font-semibold">
-                                    {score}
-                                </span>
-                              {:else}
-                             <a class="block relative" href="/pricing">
-                                    <span class="text-base font-semibold text-blue-link blur group-hover:blur-[3px]">
-                                      XX
-                                    </span>
-                                    <div class="absolute top-0.5 flex items-center">
-                                      <svg class="size-5 text-[#FBCE3C]" 
-                                          viewBox="0 0 20 20" 
-                                          fill="currentColor" 
-                                          style="max-width: 40px;">
-                                        <path fill-rule="evenodd" 
-                                              d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" 
-                                              clip-rule="evenodd">
-                                        </path>
-                                      </svg>
-                                    </div>
-                                  </a>
-                              {/if}
-                            </div>
-                            </div>
-                
-                    </div>
-                    <h4 class="text-center text-white text-sm mt-1 font-semibold {tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? '': 'invisible'}">
-                        {#if score === 10}
-                            Strong Buy
-                        {:else if score >=7}
-                            Buy
-                        {:else if score >=4}
-                            Hold
-                        {:else if score >=2}
-                            Sell
-                        {:else}
-                            Strong Sell
-                        {/if}
-                    </h4>
-                </div>
-              </div>
-        </main>
-    </section>
+<section class="overflow-hidden text-white">
+  <main class="overflow-hidden">
+    <div class="w-full">
+      <div
+        class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative"
+      >
+        <div class="relative">
+          <h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">
+            AI Score
+          </h3>
 
+          <label
+            for="scoreInfo"
+            class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300"
+          >
+            <svg
+              class="h-[8px] w-[8px]"
+              viewBox="0 0 4 16"
+              fill="white"
+              style="max-width:20px"
+            >
+              <path
+                d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"
+              ></path>
+            </svg>
+          </label>
+        </div>
 
+        <div class="flex flex-row items-center justify-between">
+          <div class="relative size-[50px] sm:size-[60px] ml-auto">
+            <svg
+              class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]"
+              viewBox="0 0 36 36"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <!-- Background Circle -->
+              <circle
+                cx="18"
+                cy="18"
+                r="16"
+                fill="none"
+                class="stroke-current text-[#303030]"
+                stroke-width="2"
+              ></circle>
+              <!-- score Circle inside a group with rotation -->
+              <g class="origin-center -rotate-90 transform">
+                <!-- score Circle -->
+                <circle
+                  cx="18"
+                  cy="18"
+                  r="16"
+                  fill="none"
+                  class="stroke-current {score >= 7
+                    ? 'text-[#37C97D]'
+                    : score >= 4
+                      ? 'text-[#FF9E21]'
+                      : 'text-[#FF2F1F]'}"
+                  stroke-width="3"
+                  stroke-dasharray="100.48"
+                  stroke-dashoffset={100.48 -
+                    ((tier === "Pro" ||
+                    ["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes(
+                      $stockTicker,
+                    )
+                      ? score
+                      : 0) /
+                      10) *
+                      100.48}
+                >
+                </circle>
+              </g>
+              <!-- Text in the middle -->
+              <text
+                x="18"
+                y="21"
+                text-anchor="middle"
+                font-size="10"
+                fill="#000"
+                >{tier === "Pro" ||
+                ["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes($stockTicker)
+                  ? score
+                  : 0}</text
+              >
+            </svg>
 
+            <!-- Percentage Text -->
+            <div
+              class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
+            >
+              {#if tier === "Pro" || ["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes($stockTicker)}
+                <span class="text-center text-white text-xl font-semibold">
+                  {score}
+                </span>
+              {:else}
+                <a class="block relative" href="/pricing">
+                  <span
+                    class="text-base font-semibold text-blue-link blur group-hover:blur-[3px]"
+                  >
+                    XX
+                  </span>
+                  <div class="absolute top-0.5 flex items-center">
+                    <svg
+                      class="size-5 text-[#FBCE3C]"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      style="max-width: 40px;"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                        clip-rule="evenodd"
+                      >
+                      </path>
+                    </svg>
+                  </div>
+                </a>
+              {/if}
+            </div>
+          </div>
+        </div>
+        <h4
+          class="text-center text-white text-sm mt-1 font-semibold {tier ===
+            'Pro' ||
+          ['AAPL', 'NVDA', 'GOOGL', 'META', 'AMD']?.includes($stockTicker)
+            ? ''
+            : 'invisible'}"
+        >
+          {#if score === 10}
+            Strong Buy
+          {:else if score >= 7}
+            Buy
+          {:else if score >= 4}
+            Hold
+          {:else if score >= 2}
+            Sell
+          {:else}
+            Strong Sell
+          {/if}
+        </h4>
+      </div>
+    </div>
+  </main>
+</section>
 
 <!-- Put this part before </body> tag -->
 <input type="checkbox" id="scoreInfo" class="modal-toggle" />
 
-
-
-<label for="scoreInfo" class="modal modal-bottom sm:modal-middle cursor-pointer">
-
-  <label for="scoreInfo"  class="cursor-pointer modal-backdrop"></label>
-
-
+<label
+  for="scoreInfo"
+  class="modal modal-bottom sm:modal-middle cursor-pointer"
+>
+  <label for="scoreInfo" class="cursor-pointer modal-backdrop"></label>
 
   <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto">
-    <label for="scoreInfo" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white">
+  <label
+    class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto"
+  >
+    <label
+      for="scoreInfo"
+      class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white"
+    >
       ✕
     </label>
 
-    <h3 class="text-2xl font-bold text-white">
-      AI Score
-    </h3>
+    <h3 class="text-2xl font-bold text-white">AI Score</h3>
     <p class="py-4 text-gray-200 bg-[#09090B] w-full">
-        Our AI model analyzes fundamental, technical, and statistical indicators to predict the probability of a bullish trend over the next three months.
-        <br>
-        <br>
-        We regularly update and refine our models to deliver the most reliable forecasts for you.
+      Our AI model analyzes fundamental, technical, and statistical indicators
+      to predict the probability of a bullish trend over the next three months.
+      <br />
+      <br />
+      We regularly update and refine our models to deliver the most reliable forecasts
+      for you.
     </p>
 
-    <table class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white">
+    <table
+      class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white"
+    >
       <!-- head -->
       <thead>
         <tr class="border-b border-slate-700 odd:bg-[#27272A]">
@@ -159,10 +223,8 @@
           <td class="text-sm sm:text-[1rem] text-end">8</td>
         </tr>
         <tr class="border-b border-slate-700 odd:bg-[#27272A]">
-          <td class="text-sm sm:text-[1rem]">
-           +60%
-            </td>
-            <td class="text-sm sm:text-[1rem]">Buy</td>
+          <td class="text-sm sm:text-[1rem]"> +60% </td>
+          <td class="text-sm sm:text-[1rem]">Buy</td>
           <td class="text-sm sm:text-[1rem] text-end">7</td>
         </tr>
         <tr class="border-b border-slate-700 odd:bg-[#27272A]">
@@ -197,8 +259,5 @@
         </tr>
       </tbody>
     </table>
-
-
   </label>
 </label>
-
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 0d30a831..fdb0fa06 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -45,6 +45,7 @@ export const clearCache = () => {
 
 export const showCookieConsent = writable(<boolean>false);
 export const shouldUpdatePriceChart = writable(<boolean>false);
+export const coolMode = writable(<boolean>false);
 
 export const executiveClicked = writable(<boolean>false);
 export const secFilingsClicked = writable(<boolean>false);
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index a37debe4..f74b0863 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -347,7 +347,7 @@ function handleTypeOfTrade(state:string)
 <svelte:window bind:scrollY={y} />
 
 <body
-  class="bg-[#09090B] w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden"
+  class="bg-[#09090B] w-full max-w-screen sm:max-w-7xl min-h-screen xl:max-w-screen-2xl overflow-hidden"
 >
   <!-- Page wrapper -->
   <div class="flex flex-col w-full mt-5 relative w-full">
@@ -554,7 +554,7 @@ function handleTypeOfTrade(state:string)
             </div>
             <!--End Mobile Navbar-->
 
-            <div class="pt-14 sm:pt-0 w-auto max-w-7xl px-3 sm:px-0">
+            <div class="pt-14 sm:pt-0 w-full max-w-7xl px-3 sm:px-0">
               <div
                 class="md:flex md:justify-between md:divide-x md:divide-slate-800"
               >
diff --git a/src/routes/stocks/[tickerID]/dividends/+layout.svelte b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
index ee0e3f2e..9940ab83 100644
--- a/src/routes/stocks/[tickerID]/dividends/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
@@ -1,11 +1,80 @@
-<section
-  class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
->
-  <div class="h-full overflow-hidden">
-    <main class="w-full">
-      <div class="sm:ml-8 w-screen mb-2"></div>
-    </main>
+<script lang="ts">
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
-    <slot />
+  export let data;
+</script>
+
+<section class="w-auto 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>
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index db04e8b6..7b2a58ed 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -132,16 +132,14 @@
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section
-  class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
->
+<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
         <div class="w-full mb-6">
-          <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
+          <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4 w-full">
             Dividends
           </h1>
 
@@ -191,7 +189,9 @@
                 dividends for over 12 months.
               {/if}
             {:else}
-              No dividend history available for {$displayCompanyName}.
+              <div class="w-full">
+                No dividend history available for {$displayCompanyName}.
+              </div>
             {/if}
           </div>
         </div>
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index 7c11a360..6ed1653c 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -43,7 +43,7 @@
   }
 </script>
 
-<section class="w-auto bg-[#09090B] overflow-hidden text-black h-full">
+<section class="w-auto bg-[#09090B] overflow-hidden h-full">
   <div class="m-auto h-full overflow-hidden">
     <main class="w-full">
       <div class="m-auto">
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte
new file mode 100644
index 00000000..c76e0980
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte
@@ -0,0 +1,87 @@
+<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>
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
index 42dd3f52..84a930fc 100644
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
@@ -2,6 +2,7 @@
   import { Chart } from "svelte-echarts";
   import {
     numberOfUnreadNotification,
+    coolMode,
     displayCompanyName,
     stockTicker,
   } from "$lib/store";
@@ -27,7 +28,7 @@
 
   let displayStatement = "cashAndCashEquivalents";
 
-  let mode = false;
+  $: $coolMode = false;
   let timeFrame = "10Y";
 
   const statementConfig = [
@@ -198,7 +199,7 @@
   let namingList = statementConfig?.map((config) => config?.propertyName) || [];
 
   function toggleMode() {
-    mode = !mode;
+    $coolMode = !$coolMode;
   }
 
   function changeStatement(event) {
@@ -406,7 +407,7 @@
 
       balanceSheet = filterStatement(fullStatement, timeFrame);
 
-      if (mode === true) {
+      if ($coolMode === true) {
         optionsData = plotData();
       }
     }
@@ -459,7 +460,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}
@@ -485,7 +486,7 @@
                 /></svg
               >
 
-              {#if mode}
+              {#if $coolMode}
                 {statementConfig?.find(
                   (item) => item?.propertyName === displayStatement,
                 )?.text}
@@ -543,7 +544,7 @@
             </ul>
 
             <div
-              class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
+              class="mb-6 sm:mb-3 flex flex-row items-center w-full justify-end sm:justify-center mt-3 sm:mt-0"
             >
               <label
                 class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
@@ -551,14 +552,14 @@
                 <input
                   on:click={toggleMode}
                   type="checkbox"
-                  checked={mode}
-                  value={mode}
+                  checked={$coolMode}
+                  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>
@@ -645,7 +646,7 @@
               </div>
             </div>
 
-            {#if mode}
+            {#if $coolMode}
               <div class="sm:w-full">
                 <div class="relative">
                   <select
@@ -730,24 +731,20 @@
                 >
                   <thead>
                     <tr class="border border-slate-800">
-                      <th
-                        class="text-white font-semibold text-start text-sm sm:text-[1rem]"
+                      <th class="text-white font-semibold text-start text-sm"
                         >{filterRule === "annual"
                           ? "Fiscal Year End"
                           : "Quarter Ends"}</th
                       >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                      <th class="text-white font-semibold text-end text-sm"
                         >{statementConfig?.find(
                           (item) => item?.propertyName === displayStatement,
                         )?.label}</th
                       >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                      <th class="text-white font-semibold text-end text-sm"
                         >Change</th
                       >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                      <th class="text-white font-semibold text-end text-sm"
                         >Growth</th
                       >
                     </tr>
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index d7d8d896..39de440e 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -2,6 +2,8 @@
   import { stockTicker, screenWidth } from "$lib/store";
   import { page } from "$app/stores";
 
+  export let data;
+
   let displaySubSection = "";
 
   if (!displaySubSection || displaySubSection.length === 0) {
@@ -37,10 +39,8 @@
   }
 </script>
 
-<section
-  class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
->
-  <div class="h-full overflow-hidden">
+<section class="w-full bg-[#09090B] overflow-hidden h-full">
+  <div class="h-full overflow-hidden w-full">
     <main class="w-full">
       <div
         class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte
new file mode 100644
index 00000000..49d20375
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte
@@ -0,0 +1,80 @@
+<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>
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index 116650c5..60cbdbb2 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -1,292 +1,422 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$lib/store';
-	import { getPartyForPoliticians } from '$lib/utils';
-
+  import { onMount } from "svelte";
+  import {
+    displayCompanyName,
+    numberOfUnreadNotification,
+    stockTicker,
+  } from "$lib/store";
+  import { getPartyForPoliticians } from "$lib/utils";
 
   export let data;
 
   let rawData = data?.getSenateTrading;
   let buySellRatio = 0;
-  let partyRatio = 0
+  let partyRatio = 0;
   let senateTradingList = [];
   let isLoaded = false;
   let images = {};
 
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
-
-function backToTop() {
+  function backToTop() {
     window.scrollTo({
-        top: 0,
+      top: 0,
     });
-}
+  }
 
-
-
-async function handleScroll() {
+  async function handleScroll() {
     const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
     const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
     if (isBottom && senateTradingList?.length !== rawData?.length) {
-        const nextIndex = senateTradingList?.length;
-        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-        senateTradingList = [...senateTradingList, ...filteredNewResults];
+      const nextIndex = senateTradingList?.length;
+      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+      senateTradingList = [...senateTradingList, ...filteredNewResults];
     }
   }
 
-
-onMount(async () => {
-
-  
-    rawData.forEach(item => {
-        const representative = item?.representative || '';
-        const fullName = representative.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, '_').trim();
-        item.representative = fullName.replace(/_/g, ' ');
+  onMount(async () => {
+    rawData.forEach((item) => {
+      const representative = item?.representative || "";
+      const fullName = representative
+        .replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, "_")
+        .trim();
+      item.representative = fullName.replace(/_/g, " ");
     });
 
-    rawData = rawData?.map(item => {
-        const party = getPartyForPoliticians(item?.representative);
-        return {
-            ...item,
-            party: party
-        };
+    rawData = rawData?.map((item) => {
+      const party = getPartyForPoliticians(item?.representative);
+      return {
+        ...item,
+        party: party,
+      };
     });
 
     // Count the occurrences of "Republican" and "Democrat"
     const partyCounts = rawData.reduce((counts, item) => {
-        counts[item?.party] = (counts[item?.party] || 0) + 1;
-        return counts;
+      counts[item?.party] = (counts[item?.party] || 0) + 1;
+      return counts;
     }, {});
 
     const typeCounts = rawData.reduce((counts, item) => {
-        counts[item?.type] = (counts[item?.type ] || 0) + 1;
-        return counts;
+      counts[item?.type] = (counts[item?.type] || 0) + 1;
+      return counts;
     }, {});
 
-    partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"] / partyCounts["Republican"];
-    buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"] / typeCounts["Sold"];
+    partyRatio =
+      partyCounts["Democratic"] > 0 && partyCounts["Republican"] === undefined
+        ? 1
+        : partyCounts["Democratic"] === undefined
+          ? 0
+          : partyCounts["Democratic"] / partyCounts["Republican"];
+    buySellRatio =
+      typeCounts["Bought"] > 0 && typeCounts["Sold"] === undefined
+        ? 1
+        : typeCounts["Bought"] === undefined
+          ? 0
+          : typeCounts["Bought"] / typeCounts["Sold"];
 
     senateTradingList = rawData.slice(0, 20) ?? [];
 
     isLoaded = true;
 
-     window.addEventListener('scroll', handleScroll);
-      return () => {
-          window.removeEventListener('scroll', handleScroll);
-      };
-
-});
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  });
 </script>
 
-
-
 <svelte:head>
-
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading · stocknear
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading ·
+    stocknear
   </title>
-  <meta name="description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
-  
+  <meta
+    name="description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+
   <!-- Other meta tags -->
-  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
-  <meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
-  <meta property="og:type" content="website"/>
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+  <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
-  <meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
   <!-- Add more Twitter meta tags as needed -->
-
 </svelte:head>
-  
-     
 
-    
-          
-<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
-  <div class="h-full overflow-hidden">
-      <div class="relative flex justify-center items-center overflow-hidden">
-            <div class="sm:p-7 w-full mt-2 sm:mt-0">
-                  <div class="mb-6">
-                      <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
-                          Congress Trading
-                      </h1>
-  
+<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
+  <div class="h-full overflow-hidden w-full">
+    <div class="relative flex justify-center items-center overflow-hidden">
+      <div class="sm:p-7 w-full mt-2 sm:mt-0">
+        <div class="mb-6">
+          <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
+            Congress Trading
+          </h1>
 
-                        <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
-                          <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
-                          Get detailed insights of Corrupt US Politician 🇺🇸 who bought or sold {$displayCompanyName} and the amounts involved!
-
-                        </div>
-                       
-    
+          <div
+            class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+          >
+            <svg
+              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              ><path
+                fill="#a474f6"
+                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+              /></svg
+            >
+            Get detailed insights of Corrupt US Politician 🇺🇸 who bought or sold
+            {$displayCompanyName} and the amounts involved!
+          </div>
+        </div>
+        {#if isLoaded}
+          {#if senateTradingList?.length !== 0}
+            <h3 class="text-white text-xl font-semibold">
+              Congress Statistics
+            </h3>
+            <!--Start Widget-->
+            <div
+              class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
+            >
+              <div
+                class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3"
+              >
+                <!--Start Buy/Sell-->
+                <div
+                  class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                >
+                  <div class="flex flex-col items-start">
+                    <span
+                      class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
+                      >Buy/Sell</span
+                    >
+                    <span
+                      class="text-start text-sm sm:text-[1rem] font-medium text-white"
+                    >
+                      {buySellRatio?.toFixed(3)}
+                    </span>
+                  </div>
+                  <!-- Circular Progress -->
+                  <div class="relative size-14 ml-auto">
+                    <svg
+                      class="size-full w-14 h-14"
+                      viewBox="0 0 36 36"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <!-- Background Circle -->
+                      <circle
+                        cx="18"
+                        cy="18"
+                        r="16"
+                        fill="none"
+                        class="stroke-current text-[#3E3E3E]"
+                        stroke-width="3"
+                      ></circle>
+                      <!-- Progress Circle inside a group with rotation -->
+                      <g class="origin-center -rotate-90 transform">
+                        <circle
+                          cx="18"
+                          cy="18"
+                          r="16"
+                          fill="none"
+                          class="stroke-current {buySellRatio >= 0.5
+                            ? 'text-[#00FC50]'
+                            : 'text-[#EE5365]'} "
+                          stroke-width="3"
+                          stroke-dasharray="100"
+                          stroke-dashoffset={100 - buySellRatio * 100 >= 0
+                            ? 100 - (buySellRatio * 100)?.toFixed(2)
+                            : 0}
+                        ></circle>
+                      </g>
+                    </svg>
+                    <!-- Percentage Text -->
+                    <div
+                      class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
+                    >
+                      <span
+                        class="text-center text-white text-sm sm:text-[1rem]"
+                        >{buySellRatio?.toFixed(2)}</span
+                      >
                     </div>
-                      {#if isLoaded}
-
-                
-      
-                      {#if senateTradingList?.length !== 0}
-
-                      <h3 class="text-white text-xl font-semibold ">
-                        Congress Statistics
-                      </h3>
-                       <!--Start Widget-->
-                       <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
-                        <div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
-        
-                          <!--Start Buy/Sell-->  
-                          <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
-                            <div class="flex flex-col items-start">
-                                <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
-                                <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
-                                  {buySellRatio?.toFixed(3)}
-                                </span>
-                            </div>
-                            <!-- Circular Progress -->
-                              <div class="relative size-14 ml-auto">
-                                <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                  <!-- Background Circle -->
-                                  <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
-                                  <!-- Progress Circle inside a group with rotation -->
-                                  <g class="origin-center -rotate-90 transform">
-                                    <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {buySellRatio >=0.5 ? 'text-[#00FC50]' : 'text-[#EE5365]'} " stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100- buySellRatio*100) >= 0 ? 100-(buySellRatio*100)?.toFixed(2) : 0}></circle>
-                                  </g>
-                                </svg>
-                                <!-- Percentage Text -->
-                                <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                  <span class="text-center text-white text-sm sm:text-[1rem]">{buySellRatio?.toFixed(2)}</span>
-                                </div>
-                              </div>
-                            <!-- End Circular Progress -->
-                  
-                        </div>
-                        <!--End Buy/Sell-->
-                        <!--Start Dem/Rep-->  
-                        <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
-                          <div class="flex flex-col items-start">
-                              <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
-                              <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
-                                {partyRatio?.toFixed(3)}
-                              </span>
-                          </div>
-                          <!-- Circular Progress -->
-                            <div class="relative size-14 ml-auto">
-                              <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                <!-- Background Circle -->
-                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
-                                <!-- Progress Circle inside a group with rotation -->
-                                <g class="origin-center -rotate-90 transform">
-                                  <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100-partyRatio*100) >=0 ? 100-(partyRatio*100)?.toFixed(2) : 0}></circle>
-                                </g>
-                              </svg>
-                              <!-- Percentage Text -->
-                              <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                <span class="text-center text-white text-sm sm:text-[1rem]">{partyRatio?.toFixed(2)}</span>
-                              </div>
-                            </div>
-                          <!-- End Circular Progress -->
-                
-                      </div>
-                      <!--End Put/Call-->
-                          </div>
-                        </div>
-                      <!--End Widget-->
-
-
-                      <div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
-                        <table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
-                          <thead>
-                            <tr class="bg-[#09090B] border-b border-[#27272A]">
-                              <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
-                                Person
-                              </th>
-                              <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
-                                Transaction Date
-                              </th>
-                              <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
-                                Amount
-                              </th>
-                              <th class="shadow-md text-white font-semibold text-end text-sm">Type</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {#each senateTradingList as item}
-                            <tr class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
-    
-                              <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
-                                <div class="flex flex-row items-center">
-                                  <div class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#4E2153]'} flex items-center justify-center">
-                                    
-                                    <img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/>
-                                  </div>
-                                  <div class="flex flex-col ml-3">
-                                    <a href={`/politicians/${item?.id}`} class="sm:hover:text-white text-blue-400">{item?.representative?.replace('_',' ')}</a>
-                                    <span class="">{item?.party}</span>
-                                  </div>
-                                </div>
-                                <!--{item?.firstName} {item?.lastName}-->
-                              </td>
-    
-                                <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
-                                    {new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                                </td>
-
-                                <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
-                                    {item?.amount}
-                                </td>
-                                <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
-                                  {#if item?.type === 'Bought'}
-                                    <span class="text-[#37C97D]">Bought</span>
-                                  {:else if item?.type === 'Sold'}
-                                    <span class="text-[#FF2F1F]">Sold</span>
-                                  {:else if item?.type === 'Exchange'}
-                                    <span class="text-[#C6A755]">Exchange</span>
-                                  {/if}
-                                </td>
-                            </tr>
-                          {/each}
-
-                          </tbody>
-                        </table>
-
-                        
-                    </div>
-
-
-
-                      {#if rawData?.length >= 20}
-                      <label on:click={backToTop} class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full">
-                        Back to top
-                      </label>
-                      {/if}
-
-      
-                      {:else} 
-                      <h2 class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200">
-                        No trading history available for {$displayCompanyName}. Likely no corrupt politican has interest in this stock.
-                      </h2>
-                      {/if}
-      
-  
-
-                      {:else}
-                      <div class="flex justify-center items-center h-80">
-                        <div class="relative">
-                        <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                            <span class="loading loading-spinner loading-md text-gray-400"></span>
-                        </label>
-                        </div>
-                    </div>
-
-                      {/if}
-                    
-    
+                  </div>
+                  <!-- End Circular Progress -->
                 </div>
+                <!--End Buy/Sell-->
+                <!--Start Dem/Rep-->
+                <div
+                  class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                >
+                  <div class="flex flex-col items-start">
+                    <span
+                      class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
+                      >Dem/Rep</span
+                    >
+                    <span
+                      class="text-start text-sm sm:text-[1rem] font-medium text-white"
+                    >
+                      {partyRatio?.toFixed(3)}
+                    </span>
+                  </div>
+                  <!-- Circular Progress -->
+                  <div class="relative size-14 ml-auto">
+                    <svg
+                      class="size-full w-14 h-14"
+                      viewBox="0 0 36 36"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <!-- Background Circle -->
+                      <circle
+                        cx="18"
+                        cy="18"
+                        r="16"
+                        fill="none"
+                        class="stroke-current text-[#3E3E3E]"
+                        stroke-width="3"
+                      ></circle>
+                      <!-- Progress Circle inside a group with rotation -->
+                      <g class="origin-center -rotate-90 transform">
+                        <circle
+                          cx="18"
+                          cy="18"
+                          r="16"
+                          fill="none"
+                          class="stroke-current text-blue-500"
+                          stroke-width="3"
+                          stroke-dasharray="100"
+                          stroke-dashoffset={100 - partyRatio * 100 >= 0
+                            ? 100 - (partyRatio * 100)?.toFixed(2)
+                            : 0}
+                        ></circle>
+                      </g>
+                    </svg>
+                    <!-- Percentage Text -->
+                    <div
+                      class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
+                    >
+                      <span
+                        class="text-center text-white text-sm sm:text-[1rem]"
+                        >{partyRatio?.toFixed(2)}</span
+                      >
+                    </div>
+                  </div>
+                  <!-- End Circular Progress -->
+                </div>
+                <!--End Put/Call-->
+              </div>
             </div>
-         </div>
-    </section>
+            <!--End Widget-->
 
+            <div
+              class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll"
+            >
+              <table
+                class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
+              >
+                <thead>
+                  <tr class="bg-[#09090B] border-b border-[#27272A]">
+                    <th
+                      class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold"
+                    >
+                      Person
+                    </th>
+                    <th
+                      class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
+                    >
+                      Transaction Date
+                    </th>
+                    <th
+                      class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
+                    >
+                      Amount
+                    </th>
+                    <th
+                      class="shadow-md text-white font-semibold text-end text-sm"
+                      >Type</th
+                    >
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each senateTradingList as item}
+                    <tr
+                      class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
+                    >
+                      <td
+                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
+                      >
+                        <div class="flex flex-row items-center">
+                          <div
+                            class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party ===
+                            'Republican'
+                              ? 'bg-[#98272B]'
+                              : item?.party === 'Democratic'
+                                ? 'bg-[#295AC7]'
+                                : 'bg-[#4E2153]'} flex items-center justify-center"
+                          >
+                            <img
+                              style="clip-path: circle(50%);"
+                              class="avatar rounded-full w-7 sm:w-9"
+                              src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
+                              loading="lazy"
+                            />
+                          </div>
+                          <div class="flex flex-col ml-3">
+                            <a
+                              href={`/politicians/${item?.id}`}
+                              class="sm:hover:text-white text-blue-400"
+                              >{item?.representative?.replace("_", " ")}</a
+                            >
+                            <span class="">{item?.party}</span>
+                          </div>
+                        </div>
+                        <!--{item?.firstName} {item?.lastName}-->
+                      </td>
+
+                      <td
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                      >
+                        {new Date(item?.transactionDate)?.toLocaleString(
+                          "en-US",
+                          {
+                            month: "short",
+                            day: "numeric",
+                            year: "numeric",
+                            daySuffix: "2-digit",
+                          },
+                        )}
+                      </td>
+
+                      <td
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                      >
+                        {item?.amount}
+                      </td>
+                      <td
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                      >
+                        {#if item?.type === "Bought"}
+                          <span class="text-[#37C97D]">Bought</span>
+                        {:else if item?.type === "Sold"}
+                          <span class="text-[#FF2F1F]">Sold</span>
+                        {:else if item?.type === "Exchange"}
+                          <span class="text-[#C6A755]">Exchange</span>
+                        {/if}
+                      </td>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+
+            {#if rawData?.length >= 20}
+              <label
+                on:click={backToTop}
+                class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+              >
+                Back to top
+              </label>
+            {/if}
+          {:else}
+            <h2
+              class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
+            >
+              No trading history available for {$displayCompanyName}. Likely no
+              corrupt politican has interest in this stock.
+            </h2>
+          {/if}
+        {:else}
+          <div class="flex justify-center items-center h-80">
+            <div class="relative">
+              <label
+                class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+              >
+                <span class="loading loading-spinner loading-md text-gray-400"
+                ></span>
+              </label>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index 7c523858..8e5b6275 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -55,9 +55,7 @@
 
 <!-- Rest of the component remains the same -->
 
-<section
-  class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
->
+<section class="w-full bg-[#09090B] overflow-hidden h-full">
   <div class="m-auto h-full overflow-hidden">
     <main class="w-fit sm:w-full sm:max-w-2xl">
       <div class="m-auto">
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index 2954cb0e..e5b1c2e4 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -88,9 +88,7 @@
   />
 </svelte:head>
 
-<section
-  class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"
->
+<section class="bg-[#09090B] overflow-hidden text-white h-full w-full">
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
new file mode 100644
index 00000000..49d20375
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
@@ -0,0 +1,80 @@
+<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>
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index 8d5ac8dc..df2dec0c 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -152,16 +152,14 @@
   <meta name="twitter:description" content={`Revenue & Geographic Breakdown`} />
 </svelte:head>
 
-<section
-  class="bg-[#09090B] w-full overflow-hidden text-white h-full pb-40 sm:mb-0"
->
+<section class="bg-[#09090B] w-full overflow-hidden text-white h-full">
   <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       {#if isLoaded}
         <main class="w-full">
-          <div class="sm:p-7 m-auto mt-2 sm:mt-0">
+          <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">
                 {convertToTitleCase(data?.getParams)} Revenue
@@ -191,15 +189,20 @@
                       >
                       <th
                         class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >% Change</th
+                      >
+                        Change
+                      </th>
+                      <th
+                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                        >Growth</th
                       >
                     </tr>
                   </thead>
                   <tbody>
-                    {#each tableList as item}
+                    {#each tableList as item, index}
                       <!-- row -->
                       <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"
                       >
                         <td
                           class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
@@ -222,6 +225,18 @@
                             : "-"}
                         </td>
 
+                        <td
+                          class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
+                        >
+                          {#if Number(item?.value - tableList[index + 1]?.value)}
+                            {abbreviateNumber(
+                              item?.value - tableList[index + 1]?.value,
+                            )}
+                          {:else}
+                            -
+                          {/if}
+                        </td>
+
                         <td
                           class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
                         >
diff --git a/src/routes/stocks/[tickerID]/options/+layout.svelte b/src/routes/stocks/[tickerID]/options/+layout.svelte
index ee0e3f2e..49d20375 100644
--- a/src/routes/stocks/[tickerID]/options/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/+layout.svelte
@@ -1,11 +1,80 @@
-<section
-  class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
->
-  <div class="h-full overflow-hidden">
-    <main class="w-full">
-      <div class="sm:ml-8 w-screen mb-2"></div>
-    </main>
+<script lang="ts">
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
-    <slot />
+  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>
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 7036537c..9452338a 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -552,9 +552,7 @@
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section
-  class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
->
+<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
index 683d783b..49d20375 100644
--- a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
@@ -4,13 +4,13 @@
   export let data;
 </script>
 
-<section class="w-full max-w-screen-2xl overflow-hidden min-h-screen lg:px-3">
+<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 lg:pr-5">
+        <main class="w-full lg:w-3/4">
           <slot />
         </main>
 
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
index d88f86c4..49d20375 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
@@ -4,15 +4,13 @@
   export let data;
 </script>
 
-<section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
->
-  <div class="w-full overflow-hidden m-auto mt-5">
+<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 lg:pr-5">
+        <main class="w-full lg:w-3/4">
           <slot />
         </main>