diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index b812d505..598a62ff 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -1,184 +1,170 @@
 <script lang="ts">
-
-  import { searchBarData, stockTicker, etfTicker, cryptoTicker, screenWidth} from '$lib/store';  
-  import { goto } from '$app/navigation';
-  import { onMount } from 'svelte';
+  import {
+    searchBarData,
+    stockTicker,
+    etfTicker,
+    cryptoTicker,
+    screenWidth,
+  } from "$lib/store";
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
   import Search from "lucide-svelte/icons/search";
 
   let dataLoaded = false; // Flag to track data loading
-  
-  let assetType = '';
+
+  let assetType = "";
 
   let showSuggestions = false;
-  let notFoundTicker  = false;
-  let searchQuery = '';
-  
+  let notFoundTicker = false;
+  let searchQuery = "";
+
   let searchOpen = false;
   let searchBarModalChecked = false; // Initialize it to false
   let inputElement;
-  
-  
+
   async function loadSearchData() {
     if ($searchBarData.length !== 0 || dataLoaded) return;
     else {
       dataLoaded = true;
-       // make the GET request to the endpoint
-       const response = await fetch('/api/searchbar-data', {
-      method: 'GET',
-      headers: {
-          "Content-Type": "application/json"
-      },
+      // make the GET request to the endpoint
+      const response = await fetch("/api/searchbar-data", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
       });
-  
+
       $searchBarData = await response.json();
-      
     }
-     
   }
-  
 
   function popularTicker(state, assetType) {
     searchOpen = false;
 
-    if (assetType === 'ETF')
-      {
-        etfTicker.update( value => state?.toUpperCase() );
-      }
-      else if (assetType === 'Stock') {
-        stockTicker.update( value => state?.toUpperCase() );
-      }
-      else if (assetType === 'Crypto') {
-        cryptoTicker.update( value => state?.toUpperCase() );
-      }
-
+    if (assetType === "ETF") {
+      etfTicker.update((value) => state?.toUpperCase());
+    } else if (assetType === "Stock") {
+      stockTicker.update((value) => state?.toUpperCase());
+    } else if (assetType === "Crypto") {
+      cryptoTicker.update((value) => state?.toUpperCase());
+    }
 
     const closePopup = document.getElementById("searchBarModal");
-      closePopup?.dispatchEvent(new MouseEvent('click'))
-
+    closePopup?.dispatchEvent(new MouseEvent("click"));
   }
-  
-  function searchBarTicker(state, assetType)
-  {
+
+  function searchBarTicker(state, assetType) {
     showSuggestions = false;
-    if(state !== '' && $searchBarData?.find(item => item?.symbol === state?.toUpperCase()))
-    {
+    if (
+      state !== "" &&
+      $searchBarData?.find((item) => item?.symbol === state?.toUpperCase())
+    ) {
       notFoundTicker = false;
-      if (assetType === 'ETF')
-      {
-        etfTicker.update( value => state?.toUpperCase() );
-        goto(`/etf/${state?.toUpperCase()}`)
+      if (assetType === "ETF") {
+        etfTicker.update((value) => state?.toUpperCase());
+        goto(`/etf/${state?.toUpperCase()}`);
+      } else if (assetType === "Stock") {
+        stockTicker.update((value) => state?.toUpperCase());
+        goto(`/stocks/${state?.toUpperCase()}`);
+      } else if (assetType === "Crypto") {
+        cryptoTicker.update((value) => state?.toUpperCase());
+        goto(`/crypto/${state?.toUpperCase()}`);
       }
-      else if (assetType === 'Stock') {
-        stockTicker.update( value => state?.toUpperCase() );
-        goto(`/stocks/${state?.toUpperCase()}`)
-      }
-      else if (assetType === 'Crypto') {
-        cryptoTicker.update( value => state?.toUpperCase() );
-        goto(`/crypto/${state?.toUpperCase()}`)
-      }
-  
-      searchOpen = false
+
+      searchOpen = false;
       //searchQuery = state.toUpperCase();
       const closePopup = document.getElementById("searchBarModal");
-      closePopup?.dispatchEvent(new MouseEvent('click'))  
-    }
-    else{
+      closePopup?.dispatchEvent(new MouseEvent("click"));
+    } else {
       notFoundTicker = false;
     }
-    
-  
-    searchQuery =""; 
+
+    searchQuery = "";
   }
-  
-  
-  
-  
-let searchResults = [];
-  
 
-async function search() {
-  const normalizedSearchQuery = searchQuery?.toLowerCase();
+  let searchResults = [];
 
-  // Define names for which symbols without dots should be prioritized
-  const prioritizeWithoutDotsForNames = ["apple", /* Add more names as needed */];
+  async function search() {
+    const normalizedSearchQuery = searchQuery?.toLowerCase();
 
-  const filteredList = $searchBarData?.map(item => ({
-    ...item,
-    nameLower: item?.name?.toLowerCase(),
-    symbolLower: item?.symbol?.toLowerCase(),
-  }))?.filter(({ nameLower, symbolLower }) =>
-    nameLower?.includes(normalizedSearchQuery) ||
-    symbolLower?.includes(normalizedSearchQuery)
-  );
+    // Define names for which symbols without dots should be prioritized
+    const prioritizeWithoutDotsForNames = [
+      "apple" /* Add more names as needed */,
+    ];
 
-  filteredList?.sort((a, b) => {
-    const aSymbolLower = a?.symbolLower;
-    const bSymbolLower = b?.symbolLower;
-    const aNameLower = a?.nameLower;
-    const bNameLower = b?.nameLower;
+    const filteredList = $searchBarData
+      ?.map((item) => ({
+        ...item,
+        nameLower: item?.name?.toLowerCase(),
+        symbolLower: item?.symbol?.toLowerCase(),
+      }))
+      ?.filter(
+        ({ nameLower, symbolLower }) =>
+          nameLower?.includes(normalizedSearchQuery) ||
+          symbolLower?.includes(normalizedSearchQuery),
+      );
 
-    // Check for exact symbol matches
-    const isExactMatchA = aSymbolLower === normalizedSearchQuery;
-    const isExactMatchB = bSymbolLower === normalizedSearchQuery;
+    filteredList?.sort((a, b) => {
+      const aSymbolLower = a?.symbolLower;
+      const bSymbolLower = b?.symbolLower;
+      const aNameLower = a?.nameLower;
+      const bNameLower = b?.nameLower;
 
-    if (isExactMatchA && !isExactMatchB) {
-      return -1; // Prioritize exact symbol match for A
-    } else if (!isExactMatchA && isExactMatchB) {
-      return 1; // Prioritize exact symbol match for B
-    }
+      // Check for exact symbol matches
+      const isExactMatchA = aSymbolLower === normalizedSearchQuery;
+      const isExactMatchB = bSymbolLower === normalizedSearchQuery;
 
-    const aSymbolIndex = aSymbolLower?.indexOf(normalizedSearchQuery);
-    const bSymbolIndex = bSymbolLower?.indexOf(normalizedSearchQuery);
+      if (isExactMatchA && !isExactMatchB) {
+        return -1; // Prioritize exact symbol match for A
+      } else if (!isExactMatchA && isExactMatchB) {
+        return 1; // Prioritize exact symbol match for B
+      }
 
-    const aNameIndex = aNameLower?.indexOf(normalizedSearchQuery);
-    const bNameIndex = bNameLower?.indexOf(normalizedSearchQuery);
+      const aSymbolIndex = aSymbolLower?.indexOf(normalizedSearchQuery);
+      const bSymbolIndex = bSymbolLower?.indexOf(normalizedSearchQuery);
 
-    // If no exact symbol match, prioritize based on the combined position in name and symbol
-    const positionComparison = aSymbolIndex + aNameIndex - (bSymbolIndex + bNameIndex);
+      const aNameIndex = aNameLower?.indexOf(normalizedSearchQuery);
+      const bNameIndex = bNameLower?.indexOf(normalizedSearchQuery);
 
-    // Additional condition for prioritizing symbols without dots for specific names
-    if (prioritizeWithoutDotsForNames.includes(normalizedSearchQuery)) {
-      const aHasDot = aSymbolLower?.includes(".") || false;
-      const bHasDot = bSymbolLower?.includes(".") || false;
+      // If no exact symbol match, prioritize based on the combined position in name and symbol
+      const positionComparison =
+        aSymbolIndex + aNameIndex - (bSymbolIndex + bNameIndex);
 
-      // Prioritize results without dots for the specified names
-      return aHasDot - bHasDot || positionComparison;
-    }
+      // Additional condition for prioritizing symbols without dots for specific names
+      if (prioritizeWithoutDotsForNames.includes(normalizedSearchQuery)) {
+        const aHasDot = aSymbolLower?.includes(".") || false;
+        const bHasDot = bSymbolLower?.includes(".") || false;
 
-    return positionComparison;
-  });
+        // Prioritize results without dots for the specified names
+        return aHasDot - bHasDot || positionComparison;
+      }
 
-  searchResults = filteredList?.slice(0, 5);
-  showSuggestions = normalizedSearchQuery !== "";
-}
+      return positionComparison;
+    });
 
-
-
-
-
-
-const onKeyPress = e => {
-  if (e?.charCode === 13) {
-    focusedSuggestion = '';
-
-    if (!notFoundTicker) {
-      searchBarTicker(searchQuery, assetType);
-
-    }
+    searchResults = filteredList?.slice(0, 5);
+    showSuggestions = normalizedSearchQuery !== "";
   }
-};
 
+  const onKeyPress = (e) => {
+    if (e?.charCode === 13) {
+      focusedSuggestion = "";
 
+      if (!notFoundTicker) {
+        searchBarTicker(searchQuery, assetType);
+      }
+    }
+  };
 
+  let focusedSuggestion = null;
 
-
-let focusedSuggestion = null;
-
-function handleKeyDown(event) {
+  function handleKeyDown(event) {
     if (event.key === "ArrowDown" && showSuggestions) {
       // Move down in the suggestions
       event.preventDefault(); // Prevent scrolling
-      const currentIndex = searchResults?.findIndex(item => item?.symbol === searchQuery);
+      const currentIndex = searchResults?.findIndex(
+        (item) => item?.symbol === searchQuery,
+      );
       if (currentIndex < searchResults?.length - 1) {
         searchQuery = searchResults[currentIndex + 1]?.symbol;
         assetType = searchResults[currentIndex + 1]?.type;
@@ -187,133 +173,137 @@ function handleKeyDown(event) {
     } else if (event.key === "ArrowUp" && showSuggestions) {
       // Move up in the suggestions
       event.preventDefault(); // Prevent scrolling
-      const currentIndex = searchResults?.findIndex(item => item?.symbol === searchQuery);
+      const currentIndex = searchResults?.findIndex(
+        (item) => item?.symbol === searchQuery,
+      );
       if (currentIndex > 0) {
         searchQuery = searchResults[currentIndex - 1]?.symbol;
         assetType = searchResults[currentIndex - 1]?.type;
         focusedSuggestion = searchQuery; // Update the focused suggestion
       }
-    }
-
-    else if (event.key === "ArrowDown" && !showSuggestions) {
+    } else if (event.key === "ArrowDown" && !showSuggestions) {
       // Move down in the suggestions
       event.preventDefault(); // Prevent scrolling
-      const currentIndex = popularList?.findIndex(item => item?.symbol === searchQuery);
+      const currentIndex = popularList?.findIndex(
+        (item) => item?.symbol === searchQuery,
+      );
       if (currentIndex < popularList?.length - 1) {
         searchQuery = popularList[currentIndex + 1]?.symbol;
         assetType = popularList[currentIndex + 1]?.type;
         focusedSuggestion = searchQuery; // Update the focused suggestion
       }
-    } 
-    else if (event.key === "ArrowUp" && !showSuggestions) {
+    } else if (event.key === "ArrowUp" && !showSuggestions) {
       // Move up in the suggestions
       event.preventDefault(); // Prevent scrolling
-      const currentIndex = popularList?.findIndex(item => item?.symbol === searchQuery);
+      const currentIndex = popularList?.findIndex(
+        (item) => item?.symbol === searchQuery,
+      );
       if (currentIndex > 0) {
         searchQuery = popularList[currentIndex - 1]?.symbol;
-        assetType =  popularList[currentIndex - 1]?.type;
+        assetType = popularList[currentIndex - 1]?.type;
         focusedSuggestion = searchQuery; // Update the focused suggestion
       }
     }
-
   }
 
-
-
-const handleControlF = async (event) => {
-  
-    if (event.ctrlKey && event.key === 'k') {
+  const handleControlF = async (event) => {
+    if (event.ctrlKey && event.key === "k") {
       // Ctrl+F is pressed, open the modal
-      const keyboardSearch = document.getElementById('searchBarModal');
-      keyboardSearch?.dispatchEvent(new MouseEvent('click'))
-      event.preventDefault()
+      const keyboardSearch = document.getElementById("searchBarModal");
+      keyboardSearch?.dispatchEvent(new MouseEvent("click"));
+      event.preventDefault();
 
       await loadSearchData();
-
-
     }
   };
 
   const handleEscape = (event) => {
-  if (event.key === 'Escape') {
-    // Escape key is pressed, close the modal
-    searchBarModalChecked = false;
-  }
-};
+    if (event.key === "Escape") {
+      // Escape key is pressed, close the modal
+      searchBarModalChecked = false;
+    }
+  };
 
   onMount(() => {
-    window.addEventListener('keydown', handleControlF);
-    window.addEventListener('keydown', handleEscape);
+    window.addEventListener("keydown", handleControlF);
+    window.addEventListener("keydown", handleEscape);
     return () => {
-      window.removeEventListener('keydown', handleControlF);
-      window.removeEventListener('keydown', handleEscape);
+      window.removeEventListener("keydown", handleControlF);
+      window.removeEventListener("keydown", handleEscape);
     };
   });
 
+  let charNumber = 20;
 
+  let popularList = [];
+  const popularSymbols = [
+    "BTCUSD",
+    "ETHUSD",
+    "SOLUSD",
+    "SPY",
+    "ADBE",
+    "DBX",
+    "HOOD",
+    "AMZN",
+    "TSLA",
+    "AMD",
+    "MCD",
+    "NVDA",
+    "PYPL",
+    "AAPL",
+    "BYND",
+    "KO",
+  ];
 
-let charNumber = 20;
+  $: {
+    if ($searchBarData && popularList?.length === 0) {
+      popularList = $searchBarData?.filter(({ symbol }) =>
+        popularSymbols?.includes(symbol),
+      );
 
+      // Fisher-Yates (Knuth) Shuffle Algorithm
+      for (let i = popularList?.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [popularList[i], popularList[j]] = [popularList[j], popularList[i]];
+      }
 
-
-let popularList = [];
-const popularSymbols =  ['BTCUSD','ETHUSD','SOLUSD','SPY','ADBE','DBX','HOOD','AMZN', 'TSLA', 'AMD','MCD','NVDA','PYPL','AAPL','BYND','KO'];
-
-
-$: {
-  if ($searchBarData && popularList?.length === 0) {
-    popularList = $searchBarData?.filter(({ symbol }) =>
-      popularSymbols?.includes(symbol)
-    );
-
-    // Fisher-Yates (Knuth) Shuffle Algorithm
-    for (let i = popularList?.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [popularList[i], popularList[j]] = [popularList[j], popularList[i]];
+      popularList = popularList?.slice(0, 5);
     }
-
-    popularList = popularList?.slice(0, 5);
   }
-}
 
-
-
-$: {
-  if( searchBarModalChecked === true && typeof window !== 'undefined')
-  {
-    if($screenWidth > 640)
-    {
-      inputElement.focus();
+  $: {
+    if (searchBarModalChecked === true && typeof window !== "undefined") {
+      if ($screenWidth > 640) {
+        inputElement.focus();
+      }
+      //Page is not scrollable now
+      document.body.classList.add("overflow-hidden");
     }
-    //Page is not scrollable now
-    document.body.classList.add("overflow-hidden");
   }
-}
 
-$: {
-  if( searchBarModalChecked === false && typeof window !== 'undefined')
-  {
-    showSuggestions = searchQuery = "";
-    document.body.classList?.remove("overflow-hidden");
+  $: {
+    if (searchBarModalChecked === false && typeof window !== "undefined") {
+      showSuggestions = searchQuery = "";
+      document.body.classList?.remove("overflow-hidden");
+    }
   }
-}
 
-$: {
-  if(searchQuery?.length !== 0)
-  {
-    notFoundTicker = false;
+  $: {
+    if (searchQuery?.length !== 0) {
+      notFoundTicker = false;
+    }
   }
-}
-
 </script>
 
-
-
-<label on:mouseover={loadSearchData} on:click={loadSearchData} for="searchBarModal" class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-800 rounded-lg">
-  <Search class="h-[20px] w-[20px]" />  
+<label
+  on:mouseover={loadSearchData}
+  on:click={loadSearchData}
+  for="searchBarModal"
+  class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-lg"
+>
+  <Search class="h-[20px] w-[20px]" />
 </label>
 
-
 <!--
 <div class="ml-5 w-96 grow">
     <div class="relative flex items-center">
@@ -355,7 +345,7 @@ $: {
         {#if !showSuggestions }
           {#each popularList as item}
             <li>
-              <a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer border-b border-gray-600 flex justify-start items-center p-2 text-white  group'} w-full">
+              <a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group' : 'shake-ticker cursor-pointer border-b border-gray-600 flex justify-start items-center p-2 text-white  group'} w-full">
                 <div class="flex flex-row items-center w-full">
                   <div class="flex flex-col ml-2">
                     <span class="text-blue-400">{item?.symbol}</span>
@@ -381,287 +371,381 @@ $: {
 </div>
 -->
 
-
-
 <!--Start Desktop Searchbar-->
 <!--Don't remove if since input.focus does not work anymore-->
 
 {#if $screenWidth >= 640}
-<input type="checkbox" id="searchBarModal" class="modal-toggle" bind:checked={searchBarModalChecked} />
+  <input
+    type="checkbox"
+    id="searchBarModal"
+    class="modal-toggle"
+    bind:checked={searchBarModalChecked}
+  />
 
-<dialog id="searchBarModal" class="modal modal-top z-[999]">
+  <dialog id="searchBarModal" class="modal modal-top z-[999]">
+    <label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
 
-
-  <label for="searchBarModal"  class="cursor-pointer modal-backdrop"></label>
-  
-  
-  
-  <div class="z-[999] modal-box overflow-hidden rounded-xl bg-[#09090B] border border-gray-800 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3 " >
-
-     
+    <div
+      class="z-[999] modal-box overflow-hidden rounded-xl bg-[#09090B] border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3"
+    >
       <!-- Search layout -->
       <div class="mt-5 sm:mt-0">
         <div class="relative">
-            <label for="modal-search" class="sr-only">Search</label>
-            <input 
-            id="modal-search" 
-            class="rounded-lg w-full text-white bg-[#09090B] border border-gray-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4" 
-            type="search" 
-            placeholder="Search Anything…" 
+          <label for="modal-search" class="sr-only">Search</label>
+          <input
+            id="modal-search"
+            class="rounded-lg w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
+            type="search"
+            placeholder="Search Anything…"
             bind:value={searchQuery}
             bind:this={inputElement}
             on:input={search}
             on:keydown={handleKeyDown}
             on:keypress={onKeyPress}
             autocomplete="off"
-            />
-            <button on:click={() => (searchBarTicker(searchQuery, assetType))} class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
-              <svg class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
-                  <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
-              </svg>
-            </button>
-        </div>
-    </div>
-   
-
-    {#if $searchBarData?.length !== 0}
-    <div class="py-4">
-      <!-- Popular searches -->
-      <div class="mb-3 last:mb-0 mt-3">
-        {#if notFoundTicker}
-        <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p>
-        {/if}
-        {#if !showSuggestions}
-        <div class="text-start text-sm font-semibold text-white mb-2">
-          Popular
-        </div>
-        {/if}  
-        <ul class="text-sm" >
-            {#if !showSuggestions }
-              {#each popularList as item}
-                <li class="border-b border-gray-800">
-                  <a data-sveltekit-preload-data={false} href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg flex justify-start items-center p-2 text-white  group'} w-full">
-                    <div class="flex flex-row items-center w-full">
-                      <div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
-                        <img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
-                      </div>
-                      <div class="flex flex-col ml-2">
-                        <span class="text-blue-400">{item?.symbol}</span>
-                        <span class="text-white">{item?.name.length > 150 ? item?.name?.slice(0,150) + "..." : item?.name}</span>
-                      </div>
-
-  
-
-                      <div class="text-white font-medium ml-auto">
-                        {item?.type}
-                      </div>
-                    
-                    </div>
-                     
-
-                  </a>
-                  
-              </li>
-              {/each}
-              
-             
-            {:else if showSuggestions && searchResults?.length > 0}
-            <div class="text-start text-sm font-semibold text-white mb-2">
-              Suggestions
-            </div>
-              {#each searchResults as item}
-                <li class="border-b border-gray-800">
-                  <!-- svelte-ignore a11y-click-events-have-key-events -->
-                  <!-- svelte-ignore a11y-label-has-associated-control -->
-                  <label data-sveltekit-preload-data={false} on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg flex justify-start items-center p-2 text-white group'}">
-                    <div class="flex flex-row items-center w-full">
-
-                      <div class="flex flex-col">
-                        <span class="text-blue-400">{item?.symbol}</span>
-                        <span class="text-white">{item?.name?.length > 150 ? item?.name?.slice(0,150) + "..." : item?.name}</span>
-                      </div>
-                    
-
-                      <div class="text-white font-medium ml-auto">
-                        {item?.type}
-                      </div>
-
-
-                    </div>
-
-                  
-                  </label>
-                </li>
-              {/each}
-            {:else if showSuggestions && searchResults?.length === 0}
-              <li>
-                <label class="flex items-center p-2 text-white hover:text-white hover:bg-[#404040] bg-opacity-[0.25] rounded group" >
-                  <svg class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z" />
-                </svg>
-                <span>No results found</span>
-                </label>
-              </li>
-            {/if}
-          </ul>
-      </div>
-    </div>
-    {:else}
-    <div class="flex justify-center items-center m-auto mt-4 py-20">
-      <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}
-        
-
-  <label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
-    <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-    <span class="text-white text-md font-medium">
-      Return
-    </span>
-  </label>
-  
-  </div>
-</dialog>
-{:else}
-
-<!--End Desktop Searchbar-->
-
-
-<!--Start Drawer Sidewise for mobile-->
-
-
-<div class="drawer drawer-end z-40 overflow-hidden">
-  <input id="searchBarModal" type="checkbox" class="drawer-toggle" bind:checked={searchBarModalChecked} />
- 
-  <div class="drawer-side overflow-hidden">
-    
-  
-    <div class="p-3 bg-[#09090B] min-h-screen w-screen pb-20 overflow-hidden pt-10">
-
-      
-   
-    <!-- Search layout -->
-    <div class="mt-5 lg:mt-0">
-      <div class="relative">
-          <label for="modal-search" class="sr-only">Search</label>
-          <input 
-          id="modal-search" 
-          class="rounded-lg w-full text-white bg-[#09090B] border border-slate-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4" 
-          type="search" 
-          placeholder="Search Anything…" 
-          bind:value={searchQuery}
-          bind:this={inputElement}
-          on:input={search}
-          on:keydown={handleKeyDown}
-          on:keypress={onKeyPress}
-          autocomplete="off"
           />
-          <button on:click={() => (searchBarTicker(searchQuery, assetType))} class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
-            <svg class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">                      <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
-                <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
+          <button
+            on:click={() => searchBarTicker(searchQuery, assetType)}
+            class="absolute inset-0 right-auto group"
+            type="submit"
+            aria-label="Search"
+          >
+            <svg
+              class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+              ><path
+                d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
+              />
+              <path
+                d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
+              />
             </svg>
           </button>
+        </div>
       </div>
-  </div>
- 
 
-  {#if $searchBarData?.length !== 0}
-  <div class="py-4">
-    <!-- Popular searches -->
-    <div class="mb-3 last:mb-0 mt-3">
-      {#if notFoundTicker}
-      <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p>
-      {/if}
-      {#if !showSuggestions}
-      <div class="text-start text-sm font-semibold text-white mb-2">
-        Popular
-      </div>
-      {/if}  
-      <ul class="text-sm" >
-          {#if !showSuggestions }
-            {#each popularList as item}
-              <li class="border-b border-gray-800">
-                <a data-sveltekit-preload-data={false} href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`}  on:click={() => popularTicker(item?.symbol, item?.type) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
-                  <div class="flex flex-row items-center w-full">
-                    <div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
-                      <img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
-                    </div>
-                    <div class="flex flex-col ml-2">
-                      <span class="text-blue-400">{item?.symbol}</span>
-                      <span class="text-white">{item?.name.length > charNumber ? item?.name.slice(0,charNumber) + "..." : item?.name}</span>
-                    </div>
+      {#if $searchBarData?.length !== 0}
+        <div class="py-4">
+          <!-- Popular searches -->
+          <div class="mb-3 last:mb-0 mt-3">
+            {#if notFoundTicker}
+              <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
+                Oh snapp, ticker does not exist in our database
+              </p>
+            {/if}
+            {#if !showSuggestions}
+              <div class="text-start text-sm font-semibold text-white mb-2">
+                Popular
+              </div>
+            {/if}
+            <ul class="text-sm">
+              {#if !showSuggestions}
+                {#each popularList as item}
+                  <li class="border-b border-gray-600">
+                    <a
+                      data-sveltekit-preload-data={false}
+                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                      on:click={() =>
+                        popularTicker(item?.symbol, item?.assetType)}
+                      class="mb-2 {item?.symbol === focusedSuggestion
+                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                        : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white  group'} w-full"
+                    >
+                      <div class="flex flex-row items-center w-full">
+                        <div
+                          class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
+                        >
+                          <img
+                            style="clip-path: circle(50%);"
+                            class="w-6 h-6"
+                            src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
+                            loading="lazy"
+                          />
+                        </div>
+                        <div class="flex flex-col ml-2">
+                          <span class="text-blue-400">{item?.symbol}</span>
+                          <span class="text-white"
+                            >{item?.name.length > 150
+                              ? item?.name?.slice(0, 150) + "..."
+                              : item?.name}</span
+                          >
+                        </div>
 
+                        <div class="text-white font-medium ml-auto">
+                          {item?.type}
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                {/each}
+              {:else if showSuggestions && searchResults?.length > 0}
+                <div class="text-start text-sm font-semibold text-white mb-2">
+                  Suggestions
+                </div>
+                {#each searchResults as item}
+                  <li class="border-b border-gray-600">
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-label-has-associated-control -->
+                    <label
+                      data-sveltekit-preload-data={false}
+                      on:click={() => searchBarTicker(item?.symbol, item?.type)}
+                      class="mb-2 {item?.symbol === focusedSuggestion
+                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                        : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white group'}"
+                    >
+                      <div class="flex flex-row items-center w-full">
+                        <div class="flex flex-col">
+                          <span class="text-blue-400">{item?.symbol}</span>
+                          <span class="text-white"
+                            >{item?.name?.length > 150
+                              ? item?.name?.slice(0, 150) + "..."
+                              : item?.name}</span
+                          >
+                        </div>
 
-                    <div class="text-white font-medium ml-auto mr-2">
-                      {item?.type}
-                    </div>
-
-                  </div>
-
-                </a>
-                
-            </li>
-            {/each}
-            
-           
-          {:else if showSuggestions && searchResults?.length > 0}
-          <div class="text-start text-sm font-semibold text-white mb-2">
-            Suggestions
+                        <div class="text-white font-medium ml-auto">
+                          {item?.type}
+                        </div>
+                      </div>
+                    </label>
+                  </li>
+                {/each}
+              {:else if showSuggestions && searchResults?.length === 0}
+                <li>
+                  <label
+                    class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
+                  >
+                    <svg
+                      class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
+                      />
+                    </svg>
+                    <span>No results found</span>
+                  </label>
+                </li>
+              {/if}
+            </ul>
           </div>
-            {#each searchResults as item}
-              <li class="border-b border-gray-800">
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <!-- svelte-ignore a11y-label-has-associated-control -->
-                <label data-sveltekit-preload-data={false} on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}">
-                  <div class="flex flex-row items-center w-full">
+        </div>
+      {:else}
+        <div class="flex justify-center items-center m-auto mt-4 py-20">
+          <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 class="flex flex-col ml-1">
-                      <span class="text-blue-400">{item?.symbol}</span>
-                      <span class="text-white">{item?.name.length > charNumber ? item?.name.slice(0,charNumber) + "..." : item?.name}</span>
-                    </div>
-                  
+      <label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
+        <svg
+          class="w-6 h-6 inline-block mb-0.5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="#fff"
+            d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
+          /></svg
+        >
+        <span class="text-white text-md font-medium"> Return </span>
+      </label>
+    </div>
+  </dialog>
+{:else}
+  <!--End Desktop Searchbar-->
 
-                    <div class="text-white font-medium ml-auto mr-2">
-                      {item?.type}
-                    </div>
-                    
-                  </div>
-                </label>
-              </li>
-            {/each}
-          {:else if showSuggestions && searchResults?.length === 0}
-            <li>
-              <label class="flex items-center p-2 text-white hover:text-white hover:bg-[#404040] bg-opacity-[0.25] rounded group" >
-                <svg class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z" />
+  <!--Start Drawer Sidewise for mobile-->
+
+  <div class="drawer drawer-end z-40 overflow-hidden">
+    <input
+      id="searchBarModal"
+      type="checkbox"
+      class="drawer-toggle"
+      bind:checked={searchBarModalChecked}
+    />
+
+    <div class="drawer-side overflow-hidden">
+      <div
+        class="p-3 bg-[#09090B] min-h-screen w-screen pb-20 overflow-hidden pt-10"
+      >
+        <!-- Search layout -->
+        <div class="mt-5 lg:mt-0">
+          <div class="relative">
+            <label for="modal-search" class="sr-only">Search</label>
+            <input
+              id="modal-search"
+              class="rounded-lg w-full text-white bg-[#09090B] border border-slate-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
+              type="search"
+              placeholder="Search Anything…"
+              bind:value={searchQuery}
+              bind:this={inputElement}
+              on:input={search}
+              on:keydown={handleKeyDown}
+              on:keypress={onKeyPress}
+              autocomplete="off"
+            />
+            <button
+              on:click={() => searchBarTicker(searchQuery, assetType)}
+              class="absolute inset-0 right-auto group"
+              type="submit"
+              aria-label="Search"
+            >
+              <svg
+                class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400"
+                viewBox="0 0 16 16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
+                />
+                <path
+                  d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
+                />
               </svg>
-              <span>No results found</span>
-              </label>
-            </li>
-          {/if}
-        </ul>
+            </button>
+          </div>
+        </div>
+
+        {#if $searchBarData?.length !== 0}
+          <div class="py-4">
+            <!-- Popular searches -->
+            <div class="mb-3 last:mb-0 mt-3">
+              {#if notFoundTicker}
+                <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
+                  Oh snapp, ticker does not exist in our database
+                </p>
+              {/if}
+              {#if !showSuggestions}
+                <div class="text-start text-sm font-semibold text-white mb-2">
+                  Popular
+                </div>
+              {/if}
+              <ul class="text-sm">
+                {#if !showSuggestions}
+                  {#each popularList as item}
+                    <li class="border-b border-gray-600">
+                      <a
+                        data-sveltekit-preload-data={false}
+                        href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                        on:click={() => popularTicker(item?.symbol, item?.type)}
+                        class="mb-2 {item?.symbol === focusedSuggestion
+                          ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                          : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
+                      >
+                        <div class="flex flex-row items-center w-full">
+                          <div
+                            class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
+                          >
+                            <img
+                              style="clip-path: circle(50%);"
+                              class="w-6 h-6"
+                              src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
+                              loading="lazy"
+                            />
+                          </div>
+                          <div class="flex flex-col ml-2">
+                            <span class="text-blue-400">{item?.symbol}</span>
+                            <span class="text-white"
+                              >{item?.name.length > charNumber
+                                ? item?.name.slice(0, charNumber) + "..."
+                                : item?.name}</span
+                            >
+                          </div>
+
+                          <div class="text-white font-medium ml-auto mr-2">
+                            {item?.type}
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  {/each}
+                {:else if showSuggestions && searchResults?.length > 0}
+                  <div class="text-start text-sm font-semibold text-white mb-2">
+                    Suggestions
+                  </div>
+                  {#each searchResults as item}
+                    <li class="border-b border-gray-600">
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-label-has-associated-control -->
+                      <label
+                        data-sveltekit-preload-data={false}
+                        on:click={() =>
+                          searchBarTicker(item?.symbol, item?.type)}
+                        class="mb-2 {item?.symbol === focusedSuggestion
+                          ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                          : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}"
+                      >
+                        <div class="flex flex-row items-center w-full">
+                          <div class="flex flex-col ml-1">
+                            <span class="text-blue-400">{item?.symbol}</span>
+                            <span class="text-white"
+                              >{item?.name.length > charNumber
+                                ? item?.name.slice(0, charNumber) + "..."
+                                : item?.name}</span
+                            >
+                          </div>
+
+                          <div class="text-white font-medium ml-auto mr-2">
+                            {item?.type}
+                          </div>
+                        </div>
+                      </label>
+                    </li>
+                  {/each}
+                {:else if showSuggestions && searchResults?.length === 0}
+                  <li>
+                    <label
+                      class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
+                    >
+                      <svg
+                        class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
+                        />
+                      </svg>
+                      <span>No results found</span>
+                    </label>
+                  </li>
+                {/if}
+              </ul>
+            </div>
+          </div>
+        {:else}
+          <div class="flex justify-center items-center m-auto mt-4 py-20">
+            <span class="loading loading-lg loading-spinner text-success"
+            ></span>
+          </div>
+        {/if}
+
+        <label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
+          <svg
+            class="w-6 h-6 inline-block mb-0.5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><path
+              fill="#fff"
+              d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
+            /></svg
+          >
+        </label>
+      </div>
     </div>
   </div>
-  {:else}
-  <div class="flex justify-center items-center m-auto mt-4 py-20">
-    <span class="loading loading-lg loading-spinner text-success"></span>
-  </div>
-  {/if}
-      
-
-<label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
-  <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-</label>
-
-</div>
-
-  </div>
-</div>
 {/if}
 
 <!--End Drawer Sidewise for mobile-->
-
diff --git a/src/routes/insider-tracker/+page.svelte b/src/routes/insider-tracker/+page.svelte
index e7ad2c3c..16e22b5a 100644
--- a/src/routes/insider-tracker/+page.svelte
+++ b/src/routes/insider-tracker/+page.svelte
@@ -126,7 +126,7 @@
     // Sort using the generic comparison function
     stockList = [...originalData].sort(compareValues);
   };
-  $: charNumber = $screenWidth < 640 ? 15 : 15;
+  $: charNumber = $screenWidth < 640 ? 20 : 25;
 </script>
 
 <svelte:head>
diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte
index 1ed69bf6..3ab71b41 100644
--- a/src/routes/watchlist/+layout.svelte
+++ b/src/routes/watchlist/+layout.svelte
@@ -150,7 +150,7 @@
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
                   <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -170,7 +170,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Price Alert ⏰
+                  Price Alert
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
@@ -189,7 +189,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Stock Screener 🔎
+                  Stock Screener
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>