From 0f9ecd33de167ebcdc3aba7893073f5aa083524b Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 12 Nov 2024 17:52:38 +0100
Subject: [PATCH] final step of refactoring list page

---
 src/routes/list/+layout.svelte                |  16 +-
 src/routes/list/+page.svelte                  |  29 +-
 src/routes/list/amex-stocks/+page.server.ts   |  24 --
 src/routes/list/amex-stocks/+page.svelte      | 221 ---------------
 src/routes/list/country/[slug]/+page.svelte   |  46 ++--
 .../list/dow-jones-stocks/+page.server.ts     |  25 --
 src/routes/list/dow-jones-stocks/+page.svelte | 221 ---------------
 .../list/exchange/[slug]/+page.server.ts      |  28 ++
 src/routes/list/exchange/[slug]/+page.svelte  | 258 +++++++++++++++++
 src/routes/list/index/[slug]/+page.server.ts  |  28 ++
 src/routes/list/index/[slug]/+page.svelte     | 260 ++++++++++++++++++
 .../list/nasdaq-100-stocks/+page.server.ts    |  25 --
 .../list/nasdaq-100-stocks/+page.svelte       | 221 ---------------
 src/routes/list/nasdaq-stocks/+page.server.ts |  24 --
 src/routes/list/nasdaq-stocks/+page.svelte    | 221 ---------------
 src/routes/list/nyse-stocks/+page.server.ts   |  24 --
 src/routes/list/nyse-stocks/+page.svelte      | 220 ---------------
 src/routes/list/sp-500-stocks/+page.server.ts |  25 --
 src/routes/list/sp-500-stocks/+page.svelte    | 221 ---------------
 src/routes/list/xetra-stocks/+page.server.ts  |  24 --
 src/routes/list/xetra-stocks/+page.svelte     | 220 ---------------
 21 files changed, 607 insertions(+), 1774 deletions(-)
 delete mode 100644 src/routes/list/amex-stocks/+page.server.ts
 delete mode 100644 src/routes/list/amex-stocks/+page.svelte
 delete mode 100644 src/routes/list/dow-jones-stocks/+page.server.ts
 delete mode 100644 src/routes/list/dow-jones-stocks/+page.svelte
 create mode 100644 src/routes/list/exchange/[slug]/+page.server.ts
 create mode 100644 src/routes/list/exchange/[slug]/+page.svelte
 create mode 100644 src/routes/list/index/[slug]/+page.server.ts
 create mode 100644 src/routes/list/index/[slug]/+page.svelte
 delete mode 100644 src/routes/list/nasdaq-100-stocks/+page.server.ts
 delete mode 100644 src/routes/list/nasdaq-100-stocks/+page.svelte
 delete mode 100644 src/routes/list/nasdaq-stocks/+page.server.ts
 delete mode 100644 src/routes/list/nasdaq-stocks/+page.svelte
 delete mode 100644 src/routes/list/nyse-stocks/+page.server.ts
 delete mode 100644 src/routes/list/nyse-stocks/+page.svelte
 delete mode 100644 src/routes/list/sp-500-stocks/+page.server.ts
 delete mode 100644 src/routes/list/sp-500-stocks/+page.svelte
 delete mode 100644 src/routes/list/xetra-stocks/+page.server.ts
 delete mode 100644 src/routes/list/xetra-stocks/+page.svelte

diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index 3ef1f596..27db6457 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -51,31 +51,27 @@
     },
     {
       title: "All Stocks Listed on the NASDAQ",
-      link: "/list/nasdaq-stocks",
+      link: "/list/exchange/nasdaq",
     },
     {
       title: "All Stocks Listed on the NYSE",
-      link: "/list/nyse-stocks",
-    },
-    {
-      title: "All Stocks Listed on XETRA",
-      link: "/list/xetra-stocks",
+      link: "/list/exchange/nyse",
     },
     {
       title: "All Stocks Listed on AMEX",
-      link: "/list/amex-stocks",
+      link: "/list/exchange/amex",
     },
     {
       title: "Dow Jones Industrial Average Stocks List",
-      link: "/list/dow-jones-stocks",
+      link: "/list/index/dowjones",
     },
     {
       title: "NASDAQ 100 Index Stocks List",
-      link: "/list/nasdaq-100-stocks",
+      link: "/list/index/nasdaq100",
     },
     {
       title: "S&P 500 Index Stocks List",
-      link: "/list/sp-500-stocks",
+      link: "/list/index/sp500",
     },
     {
       title: "German Companies on the US Stock Market",
diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte
index 7e830586..1ab326ec 100644
--- a/src/routes/list/+page.svelte
+++ b/src/routes/list/+page.svelte
@@ -93,29 +93,23 @@
       <ul class="list-disc space-y-1 pl-3">
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/nasdaq-stocks"
+            href="/list/exchange/nasdaq"
             class="sm:hover:text-white text-blue-400 text-lg"
             >Listed on NASDAQ</a
           >
         </li>
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/nyse-stocks"
+            href="/list/exchange/nyse"
             class="sm:hover:text-white text-blue-400 text-lg">Listed on NYSE</a
           >
         </li>
         <li class="mb-2 cursor-pointer sm:hidden">
           <a
-            href="/list/amex-stocks"
+            href="/list/exchange/amex"
             class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
           >
         </li>
-        <li class="mb-2 cursor-pointer sm:hidden">
-          <a
-            href="/list/xetra-stocks"
-            class="sm:hover:text-white text-blue-400 text-lg">Listed on XETRA</a
-          >
-        </li>
       </ul>
     </div>
 
@@ -124,16 +118,11 @@
       <ul class="list-disc space-y-1 pl-5">
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/amex-stocks"
+            href="/list/exchange/amex"
             class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
           >
         </li>
-        <li class="mb-2 cursor-pointer">
-          <a
-            href="/list/xetra-stocks"
-            class="sm:hover:text-white text-blue-400 text-lg">Listed on XETRA</a
-          >
-        </li>
+
         <!-- ...other list items -->
       </ul>
     </div>
@@ -153,7 +142,7 @@
       <ul class="list-disc space-y-1 pl-3">
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/dow-jones-stocks"
+            href="/list/index/dowjones"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Listed on Dow Jones
@@ -161,7 +150,7 @@
         </li>
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/nasdaq-100-stocks"
+            href="/list/index/nasdaq100"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Listed on NASDAQ 100
@@ -169,7 +158,7 @@
         </li>
         <li class="mb-2 cursor-pointer sm:hidden">
           <a
-            href="/list/sp-500-stocks"
+            href="/list/index/sp500"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Listed on S&P 500
@@ -183,7 +172,7 @@
       <ul class="list-disc space-y-1 pl-5">
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/sp-500-stocks"
+            href="/list/index/sp500"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Listed on S&P 500
diff --git a/src/routes/list/amex-stocks/+page.server.ts b/src/routes/list/amex-stocks/+page.server.ts
deleted file mode 100644
index 204ffa83..00000000
--- a/src/routes/list/amex-stocks/+page.server.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const load = async ({ locals }) => {
-  const getAmexStocks = async () => {
-    const { apiURL, apiKey } = locals;
-    const postData = { filterList: "amex" };
-
-    const response = await fetch(apiURL + "/filter-stock-list", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getAmexStocks: await getAmexStocks(),
-  };
-};
diff --git a/src/routes/list/amex-stocks/+page.svelte b/src/routes/list/amex-stocks/+page.svelte
deleted file mode 100644
index de87acdf..00000000
--- a/src/routes/list/amex-stocks/+page.svelte
+++ /dev/null
@@ -1,221 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
-
-  export let data;
-  let rawData = data?.getAmexStocks;
-  let marketCapList = rawData?.slice(0, 50);
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let totalMarketCap = rawData?.reduce(
-    (total, stock) => total + stock?.marketCap,
-    0,
-  );
-  let totalRevenue = rawData?.reduce(
-    (total, stock) => total + stock?.revenue,
-    0,
-  );
-  let totalProfits =
-    rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
-</script>
-
-<section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        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
-    >
-    A list of all the stocks that are currently listed on the AMEX (American Stock
-    Exchange) stock exchange in the United States.
-  </div>
-
-  <div
-    class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white"
-  >
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Stocks
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Market Cap
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalMarketCap, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Revenue
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalRevenue, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Profits
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalProfits, true)}
-      </div>
-    </div>
-  </div>
-
-  <!-- Page wrapper -->
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-    <!-- Content area -->
-    <div class="w-full overflow-x-scroll">
-      <table
-        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-      >
-        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem]">Company</th>
-            <th class="text-white font-semibold text-end text-[1rem]"
-              >Market Cap</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Revenue</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Profits</th
-            >
-            <th class="text-white font-semibold text-[1rem] text-end">Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each marketCapList as item}
-            <!-- row -->
-            <tr
-              on:click={() => goto("/stocks/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-            >
-              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.symbol}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.name?.length > charNumber
-                  ? item?.name?.slice(0, charNumber) + "..."
-                  : item?.name}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-              >
-                {abbreviateNumber(item?.marketCap, true)}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.revenue !== null
-                  ? abbreviateNumber(item?.revenue, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.netIncome !== null
-                  ? abbreviateNumber(item?.netIncome, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                <div class="flex flex-row justify-end items-center">
-                  <div class="flex flex-col">
-                    <span class="text-white font-semibold text-md ml-auto"
-                      >${item.price?.toFixed(2)}</span
-                    >
-                    <div class="flex flex-row mt-0.5 ml-auto">
-                      {#if item.changesPercentage >= 0}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#00FC50"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#00FC50]"
-                          >+{item.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#FF2F1F"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#FF2F1F]"
-                          >{item.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/list/country/[slug]/+page.svelte b/src/routes/list/country/[slug]/+page.svelte
index 23e13715..7a317634 100644
--- a/src/routes/list/country/[slug]/+page.svelte
+++ b/src/routes/list/country/[slug]/+page.svelte
@@ -2,15 +2,24 @@
   import { screenWidth } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
   import { onMount } from "svelte";
-  import { page } from "$app/stores";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import DownloadData from "$lib/components/DownloadData.svelte";
 
   export let data;
 
-  let rawData = [];
-  let marketCapList = [];
+  let rawData = data?.getCountryCategory;
+  let stockList = rawData?.slice(0, 50);
+
+  let totalMarketCap = rawData?.reduce(
+    (total, stock) => total + stock?.marketCap,
+    0,
+  );
+  let totalRevenue = rawData?.reduce(
+    (total, stock) => total + stock?.revenue,
+    0,
+  );
+
   const countryNavigation = {
     ca: "Canadian",
     de: "German",
@@ -23,10 +32,10 @@
   async function handleScroll() {
     const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
     const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
+    if (isBottom && stockList?.length !== rawData?.length) {
+      const nextIndex = stockList?.length;
       const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
+      stockList = [...stockList, ...filteredNewResults];
     }
   }
 
@@ -80,7 +89,7 @@
 
     // Reset to original data when 'none' and stop further sorting
     if (sortOrder === "none") {
-      marketCapList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
+      stockList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
       return;
     }
 
@@ -115,28 +124,9 @@
     };
 
     // Sort using the generic comparison function
-    marketCapList = [...originalData].sort(compareValues)?.slice(0, 50);
+    stockList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
 
-  let totalMarketCap = 0;
-  let totalRevenue = 0;
-
-  $: {
-    if ($page?.url?.pathname) {
-      rawData = data?.getCountryCategory;
-      marketCapList = rawData?.slice(0, 50);
-
-      totalMarketCap = rawData?.reduce(
-        (total, stock) => total + stock?.marketCap,
-        0,
-      );
-      totalRevenue = rawData?.reduce(
-        (total, stock) => total + stock?.revenue,
-        0,
-      );
-    }
-  }
-
   $: charNumber = $screenWidth < 640 ? 15 : 20;
 </script>
 
@@ -203,7 +193,7 @@
             <TableHeader {columns} {sortOrders} {sortData} />
           </thead>
           <tbody>
-            {#each marketCapList as item, index}
+            {#each stockList as item, index}
               <!-- row -->
               <tr
                 class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
diff --git a/src/routes/list/dow-jones-stocks/+page.server.ts b/src/routes/list/dow-jones-stocks/+page.server.ts
deleted file mode 100644
index ddaad3ab..00000000
--- a/src/routes/list/dow-jones-stocks/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getDowJonesConstituentStocks = async () => {
-    const { apiKey, apiURL } = locals;
-
-    const postData = { filterList: "dowjonesConstituent" };
-
-    const response = await fetch(apiURL + "/exchange-constituents", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getDowJonesConstituentStocks: await getDowJonesConstituentStocks(),
-  };
-};
diff --git a/src/routes/list/dow-jones-stocks/+page.svelte b/src/routes/list/dow-jones-stocks/+page.svelte
deleted file mode 100644
index e140e9d4..00000000
--- a/src/routes/list/dow-jones-stocks/+page.svelte
+++ /dev/null
@@ -1,221 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
-
-  export let data;
-  let rawData = data?.getDowJonesConstituentStocks;
-  let marketCapList = rawData?.slice(0, 50);
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let totalMarketCap = rawData?.reduce(
-    (total, stock) => total + stock?.marketCap,
-    0,
-  );
-  let totalRevenue = rawData?.reduce(
-    (total, stock) => total + stock?.revenue,
-    0,
-  );
-  let totalProfits =
-    rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
-</script>
-
-<section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        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
-    >
-    A list of the 30 stocks in the Dow Jones Industrial Average stock index, which
-    is an index of 30 major companies listed on stock exchanges in the U.S.
-  </div>
-
-  <div
-    class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white"
-  >
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Stocks
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Market Cap
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalMarketCap, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Revenue
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalRevenue, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Profits
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalProfits, true)}
-      </div>
-    </div>
-  </div>
-
-  <!-- Page wrapper -->
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-    <!-- Content area -->
-    <div class="w-full overflow-x-scroll">
-      <table
-        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-      >
-        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem]">Company</th>
-            <th class="text-white font-semibold text-end text-[1rem]"
-              >Market Cap</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Revenue</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Profits</th
-            >
-            <th class="text-white font-semibold text-[1rem] text-end">Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each marketCapList as item}
-            <!-- row -->
-            <tr
-              on:click={() => goto("/stocks/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-            >
-              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.symbol}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.name?.length > charNumber
-                  ? item?.name?.slice(0, charNumber) + "..."
-                  : item?.name}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-              >
-                {abbreviateNumber(item?.marketCap, true)}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.revenue !== null
-                  ? abbreviateNumber(item?.revenue, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.netIncome !== null
-                  ? abbreviateNumber(item?.netIncome, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                <div class="flex flex-row justify-end items-center">
-                  <div class="flex flex-col">
-                    <span class="text-white font-semibold text-md ml-auto"
-                      >${item.price?.toFixed(2)}</span
-                    >
-                    <div class="flex flex-row mt-0.5 ml-auto">
-                      {#if item.changesPercentage >= 0}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#00FC50"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#00FC50]"
-                          >+{item.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#FF2F1F"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#FF2F1F]"
-                          >{item.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/list/exchange/[slug]/+page.server.ts b/src/routes/list/exchange/[slug]/+page.server.ts
new file mode 100644
index 00000000..9af55313
--- /dev/null
+++ b/src/routes/list/exchange/[slug]/+page.server.ts
@@ -0,0 +1,28 @@
+export const load = async ({ locals, params }) => {
+  const getParams = async () => {
+    return params.slug;
+  };
+  const getExchangeCategory = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: params.slug };
+
+    const response = await fetch(apiURL + "/list-category", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getExchangeCategory: await getExchangeCategory(),
+    getParams: await getParams(),
+  };
+};
diff --git a/src/routes/list/exchange/[slug]/+page.svelte b/src/routes/list/exchange/[slug]/+page.svelte
new file mode 100644
index 00000000..8ca05f27
--- /dev/null
+++ b/src/routes/list/exchange/[slug]/+page.svelte
@@ -0,0 +1,258 @@
+<script lang="ts">
+  import { screenWidth } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
+  import { onMount } from "svelte";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import DownloadData from "$lib/components/DownloadData.svelte";
+
+  export let data;
+
+  let rawData = data?.getExchangeCategory;
+  let stockList = rawData?.slice(0, 50);
+
+  let totalMarketCap = rawData?.reduce(
+    (total, stock) => total + stock?.marketCap,
+    0,
+  );
+  let totalRevenue = rawData?.reduce(
+    (total, stock) => total + stock?.revenue,
+    0,
+  );
+
+  const exchangeNavigation = {
+    amex: "AMEX (American Stock Exchange)",
+    nyse: "NYSE (New York Stock Exchange)",
+    nasdaq: "NASDAQ",
+  };
+
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && stockList?.length !== rawData?.length) {
+      const nextIndex = stockList?.length;
+      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+      stockList = [...stockList, ...filteredNewResults];
+    }
+  }
+
+  onMount(async () => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  });
+
+  let columns = [
+    { key: "rank", label: "Rank", align: "left" },
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "marketCap", label: "Market Cap", align: "right" },
+
+    { key: "price", label: "Price", align: "right" },
+    { key: "changesPercentage", label: "% Change", align: "right" },
+
+    { key: "revenue", label: "Revenue", align: "right" },
+  ];
+
+  let sortOrders = {
+    rank: { order: "none", type: "number" },
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    price: { order: "none", type: "number" },
+    changesPercentage: { order: "none", type: "number" },
+
+    marketCap: { order: "none", type: "number" },
+    revenue: { order: "none", type: "number" },
+  };
+
+  const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+
+    let originalData = data?.getExchangeCategory;
+
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      stockList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    stockList = [...originalData].sort(compareValues)?.slice(0, 50);
+  };
+
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
+  >
+    A complete list of the {exchangeNavigation[data?.getParams?.toLowerCase()]} companies
+    that are listed on the US stock market.
+  </div>
+
+  <div
+    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+  >
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {new Intl.NumberFormat("en")?.format(rawData?.length)}
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalMarketCap)}
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-row items-end justify-end w-fit ml-auto mt-5 mb-2">
+    <DownloadData
+      {data}
+      rawData={data?.getExchangeCategory}
+      title={data?.getParams}
+    />
+  </div>
+
+  <!-- Page wrapper -->
+  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+    <!-- Content area -->
+    <div class="w-full overflow-x-scroll">
+      <div class="w-full overflow-x-scroll">
+        <table
+          class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
+        >
+          <thead>
+            <TableHeader {columns} {sortOrders} {sortData} />
+          </thead>
+          <tbody>
+            {#each stockList as item, index}
+              <!-- row -->
+              <tr
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+              >
+                <td
+                  class="text-white text-center font-medium text-sm sm:text-[1rem] border-b-[#09090B]"
+                >
+                  {item?.rank}
+                </td>
+
+                <td
+                  class="text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                >
+                  <HoverStockChart symbol={item?.symbol} />
+                </td>
+
+                <td
+                  class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                >
+                  {item?.name?.length > charNumber
+                    ? item?.name?.slice(0, charNumber) + "..."
+                    : item?.name}
+                </td>
+
+                <td
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                >
+                  {abbreviateNumber(item?.marketCap)}
+                </td>
+
+                <td
+                  class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                >
+                  {item.price?.toFixed(2)}
+                </td>
+
+                <td
+                  class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                >
+                  {#if item?.changesPercentage >= 0}
+                    <span class="text-[#00FC50]"
+                      >+{item?.changesPercentage?.toFixed(2)}%</span
+                    >
+                  {:else}
+                    <span class="text-[#FF2F1F]"
+                      >{item?.changesPercentage?.toFixed(2)}%</span
+                    >
+                  {/if}
+                </td>
+
+                <td
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                >
+                  {item?.revenue !== null
+                    ? abbreviateNumber(item?.revenue)
+                    : "-"}
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/list/index/[slug]/+page.server.ts b/src/routes/list/index/[slug]/+page.server.ts
new file mode 100644
index 00000000..683f593b
--- /dev/null
+++ b/src/routes/list/index/[slug]/+page.server.ts
@@ -0,0 +1,28 @@
+export const load = async ({ locals, params }) => {
+  const getParams = async () => {
+    return params.slug;
+  };
+  const getIndexCategory = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: params.slug };
+
+    const response = await fetch(apiURL + "/list-category", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getIndexCategory: await getIndexCategory(),
+    getParams: await getParams(),
+  };
+};
diff --git a/src/routes/list/index/[slug]/+page.svelte b/src/routes/list/index/[slug]/+page.svelte
new file mode 100644
index 00000000..08cfedc7
--- /dev/null
+++ b/src/routes/list/index/[slug]/+page.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+  import { screenWidth } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
+  import { onMount } from "svelte";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import DownloadData from "$lib/components/DownloadData.svelte";
+
+  export let data;
+
+  let rawData = data?.getIndexCategory;
+  let stockList = rawData?.slice(0, 50);
+
+  let totalMarketCap = rawData?.reduce(
+    (total, stock) => total + stock?.marketCap,
+    0,
+  );
+  let totalRevenue = rawData?.reduce(
+    (total, stock) => total + stock?.revenue,
+    0,
+  );
+
+  const indexNavigation = {
+    nasdaq100:
+      "A list of all stocks in the NASDAQ 100, an index of the top 100 non-financial companies on the Nasdaq exchange. Although there are 100 companies, there are 101 stock tickers, as Alphabet has two symbols.",
+    dowjones:
+      "A list of the 30 stocks in the Dow Jones Industrial Average stock index, which is an index of 30 major companies listed on stock exchanges in the U.S.",
+    sp500:
+      "A list of all stocks in the S&P 500, an index of the 500 largest U.S.-listed companies. There are over 500 tickers, as some companies have multiple symbols.",
+  };
+
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && stockList?.length !== rawData?.length) {
+      const nextIndex = stockList?.length;
+      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+      stockList = [...stockList, ...filteredNewResults];
+    }
+  }
+
+  onMount(async () => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  });
+
+  let columns = [
+    { key: "rank", label: "Rank", align: "left" },
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "marketCap", label: "Market Cap", align: "right" },
+
+    { key: "price", label: "Price", align: "right" },
+    { key: "changesPercentage", label: "% Change", align: "right" },
+
+    { key: "revenue", label: "Revenue", align: "right" },
+  ];
+
+  let sortOrders = {
+    rank: { order: "none", type: "number" },
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    price: { order: "none", type: "number" },
+    changesPercentage: { order: "none", type: "number" },
+
+    marketCap: { order: "none", type: "number" },
+    revenue: { order: "none", type: "number" },
+  };
+
+  const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+
+    let originalData = data?.getIndexCategory;
+
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      stockList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    stockList = [...originalData].sort(compareValues)?.slice(0, 50);
+  };
+
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
+  >
+    {indexNavigation[data?.getParams?.toLowerCase()]}
+  </div>
+
+  <div
+    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+  >
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {new Intl.NumberFormat("en")?.format(rawData?.length)}
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalMarketCap)}
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-row items-end justify-end w-fit ml-auto mt-5 mb-2">
+    <DownloadData
+      {data}
+      rawData={data?.getIndexCategory}
+      title={data?.getParams}
+    />
+  </div>
+
+  <!-- Page wrapper -->
+  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+    <!-- Content area -->
+    <div class="w-full overflow-x-scroll">
+      <div class="w-full overflow-x-scroll">
+        <table
+          class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
+        >
+          <thead>
+            <TableHeader {columns} {sortOrders} {sortData} />
+          </thead>
+          <tbody>
+            {#each stockList as item, index}
+              <!-- row -->
+              <tr
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+              >
+                <td
+                  class="text-white text-center font-medium text-sm sm:text-[1rem] border-b-[#09090B]"
+                >
+                  {item?.rank}
+                </td>
+
+                <td
+                  class="text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                >
+                  <HoverStockChart symbol={item?.symbol} />
+                </td>
+
+                <td
+                  class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                >
+                  {item?.name?.length > charNumber
+                    ? item?.name?.slice(0, charNumber) + "..."
+                    : item?.name}
+                </td>
+
+                <td
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                >
+                  {abbreviateNumber(item?.marketCap)}
+                </td>
+
+                <td
+                  class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                >
+                  {item.price?.toFixed(2)}
+                </td>
+
+                <td
+                  class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                >
+                  {#if item?.changesPercentage >= 0}
+                    <span class="text-[#00FC50]"
+                      >+{item?.changesPercentage?.toFixed(2)}%</span
+                    >
+                  {:else}
+                    <span class="text-[#FF2F1F]"
+                      >{item?.changesPercentage?.toFixed(2)}%</span
+                    >
+                  {/if}
+                </td>
+
+                <td
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+                >
+                  {item?.revenue !== null
+                    ? abbreviateNumber(item?.revenue)
+                    : "-"}
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/list/nasdaq-100-stocks/+page.server.ts b/src/routes/list/nasdaq-100-stocks/+page.server.ts
deleted file mode 100644
index 3a0a633a..00000000
--- a/src/routes/list/nasdaq-100-stocks/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getNasdaqConstituentsStocks = async () => {
-    const { apiKey, apiURL } = locals;
-
-    const postData = { filterList: "nasdaqConstituent" };
-
-    const response = await fetch(apiURL + "/exchange-constituents", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getNasdaqConstituentsStocks: await getNasdaqConstituentsStocks(),
-  };
-};
diff --git a/src/routes/list/nasdaq-100-stocks/+page.svelte b/src/routes/list/nasdaq-100-stocks/+page.svelte
deleted file mode 100644
index 3d13ed29..00000000
--- a/src/routes/list/nasdaq-100-stocks/+page.svelte
+++ /dev/null
@@ -1,221 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
-
-  export let data;
-  let rawData = data?.getNasdaqConstituentsStocks;
-  let marketCapList = rawData?.slice(0, 50);
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let totalMarketCap = rawData?.reduce(
-    (total, stock) => total + stock?.marketCap,
-    0,
-  );
-  let totalRevenue = rawData?.reduce(
-    (total, stock) => total + stock?.revenue,
-    0,
-  );
-  let totalProfits =
-    rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
-</script>
-
-<section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        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
-    >
-    A list of the NASDAQ 100, an index comprising the top 100 non-financial firms
-    on the Nasdaq exchange in the U.S.
-  </div>
-
-  <div
-    class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white"
-  >
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Stocks
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Market Cap
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalMarketCap, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Revenue
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalRevenue, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Profits
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalProfits, true)}
-      </div>
-    </div>
-  </div>
-
-  <!-- Page wrapper -->
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-    <!-- Content area -->
-    <div class="w-full overflow-x-scroll">
-      <table
-        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-      >
-        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem]">Company</th>
-            <th class="text-white font-semibold text-end text-[1rem]"
-              >Market Cap</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Revenue</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Profits</th
-            >
-            <th class="text-white font-semibold text-[1rem] text-end">Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each marketCapList as item}
-            <!-- row -->
-            <tr
-              on:click={() => goto("/stocks/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-            >
-              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.symbol}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.name?.length > charNumber
-                  ? item?.name?.slice(0, charNumber) + "..."
-                  : item?.name}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-              >
-                {abbreviateNumber(item?.marketCap, true)}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.revenue !== null
-                  ? abbreviateNumber(item?.revenue, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.netIncome !== null
-                  ? abbreviateNumber(item?.netIncome, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                <div class="flex flex-row justify-end items-center">
-                  <div class="flex flex-col">
-                    <span class="text-white font-semibold text-md ml-auto"
-                      >${item.price?.toFixed(2)}</span
-                    >
-                    <div class="flex flex-row mt-0.5 ml-auto">
-                      {#if item.changesPercentage >= 0}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#00FC50"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#00FC50]"
-                          >+{item.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#FF2F1F"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#FF2F1F]"
-                          >{item.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/list/nasdaq-stocks/+page.server.ts b/src/routes/list/nasdaq-stocks/+page.server.ts
deleted file mode 100644
index 6ca6aca4..00000000
--- a/src/routes/list/nasdaq-stocks/+page.server.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const load = async ({ locals }) => {
-  const getNasdaqStocks = async () => {
-    const { apiURL, apiKey } = locals;
-    const postData = { filterList: "nasdaq" };
-
-    const response = await fetch(apiURL + "/filter-stock-list", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getNasdaqStocks: await getNasdaqStocks(),
-  };
-};
diff --git a/src/routes/list/nasdaq-stocks/+page.svelte b/src/routes/list/nasdaq-stocks/+page.svelte
deleted file mode 100644
index 7d9fabd1..00000000
--- a/src/routes/list/nasdaq-stocks/+page.svelte
+++ /dev/null
@@ -1,221 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
-
-  export let data;
-  let rawData = data?.getNasdaqStocks;
-  let marketCapList = rawData?.slice(0, 50);
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let totalMarketCap = rawData?.reduce(
-    (total, stock) => total + stock?.marketCap,
-    0,
-  );
-  let totalRevenue = rawData?.reduce(
-    (total, stock) => total + stock?.revenue,
-    0,
-  );
-  let totalProfits =
-    rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
-</script>
-
-<section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        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
-    >
-    A list of all the stocks that are currently listed on the NASDAQ stock exchange
-    in the United States.
-  </div>
-
-  <div
-    class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white"
-  >
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Stocks
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Market Cap
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalMarketCap, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Revenue
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalRevenue, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Profits
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalProfits, true)}
-      </div>
-    </div>
-  </div>
-
-  <!-- Page wrapper -->
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-    <!-- Content area -->
-    <div class="w-full overflow-x-scroll">
-      <table
-        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-      >
-        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem]">Company</th>
-            <th class="text-white font-semibold text-end text-[1rem]"
-              >Market Cap</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Revenue</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Profits</th
-            >
-            <th class="text-white font-semibold text-[1rem] text-end">Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each marketCapList as item}
-            <!-- row -->
-            <tr
-              on:click={() => goto("/stocks/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-            >
-              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.symbol}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.name?.length > charNumber
-                  ? item?.name?.slice(0, charNumber) + "..."
-                  : item?.name}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-              >
-                {abbreviateNumber(item?.marketCap, true)}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.revenue !== null
-                  ? abbreviateNumber(item?.revenue, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.netIncome !== null
-                  ? abbreviateNumber(item?.netIncome, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                <div class="flex flex-row justify-end items-center">
-                  <div class="flex flex-col">
-                    <span class="text-white font-semibold text-md ml-auto"
-                      >${item.price?.toFixed(2)}</span
-                    >
-                    <div class="flex flex-row mt-0.5 ml-auto">
-                      {#if item.changesPercentage >= 0}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#00FC50"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#00FC50]"
-                          >+{item.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#FF2F1F"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#FF2F1F]"
-                          >{item.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/list/nyse-stocks/+page.server.ts b/src/routes/list/nyse-stocks/+page.server.ts
deleted file mode 100644
index 9a69d3df..00000000
--- a/src/routes/list/nyse-stocks/+page.server.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const load = async ({ locals }) => {
-  const getNyseStocks = async () => {
-    const { apiURL, apiKey } = locals;
-    const postData = { filterList: "nyse" };
-
-    const response = await fetch(apiURL + "/filter-stock-list", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getNyseStocks: await getNyseStocks(),
-  };
-};
diff --git a/src/routes/list/nyse-stocks/+page.svelte b/src/routes/list/nyse-stocks/+page.svelte
deleted file mode 100644
index a37286b8..00000000
--- a/src/routes/list/nyse-stocks/+page.svelte
+++ /dev/null
@@ -1,220 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
-
-  export let data;
-  let rawData = data?.getNyseStocks;
-  let marketCapList = rawData?.slice(0, 50);
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let totalMarketCap = rawData?.reduce(
-    (total, stock) => total + stock?.marketCap,
-    0,
-  );
-  let totalRevenue = rawData?.reduce(
-    (total, stock) => total + stock?.revenue,
-    0,
-  );
-  let totalProfits =
-    rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
-</script>
-
-<section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        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
-    >
-    All of the stocks listed on the NYSE (New York Stock Exchange) in the US.
-  </div>
-
-  <div
-    class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white"
-  >
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Stocks
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Market Cap
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalMarketCap, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Revenue
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalRevenue, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Profits
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalProfits, true)}
-      </div>
-    </div>
-  </div>
-
-  <!-- Page wrapper -->
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-    <!-- Content area -->
-    <div class="w-full overflow-x-scroll">
-      <table
-        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-      >
-        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem]">Company</th>
-            <th class="text-white font-semibold text-end text-[1rem]"
-              >Market Cap</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Revenue</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Profits</th
-            >
-            <th class="text-white font-semibold text-[1rem] text-end">Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each marketCapList as item}
-            <!-- row -->
-            <tr
-              on:click={() => goto("/stocks/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-            >
-              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.symbol}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.name?.length > charNumber
-                  ? item?.name?.slice(0, charNumber) + "..."
-                  : item?.name}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-              >
-                {abbreviateNumber(item?.marketCap, true)}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.revenue !== null
-                  ? abbreviateNumber(item?.revenue, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.netIncome !== null
-                  ? abbreviateNumber(item?.netIncome, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                <div class="flex flex-row justify-end items-center">
-                  <div class="flex flex-col">
-                    <span class="text-white font-semibold text-md ml-auto"
-                      >${item.price?.toFixed(2)}</span
-                    >
-                    <div class="flex flex-row mt-0.5 ml-auto">
-                      {#if item.changesPercentage >= 0}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#00FC50"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#00FC50]"
-                          >+{item.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#FF2F1F"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#FF2F1F]"
-                          >{item.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/list/sp-500-stocks/+page.server.ts b/src/routes/list/sp-500-stocks/+page.server.ts
deleted file mode 100644
index ca3d8a86..00000000
--- a/src/routes/list/sp-500-stocks/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getSPConstituentsStocks = async () => {
-    const { apiKey, apiURL } = locals;
-
-    const postData = { filterList: "sp500Constituent" };
-
-    const response = await fetch(apiURL + "/exchange-constituents", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getSPConstituentsStocks: await getSPConstituentsStocks(),
-  };
-};
diff --git a/src/routes/list/sp-500-stocks/+page.svelte b/src/routes/list/sp-500-stocks/+page.svelte
deleted file mode 100644
index a3f55d5e..00000000
--- a/src/routes/list/sp-500-stocks/+page.svelte
+++ /dev/null
@@ -1,221 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
-
-  export let data;
-  let rawData = data?.getSPConstituentsStocks;
-  let marketCapList = rawData?.slice(0, 50);
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let totalMarketCap = rawData?.reduce(
-    (total, stock) => total + stock?.marketCap,
-    0,
-  );
-  let totalRevenue = rawData?.reduce(
-    (total, stock) => total + stock?.revenue,
-    0,
-  );
-  let totalProfits =
-    rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
-</script>
-
-<section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        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
-    >
-    A list of all the stocks in the S&P 500 stock index, which is an index of the
-    top 500 biggest companies listed on stock exchanges in the United States.
-  </div>
-
-  <div
-    class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white"
-  >
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Stocks
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Market Cap
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalMarketCap, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Revenue
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalRevenue, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Profits
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalProfits, true)}
-      </div>
-    </div>
-  </div>
-
-  <!-- Page wrapper -->
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-    <!-- Content area -->
-    <div class="w-full overflow-x-scroll">
-      <table
-        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-      >
-        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem]">Company</th>
-            <th class="text-white font-semibold text-end text-[1rem]"
-              >Market Cap</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Revenue</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Profits</th
-            >
-            <th class="text-white font-semibold text-[1rem] text-end">Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each marketCapList as item}
-            <!-- row -->
-            <tr
-              on:click={() => goto("/stocks/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-            >
-              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.symbol}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.name?.length > charNumber
-                  ? item?.name?.slice(0, charNumber) + "..."
-                  : item?.name}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-              >
-                {abbreviateNumber(item?.marketCap, true)}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.revenue !== null
-                  ? abbreviateNumber(item?.revenue, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.netIncome !== null
-                  ? abbreviateNumber(item?.netIncome, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                <div class="flex flex-row justify-end items-center">
-                  <div class="flex flex-col">
-                    <span class="text-white font-semibold text-md ml-auto"
-                      >${item.price?.toFixed(2)}</span
-                    >
-                    <div class="flex flex-row mt-0.5 ml-auto">
-                      {#if item.changesPercentage >= 0}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#00FC50"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#00FC50]"
-                          >+{item.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#FF2F1F"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#FF2F1F]"
-                          >{item.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>
diff --git a/src/routes/list/xetra-stocks/+page.server.ts b/src/routes/list/xetra-stocks/+page.server.ts
deleted file mode 100644
index 58b1fd85..00000000
--- a/src/routes/list/xetra-stocks/+page.server.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const load = async ({ locals }) => {
-  const getXetraStocks = async () => {
-    const { apiURL, apiKey } = locals;
-    const postData = { filterList: "xetra" };
-
-    const response = await fetch(apiURL + "/filter-stock-list", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getXetraStocks: await getXetraStocks(),
-  };
-};
diff --git a/src/routes/list/xetra-stocks/+page.svelte b/src/routes/list/xetra-stocks/+page.svelte
deleted file mode 100644
index c756c2aa..00000000
--- a/src/routes/list/xetra-stocks/+page.svelte
+++ /dev/null
@@ -1,220 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
-
-  export let data;
-  let rawData = data?.getXetraStocks;
-  let marketCapList = rawData?.slice(0, 50);
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && marketCapList?.length !== rawData?.length) {
-      const nextIndex = marketCapList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      marketCapList = [...marketCapList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let totalMarketCap = rawData?.reduce(
-    (total, stock) => total + stock?.marketCap,
-    0,
-  );
-  let totalRevenue = rawData?.reduce(
-    (total, stock) => total + stock?.revenue,
-    0,
-  );
-  let totalProfits =
-    rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
-</script>
-
-<section class="w-full overflow-hidden m-auto">
-  <div
-    class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        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
-    >
-    All of the stocks listed on the XETRA (German Electronic Exchange) in Europe.
-  </div>
-
-  <div
-    class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white"
-  >
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Stocks
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Market Cap
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalMarketCap, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Revenue
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalRevenue, true)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Profits
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {abbreviateNumber(totalProfits, true)}
-      </div>
-    </div>
-  </div>
-
-  <!-- Page wrapper -->
-  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-    <!-- Content area -->
-    <div class="w-full overflow-x-scroll">
-      <table
-        class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-      >
-        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem]">Company</th>
-            <th class="text-white font-semibold text-end text-[1rem]"
-              >Market Cap</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Revenue</th
-            >
-            <th class="text-white font-semibold text-center text-[1rem]"
-              >Profits</th
-            >
-            <th class="text-white font-semibold text-[1rem] text-end">Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each marketCapList as item}
-            <!-- row -->
-            <tr
-              on:click={() => goto("/stocks/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-            >
-              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.symbol}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                {item?.name?.length > charNumber
-                  ? item?.name?.slice(0, charNumber) + "..."
-                  : item?.name}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-              >
-                {abbreviateNumber(item?.marketCap, true)}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.revenue !== null
-                  ? abbreviateNumber(item?.revenue, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"
-              >
-                {item?.netIncome !== null
-                  ? abbreviateNumber(item?.netIncome, true)
-                  : "-"}
-              </td>
-
-              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-              >
-                <div class="flex flex-row justify-end items-center">
-                  <div class="flex flex-col">
-                    <span class="text-white font-semibold text-md ml-auto"
-                      >${item.price?.toFixed(2)}</span
-                    >
-                    <div class="flex flex-row mt-0.5 ml-auto">
-                      {#if item.changesPercentage >= 0}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#00FC50"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#00FC50]"
-                          >+{item.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <svg
-                          class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          ><g id="evaArrowUpFill0"
-                            ><g id="evaArrowUpFill1"
-                              ><path
-                                id="evaArrowUpFill2"
-                                fill="#FF2F1F"
-                                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                              /></g
-                            ></g
-                          ></svg
-                        >
-                        <span class="text-[#FF2F1F]"
-                          >{item.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>