ui fix

src/lib/components/Infobox.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="mt-5 bg-primary rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
+  class="sm:mt-5 bg-primary rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
 >
   <svg
     class="h-6 w-6 hidden sm:block"

src/lib/components/Table/TableHeader.svelte

@@ -3,22 +3,6 @@
   export let sortOrders = {};
   export let sortData;
 
-  // Local sort orders specific to this table
-  let localSortOrders = { ...sortOrders };
-
-  // Handle sorting within this table
-  function handleSort(key) {
-    const currentOrder = localSortOrders[key]?.order || null;
-    const newOrder =
-      currentOrder === "asc" ? "desc" : currentOrder === "desc" ? null : "asc";
-    localSortOrders = { ...localSortOrders, [key]: { order: newOrder } };
-
-    // Notify parent with the updated sort state
-    if (sortData) {
-      sortData(key, newOrder);
-    }
-  }
-
   const SortIcon = ({ sortOrder }) => `
     <svg class="flex-shrink-0 w-4 h-4 inline-block ${
       sortOrder === "asc" ? "rotate-180" : sortOrder === "desc" ? "" : "hidden"
@@ -31,14 +15,14 @@
 <tr class="bg-default border-b border-[#27272A]">
   {#each columns as column}
     <th
-      on:click={() => handleSort(column.key)}
+      on:click={() => sortData(column.key)}
       class="cursor-pointer select-none text-white font-semibold text-sm whitespace-nowrap {column.align ===
       'right'
         ? 'text-end'
         : 'text-start'}"
     >
       {column.label}
-      {@html SortIcon({ sortOrder: localSortOrders[column.key]?.order })}
+      {@html SortIcon({ sortOrder: sortOrders[column.key].order })}
     </th>
   {/each}
 </tr>

src/routes/etf/[tickerID]/dividends/+page.svelte

@@ -335,40 +335,34 @@
               </div>
 
               <div
-                class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-md mb-4"
+                class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
               >
                 <table
-                  class="table table-sm table-compact flex justify-start items-center w-full m-auto"
+                  class="table table-sm table-compact bg-table border border-gray-800 flex justify-start items-center w-full m-auto"
                 >
-                  <thead>
+                  <thead class="bg-default">
-                    <tr class="bg-default border-b-slate-600 shadow-md">
+                    <tr class="">
-                      <th
+                      <th class="text-start text-white text-sm font-semibold">
-                        class="text-start bg-default border-b border-[#09090B] text-white text-sm font-semibold"
-                      >
                         Ex-Divid. Date
                       </th>
-                      <th
+                      <th class="text-end text-white text-sm font-semibold">
-                        class="text-end bg-default border-b border-[#09090B] text-white text-sm font-semibold"
-                      >
                         Cash Amount
                       </th>
-                      <th
+                      <th class="text-end text-white text-sm font-semibold">
-                        class="text-end bg-default border-b border-[#09090B] text-white text-sm font-semibold"
-                      >
                         Record Date
                       </th>
-                      <th
+                      <th class="text-end text-white text-sm font-semibold">
-                        class="text-end bg-default border-b border-[#09090B] text-white text-sm font-semibold"
-                      >
                         Pay Date
                       </th>
                     </tr>
                   </thead>
-                  <tbody class="shadow-md">
+                  <tbody class="">
                     {#each rawData?.history as item}
-                      <tr class="text-gray-200 odd:bg-odd">
+                      <tr
+                        class="text-white odd:bg-odd border-b border-gray-800"
+                      >
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium"
                         >
                           {new Date(item?.date)?.toLocaleString("en-US", {
                             month: "short",
@@ -378,12 +372,12 @@
                           })}
                         </td>
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {item?.adjDividend?.toFixed(3)}
                         </td>
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {item?.recordDate?.length !== 0
                             ? new Date(item?.recordDate)?.toLocaleString(
@@ -398,7 +392,7 @@
                             : "n/a"}
                         </td>
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {item?.paymentDate?.length !== 0
                             ? new Date(item?.paymentDate)?.toLocaleString(

src/routes/etf/[tickerID]/holdings/+page.svelte

@@ -101,25 +101,22 @@
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
     >
-      <div class="sm:p-7 w-full m-auto">
+      <div class="mt-5 sm:mt-0 sm:p-7 w-full m-auto">
-        <div class="mb-10">
+        <div class="flex flex-row items-center md:space-x-4 md:border-0">
+          <h1 class=" text-xl sm:text-2xl font-bold">
+            {$etfTicker} Holdings List
+          </h1>
+          <div
+            class="ml-3 sm:mt-1 whitespace-nowrap text-sm sm:text-[1rem] md:ml-0"
+          >
+            <span class="inline">As of </span>{formattedDate}
+          </div>
+        </div>
+        <div class="mt-5 mb-10">
           <Infobox text={htmlOutput} />
         </div>
 
         {#if rawData?.length !== 0}
-          <div class="text-white">
-            <div class="flex flex-row items-center md:space-x-4 md:border-0">
-              <h1 class=" text-xl sm:text-2xl font-semibold">
-                {$etfTicker} Holdings List
-              </h1>
-              <div
-                class="ml-3 sm:mt-1 whitespace-nowrap text-sm sm:text-[1rem] md:ml-0"
-              >
-                <span class="inline">As of </span>{formattedDate}
-              </div>
-            </div>
-          </div>
-
           <Table
             {data}
             {rawData}

src/routes/etf/[tickerID]/insider/+page.svelte

@@ -6,6 +6,7 @@
     etfTicker,
   } from "$lib/store";
   import { getPartyForPoliticians } from "$lib/utils";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
 
@@ -103,6 +104,83 @@
       window.removeEventListener("scroll", handleScroll);
     };
   });
+
+  let columns = [
+    { key: "representative", label: "Person", align: "left" },
+    { key: "party", label: "Party", align: "left" },
+    { key: "transactionDate", label: "Transaction Date", align: "right" },
+    {
+      key: "amount",
+      label: "Amount",
+      align: "right",
+    },
+    { key: "type", label: "Type", align: "right" },
+  ];
+
+  let sortOrders = {
+    representative: { order: "none", type: "string" },
+    party: { order: "none", type: "string" },
+    transactionDate: { order: "none", type: "date" },
+    amount: { order: "none", type: "string" },
+    type: { order: "none", type: "string" },
+  };
+
+  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 = rawData;
+    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") {
+      senateTradingList = [...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
+    senateTradingList = [...originalData].sort(compareValues)?.slice(0, 50);
+  };
 </script>
 
 <svelte:head>
@@ -161,7 +239,7 @@
                 class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
               >
                 <div
-                  class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3"
+                  class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3"
                 >
                   <!--Start Buy/Sell-->
                   <div
@@ -296,35 +374,15 @@
                   class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
                 >
                   <thead>
-                    <tr class="bg-default border-b border-[#27272A]">
+                    <TableHeader {columns} {sortOrders} {sortData} />
-                      <th
-                        class="shadow-md text-start bg-default text-white text-sm font-semibold"
-                      >
-                        Person
-                      </th>
-                      <th
-                        class="shadow-md text-end bg-default text-white text-sm font-semibold"
-                      >
-                        Transaction Date
-                      </th>
-                      <th
-                        class="shadow-md text-end bg-default text-white text-sm font-semibold"
-                      >
-                        Amount
-                      </th>
-                      <th
-                        class="shadow-md text-white font-semibold text-end text-sm"
-                        >Type</th
-                      >
-                    </tr>
                   </thead>
                   <tbody>
                     {#each senateTradingList as item}
                       <tr
-                        class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-default border-b-[#09090B]"
+                        class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b border-gray-800"
                       >
                         <td
-                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
+                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
                         >
                           <div class="flex flex-row items-center">
                             <div
@@ -350,14 +408,19 @@
                                   item?.representative?.replace("_", " "),
                                 )}</a
                               >
-                              <span class="text-gray-300">{item?.party}</span>
                             </div>
                           </div>
                           <!--{item?.firstName} {item?.lastName}-->
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.party}
+                        </td>
+
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {new Date(item?.transactionDate)?.toLocaleString(
                             "en-US",
@@ -371,12 +434,12 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {item?.amount}
                         </td>
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {#if item?.type === "Bought"}
                             <span class="text-[#00FC50]">Bought</span>

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

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import { screenWidth } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import DownloadData from "$lib/components/DownloadData.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+
   export let data;
 
   let rawData = data?.getETFBitcoinList;
@@ -100,25 +101,13 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="border border-gray-600 w-full sm:flex sm:flex-row sm:items-center m-auto text-white bg-default sm:rounded-md h-auto p-5 mb-4"
+    text=" A list of all Bitcoin ETFs available for trading on the US stock market,
-  >
+    offering investors exposure to the cryptocurrency's price."
-    <svg
+  />
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    A list of all Bitcoin ETFs available for trading on the US stock market,
-    offering investors exposure to the cryptocurrency's price.
-  </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"
+    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">

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -27,15 +28,13 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
+    text={`A complete list of the ${countryNavigation[data?.getParams?.toLowerCase()]} companies
-  >
+    that are listed on the US stock market.`}
-    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"
+    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">

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
 
   let rawData = data?.getExchangeCategory;
@@ -23,15 +23,13 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
+    text={`A complete list of the ${exchangeNavigation[data?.getParams?.toLowerCase()]} companies
-  >
+    that are listed on the US stock market.`}
-    A complete list of the {exchangeNavigation[data?.getParams?.toLowerCase()]} companies
+  />
-    that are listed on the US stock market.
-  </div>
 
   <div
-    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    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">

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
   let rawData = data?.getFAANG;
 
@@ -12,27 +12,14 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full border border-gray-600 sm:flex sm:flex-row sm:items-center m-auto text-white bg-default sm:rounded-md h-auto p-5 mb-4"
+    text="The FAANG stocks refer to five major U.S. tech companies: Meta (formerly
-  >
-    <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
-    >
-
-    The "FAANG" stocks refer to five major U.S. tech companies: Meta (formerly
     Facebook), Amazon, Apple, Netflix, and Alphabet (Google). Originally
-    popularized by Jim Cramer as "FANG," the list did not initially include
+    popularized by Jim Cramer as FAANG."
-    Apple.
+  />
-  </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"
+    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">

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -26,14 +27,10 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox text={`${indexNavigation[data?.getParams?.toLowerCase()]}`} />
-    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
-  >
-    {indexNavigation[data?.getParams?.toLowerCase()]}
-  </div>
 
   <div
-    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    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">

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
   let rawData = data?.getMagnificentSeven;
@@ -12,26 +13,14 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full border border-gray-600 sm:flex sm:flex-row sm:items-center m-auto text-white bg-default sm:rounded-md h-auto p-5 mb-4"
+    text="The magnificent seven stocks are 7 technology stocks that drove a large
-  >
-    <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
-    >
-
-    The "magnificent seven" stocks are 7 technology stocks that drove a large
     portion of the market's returns in 2023 and 2024. The list includes Apple,
-    Microsoft, Amazon, Alphabet (Google), Tesla, Nvidia and Meta Platforms.
+    Microsoft, Amazon, Alphabet (Google), Tesla, Nvidia and Meta Platforms."
-  </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"
+    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">

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

@@ -2,6 +2,7 @@
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
   import { page } from "$app/stores";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -109,34 +110,13 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
+    text={`${currentCategoryData?.name} stocks have market capitalizations ranging ${description}
-  >
+    USD.`}
-    {currentCategoryData?.name} stocks have market capitalizations ranging {description}
+  />
-    USD.
-    <!--
-    , while additional categories include
-    {#each otherCategories as category, i}
-      {#if i === otherCategories.length - 1}
-        and
-        <a href={category.link} class="text-blue-400 sm:hover:text-white">
-          {category.name}
-        </a>.
-      {:else if i === otherCategories.length - 2}
-        <a href={category.link} class="text-blue-400 sm:hover:text-white">
-          {category.name}
-        </a>
-      {:else}
-        <a href={category.link} class="text-blue-400 sm:hover:text-white">
-          {category.name}
-        </a>,
-      {/if}
-    {/each}
-    -->
-  </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"
+    class="mt-5 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">

src/routes/list/most-shorted-stocks/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -22,23 +23,11 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text="A list of the stocks with the highest number of shares shorted relative to
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    A list of the stocks with the highest number of shares shorted relative to
     the stock's float. Float is the amount of shares that are considered
-    available for trading.
+    available for trading."
-  </div>
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -22,24 +23,12 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text="A list of stocks that are overbought according to the Relative Strength
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    A list of stocks that are "overbought" according to the Relative Strength
     Index (RSI), which is an indicator often used in technical analysis. An RSI
     of over 70 on a daily chart is generally used to determine that an asset is
-    overbought and indicates that the stock may soon reverse to the downside.
+    overbought and indicates that the stock may soon reverse to the downside."
-  </div>
+  />
 
   <!-- Page wrapper -->
   <Table

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -22,25 +23,13 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text=" A list of stocks that are oversold according to the Relative Strength
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    A list of stocks that are "oversold" according to the Relative Strength
     Index (RSI), which is an indicator often used in technical analysis. An RSI
     of under 30 on a daily chart is generally used to determine that an asset is
     oversold and indicates that the stock may soon bounce back from the oversold
-    conditions.
+    conditions."
-  </div>
+  />
 
   <!-- Page wrapper -->
   <Table

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
 
   const defaultList = [
@@ -12,23 +12,11 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text=" A list of actively traded penny stocks, which are generally defined as
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    A list of actively traded penny stocks, which are generally defined as
     stocks with a price below $5 per share. It is filtered to only show stocks
-    with volume over 10K.
+    with volume over 10K."
-  </div>
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getPennyStocks} {defaultList} />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
 
   let rawData = data?.getSectorCategory;
@@ -17,16 +17,14 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
+    text={`The ${data?.getParams} sector has a total of ${rawData?.length} stocks, with a
-  >
+    combined market cap of ${abbreviateNumber(totalMarketCap)} and a total revenue
-    The {data?.getParams} sector has a total of {rawData?.length} stocks, with a
+    of ${abbreviateNumber(totalRevenue)}.`}
-    combined market cap of {abbreviateNumber(totalMarketCap)} and a total revenue
+  />
-    of {abbreviateNumber(totalRevenue)}.
-  </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"
+    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">