From 7872a01a5f2495a5917da1aa937c578fc81af8db Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 12 Nov 2024 14:59:23 +0100
Subject: [PATCH] refactor stock list page

---
 src/routes/list/+layout.svelte                |  12 +-
 src/routes/list/+page.svelte                  |  20 +-
 .../list/canadian-stocks-us/+page.server.ts   |  25 --
 .../list/canadian-stocks-us/+page.svelte      | 220 --------------
 .../list/chinese-stocks-us/+page.server.ts    |  25 --
 .../list/chinese-stocks-us/+page.svelte       | 220 --------------
 .../list/country/[slug]/+page.server.ts       |  28 ++
 src/routes/list/country/[slug]/+page.svelte   | 271 ++++++++++++++++++
 .../list/german-stocks-us/+page.server.ts     |  25 --
 src/routes/list/german-stocks-us/+page.svelte | 220 --------------
 .../list/indian-stocks-us/+page.server.ts     |  25 --
 src/routes/list/indian-stocks-us/+page.svelte | 220 --------------
 .../list/israeli-stocks-us/+page.server.ts    |  25 --
 .../list/israeli-stocks-us/+page.svelte       | 220 --------------
 .../list/japanese-stocks-us/+page.server.ts   |  25 --
 .../list/japanese-stocks-us/+page.svelte      | 220 --------------
 src/routes/list/uk-stocks-us/+page.server.ts  |  25 --
 src/routes/list/uk-stocks-us/+page.svelte     | 220 --------------
 18 files changed, 315 insertions(+), 1731 deletions(-)
 delete mode 100644 src/routes/list/canadian-stocks-us/+page.server.ts
 delete mode 100644 src/routes/list/canadian-stocks-us/+page.svelte
 delete mode 100644 src/routes/list/chinese-stocks-us/+page.server.ts
 delete mode 100644 src/routes/list/chinese-stocks-us/+page.svelte
 create mode 100644 src/routes/list/country/[slug]/+page.server.ts
 create mode 100644 src/routes/list/country/[slug]/+page.svelte
 delete mode 100644 src/routes/list/german-stocks-us/+page.server.ts
 delete mode 100644 src/routes/list/german-stocks-us/+page.svelte
 delete mode 100644 src/routes/list/indian-stocks-us/+page.server.ts
 delete mode 100644 src/routes/list/indian-stocks-us/+page.svelte
 delete mode 100644 src/routes/list/israeli-stocks-us/+page.server.ts
 delete mode 100644 src/routes/list/israeli-stocks-us/+page.svelte
 delete mode 100644 src/routes/list/japanese-stocks-us/+page.server.ts
 delete mode 100644 src/routes/list/japanese-stocks-us/+page.svelte
 delete mode 100644 src/routes/list/uk-stocks-us/+page.server.ts
 delete mode 100644 src/routes/list/uk-stocks-us/+page.svelte

diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index ffbdb47d..df463c19 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -79,11 +79,11 @@
     },
     {
       title: "German Companies on the US Stock Market",
-      link: "/list/german-stocks-us",
+      link: "/list/country/de",
     },
     {
       title: "Canadian Companies on the US Stock Market",
-      link: "/list/canadian-stocks-us",
+      link: "/list/country/ca",
     },
     {
       title: "Chinese Companies on the US Stock Market",
@@ -91,19 +91,19 @@
     },
     {
       title: "Indian Companies on the US Stock Market",
-      link: "/list/indian-stocks-us",
+      link: "/list/country/in",
     },
     {
       title: "Israeli Companies on the US Stock Market",
-      link: "/list/israeli-stocks-us",
+      link: "/list/country/il",
     },
     {
       title: "UK Companies on the US Stock Market",
-      link: "/list/uk-stocks-us",
+      link: "/list/country/gb",
     },
     {
       title: "Japanese Companies on the US Stock Market",
-      link: "/list/japanese-stocks-us",
+      link: "/list/country/jp",
     },
     {
       title: "Financials Sector Stocks",
diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte
index 480b100a..7e830586 100644
--- a/src/routes/list/+page.svelte
+++ b/src/routes/list/+page.svelte
@@ -208,7 +208,7 @@
       <ul class="list-disc space-y-1 pl-3">
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/canadian-stocks-us"
+            href="/list/country/ca"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Canada
@@ -216,7 +216,7 @@
         </li>
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/chinese-stocks-us"
+            href="/list/country/cn"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             China
@@ -224,7 +224,7 @@
         </li>
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/indian-stocks-us"
+            href="/list/country/in"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             India
@@ -232,7 +232,7 @@
         </li>
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/japanese-stocks-us"
+            href="/list/country/jp"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Japan
@@ -241,7 +241,7 @@
 
         <li class="mb-2 cursor-pointer sm:hidden">
           <a
-            href="/list/german-stocks-us"
+            href="/list/country/de"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Germany
@@ -249,7 +249,7 @@
         </li>
         <li class="mb-2 cursor-pointer sm:hidden">
           <a
-            href="/list/israeli-stocks-us"
+            href="/list/country/il"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Israel
@@ -257,7 +257,7 @@
         </li>
         <li class="mb-2 cursor-pointer sm:hidden">
           <a
-            href="/list/uk-stocks-us"
+            href="/list/country/gb"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             United Kingdom
@@ -270,7 +270,7 @@
       <ul class="list-disc space-y-1 pl-5">
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/german-stocks-us"
+            href="/list/country/de"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Germany
@@ -278,7 +278,7 @@
         </li>
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/israeli-stocks-us"
+            href="/list/country/il"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             Israel
@@ -286,7 +286,7 @@
         </li>
         <li class="mb-2 cursor-pointer">
           <a
-            href="/list/uk-stocks-us"
+            href="/list/country/gb"
             class="sm:hover:text-white text-blue-400 text-lg"
           >
             United Kingdom
diff --git a/src/routes/list/canadian-stocks-us/+page.server.ts b/src/routes/list/canadian-stocks-us/+page.server.ts
deleted file mode 100644
index 7a296dbb..00000000
--- a/src/routes/list/canadian-stocks-us/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getCanadianStocksUS = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = { filterList: "CA" };
-
-    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 {
-    getCanadianStocksUS: await getCanadianStocksUS(),
-  };
-};
diff --git a/src/routes/list/canadian-stocks-us/+page.svelte b/src/routes/list/canadian-stocks-us/+page.svelte
deleted file mode 100644
index 11b84577..00000000
--- a/src/routes/list/canadian-stocks-us/+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?.getCanadianStocksUS;
-  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 complete list of the Canadian companies that are listed on the US stock market.
-  </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/chinese-stocks-us/+page.server.ts b/src/routes/list/chinese-stocks-us/+page.server.ts
deleted file mode 100644
index ea1e8d1e..00000000
--- a/src/routes/list/chinese-stocks-us/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getChineseStocksUS = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = { filterList: "CN" };
-
-    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 {
-    getChineseStocksUS: await getChineseStocksUS(),
-  };
-};
diff --git a/src/routes/list/chinese-stocks-us/+page.svelte b/src/routes/list/chinese-stocks-us/+page.svelte
deleted file mode 100644
index f78772b7..00000000
--- a/src/routes/list/chinese-stocks-us/+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?.getChineseStocksUS;
-  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 complete list of the Chinese companies that are listed on the US stock market.
-  </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.server.ts b/src/routes/list/country/[slug]/+page.server.ts
new file mode 100644
index 00000000..a04a97e3
--- /dev/null
+++ b/src/routes/list/country/[slug]/+page.server.ts
@@ -0,0 +1,28 @@
+export const load = async ({ locals, params }) => {
+  const getParams = async () => {
+    return params.slug;
+  };
+  const getCountryCategory = 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 {
+    getCountryCategory: await getCountryCategory(),
+    getParams: await getParams(),
+  };
+};
diff --git a/src/routes/list/country/[slug]/+page.svelte b/src/routes/list/country/[slug]/+page.svelte
new file mode 100644
index 00000000..23e13715
--- /dev/null
+++ b/src/routes/list/country/[slug]/+page.svelte
@@ -0,0 +1,271 @@
+<script lang="ts">
+  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 = [];
+  const countryNavigation = {
+    ca: "Canadian",
+    de: "German",
+    in: "Indian",
+    il: "Israeli",
+    jp: "Japanese",
+    gb: "UK",
+    cn: "Chinese",
+  };
+  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 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?.getCountryCategory;
+
+    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") {
+      marketCapList = [...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
+    marketCapList = [...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>
+
+<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 {countryNavigation[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?.getCountryCategory}
+      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 marketCapList 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/german-stocks-us/+page.server.ts b/src/routes/list/german-stocks-us/+page.server.ts
deleted file mode 100644
index d4599611..00000000
--- a/src/routes/list/german-stocks-us/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getGermanStocksUS = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = { filterList: "DE" };
-
-    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 {
-    getGermanStocksUS: await getGermanStocksUS(),
-  };
-};
diff --git a/src/routes/list/german-stocks-us/+page.svelte b/src/routes/list/german-stocks-us/+page.svelte
deleted file mode 100644
index bfac03a4..00000000
--- a/src/routes/list/german-stocks-us/+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?.getGermanStocksUS;
-  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 complete list of the German companies that are listed on the US stock market.
-  </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/indian-stocks-us/+page.server.ts b/src/routes/list/indian-stocks-us/+page.server.ts
deleted file mode 100644
index 64614574..00000000
--- a/src/routes/list/indian-stocks-us/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getIndianStocksUS = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = { filterList: "IN" };
-
-    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 {
-    getIndianStocksUS: await getIndianStocksUS(),
-  };
-};
diff --git a/src/routes/list/indian-stocks-us/+page.svelte b/src/routes/list/indian-stocks-us/+page.svelte
deleted file mode 100644
index 3f921c80..00000000
--- a/src/routes/list/indian-stocks-us/+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?.getIndianStocksUS;
-  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 complete list of the Indian companies that are listed on the US stock market.
-  </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/israeli-stocks-us/+page.server.ts b/src/routes/list/israeli-stocks-us/+page.server.ts
deleted file mode 100644
index 522cad21..00000000
--- a/src/routes/list/israeli-stocks-us/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getIsraeliStocksUS = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = { filterList: "IL" };
-
-    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 {
-    getIsraeliStocksUS: await getIsraeliStocksUS(),
-  };
-};
diff --git a/src/routes/list/israeli-stocks-us/+page.svelte b/src/routes/list/israeli-stocks-us/+page.svelte
deleted file mode 100644
index 0359bfb7..00000000
--- a/src/routes/list/israeli-stocks-us/+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?.getIsraeliStocksUS;
-  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 complete list of the Israeli companies that are listed on the US stock market.
-  </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/japanese-stocks-us/+page.server.ts b/src/routes/list/japanese-stocks-us/+page.server.ts
deleted file mode 100644
index e2ba9ac4..00000000
--- a/src/routes/list/japanese-stocks-us/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getJapaneseStocksUS = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = { filterList: "JP" };
-
-    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 {
-    getJapaneseStocksUS: await getJapaneseStocksUS(),
-  };
-};
diff --git a/src/routes/list/japanese-stocks-us/+page.svelte b/src/routes/list/japanese-stocks-us/+page.svelte
deleted file mode 100644
index c4e13ca7..00000000
--- a/src/routes/list/japanese-stocks-us/+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?.getJapaneseStocksUS;
-  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 complete list of the Japanese companies that are listed on the US stock market.
-  </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/uk-stocks-us/+page.server.ts b/src/routes/list/uk-stocks-us/+page.server.ts
deleted file mode 100644
index 34cc2113..00000000
--- a/src/routes/list/uk-stocks-us/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getUKStocksUS = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = { filterList: "GB" };
-
-    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 {
-    getUKStocksUS: await getUKStocksUS(),
-  };
-};
diff --git a/src/routes/list/uk-stocks-us/+page.svelte b/src/routes/list/uk-stocks-us/+page.svelte
deleted file mode 100644
index fa4b5f02..00000000
--- a/src/routes/list/uk-stocks-us/+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?.getUKStocksUS;
-  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 complete list of the UK companies that are listed on the US stock market.
-  </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>