From c4ddd78c513f0bcc93f64672566ff0e7b0928384 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 1 Nov 2024 16:57:59 +0100
Subject: [PATCH] navbar fix

---
 src/routes/stocks/[tickerID]/+layout.svelte   | 219 +++++++-----------
 .../[tickerID]/financials/+layout.svelte      | 118 ++++------
 .../stocks/[tickerID]/forecast/+layout.svelte |  84 ++-----
 .../stocks/[tickerID]/insider/+layout.svelte  |  98 +++-----
 .../stocks/[tickerID]/metrics/+layout.svelte  |  38 ++-
 .../[tickerID]/statistics/+layout.svelte      |  90 +++----
 6 files changed, 230 insertions(+), 417 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 2f09a8c1..affade54 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -742,149 +742,98 @@ function handleTypeOfTrade(state:string)
                     <!--Start Ticker Section-->
 
                     <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
-                    <div
-                      class="-ml-2 sm:ml-4 w-screen sm:w-full overflow-x-scroll md:overflow-hidden mb-2"
+                    <nav
+                      class="sm:ml-4 border-b-[2px] overflow-x-scroll whitespace-nowrap"
                     >
                       <ul
-                        class="pr-4 w-fit overflow-x-scroll md:overflow-hidden font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
+                        class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
                       >
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}`}
-                            on:click={() => changeSection("overview")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'overview'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Overview
-                          </a>
-                          <div
-                            class="{displaySection === 'overview'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}/financials`}
-                            on:click={() => changeSection("financials")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'financials'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}">Financials</a
-                          >
-                          <div
-                            class="{displaySection === 'financials'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}/statistics`}
-                            on:click={() => changeSection("statistics")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'statistics'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}">Statistics</a
-                          >
-                          <div
-                            class="{displaySection === 'statistics'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
-                          />
-                        </li>
-                        {#if ["amd", "save", "ba", "adbe", "nflx", "pltr", "msft", "meta", "tsla", "nvda", "aapl", "gme"]?.includes($stockTicker?.toLowerCase())}
-                          <li class="cursor-pointer flex flex-col items-center">
-                            <a
-                              href={`/stocks/${$stockTicker}/metrics`}
-                              on:click={() => changeSection("metrics")}
-                              class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                              'metrics'
-                                ? 'text-white '
-                                : 'bg-[#09090B]'}">Metrics</a
-                            >
+                        <a
+                          href={`/stocks/${$stockTicker}`}
+                          on:click={() => changeSection("overview")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'overview'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Overview
+                        </a>
+                        <a
+                          href={`/stocks/${$stockTicker}/financials`}
+                          on:click={() => changeSection("financials")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'financials'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Financials
+                        </a>
+                        <a
+                          href={`/stocks/${$stockTicker}/statistics`}
+                          on:click={() => changeSection("statistics")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'statistics'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                          >Statistics</a
+                        >
 
-                            <div
-                              class="{displaySection === 'metrics'
-                                ? 'bg-[#75D377]'
-                                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.8rem]"
-                            />
-                          </li>
+                        {#if ["amd", "save", "ba", "adbe", "nflx", "pltr", "msft", "meta", "tsla", "nvda", "aapl", "gme"]?.includes($stockTicker?.toLowerCase())}
+                          <a
+                            href={`/stocks/${$stockTicker}/metrics`}
+                            on:click={() => changeSection("metrics")}
+                            class="p-2 px-5 cursor-pointer {displaySection ===
+                            'metrics'
+                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                            >Metrics</a
+                          >
                         {/if}
+
                         {#if Object?.keys(data?.getAnalystRating ?? {})?.length > 0}
-                          <li class="cursor-pointer flex flex-col items-center">
-                            <a
-                              href={`/stocks/${$stockTicker}/forecast`}
-                              on:click={() => changeSection("forecast")}
-                              class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                              'forecast'
-                                ? 'text-white '
-                                : 'bg-[#09090B]'}"
-                            >
-                              Forecast
-                            </a>
-                            <div
-                              class="{displaySection === 'forecast'
-                                ? 'bg-[#75D377]'
-                                : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-                            />
-                          </li>
+                          <a
+                            href={`/stocks/${$stockTicker}/forecast`}
+                            on:click={() => changeSection("forecast")}
+                            class="p-2 px-5 cursor-pointer {displaySection ===
+                            'forecast'
+                              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                          >
+                            Forecast
+                          </a>
                         {/if}
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}/options`}
-                            on:click={() => changeSection("options")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'options'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Options
-                          </a>
-                          <div
-                            class="{displaySection === 'options'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}/insider`}
-                            on:click={() => changeSection("insider")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'insider'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Insider
-                          </a>
-                          <div
-                            class="{displaySection === 'insider'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-                          />
-                        </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}/dividends`}
-                            on:click={() => changeSection("dividends")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'dividends'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            Dividends
-                          </a>
-                          <div
-                            class="{displaySection === 'dividends'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-                          />
-                        </li>
+                        <a
+                          href={`/stocks/${$stockTicker}/options`}
+                          on:click={() => changeSection("options")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'options'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Options
+                        </a>
+                        <a
+                          href={`/stocks/${$stockTicker}/insider`}
+                          on:click={() => changeSection("insider")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'insider'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Insider
+                        </a>
+                        <a
+                          href={`/stocks/${$stockTicker}/dividends`}
+                          on:click={() => changeSection("dividends")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'dividends'
+                            ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Dividends
+                        </a>
                       </ul>
-                    </div>
+                    </nav>
 
                     <!--Start-Main Content-->
                     <slot />
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index 3bfdc848..ba674c33 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -53,85 +53,51 @@
       >
         <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
-                ? 'overflow-auto scrollbar'
-                : 'no-scrollbar'} mb-2"
+            <nav
+              class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
             >
-              <ul
-                class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
-              >
-                <li class="cursor-pointer flex flex-col items-center">
-                  <a
-                    href={`/stocks/${$stockTicker}/financials`}
-                    on:click={() => changeSubSection("income")}
-                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                    'income'
-                      ? 'text-white '
-                      : 'bg-[#09090B]'}"
-                  >
-                    Income
-                  </a>
-                  <div
-                    class="{displaySubSection === 'income'
-                      ? 'bg-[#75D377]'
-                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
-                  />
-                </li>
-                <li class="cursor-pointer flex flex-col items-center">
-                  <a
-                    href={`/stocks/${$stockTicker}/financials/balance-sheet`}
-                    on:click={() => changeSubSection("balance-sheet")}
-                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                    'balance-sheet'
-                      ? 'text-white '
-                      : 'bg-[#09090B]'}"
-                  >
-                    Balance Sheet
-                  </a>
-                  <div
-                    class="{displaySubSection === 'balance-sheet'
-                      ? 'bg-[#75D377]'
-                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-                  />
-                </li>
-                <li class="cursor-pointer flex flex-col items-center">
-                  <a
-                    href={`/stocks/${$stockTicker}/financials/cash-flow`}
-                    on:click={() => changeSubSection("cash-flow")}
-                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                    'cash-flow'
-                      ? 'text-white '
-                      : 'bg-[#09090B]'}"
-                  >
-                    Cashflow
-                  </a>
-                  <div
-                    class="{displaySubSection === 'cash-flow'
-                      ? 'bg-[#75D377]'
-                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
-                  />
-                </li>
+              <ul class="flex flex-row items-center w-full text-white">
+                <a
+                  href={`/stocks/${$stockTicker}/financials`}
+                  on:click={() => changeSubSection("income")}
+                  class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
+                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                >
+                  Income
+                </a>
 
-                <li class="cursor-pointer flex flex-col items-center">
-                  <a
-                    href={`/stocks/${$stockTicker}/financials/ratios`}
-                    on:click={() => changeSubSection("ratios")}
-                    class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                    'ratios'
-                      ? 'text-white '
-                      : 'bg-[#09090B]'}"
-                  >
-                    Ratios
-                  </a>
-                  <div
-                    class="{displaySubSection === 'ratios'
-                      ? 'bg-[#75D377]'
-                      : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
-                  />
-                </li>
+                <a
+                  href={`/stocks/${$stockTicker}/financials/balance-sheet`}
+                  on:click={() => changeSubSection("balance-sheet")}
+                  class="p-2 px-5 cursor-pointer {displaySubSection ===
+                  'balance-sheet'
+                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                >
+                  Balance Sheet
+                </a>
+                <a
+                  href={`/stocks/${$stockTicker}/financials/cash-flow`}
+                  on:click={() => changeSubSection("cash-flow")}
+                  class="p-2 px-5 cursor-pointer {displaySubSection ===
+                  'cash-flowt'
+                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                >
+                  Cashflow
+                </a>
+                <a
+                  href={`/stocks/${$stockTicker}/financials/ratios`}
+                  on:click={() => changeSubSection("ratios")}
+                  class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
+                    ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+                >
+                  Ratios
+                </a>
               </ul>
-            </div>
+            </nav>
           </div>
           <slot />
         </main>
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
index a133ea3b..07ca34ba 100644
--- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -58,69 +58,31 @@
   <div class="m-auto h-full overflow-hidden">
     <main class="w-full">
       <div class="m-auto">
-        <div
-          class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
-            ? 'overflow-auto scrollbar'
-            : 'no-scrollbar'} mb-2"
+        <nav
+          class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
         >
-          <ul
-            class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
-          >
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/forecast`}
-                on:click={() => changeSubSection("overview")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'overview'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Overview
-              </a>
-              <div
-                class="{displaySubSection === 'overview'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
-              />
-            </li>
-            <!--
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/forecast/ai`}
-                on:click={() => changeSubSection("ai")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'ai'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                AI
-              </a>
-              <div
-                class="{displaySubSection === 'ai'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
-              />
-            </li>
-            -->
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/forecast/analyst`}
-                on:click={() => changeSubSection("analyst")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'analyst'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Analysts Ratings
-              </a>
-              <div
-                class="{displaySubSection === 'analyst'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
-              />
-            </li>
+          <ul class="flex flex-row items-center w-full text-white">
+            <a
+              href={`/stocks/${$stockTicker}/forecast`}
+              on:click={() => changeSubSection("overview")}
+              class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Overview
+            </a>
+
+            <a
+              href={`/stocks/${$stockTicker}/forecast/analyst`}
+              on:click={() => changeSubSection("analyst")}
+              class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Analysts Ratings
+            </a>
           </ul>
-        </div>
+        </nav>
       </div>
     </main>
 
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index 797a2c04..9ef80183 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -77,67 +77,43 @@
         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'
-              : ''} mb-2"
+          <nav
+            class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
           >
-            <ul
-              class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2"
-            >
-              <li class="cursor-pointer flex flex-col items-center">
-                <a
-                  href={`/stocks/${$stockTicker}/insider`}
-                  on:click={() => changeSubSection("insider")}
-                  class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                  'insider'
-                    ? 'text-white '
-                    : 'bg-[#09090B]'}"
-                >
-                  Insider Trading
-                </a>
-                <div
-                  class="{displaySubSection === 'insider'
-                    ? 'bg-[#75D377]'
-                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
-                />
-              </li>
-              <li class="cursor-pointer flex flex-col items-center">
-                <a
-                  href={`/stocks/${$stockTicker}/insider/congress-trading`}
-                  on:click={() => changeSubSection("congress-trading")}
-                  class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                  'congress-trading'
-                    ? 'text-white '
-                    : 'bg-[#09090B]'}"
-                >
-                  Congress Trading
-                </a>
-                <div
-                  class="{displaySubSection === 'congress-trading'
-                    ? 'bg-[#75D377]'
-                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
-                />
-              </li>
-              <li class="cursor-pointer flex flex-col items-center">
-                <a
-                  href={`/stocks/${$stockTicker}/insider/transcripts`}
-                  on:click={() => changeSubSection("transcripts")}
-                  class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                  'transcripts'
-                    ? 'text-white '
-                    : 'bg-[#09090B]'}"
-                >
-                  Transcripts
-                </a>
-                <div
-                  class="{displaySubSection === 'transcripts'
-                    ? 'bg-[#75D377]'
-                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
-                />
-              </li>
+            <ul class="flex flex-row items-center w-full text-white">
+              <a
+                href={`/stocks/${$stockTicker}/insider`}
+                on:click={() => changeSubSection("insider")}
+                class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
+                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+              >
+                Insider Trading
+              </a>
+
+              <a
+                href={`/stocks/${$stockTicker}/insider/congress-trading`}
+                on:click={() => changeSubSection("congress-trading")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'congress-trading'
+                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+              >
+                Congress Trading
+              </a>
+              <a
+                href={`/stocks/${$stockTicker}/insider/transcripts`}
+                on:click={() => changeSubSection("transcripts")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'transcripts'
+                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+              >
+                Transcripts
+              </a>
             </ul>
-          </div>
+          </nav>
+
           <slot />
         </main>
 
@@ -165,13 +141,13 @@
 
           {#if newsList?.length !== 0}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full sm:hover:text-white text-white border border-gray-800 rounded-md 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">
+                <ul class="text-white">
                   {#each newsList?.slice(0, 10) as item}
                     <li class="mb-3 last:mb-1">
                       {formatDate(item?.publishedDate)} ago -
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index 8e5b6275..a2f60d0e 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -59,14 +59,10 @@
   <div class="m-auto h-full overflow-hidden">
     <main class="w-fit sm:w-full sm:max-w-2xl">
       <div class="m-auto">
-        <div
-          class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
-            ? 'overflow-auto scrollbar'
-            : ''} mb-2"
+        <nav
+          class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
         >
-          <ul
-            class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
-          >
+          <ul class="flex flex-row items-center w-full text-white">
             {#each subsectionTitles?.slice(0, 4) as title}
               {@const sectionKey = title
                 ?.toLowerCase()
@@ -75,26 +71,18 @@
                 ?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
                 ?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
                 ?.trim()}
-              <li class="cursor-pointer flex flex-col items-center">
-                <a
-                  href={getHref(sectionKey)}
-                  on:click={() => changeSubSection(sectionKey)}
-                  class="px-2 text-sm sm:text-[1rem] whitespace-nowrap font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                  sectionKey
-                    ? 'text-white'
-                    : 'bg-[#09090B]'}"
-                >
-                  {title}
-                </a>
-                <div
-                  class="{displaySubSection === sectionKey
-                    ? 'bg-[#75D377]'
-                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
-                />
-              </li>
+              <a
+                href={getHref(sectionKey)}
+                on:click={() => changeSubSection(sectionKey)}
+                class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey
+                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+              >
+                {title}
+              </a>
             {/each}
           </ul>
-        </div>
+        </nav>
       </div>
     </main>
 
diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
index 4ad742e4..3d0a758d 100644
--- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
@@ -43,68 +43,40 @@
   <div class="m-auto h-full overflow-hidden">
     <main class="w-full">
       <div class="m-auto">
-        <div
-          class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
-            ? 'overflow-auto scrollbar'
-            : 'no-scrollbar'} mb-2"
+        <nav
+          class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
         >
-          <ul
-            class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
-          >
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/statistics`}
-                on:click={() => changeSubSection("overview")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'overview'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Overview
-              </a>
-              <div
-                class="{displaySubSection === 'overview'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
-              />
-            </li>
+          <ul class="flex flex-row items-center w-full text-white">
+            <a
+              href={`/stocks/${$stockTicker}/statistics`}
+              on:click={() => changeSubSection("overview")}
+              class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Overview
+            </a>
 
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/statistics/market-cap`}
-                on:click={() => changeSubSection("market-cap")}
-                class="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'market-cap'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Market Cap
-              </a>
-              <div
-                class="{displaySubSection === 'market-cap'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
-              />
-            </li>
-            <li class="cursor-pointer flex flex-col items-center">
-              <a
-                href={`/stocks/${$stockTicker}/statistics/employees`}
-                on:click={() => changeSubSection("employees")}
-                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
-                'employees'
-                  ? 'text-white '
-                  : 'bg-[#09090B]'}"
-              >
-                Employees
-              </a>
-              <div
-                class="{displaySubSection === 'employees'
-                  ? 'bg-[#75D377]'
-                  : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
-              />
-            </li>
+            <a
+              href={`/stocks/${$stockTicker}/statistics/market-cap`}
+              on:click={() => changeSubSection("market-cap")}
+              class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Market Cap
+            </a>
+            <a
+              href={`/stocks/${$stockTicker}/statistics/employees`}
+              on:click={() => changeSubSection("employees")}
+              class="p-2 px-5 cursor-pointer {displaySubSection === 'employees'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Employees
+            </a>
           </ul>
-        </div>
+        </nav>
       </div>
     </main>