update stock list

src/routes/etf/etf-providers/[slug]/+page.svelte

@@ -176,7 +176,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Listed Funds</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {rawData?.length}
         </div>
@@ -186,7 +186,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Total Assets</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalAssets)}
         </div>
@@ -196,7 +196,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Average Cost</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {avgExpenseRatio?.toFixed(2)}%
         </div>

src/routes/list/+layout.svelte

@@ -222,6 +222,34 @@
       title: "Highest Option Premium",
       link: "/list/highest-option-premium",
     },
+    {
+      title: "Biggest Artificial Intelligence Stocks",
+      link: "/list/ai-stocks",
+    },
+    {
+      title: "Biggest Mobile Game Stocks",
+      link: "/list/mobile-games",
+    },
+    {
+      title: "Biggest Social Media Stocks by Market Cap",
+      link: "/list/social-media-stocks",
+    },
+    {
+      title: "Biggest Clean Energy Stocks",
+      link: "/list/clean-energy",
+    },
+    {
+      title: "Biggest E-Sports Stocks",
+      link: "/list/esports",
+    },
+    {
+      title: "Biggest Car Company Stocks",
+      link: "/list/car-company-stocks",
+    },
+    {
+      title: "Biggest Electric Vehicle Stocks",
+      link: "/list/electric-vehicles",
+    },
   ];
 
   navigation = [...navigationIndustry, ...navigation];
@@ -236,7 +264,7 @@
 </script>
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden pb-40 pt-5 px-4 lg:px-3 mb-20"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>

src/routes/list/+page.svelte

@@ -236,6 +236,96 @@
 
 <!--End Other Lists-->
 
+<div class="text-white">
+  <h2 class="mb-2 text-xl font-bold pt-10">
+    Category of Stocks Ranked by Market Cap
+  </h2>
+  <ul
+    class="list-outside list-disc space-y-1 p-1 pl-6 text-base md:columns-2 md:gap-x-8 md:text-lg"
+  >
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/mobile-games/"
+        >Mobile Games</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/social-media-stocks/">Social Media</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/clean-energy/"
+        >Clean Energy</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/esports/"
+        >E-Sports</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/car-company-stocks/">Car Companies</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/ai-stocks/"
+        >Artificial Intelligence</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/electric-vehicles/">Electric Vehicles</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/online-gambling/"
+        >Online Gambling</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/augmented-reality/">Augmented Reality</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/gaming-stocks/"
+        >Gaming</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/pharmaceutical-stocks/">Pharmaceuticals</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/online-dating/"
+        >Online Dating</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/virtual-reality/"
+        >Virtual Reality</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/sports-betting/"
+        >Sports Betting</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/metaverse/"
+        >Metaverse</a
+      >
+    </li>
+  </ul>
+</div>
+
 <!--Start Non-US Stocks Listed on US Exchanges-->
 <div class="text-white">
   <h2 class="mb-2 text-xl font-bold pt-10">

src/routes/list/ai-stocks/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = {'filterList': 'ai-stocks'}
+    // make the POST request to the endpoint
+    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 {
+    getData: await getData(),
+  };
+};

src/routes/list/ai-stocks/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  export let data;
+  let rawData = data?.getData;
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+</script>
+
+<SEO title="A List of Artificial Intelligence (AI) Stocks" description="" />
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="This is a list of the top stocks that are directly involved with artificial intelligence (AI) and/or have significant exposure to the growth of AI technology."
+  />
+
+  <div
+    class="mt-6 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-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>

src/routes/list/bitcoin-etfs/+page.svelte

@@ -111,9 +111,9 @@
   >
     <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-semibold text-white">Total ETFs</div>
+        <div class="text-[1rem] font-semibold text-white">Total ETFs</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -121,9 +121,9 @@
     </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-semibold text-white">Total Assets</div>
+        <div class="text-[1rem] font-semibold text-white">Total Assets</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalAssets)}
         </div>
@@ -131,9 +131,9 @@
     </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-semibold text-white">Avg. Cost</div>
+        <div class="text-[1rem] font-semibold text-white">Avg. Cost</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {avgExpenseRatio?.toFixed(2)}%
         </div>

src/routes/list/car-company-stocks/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = {'filterList': 'car-company-stocks'}
+    // make the POST request to the endpoint
+    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 {
+    getData: await getData(),
+  };
+};

src/routes/list/car-company-stocks/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  export let data;
+  let rawData = data?.getData || [];
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+</script>
+
+<SEO
+  title="A List of Car Company Stocks, Ranked by Market Cap"
+  description="A list of the biggest car company and automaker stocks, ranked by market capitalization."
+/>
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="This is a list of the biggest car company and automaker stocks, ranked by market capitalization."
+  />
+
+  <div
+    class="mt-6 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-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>

src/routes/list/clean-energy/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = {'filterList': 'clean-energy'}
+    // make the POST request to the endpoint
+    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 {
+    getData: await getData(),
+  };
+};

src/routes/list/clean-energy/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  export let data;
+  let rawData = data?.getData;
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+</script>
+
+<SEO
+  title="A List of Clean Energy Stocks, Ranked by Market Cap"
+  description=""
+/>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="mt-6 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-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>

src/routes/list/country/[slug]/+page.svelte

@@ -38,9 +38,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -48,9 +48,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -58,9 +58,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/electric-vehicles/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = {'filterList': 'electric-vehicles'}
+    // make the POST request to the endpoint
+    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 {
+    getData: await getData(),
+  };
+};

src/routes/list/electric-vehicles/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  export let data;
+  let rawData = data?.getData;
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+</script>
+
+<SEO
+  title="Biggest Electric Vehicle Stocks, Sorted by Market Cap"
+  description=""
+/>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="mt-6 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-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>

src/routes/list/esports/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = {'filterList': 'esports'}
+    // make the POST request to the endpoint
+    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 {
+    getData: await getData(),
+  };
+};

src/routes/list/esports/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  export let data;
+  let rawData = data?.getData;
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+</script>
+
+<SEO title="A List of E-Sports Stocks" description="" />
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="E-Sports stands for Electronic Sports. It is a term for competition in video games, often over the internet but also via in-person events. Below is a list of stocks of companies involved in e-sports."
+  />
+
+  <div
+    class="mt-6 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-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>

src/routes/list/exchange/[slug]/+page.svelte

@@ -40,9 +40,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -50,9 +50,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -60,9 +60,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/faang/+page.svelte

@@ -30,9 +30,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -40,9 +40,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -50,9 +50,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/index/[slug]/+page.svelte

@@ -46,9 +46,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -56,9 +56,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -66,9 +66,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/industry/[slug]/+page.svelte

@@ -30,9 +30,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -40,9 +40,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -50,9 +50,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/magnificent-seven/+page.svelte

@@ -30,9 +30,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -40,9 +40,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -50,9 +50,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/market-cap/[slug]/+page.svelte

@@ -126,9 +126,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -136,9 +136,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -146,9 +146,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/mobile-games/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = {'filterList': 'mobile-games'}
+    // make the POST request to the endpoint
+    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 {
+    getData: await getData(),
+  };
+};

src/routes/list/mobile-games/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  export let data;
+  let rawData = data?.getData;
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+</script>
+
+<SEO title="A List of Mobile Game Stocks" description="" />
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="mt-6 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-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>

src/routes/list/sector/[slug]/+page.svelte

@@ -28,9 +28,9 @@
   >
     <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-semibold text-white">Total Stocks</div>
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -38,9 +38,9 @@
     </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-semibold text-white">Total Market Cap</div>
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -48,9 +48,9 @@
     </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-semibold text-white">Total Revenue</div>
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/social-media-stocks/+page.server.ts

@@ -0,0 +1,24 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = {'filterList': 'social-media-stocks'}
+    // make the POST request to the endpoint
+    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 {
+    getData: await getData(),
+  };
+};

src/routes/list/social-media-stocks/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  export let data;
+  let rawData = data?.getData;
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+</script>
+
+<SEO title="A List of Social Media Company Stocks" description="" />
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="This list includes stocks of companies who own social networks or have a significant percentage of their operations involved with social media."
+  />
+
+  <div
+    class="mt-6 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-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white 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-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>

src/routes/market-flow/+page.svelte

@@ -580,7 +580,7 @@
               >
                 <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-semibold text-white">Date</div>
+                    <div class="text-[1rem] font-semibold text-white">Date</div>
                     <div
                       class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
                     >
@@ -591,7 +591,9 @@
 
                 <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-semibold text-white">Volume</div>
+                    <div class="text-[1rem] font-semibold text-white">
+                      Volume
+                    </div>
                     <div
                       class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
                     >
@@ -605,7 +607,7 @@
                 </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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       Net Call Premium
                     </div>
                     <div
@@ -621,7 +623,7 @@
                 </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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       Net Put Premium
                     </div>
                     <div

src/routes/market-flow/sector-flow/+page.svelte

@@ -634,7 +634,7 @@
               >
                 <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-semibold text-white">Date</div>
+                    <div class="text-[1rem] font-semibold text-white">Date</div>
                     <div
                       class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
                     >
@@ -645,7 +645,9 @@
 
                 <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-semibold text-white">Volume</div>
+                    <div class="text-[1rem] font-semibold text-white">
+                      Volume
+                    </div>
                     <div
                       class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
                     >
@@ -659,7 +661,7 @@
                 </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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       Net Call Premium
                     </div>
                     <div
@@ -675,7 +677,7 @@
                 </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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       Net Put Premium
                     </div>
                     <div

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -316,7 +316,7 @@
             <div class="text-[1rem] font-normal text-white">Total Analysts</div>
 
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+              class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
             >
               {numOfAnalyst}
             </div>
@@ -326,7 +326,7 @@
               Consensus Rating
             </div>
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+              class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
             >
               {consensusRating}
             </div>
@@ -334,7 +334,7 @@
           <div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0">
             <div class="text-[1rem] font-normal text-white">Price Target</div>
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+              class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
             >
               {priceTarget !== null && priceTarget !== undefined
                 ? priceTarget

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte

@@ -113,11 +113,11 @@
               >
                 <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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       FTD Shares
                     </div>
                     <div
-                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
                     >
                       {abbreviateNumber(
                         rawData?.slice(-1)?.at(0)?.failToDeliver,
@@ -128,11 +128,11 @@
                 </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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       FTD / Avg Volume
                     </div>
                     <div
-                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
                     >
                       {relativeFTD > 0.01
                         ? relativeFTD + "%"
@@ -144,7 +144,7 @@
                 </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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       1-Year Change
                     </div>
                     <div

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -460,11 +460,11 @@
               >
                 <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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       Market Cap
                     </div>
                     <div
-                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
                     >
                       {@html abbreviateNumber(
                         data?.getStockQuote?.marketCap,
@@ -476,9 +476,11 @@
                 </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-semibold text-white">Category</div>
+                    <div class="text-[1rem] font-semibold text-white">
+                      Category
+                    </div>
                     <div
-                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
                     >
                       {#if capCategory}
                         <a
@@ -495,7 +497,7 @@
                 </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-semibold text-white">
+                    <div class="text-[1rem] font-semibold text-white">
                       1-Year Change
                     </div>
                     <div